+
+
{
onchangeFunction={handleOpacityChange}
/>
-
-
+
+
+
+ );
+};
+const OtherControls = ({settings, onchangeFunction}) => {
+ const { t } = useTranslation();
+
+ return(
+
onchangeFunction("display_duration", value)}
/>
onchangeFunction("fadeout_duration", value)}
/>
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");
From 54388746681b0da23e512c9b22ab0807d0725b8a Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 25 Oct 2024 12:18:07 +0900
Subject: [PATCH 5/6] [Update] Config Page: VR Tab. Add delay when send and
save the settings data to the backend.
---
.../setting_section/setting_box/vr/Vr.jsx | 145 +++++++++++-------
1 file changed, 88 insertions(+), 57 deletions(-)
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 c16ecfe7..faf524d2 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 styles from "./Vr.module.scss";
import { Slider } from "../_components/";
@@ -17,7 +17,6 @@ export const Vr = () => {
const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
-
const [settings, setSettings] = useState({
x_pos: 0,
y_pos: 0,
@@ -32,19 +31,31 @@ export const Vr = () => {
const onchangeFunction = (key, value) => {
setSettings((prev) => {
const new_data = { ...prev, [key]: value };
- setOverlaySmallLogSettings(new_data);
return new_data;
});
};
+ useEffect(() => {
+ let settings_timeout;
+ if (settings_timeout) {
+ clearTimeout(settings_timeout);
+ }
+ settings_timeout = setTimeout(() => {
+ setOverlaySmallLogSettings(settings);
+ }, 50);
+
+ return () => {
+ clearTimeout(settings_timeout);
+ };
+ }, [settings]);
const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
- [styles.is_selected]: is_opened_position_controller
+ [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
+ [styles.is_selected]: !is_opened_position_controller,
});
return (
@@ -69,6 +80,78 @@ export const Vr = () => {
);
};
+
+
+
+const CommonControls = () => {
+ const { t } = useTranslation();
+ const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
+
+ const [settings, setSettings] = useState({
+ opacity: 1,
+ ui_scaling: 1,
+ });
+
+ const onchangeFunction = (key, value) => {
+ setSettings((prev) => {
+ const new_data = { ...prev, [key]: value };
+ return new_data;
+ });
+ };
+
+
+ useEffect(() => {
+ let settings_timeout;
+
+ settings_timeout = setTimeout(() => {
+ setOverlaySettings(settings);
+ }, 50);
+
+ return () => {
+ clearTimeout(settings_timeout);
+ };
+ }, [settings]);
+
+ 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 PositionControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
@@ -158,58 +241,6 @@ const RotationControls = ({settings, onchangeFunction}) => {
);
};
-
-const CommonControls = () => {
- const { t } = useTranslation();
- const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
- const [opacity, setOpacity] = useState(1);
- 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 / 100);
- const set_data = { opacity: opacity, ui_scaling: (value / 100) };
- setOverlaySettings(set_data);
- };
-
- const ui_variable_opacity = (opacity * 100).toFixed(0);
- const ui_variable_ui_scaling = (ui_scaling * 100).toFixed(0);
-
-
- return(
-
-
-
-
-
-
-
-
-
-
- );
-};
const OtherControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
From 33bb2c7620147ec6de8972cfd8dd4f2d40194896 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:02:53 +0900
Subject: [PATCH 6/6] [bugfix] Config Page: VR Tab. Fix the bug that the
settings data has sent to the backend when init.
---
.../setting_section/setting_box/vr/Vr.jsx | 46 +++++++++----------
1 file changed, 21 insertions(+), 25 deletions(-)
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 faf524d2..92bc97cf 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, useEffect } from "react";
+import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import styles from "./Vr.module.scss";
import { Slider } from "../_components/";
@@ -28,28 +28,26 @@ export const Vr = () => {
fadeout_duration: 2,
});
+ const [timeout_id, setTimeoutId] = useState(null);
+
const onchangeFunction = (key, value) => {
setSettings((prev) => {
const new_data = { ...prev, [key]: value };
return new_data;
});
- };
- useEffect(() => {
- let settings_timeout;
-
- if (settings_timeout) {
- clearTimeout(settings_timeout);
+ if (timeout_id) {
+ clearTimeout(timeout_id);
}
- settings_timeout = setTimeout(() => {
- setOverlaySmallLogSettings(settings);
+ const newTimeoutId = setTimeout(() => {
+ let new_data = settings;
+ new_data[key] = value;
+ setOverlaySmallLogSettings(new_data);
}, 50);
- return () => {
- clearTimeout(settings_timeout);
- };
- }, [settings]);
+ setTimeoutId(newTimeoutId);
+ };
const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
[styles.is_selected]: is_opened_position_controller,
@@ -80,9 +78,6 @@ export const Vr = () => {
);
};
-
-
-
const CommonControls = () => {
const { t } = useTranslation();
const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
@@ -92,25 +87,26 @@ const CommonControls = () => {
ui_scaling: 1,
});
+ 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);
+ }
- useEffect(() => {
- let settings_timeout;
-
- settings_timeout = setTimeout(() => {
+ const newTimeoutId = setTimeout(() => {
+ let new_data = settings;
+ new_data[key] = value;
setOverlaySettings(settings);
}, 50);
- return () => {
- clearTimeout(settings_timeout);
- };
- }, [settings]);
+ setTimeoutId(newTimeoutId);
+ };
const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);