[Update] Config Page: Device Tab. Add threshold slider functionally.

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -8,7 +8,7 @@ export const ThresholdComponent = (props) => {
         <div className={styles.container}>
             <VolumeCheckButton {...props}/>
             <SliderAndMeter {...props}/>
-            <ThresholdEntry/>
+            <ThresholdEntry {...props}/>
         </div>
     );
 };

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 (
         <>
             <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold}/>
@@ -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 ThresholdVolumeMeter_Speaker = ({ min, max }) => {
-    const [threshold, setThreshold] = useState(max / 2);
-
     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 (
         <>
-            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
+            <VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold} />
-                <input
+            <input
                 type="range"
                 min={min}
                 max={max}
                 value={threshold}
                 onChange={(e) => 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 (

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 = () => {
+export const ThresholdEntry = (props) => {
-    const [input_value, setInputValue] = useState();
-
-    const onChangeFunction = (e) => {
-        setInputValue(e.currentTarget.value);
-    };
-
-
     return (
         <div className={styles.container}>
             <div className={styles.entry_wrapper}>
-                <input
+                {props.id === "mic_threshold"
-                    className={styles.entry_input_area}
+                    ? <ThresholdEntry_Mic />
-                    onChange={onChangeFunction}
+                    : <ThresholdEntry_Speaker />
-                />
+                }
             </div>
         </div>
     );
+};
+
+const ThresholdEntry_Mic = () => {
+    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const onChangeFunction = (e) => {
+        setMicThreshold(e.currentTarget.value);
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={currentMicThreshold}
+        />
+    );
+};
+
+const ThresholdEntry_Speaker = () => {
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const onChangeFunction = (e) => {
+        setSpeakerThreshold(e.currentTarget.value);
+    };
+
+    return (
+        <input
+            className={styles.entry_input_area}
+            onChange={onChangeFunction}
+            value={currentSpeakerThreshold}
+        />
+    );
 };

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

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,

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: "",