-
-
- {/*
*/}
+
);
-};
-
-
-// import { useTranslation } from "react-i18next";
-// import { useIsOpenedConfigPage } from "@store";
-// import { useWindow } from "@logics/useWindow";
-
-// export const MainPageCover = () => {
-// const { t } = useTranslation();
-// const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-// const { closeConfigPage } = useWindow();
-// if ( currentIsOpenedConfigPage === false) return null;
-
-// const closeSettingsWindow = () => closeConfigPage();
-
-// return (
-//
-//
{t("main_page.cover_message")}
-//
-//
-// );
-// };
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src-ui/app/main_page/MainPage.module.scss b/src-ui/app/main_page/MainPage.module.scss
index 20dbe41c..5ebadd16 100644
--- a/src-ui/app/main_page/MainPage.module.scss
+++ b/src-ui/app/main_page/MainPage.module.scss
@@ -1,3 +1,22 @@
+.page {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ overflow: hidden;
+ transition: transform 0.5s ease;
+}
+
+.show_config.main_page {
+ transform: translateY(-100%);
+}
+
+.show_main.main_page {
+ transform: translateY(0);
+}
+
+
.container {
width: 100%;
height: 100%;
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index d3fee4b6..068838b4 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -1,6 +1,7 @@
import { useMainFunction } from "./useMainFunction";
import { useConfig } from "./useConfig";
import { useMessage } from "./useMessage";
+import { useVolume } from "./useVolume";
export const useReceiveRoutes = () => {
const {
@@ -25,9 +26,10 @@ export const useReceiveRoutes = () => {
updateSpeakerDeviceList,
updateSelectedSpeakerDevice,
-
} = useConfig();
+ const { updateVolumeVariable_Mic } = useVolume();
+
const routes = {
"/controller/callback_enable_translation": updateTranslationStatus,
"/controller/callback_disable_translation": updateTranslationStatus,
@@ -51,6 +53,8 @@ export const useReceiveRoutes = () => {
"/config/choice_speaker_device": updateSelectedSpeakerDevice,
"/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
+ "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
+
"/controller/callback_messagebox_send": updateSentMessageLog,
"/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/logics/useStdoutToPython.js b/src-ui/logics/useStdoutToPython.js
index 03dc39a7..3c852726 100644
--- a/src-ui/logics/useStdoutToPython.js
+++ b/src-ui/logics/useStdoutToPython.js
@@ -1,5 +1,5 @@
import { store } from "@store";
-import { encode } from 'js-base64'
+import { encode } from "js-base64";
export const useStdoutToPython = () => {
const asyncStdoutToPython = async (path, value) => {
diff --git a/src-ui/logics/useVolume.js b/src-ui/logics/useVolume.js
new file mode 100644
index 00000000..eb8d5846
--- /dev/null
+++ b/src-ui/logics/useVolume.js
@@ -0,0 +1,22 @@
+import {
+ useMicVolume,
+} from "@store";
+
+import { useStdoutToPython } from "./useStdoutToPython";
+
+
+export const useVolume = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { updateMicVolume } = useMicVolume();
+
+ // const asyncPending = () => new Promise(() => {});
+ return {
+ volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
+ volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
+ updateVolumeVariable_Mic: (payload) => {
+ updateMicVolume(payload.data);
+ }
+
+
+ };
+};
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
index 553d2e75..0bafb5d0 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -124,6 +124,9 @@ export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevi
export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
+export const { atomInstance: Atom_MicVolume, useHook: useMicVolume } = createAsyncAtomWithHook(0, "MicVolume");
+export const { atomInstance: Atom_SpeakerVolume, useHook: useSpeakerVolume } = createAsyncAtomWithHook(0, "SpeakerVolume");
+
export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
before: "",
after: "",
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 2/2] =?UTF-8?q?[Update/WIP]=20Config=20Page:=20Device=20Ta?=
=?UTF-8?q?b.=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} */}
+
+