From 49bb7d7c5fa2869f4b57562309117a2ac27a64dc Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 9 Sep 2024 20:09:32 +0900 Subject: [PATCH] [Update] Config Page: Device Tab. Add threshold slider functionally. --- .../ThresholdComponent.jsx | 2 +- .../slider_and_meter/SliderAndMeter.jsx | 26 +++++++--- .../threshold_entry/ThresholdEntry.jsx | 48 ++++++++++++++----- src-ui/logics/useConfig.js | 31 ++++++++++++ src-ui/logics/useReceiveRoutes.js | 5 ++ src-ui/store.js | 4 ++ 6 files changed, 96 insertions(+), 20 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx index 09bd00c5..f3c86b1e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx @@ -8,7 +8,7 @@ export const ThresholdComponent = (props) => {
- +
); }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx index c1076294..bf98c313 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx @@ -6,6 +6,7 @@ import { } from "@store"; import { useVolume } from "@logics/useVolume"; +import { useConfig } from "@logics/useConfig"; export const SliderAndMeter = (props) => { return ( @@ -23,13 +24,17 @@ export const SliderAndMeter = (props) => { const ThresholdVolumeMeter_Mic = ({min, max}) => { - const [threshold, setThreshold] = useState(max / 2); - const { currentMicVolume } = useMicVolume(); + const { currentMicThreshold, setMicThreshold } = useConfig(); + const [threshold, setThreshold] = useState(currentMicThreshold); const currentVolumeVariable = Math.min(currentMicVolume.data, max); const volume_width_percentage = (currentVolumeVariable / max) * 100; + const onMOuseUpFunction = () => { + setMicThreshold(threshold); + }; + return ( <> @@ -39,6 +44,7 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => { max={max} value={threshold} onChange={(e) => setThreshold(e.target.value)} + onMouseUp={() => onMOuseUpFunction()} className={styles.threshold_slider} /> @@ -46,23 +52,28 @@ const ThresholdVolumeMeter_Mic = ({min, max}) => { }; -const ThresholdVolumeMeter_Speaker = ({min, max}) => { - const [threshold, setThreshold] = useState(max / 2); - +const ThresholdVolumeMeter_Speaker = ({ min, max }) => { const { currentSpeakerVolume } = useSpeakerVolume(); + const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig(); + const [threshold, setThreshold] = useState(currentSpeakerThreshold); const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max); const volume_width_percentage = (currentVolumeVariable / max) * 100; + const onMouseUpFunction = () => { + setSpeakerThreshold(threshold); + }; + return ( <> - - + setThreshold(e.target.value)} + onMouseUp={() => onMouseUpFunction()} className={styles.threshold_slider} /> @@ -70,6 +81,7 @@ const ThresholdVolumeMeter_Speaker = ({min, max}) => { }; + const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => { return ( diff --git a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx index ca67927e..95d9f825 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx @@ -1,22 +1,46 @@ import { useState, useEffect } from "react"; import styles from "./ThresholdEntry.module.scss"; +import { useConfig } from "@logics/useConfig"; -export const ThresholdEntry = () => { - const [input_value, setInputValue] = useState(); - - const onChangeFunction = (e) => { - setInputValue(e.currentTarget.value); - }; - - +export const ThresholdEntry = (props) => { return (
- + {props.id === "mic_threshold" + ? + : + }
); +}; + +const ThresholdEntry_Mic = () => { + const { currentMicThreshold, setMicThreshold } = useConfig(); + const onChangeFunction = (e) => { + setMicThreshold(e.currentTarget.value); + }; + + return ( + + ); +}; + +const ThresholdEntry_Speaker = () => { + const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig(); + const onChangeFunction = (e) => { + setSpeakerThreshold(e.currentTarget.value); + }; + + return ( + + ); }; \ No newline at end of file diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js index 1557c119..51f2a7a5 100644 --- a/src-ui/logics/useConfig.js +++ b/src-ui/logics/useConfig.js @@ -9,6 +9,8 @@ import { useEnableAutoClearMessageBox, useSendMessageButtonType, + useMicThreshold, + useSpeakerThreshold, } from "@store"; import { useStdoutToPython } from "./useStdoutToPython"; @@ -27,6 +29,8 @@ export const useConfig = () => { const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice(); const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox(); const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType(); + const { currentMicThreshold, updateMicThreshold } = useMicThreshold(); + const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold(); const asyncPending = () => new Promise(() => {}); @@ -37,6 +41,7 @@ export const useConfig = () => { }, updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data), + // Device getMicHostList: () => { updateMicHostList(asyncPending); asyncStdoutToPython("/controller/list_mic_host"); @@ -99,6 +104,32 @@ export const useConfig = () => { updateSelectedMicDevice(payload.data.device); }, + getMicThreshold: () => { + // updateMicThreshold(asyncPending); + asyncStdoutToPython("/config/input_mic_energy_threshold"); + }, + setMicThreshold: (mic_threshold) => { + // updateMicThreshold(asyncPending); + asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold); + }, + currentMicThreshold: currentMicThreshold, + updateMicThreshold: (payload) => { + updateMicThreshold(payload.data); + }, + + getSpeakerThreshold: () => { + // updateSpeakerThreshold(asyncPending); + asyncStdoutToPython("/config/input_speaker_energy_threshold"); + }, + setSpeakerThreshold: (speaker_threshold) => { + // updateSpeakerThreshold(asyncPending); + asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold); + }, + currentSpeakerThreshold: currentSpeakerThreshold, + updateSpeakerThreshold: (payload) => { + updateSpeakerThreshold(payload.data); + }, + // Others diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 18d5ecd5..76ecfd21 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -29,6 +29,8 @@ export const useReceiveRoutes = () => { updateEnableAutoClearMessageBox, updateSendMessageButtonType, + updateMicThreshold, + updateSpeakerThreshold, } = useConfig(); const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume(); @@ -66,6 +68,9 @@ export const useReceiveRoutes = () => { "/config/send_message_button_type": updateSendMessageButtonType, "/controller/callback_set_send_message_button_type": updateSendMessageButtonType, + "/controller/callback_set_mic_energy_threshold": updateMicThreshold, + "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold, + "/controller/callback_messagebox_send": updateSentMessageLog, "/action/transcription_send_mic_message": addSentMessageLog, diff --git a/src-ui/store.js b/src-ui/store.js index 3c57adb4..52b8b47c 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -127,6 +127,10 @@ export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpe export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume"); export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume"); +export const { atomInstance: Atom_MicThreshold, useHook: useMicThreshold } = createAtomWithHook(0, "MicThreshold"); +export const { atomInstance: Atom_SpeakerThreshold, useHook: useSpeakerThreshold } = createAtomWithHook(0, "SpeakerThreshold"); + + export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({ before: "", after: "",