From e0d9c990752d81af3da9a3a080d919b281a7430c Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 8 Sep 2024 13:59:12 +0900 Subject: [PATCH] =?UTF-8?q?[Update/WIP]=20Config=20Page:=20Device=20Tab.?= =?UTF-8?q?=20=E9=9F=B3=E9=87=8F=E3=83=81=E3=82=A7=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=81=8C=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?(Dev)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../slider_and_meter/SliderAndMeter.jsx | 157 ++++++++++++------ .../SliderAndMeter.module.scss | 28 ++-- src-ui/logics/useReceiveRoutes.js | 3 +- src-ui/logics/useVolume.js | 8 + 4 files changed, 136 insertions(+), 60 deletions(-) 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 50a2d61b..c1076294 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 @@ -2,64 +2,123 @@ import { useState } from "react"; import styles from "./SliderAndMeter.module.scss"; import { useMicVolume, + useSpeakerVolume, } from "@store"; import { useVolume } from "@logics/useVolume"; export const SliderAndMeter = (props) => { - const [threshold, setThreshold] = useState(props.max / 2); - const { currentMicVolume, updateMicVolume } = useMicVolume(); - - const updateVolume = () => { - updateMicVolume(Math.random()); - }; - - const { - volumeCheckStart_Mic, - volumeCheckStop_Mic, - } = useVolume(); - - let currentVolumeVariable = null; - let volume_width_percentage = 0; - - if (props.id === "mic_threshold") { - currentVolumeVariable = Math.min(currentMicVolume.data, props.max); - - volume_width_percentage = (currentVolumeVariable / props.max) * 100; - } else if (props.id === "speaker_threshold") { - } - return (
-
- setThreshold(e.target.value)} - className={styles.threshold_slider} - /> -
-
-

dev

- - - -
- Current Volume: {(currentVolumeVariable)} -
-
- Threshold: {threshold} -
+ {props.id === "mic_threshold" + ? + : + }
+
); }; + + +const ThresholdVolumeMeter_Mic = ({min, max}) => { + const [threshold, setThreshold] = useState(max / 2); + + const { currentMicVolume } = useMicVolume(); + + const currentVolumeVariable = Math.min(currentMicVolume.data, max); + const volume_width_percentage = (currentVolumeVariable / max) * 100; + + return ( + <> + + setThreshold(e.target.value)} + className={styles.threshold_slider} + /> + + ); +}; + + +const ThresholdVolumeMeter_Speaker = ({min, max}) => { + const [threshold, setThreshold] = useState(max / 2); + + const { currentSpeakerVolume } = useSpeakerVolume(); + + const currentVolumeVariable = Math.min(currentSpeakerVolume.data, max); + const volume_width_percentage = (currentVolumeVariable / max) * 100; + + return ( + <> + + setThreshold(e.target.value)} + className={styles.threshold_slider} + /> + + ); +}; + + +const VolumeMeter = ({ volume_width_percentage, volume, threshold }) => { + + return ( +
+ ); +}; + + +const DevSection = (props) => { + const { + volumeCheckStart_Mic, + volumeCheckStop_Mic, + volumeCheckStart_Speaker, + volumeCheckStop_Speaker, + } = useVolume(); + + const volumeCheckStart = () => { + if (props.id === "mic_threshold") { + volumeCheckStart_Mic(); + } else if (props.id === "speaker_threshold") { + volumeCheckStart_Speaker(); + } + }; + + const volumeCheckStop = () => { + if (props.id === "mic_threshold") { + volumeCheckStop_Mic(); + } else if (props.id === "speaker_threshold") { + volumeCheckStop_Speaker(); + } + }; + + return ( +
+

dev

+ + +
+ {/* Current Volume: {(currentVolumeVariable)} */} +
+
+ {/* Threshold: {props.threshold} */} +
+
+ ); +}; \ 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.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss index c71db392..68558a76 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.module.scss @@ -54,16 +54,6 @@ } } -.volume_info, .threshold_info { - font-size: 1.2rem; -} - - - - - - - @@ -73,4 +63,22 @@ top: -4rem; display: flex; gap: 2rem +} + + + +.volume_info, .threshold_info { + font-size: 1.2rem; +} + + + +.volume_check_button { + font-size: 1.4rem; + background-color: var(--dark_800_color); + padding: 1rem; + cursor: pointer; + &:hover { + background-color: var(--dark_775_color); + } } \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 068838b4..f624513d 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -28,7 +28,7 @@ export const useReceiveRoutes = () => { updateSelectedSpeakerDevice, } = useConfig(); - const { updateVolumeVariable_Mic } = useVolume(); + const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume(); const routes = { "/controller/callback_enable_translation": updateTranslationStatus, @@ -54,6 +54,7 @@ export const useReceiveRoutes = () => { "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice, "/action/check_mic_threshold_energy": updateVolumeVariable_Mic, + "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker, "/controller/callback_messagebox_send": updateSentMessageLog, diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js index eb8d5846..674a02e1 100644 --- a/src-ui/logics/useVolume.js +++ b/src-ui/logics/useVolume.js @@ -1,5 +1,6 @@ import { useMicVolume, + useSpeakerVolume, } from "@store"; import { useStdoutToPython } from "./useStdoutToPython"; @@ -8,6 +9,7 @@ import { useStdoutToPython } from "./useStdoutToPython"; export const useVolume = () => { const { asyncStdoutToPython } = useStdoutToPython(); const { updateMicVolume } = useMicVolume(); + const { updateSpeakerVolume } = useSpeakerVolume(); // const asyncPending = () => new Promise(() => {}); return { @@ -15,6 +17,12 @@ export const useVolume = () => { volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"), updateVolumeVariable_Mic: (payload) => { updateMicVolume(payload.data); + }, + + volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"), + volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"), + updateVolumeVariable_Speaker: (payload) => { + updateSpeakerVolume(payload.data); }