From ed24dbd42834de49e32592bcb5cc358017ee2895 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:45:23 +0900
Subject: [PATCH] [Update] Config Page: VR Tab. Connect to the backend and save
 the data.

---
 .../setting_section/setting_box/vr/Vr.jsx     | 167 ++++++++++--------
 .../setting_box/vr/Vr.module.scss             |  39 +++-
 src-ui/logics/configs/index.js                |   3 +
 .../logics/configs/vr/useOverlaySettings.js   |  24 +++
 .../configs/vr/useOverlaySmallLogSettings.js  |  24 +++
 src-ui/logics/useReceiveRoutes.js             |  12 ++
 src-ui/store.js                               |  16 ++
 7 files changed, 209 insertions(+), 76 deletions(-)
 create mode 100644 src-ui/logics/configs/vr/useOverlaySettings.js
 create mode 100644 src-ui/logics/configs/vr/useOverlaySmallLogSettings.js

diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index b4191672..c16ecfe7 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -3,15 +3,43 @@ import { useTranslation } from "react-i18next";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
 import { clsx } from "clsx";
+import {
+    useOverlaySettings,
+    useOverlaySmallLogSettings,
+} from "@logics_configs";
 
 export const Vr = () => {
     const { t } = useTranslation();
     const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
-
     const toggleController = () => {
         setIsOpenedPositionController(!is_opened_position_controller);
     };
 
+    const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
+
+
+    const [settings, setSettings] = useState({
+        x_pos: 0,
+        y_pos: 0,
+        z_pos: 0,
+        x_rotation: 0,
+        y_rotation: 0,
+        z_rotation: 0,
+        display_duration: 5,
+        fadeout_duration: 2,
+    });
+
+    const onchangeFunction = (key, value) => {
+        setSettings((prev) => {
+            const new_data = { ...prev, [key]: value };
+            setOverlaySmallLogSettings(new_data);
+            return new_data;
+        });
+    };
+
+
+
+
     const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
         [styles.is_selected]: is_opened_position_controller
     });
@@ -21,6 +49,7 @@ export const Vr = () => {
 
     return (
         <div className={styles.container}>
+            <CommonControls />
             <div className={styles.controller_type_switch} onClick={toggleController}>
                 <div className={toggle_button_class_names__position}>
                     <p className={styles.controller_switcher_label}>Position</p>
@@ -31,23 +60,17 @@ export const Vr = () => {
             </div>
             <div className={styles.position_rotation_controls_box}>
                 {is_opened_position_controller
-                ? <PositionControls />
-                : <RotationControls />
-            }
+                    ? <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
+                    : <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
+                }
             </div>
-            <OtherControls />
-
+            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
         </div>
     );
 };
 
-const PositionControls = () => {
+const PositionControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
-    const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
-
-    const handlePositionChange = (axis, value) => {
-        setPosition((prev) => ({ ...prev, [axis]: value }));
-    };
 
     return (
         <div className={styles.position_controls}>
@@ -55,22 +78,22 @@ const PositionControls = () => {
                 <label className={clsx(styles.slider_label, styles.x_position_label)}>{t("overlay_settings.x_position")}</label>
                 <Slider
                     className={styles.x_position_slider}
-                    variable={position.x}
-                    step={1}
-                    min={-100}
-                    max={100}
-                    onchangeFunction={(value) => handlePositionChange("x", value)}
+                    variable={settings.x_pos}
+                    step={0.05}
+                    min={-0.5}
+                    max={0.5}
+                    onchangeFunction={(value) => onchangeFunction("x_pos", value)}
                 />
             </div>
             <div className={styles.position_wrapper}>
                 <label className={clsx(styles.slider_label, styles.y_position_label)}>{t("overlay_settings.y_position")}</label>
                 <Slider
                     className={styles.y_position_slider}
-                    variable={position.y}
-                    step={1}
-                    min={-100}
-                    max={100}
-                    onchangeFunction={(value) => handlePositionChange("y", value)}
+                    variable={settings.y_pos}
+                    step={0.05}
+                    min={-0.8}
+                    max={0.8}
+                    onchangeFunction={(value) => onchangeFunction("y_pos", value)}
                     orientation="vertical"
                 />
             </div>
@@ -78,25 +101,20 @@ const PositionControls = () => {
                 <label className={clsx(styles.slider_label, styles.z_position_label)}>{t("overlay_settings.z_position")}</label>
                 <Slider
                     className={styles.z_position_slider}
-                    variable={position.z}
-                    step={1}
-                    min={-100}
-                    max={100}
-                    onchangeFunction={(value) => handlePositionChange("z", value)}
+                    variable={settings.z_pos}
+                    step={0.05}
+                    min={-0.5}
+                    max={1.5}
+                    onchangeFunction={(value) => onchangeFunction("z_pos", value)}
                     orientation="vertical"
                 />
             </div>
         </div>
     );
 };
-const RotationControls = () => {
+
+const RotationControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
-    const [rotation, setRotation] = useState({ rotate_x: 0, rotate_y: 0, rotate_z: 0 });
-
-    const handleRotationChange = (axis, value) => {
-        setRotation((prev) => ({ ...prev, [axis]: value }));
-    };
-
 
     return (
         <div className={styles.rotation_controls}>
@@ -104,12 +122,12 @@ const RotationControls = () => {
                 <label className={clsx(styles.slider_label, styles.x_rotation_label)}>{t("overlay_settings.x_rotation")}</label>
                 <Slider
                     className={styles.x_rotation_slider}
-                    variable={-rotation.rotate_x}
-                    valueLabelFormat={rotation.rotate_x}
-                    step={10}
+                    variable={-settings.x_rotation}
+                    valueLabelFormat={settings.x_rotation}
+                    step={5}
                     min={-180}
                     max={180}
-                    onchangeFunction={(value) => handleRotationChange("rotate_x", -value)}
+                    onchangeFunction={(value) => onchangeFunction("x_rotation", -value)}
                     orientation="vertical"
                 />
             </div>
@@ -117,22 +135,22 @@ const RotationControls = () => {
                 <label className={clsx(styles.slider_label, styles.y_rotation_label)}>{t("overlay_settings.y_rotation")}</label>
                 <Slider
                     className={styles.y_rotation_slider}
-                    variable={rotation.rotate_y}
-                    step={10}
+                    variable={settings.y_rotation}
+                    step={5}
                     min={-180}
                     max={180}
-                    onchangeFunction={(value) => handleRotationChange("rotate_y", value)}
+                    onchangeFunction={(value) => onchangeFunction("y_rotation", value)}
                 />
             </div>
             <div className={styles.rotation_wrapper}>
                 <label className={clsx(styles.slider_label, styles.z_rotation_label)}>{t("overlay_settings.z_rotation")}</label>
                 <Slider
                     className={styles.z_rotation_slider}
-                    variable={rotation.rotate_z}
-                    step={15}
+                    variable={settings.z_rotation}
+                    step={5}
                     min={-180}
                     max={180}
-                    onchangeFunction={(value) => handleRotationChange("rotate_z", value)}
+                    onchangeFunction={(value) => onchangeFunction("z_rotation", value)}
                     orientation="vertical"
                 />
             </div>
@@ -141,39 +159,34 @@ const RotationControls = () => {
 };
 
 
-const OtherControls = () => {
+const CommonControls = () => {
     const { t } = useTranslation();
+    const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
     const [opacity, setOpacity] = useState(1);
-    const [ui_scaling, setUiScaling] = useState(100);
+    const [ui_scaling, setUiScaling] = useState(1);
 
     const handleOpacityChange = (value) => {
         setOpacity(value / 100);
+        const set_data = { opacity: (value / 100), ui_scaling: ui_scaling };
+        setOverlaySettings(set_data);
     };
 
     const handleUiScalingChange = (value) => {
-        setUiScaling(value);
+        setUiScaling(value / 100);
+        const set_data = { opacity: opacity, ui_scaling: (value / 100) };
+        setOverlaySettings(set_data);
     };
 
     const ui_variable_opacity = (opacity * 100).toFixed(0);
-
-    const [display_duration, setDisplayDuration] = useState(5);
-    const [fadeout_duration, setFadeoutDuration] = useState(2);
-
-    const handleDisplayDurationChange = (value) => {
-        setDisplayDuration(value);
-    };
-
-    const handleFadeoutDurationChange = (value) => {
-        setFadeoutDuration(value);
-    };
+    const ui_variable_ui_scaling = (ui_scaling * 100).toFixed(0);
 
 
     return(
-        <div className={styles.other_controls}>
-            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>{t("overlay_settings.opacity")}</label>
+        <div className={styles.common_controls}>
+            <div className={styles.common_controls_wrapper}>
+                <label className={clsx(styles.common_controls_slider_label, styles.opacity_label)}>{t("overlay_settings.opacity")}</label>
                 <Slider
-                    className={clsx(styles.other_controls_slider, styles.opacity_slider)}
+                    className={clsx(styles.common_controls_slider, styles.opacity_slider)}
                     variable={(opacity * 100)}
                     valueLabelFormat={`${ui_variable_opacity}%`}
                     step={5}
@@ -182,40 +195,48 @@ const OtherControls = () => {
                     onchangeFunction={handleOpacityChange}
                 />
             </div>
-            <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>{t("overlay_settings.ui_scaling")}</label>
+            <div className={styles.common_controls_wrapper}>
+                <label className={clsx(styles.common_controls_slider_label, styles.ui_scaling_label)}>{t("overlay_settings.ui_scaling")}</label>
                 <Slider
-                    className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
-                    variable={ui_scaling}
-                    valueLabelFormat={`${ui_scaling}%`}
+                    className={clsx(styles.common_controls_slider, styles.ui_scaling_slider)}
+                    variable={(ui_scaling * 100)}
+                    valueLabelFormat={`${ui_variable_ui_scaling}%`}
                     step={10}
                     min={40}
                     max={200}
                     onchangeFunction={handleUiScalingChange}
                 />
             </div>
+        </div>
+    );
+};
+const OtherControls = ({settings, onchangeFunction}) => {
+    const { t } = useTranslation();
+
+    return(
+        <div className={styles.other_controls}>
             <div className={styles.other_controls_wrapper}>
                 <label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("overlay_settings.display_duration")}</label>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
-                    variable={display_duration}
-                    valueLabelFormat={`${display_duration} second(s)`}
+                    variable={settings.display_duration}
+                    valueLabelFormat={`${settings.display_duration} second(s)`}
                     step={1}
                     min={1}
                     max={60}
-                    onchangeFunction={handleDisplayDurationChange}
+                    onchangeFunction={(value) => onchangeFunction("display_duration", value)}
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
                 <label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("overlay_settings.fadeout_duration")}</label>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
-                    variable={fadeout_duration}
-                    valueLabelFormat={`${fadeout_duration} second(s)`}
+                    variable={settings.fadeout_duration}
+                    valueLabelFormat={`${settings.fadeout_duration} second(s)`}
                     step={1}
                     min={0}
                     max={5}
-                    onchangeFunction={handleFadeoutDurationChange}
+                    onchangeFunction={(value) => onchangeFunction("fadeout_duration", value)}
                 />
             </div>
         </div>
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
index 299b3c2d..7a00c692 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -8,6 +8,7 @@
 }
 
 .controller_type_switch {
+    margin-top: 6rem;
     display: flex;
     border: 0.1rem solid var(--dark_600_color);
     border-radius: 0.4rem;
@@ -35,11 +36,11 @@
 }
 
 .position_rotation_controls_box {
-    margin-top: 14rem;
+    margin-top: 8rem;
     position: relative;
     aspect-ratio: 1 / 1;
     width: 36%;
-    max-width: 40rem;
+    max-width: 36rem;
     transform: translate(-10%);
 }
 
@@ -153,8 +154,40 @@
 
 
 
+.common_controls {
+    padding-top: 4rem;
+    padding-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    width: 100%;
+    max-width: 56rem;
+    border-bottom: 0.1rem solid var(--dark_700_color);
+}
+
+.common_controls_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+}
+.common_controls_slider {
+    margin-left: 18rem;
+}
+
+.common_controls_slider_label {
+    position: absolute;
+    font-size: 1.6rem;
+    width: 100%;
+}
+
+
+
 .other_controls {
-    margin-top: 10rem;
+    margin-top: 6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index 9badb2fd..d5cdffab 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -31,6 +31,9 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useOverlaySettings } from "./vr/useOverlaySettings";
+export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
+
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";
 
diff --git a/src-ui/logics/configs/vr/useOverlaySettings.js b/src-ui/logics/configs/vr/useOverlaySettings.js
new file mode 100644
index 00000000..3394c800
--- /dev/null
+++ b/src-ui/logics/configs/vr/useOverlaySettings.js
@@ -0,0 +1,24 @@
+import { useStore_OverlaySettings } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlaySettings = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlaySettings, updateOverlaySettings, pendingOverlaySettings } = useStore_OverlaySettings();
+
+    const getOverlaySettings = () => {
+        // pendingOverlaySettings();
+        asyncStdoutToPython("/get/data/overlay_settings");
+    };
+
+    const setOverlaySettings = (overlay_settings) => {
+        // pendingOverlaySettings();
+        asyncStdoutToPython("/set/data/overlay_settings", overlay_settings);
+    };
+
+    return {
+        currentOverlaySettings,
+        getOverlaySettings,
+        updateOverlaySettings,
+        setOverlaySettings,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js b/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js
new file mode 100644
index 00000000..03b61393
--- /dev/null
+++ b/src-ui/logics/configs/vr/useOverlaySmallLogSettings.js
@@ -0,0 +1,24 @@
+import { useStore_OverlaySmallLogSettings } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlaySmallLogSettings = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlaySmallLogSettings, updateOverlaySmallLogSettings, pendingOverlaySmallLogSettings } = useStore_OverlaySmallLogSettings();
+
+    const getOverlaySmallLogSettings = () => {
+        // pendingOverlaySmallLogSettings();
+        asyncStdoutToPython("/get/data/overlay_small_log_settings");
+    };
+
+    const setOverlaySmallLogSettings = (overlay_small_log_settings) => {
+        // pendingOverlaySmallLogSettings();
+        asyncStdoutToPython("/set/data/overlay_small_log_settings", overlay_small_log_settings);
+    };
+
+    return {
+        currentOverlaySmallLogSettings,
+        getOverlaySmallLogSettings,
+        updateOverlaySmallLogSettings,
+        setOverlaySmallLogSettings,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index fe75557d..639edfd1 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -45,6 +45,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOverlaySettings,
+    useOverlaySmallLogSettings,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -113,6 +115,9 @@ export const useReceiveRoutes = () => {
     const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { updateSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { updateOverlaySettings } = useOverlaySettings();
+    const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
+
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
 
@@ -311,6 +316,13 @@ export const useReceiveRoutes = () => {
         "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
         "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
 
+        // VR
+        "/get/data/overlay_settings": updateOverlaySettings,
+        "/set/data/overlay_settings": updateOverlaySettings,
+
+        "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
+        "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
diff --git a/src-ui/store.js b/src-ui/store.js
index 2bb95a9d..856a24cb 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -189,6 +189,22 @@ export const { atomInstance: Atom_SpeakerRecordTimeout, useHook: useStore_Speake
 export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_SpeakerPhraseTimeout } = createAtomWithHook(0, "SpeakerPhraseTimeout");
 export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
 
+// VR
+export const { atomInstance: Atom_OverlaySettings, useHook: useStore_OverlaySettings } = createAtomWithHook({
+    opacity: 1.0,
+    ui_scaling: 1.0,
+}, "OverlaySettings");
+export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_OverlaySmallLogSettings } = createAtomWithHook({
+    x_pos: 0.0,
+    y_pos: 0.0,
+    z_pos: 0.0,
+    x_rotation: 0.0,
+    y_rotation: 0.0,
+    z_rotation: 0.0,
+    display_duration: 5,
+    fadeout_duration: 2,
+}, "OverlaySmallLogSettings");
+
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
 export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages");