From d024062a0505e0698347f5febab57abb0716e96a Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 15 Nov 2024 16:54:23 +0900 Subject: [PATCH] [Update] Config Page: Vr Tab: Add OverlayLargeLogSettings. --- locales/en.json | 7 +- .../setting_section/setting_box/vr/Vr.jsx | 244 +++++++++--------- .../setting_box/vr/Vr.module.scss | 51 +--- src-ui/logics/configs/index.js | 3 +- .../configs/vr/useIsEnabledOverlayLargeLog.js | 28 ++ .../configs/vr/useIsEnabledOverlaySmallLog.js | 2 +- .../configs/vr/useOverlayLargeLogSettings.js | 24 ++ .../logics/configs/vr/useOverlaySettings.js | 24 -- src-ui/logics/useReceiveRoutes.js | 16 +- src-ui/store.js | 15 +- 10 files changed, 217 insertions(+), 197 deletions(-) create mode 100644 src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js create mode 100644 src-ui/logics/configs/vr/useOverlayLargeLogSettings.js delete mode 100644 src-ui/logics/configs/vr/useOverlaySettings.js diff --git a/locales/en.json b/locales/en.json index c25b22f3..45b51634 100644 --- a/locales/en.json +++ b/locales/en.json @@ -60,14 +60,17 @@ }, "overlay_settings": { "restore_default_settings": "Restore Default Settings", - "opacity": "Opacity", - "ui_scaling": "UI Scaling", + "enable": "Enable", + "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" }, 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 e49cd033..66a692ee 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 @@ -1,4 +1,4 @@ -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"; @@ -8,163 +8,132 @@ import { } 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 toggleController = () => { - setIsOpenedPositionController(!is_opened_position_controller); + const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true); + const toggleIsOpenedSmallSettings = () => { + setIsOpenedSmallSettings(!is_opened_small_settings); }; const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings(); + const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); - 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, - }); + const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings(); + const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog(); return (
- - -
-
-

Position

-
-
-

Rotation

-
+
+ + {is_opened_small_settings ? ( + + ) : ( + + )}
-
- {is_opened_position_controller - ? - : - } -
-
); }; -const EnableOverlaySmallLogContainer = () => { +const OverlaySettingsContainer = ({ + current_overlay_settings, + set_overlay_settings, + current_is_enabled_overlay, + toggle_is_enabled_overlay, +}) => { + const { t } = useTranslation(); - const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog(); - - return ( - - ); -}; - -const CommonControls = () => { - const { t } = useTranslation(); - const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings(); - - const [settings, setSettings] = useState({ - opacity: 1, - ui_scaling: 1, - }); + useEffect(() => { + setSettings(current_overlay_settings); + }, [current_overlay_settings]); + const [settings, setSettings] = useState(current_overlay_settings); const [timeout_id, setTimeoutId] = useState(null); - const onchangeFunction = (key, value) => { - setSettings((prev) => { - const new_data = { ...prev, [key]: value }; - return new_data; - }); + const [is_opened_position_controller, setIsOpenedPositionController] = useState(true); + const togglePositionRotationController = () => { + setIsOpenedPositionController(!is_opened_position_controller); + }; - if (timeout_id) { - clearTimeout(timeout_id); - } + const onchangeFunction = (key, value) => { + setSettings((prev) => ({ ...prev, [key]: value })); + + if (timeout_id) clearTimeout(timeout_id); const newTimeoutId = setTimeout(() => { - let new_data = settings; - new_data[key] = value; - setOverlaySettings(settings); + const new_data = { ...settings, [key]: value }; + set_overlay_settings(new_data); }, 50); setTimeoutId(newTimeoutId); }; - const ui_variable_opacity = (settings.opacity * 100).toFixed(0); - const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0); - return ( -
-
- - onchangeFunction("opacity", value / 100)} - /> + <> + + + +
+ {is_opened_position_controller ? ( + + ) : ( + + )}
-
- - onchangeFunction("ui_scaling", value / 100)} - /> -
-
+ + ); }; +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 ( +
props.toggleFunction()}> +
+

{props.label_1}

+
+
+

{props.label_2}

+
+
+ ); +}; const PositionControls = ({settings, onchangeFunction}) => { const { t } = useTranslation(); @@ -258,8 +227,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(
+
+ + onchangeFunction("opacity", value / 100)} + /> +
+
+ + onchangeFunction("ui_scaling", value / 100)} + /> +
{ + 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, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js b/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js index b27280ab..e51a34c3 100644 --- a/src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js +++ b/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 = () => { diff --git a/src-ui/logics/configs/vr/useOverlayLargeLogSettings.js b/src-ui/logics/configs/vr/useOverlayLargeLogSettings.js new file mode 100644 index 00000000..548189e3 --- /dev/null +++ b/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, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/vr/useOverlaySettings.js b/src-ui/logics/configs/vr/useOverlaySettings.js deleted file mode 100644 index 3394c800..00000000 --- a/src-ui/logics/configs/vr/useOverlaySettings.js +++ /dev/null @@ -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, - }; -}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 90ac073d..d9c66f97 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/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, diff --git a/src-ui/store.js b/src-ui/store.js index f215f193..e7d90f70 100644 --- a/src-ui/store.js +++ b/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, @@ -222,6 +218,17 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove fadeout_duration: 2, }, "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, +}, "OverlayLargeLogSettings"); +export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog"); // Others export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");