Merge branch 'ui_overlay' into for_webui

locales/en.json

@@ -60,16 +60,20 @@
     },
     "overlay_settings": {
         "restore_default_settings": "Restore Default Settings",
-        "opacity": "Opacity",
+        "enable": "Enable",
-        "ui_scaling": "UI Scaling",
+        "position": "Position",
+        "rotation": "Rotation",
         "x_position": "X-axis (left-right)",
         "y_position": "Y-axis (up-down)",
         "z_position": "Z-axis (front-back)",
         "x_rotation": "X-axis rotation",
         "y_rotation": "Y-axis rotation",
         "z_rotation": "Z-axis rotation",
+        "opacity": "Opacity",
+        "ui_scaling": "UI Scaling",
         "display_duration": "Display duration",
-        "fadeout_duration": "Fadeout duration"
+        "fadeout_duration": "Fadeout duration",
+        "tracker": "Tracker"
     },
     "config_page": {
         "config_title": "Settings",

src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx

@@ -1,170 +1,160 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { clsx } from "clsx";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
 import {
+    RadioButtonContainer,
     SwitchBoxContainer,
 } from "../_templates/Templates";
 import {
     useIsEnabledOverlaySmallLog,
-    useOverlaySettings,
     useOverlaySmallLogSettings,
+    useIsEnabledOverlayLargeLog,
+    useOverlayLargeLogSettings,
 } from "@logics_configs";
 
 export const Vr = () => {
     const { t } = useTranslation();
-    const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
+    const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
-    const toggleController = () => {
+    const toggleIsOpenedSmallSettings = () => {
-        setIsOpenedPositionController(!is_opened_position_controller);
+        setIsOpenedSmallSettings(!is_opened_small_settings);
     };
 
     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 [timeout_id, setTimeoutId] = useState(null);
-
-    const onchangeFunction = (key, value) => {
-        setSettings((prev) => {
-            const new_data = { ...prev, [key]: value };
-            return new_data;
-        });
-
-        if (timeout_id) {
-            clearTimeout(timeout_id);
-        }
-
-        const newTimeoutId = setTimeout(() => {
-            let new_data = settings;
-            new_data[key] = value;
-            setOverlaySmallLogSettings(new_data);
-        }, 50);
-
-        setTimeoutId(newTimeoutId);
-    };
-
-    const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
-        [styles.is_selected]: is_opened_position_controller,
-    });
-    const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
-        [styles.is_selected]: !is_opened_position_controller,
-    });
-
-    return (
-        <div className={styles.container}>
-            <EnableOverlaySmallLogContainer />
-            <CommonControls />
-            <div className={styles.controller_type_switch} onClick={toggleController}>
-                <div className={toggle_button_class_names__position}>
-                    <p className={styles.controller_switcher_label}>Position</p>
-                </div>
-                <div className={toggle_button_class_names__rotation}>
-                    <p className={styles.controller_switcher_label}>Rotation</p>
-                </div>
-            </div>
-            <div className={styles.position_rotation_controls_box}>
-                {is_opened_position_controller
-                    ? <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
-                    : <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
-                }
-            </div>
-            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
-        </div>
-    );
-};
-
-const EnableOverlaySmallLogContainer = () => {
-    const { t } = useTranslation();
     const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
 
+    const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
+    const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
     return (
-        <SwitchBoxContainer
+        <div className={styles.container}>
-            label={t("config_page.enable_overlay_small_log.label")}
+            <div className={styles.wrapper}>
-            variable={currentIsEnabledOverlaySmallLog}
+                <PageSwitcherContainer
-            toggleFunction={toggleIsEnabledOverlaySmallLog}
+                    toggleFunction={toggleIsOpenedSmallSettings}
-        />
+                    is_selected={is_opened_small_settings}
-    );
+                    label_1="Small"
-};
+                    label_2="Large"
-
+                    />
-const CommonControls = () => {
+                {is_opened_small_settings ? (
-    const { t } = useTranslation();
+                    <OverlaySettingsContainer
-    const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
+                    id="overlay_settings_small"
-
+                    current_overlay_settings={currentOverlaySmallLogSettings.data}
-    const [settings, setSettings] = useState({
+                    set_overlay_settings={setOverlaySmallLogSettings}
-        opacity: 1,
+                    current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
-        ui_scaling: 1,
+                    toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
-    });
+                    />
-
+                ) : (
-    const [timeout_id, setTimeoutId] = useState(null);
+                    <OverlaySettingsContainer
-
+                    id="overlay_settings_large"
-    const onchangeFunction = (key, value) => {
+                    current_overlay_settings={currentOverlayLargeLogSettings.data}
-        setSettings((prev) => {
+                    set_overlay_settings={setOverlayLargeLogSettings}
-            const new_data = { ...prev, [key]: value };
+                    current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
-            return new_data;
+                    toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
-        });
+                    />
-
+                )}
-        if (timeout_id) {
-            clearTimeout(timeout_id);
-        }
-
-        const newTimeoutId = setTimeout(() => {
-            let new_data = settings;
-            new_data[key] = value;
-            setOverlaySettings(settings);
-        }, 50);
-
-        setTimeoutId(newTimeoutId);
-    };
-
-    const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
-    const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
-
-    return (
-        <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.common_controls_slider, styles.opacity_slider)}
-                    variable={settings.opacity * 100}
-                    valueLabelFormat={`${ui_variable_opacity}%`}
-                    step={5}
-                    min={10}
-                    max={100}
-                    onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
-                />
-            </div>
-            <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.common_controls_slider, styles.ui_scaling_slider)}
-                    variable={settings.ui_scaling * 100}
-                    valueLabelFormat={`${ui_variable_ui_scaling}%`}
-                    step={10}
-                    min={40}
-                    max={200}
-                    onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
-                />
             </div>
         </div>
     );
 };
 
+const OverlaySettingsContainer = ({
+    current_overlay_settings,
+    set_overlay_settings,
+    current_is_enabled_overlay,
+    toggle_is_enabled_overlay,
+    id
+}) => {
+
+    const { t } = useTranslation();
+    useEffect(() => {
+        setSettings(current_overlay_settings);
+    }, [current_overlay_settings]);
+
+    const [settings, setSettings] = useState(current_overlay_settings);
+    const [timeout_id, setTimeoutId] = useState(null);
+
+    const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
+    const togglePositionRotationController = () => {
+        setIsOpenedPositionController(!is_opened_position_controller);
+    };
+
+    const onchangeFunction = (key, value) => {
+        setSettings((prev) => ({ ...prev, [key]: value }));
+
+        if (timeout_id) clearTimeout(timeout_id);
+
+        const newTimeoutId = setTimeout(() => {
+            const new_data = { ...settings, [key]: value };
+            set_overlay_settings(new_data);
+        }, 50);
+
+        setTimeoutId(newTimeoutId);
+    };
+
+    const selectTrackerFunction = (value) => {
+        const new_data = { ...settings, tracker: value };
+        set_overlay_settings(new_data);
+    };
 
 
+    return (
+        <>
+            <SwitchBoxContainer
+                label={t("overlay_settings.enable")}
+                variable={current_is_enabled_overlay}
+                toggleFunction={toggle_is_enabled_overlay}
+            />
+            <PageSwitcherContainer
+                toggleFunction={togglePositionRotationController}
+                is_selected={is_opened_position_controller}
+                label_1={t("overlay_settings.position")}
+                label_2={t("overlay_settings.rotation")}
+            />
+
+            <div className={styles.position_rotation_controls_box}>
+                {is_opened_position_controller ? (
+                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
+                ) : (
+                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
+                )}
+            </div>
+            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
+            <RadioButtonContainer
+                label={t("overlay_settings.tracker")}
+                selectFunction={selectTrackerFunction}
+                name={id}
+                options={[
+                    { id: "HMD", label: "HMD" },
+                    { id: "LeftHand", label: "LeftHand" },
+                    { id: "RightHand", label: "RightHand" },
+                ]}
+                checked_variable={{data: settings.tracker}}
+                column={true}
+            />
+        </>
+    );
+};
+
+
+const PageSwitcherContainer = (props) => {
+    const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
+        [styles.is_selected]: props.is_selected,
+    });
+    const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
+        [styles.is_selected]: !props.is_selected,
+    });
+
+    return (
+        <div className={styles.controller_type_switch} onClick={() => props.toggleFunction()}>
+            <div className={toggle_button_class_names__position}>
+                <p className={styles.controller_switcher_label}>{props.label_1}</p>
+            </div>
+            <div className={toggle_button_class_names__rotation}>
+                <p className={styles.controller_switcher_label}>{props.label_2}</p>
+            </div>
+        </div>
+    );
+};
 
 const PositionControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
@@ -258,8 +248,39 @@ const RotationControls = ({settings, onchangeFunction}) => {
 const OtherControls = ({settings, onchangeFunction}) => {
     const { t } = useTranslation();
 
+    const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
+    const ui_variable_ui_scaling = (settings.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>
+                <Slider
+                    className={clsx(styles.other_controls_slider, styles.opacity_slider)}
+                    variable={settings.opacity * 100}
+                    valueLabelFormat={`${ui_variable_opacity}%`}
+                    step={5}
+                    min={10}
+                    max={100}
+                    onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
+                />
+            </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>
+                <Slider
+                    className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
+                    variable={settings.ui_scaling * 100}
+                    valueLabelFormat={`${ui_variable_ui_scaling}%`}
+                    step={10}
+                    min={40}
+                    max={200}
+                    onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
+                />
+            </div>
             <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

src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

@@ -5,14 +5,25 @@
     justify-content: center;
     position: relative;
     padding: 2rem;
+    width: 100%;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 56rem;
+    gap: 2rem;
 }
 
 .controller_type_switch {
-    margin-top: 6rem;
+    margin-top: 2rem;
     display: flex;
     border: 0.1rem solid var(--dark_600_color);
     border-radius: 0.4rem;
-    width: 50%;
+    width: 80%;
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -151,41 +162,6 @@
     height: 100%;
 }
 
-
-
-
-.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: 6rem;
     display: flex;
@@ -193,7 +169,6 @@
     align-items: center;
     gap: 2rem;
     width: 100%;
-    max-width: 56rem;
 }
 
 .other_controls_wrapper {

src-ui/logics/configs/index.js

@@ -41,8 +41,9 @@ export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2Weig
 export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
 
 export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
-export { useOverlaySettings } from "./vr/useOverlaySettings";
 export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
+export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
+export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";

src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js

@@ -0,0 +1,28 @@
+import { useStore_IsEnabledOverlayLargeLog } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useIsEnabledOverlayLargeLog = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentIsEnabledOverlayLargeLog, updateIsEnabledOverlayLargeLog, pendingIsEnabledOverlayLargeLog } = useStore_IsEnabledOverlayLargeLog();
+
+    const getIsEnabledOverlayLargeLog = () => {
+        pendingIsEnabledOverlayLargeLog();
+        asyncStdoutToPython("/get/data/overlay_large_log");
+    };
+
+    const toggleIsEnabledOverlayLargeLog = () => {
+        pendingIsEnabledOverlayLargeLog();
+        if (currentIsEnabledOverlayLargeLog.data) {
+            asyncStdoutToPython("/set/disable/overlay_large_log");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_large_log");
+        }
+    };
+
+    return {
+        currentIsEnabledOverlayLargeLog,
+        getIsEnabledOverlayLargeLog,
+        updateIsEnabledOverlayLargeLog,
+        toggleIsEnabledOverlayLargeLog,
+    };
+};

src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js

@@ -7,7 +7,7 @@ export const useIsEnabledOverlaySmallLog = () => {
 
     const getIsEnabledOverlaySmallLog = () => {
         pendingIsEnabledOverlaySmallLog();
-        asyncStdoutToPython("/get/data/overlay_settings");
+        asyncStdoutToPython("/get/data/overlay_small_log");
     };
 
     const toggleIsEnabledOverlaySmallLog = () => {

src-ui/logics/configs/vr/useOverlayLargeLogSettings.js

@@ -0,0 +1,24 @@
+import { useStore_OverlayLargeLogSettings } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlayLargeLogSettings = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlayLargeLogSettings, updateOverlayLargeLogSettings, pendingOverlayLargeLogSettings } = useStore_OverlayLargeLogSettings();
+
+    const getOverlayLargeLogSettings = () => {
+        // pendingOverlayLargeLogSettings();
+        asyncStdoutToPython("/get/data/overlay_large_log_settings");
+    };
+
+    const setOverlayLargeLogSettings = (overlay_large_log_settings) => {
+        // pendingOverlayLargeLogSettings();
+        asyncStdoutToPython("/set/data/overlay_large_log_settings", overlay_large_log_settings);
+    };
+
+    return {
+        currentOverlayLargeLogSettings,
+        getOverlayLargeLogSettings,
+        updateOverlayLargeLogSettings,
+        setOverlayLargeLogSettings,
+    };
+};

src-ui/logics/configs/vr/useOverlaySettings.js

@@ -1,24 +0,0 @@
-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,
-    };
-};

src-ui/logics/useReceiveRoutes.js

@@ -54,9 +54,10 @@ import {
     useSelectedTranscriptionEngine,
     useSelectedWhisperWeightType,
     useWhisperWeightTypeStatus,
-    useOverlaySettings,
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
+    useIsEnabledOverlayLargeLog,
+    useOverlayLargeLogSettings,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -144,9 +145,10 @@ export const useReceiveRoutes = () => {
         downloadedWhisperWeightType,
     } = useWhisperWeightTypeStatus();
 
-    const { updateOverlaySettings } = useOverlaySettings();
     const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
     const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
+    const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
+    const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
@@ -372,9 +374,6 @@ export const useReceiveRoutes = () => {
         "/run/downloaded_whisper_weight": downloadedWhisperWeightType,
 
         // VR
-        "/get/data/overlay_settings": updateOverlaySettings,
-        "/set/data/overlay_settings": updateOverlaySettings,
-
         "/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
         "/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
         "/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog,
@@ -382,6 +381,13 @@ export const useReceiveRoutes = () => {
         "/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
         "/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
 
+        "/get/data/overlay_large_log": updateIsEnabledOverlayLargeLog,
+        "/set/enable/overlay_large_log": updateIsEnabledOverlayLargeLog,
+        "/set/disable/overlay_large_log": updateIsEnabledOverlayLargeLog,
+
+        "/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
+        "/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,

src-ui/store.js

@@ -207,10 +207,6 @@ export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore
 
 
 // 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,
@@ -220,8 +216,21 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove
     z_rotation: 0.0,
     display_duration: 5,
     fadeout_duration: 2,
+    tracker: "HMD",
 }, "OverlaySmallLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
+export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = 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,
+    tracker: "HMD",
+}, "OverlayLargeLogSettings");
+export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");