every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-09 20:09:32 +09:00
parent 1f172c8127
commit 49bb7d7c5f
6 changed files with 96 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

26
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/slider_and_meter/SliderAndMeter.jsx
View File

@@ -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 [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 (
<>
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentSpeakerVolume} threshold={threshold}/>
<input
<VolumeMeter volume_width_percentage={volume_width_percentage} volume={currentVolumeVariable} threshold={threshold} />
<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 (

48
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/threshold_entry/ThresholdEntry.jsx
View File

@@ -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 (
<div className={styles.container}>
<div className={styles.entry_wrapper}>
<input
className={styles.entry_input_area}
onChange={onChangeFunction}
/>
{props.id === "mic_threshold"
? <ThresholdEntry_Mic />
: <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}
/>
);
};

31
src-ui/logics/useConfig.js
View File

@@ -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

5
src-ui/logics/useReceiveRoutes.js
View File

@@ -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,

4
src-ui/store.js
View File

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