From 8cc66ca0cc573088ec932c8b63f57c047d2cae8d Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 18 Dec 2024 16:31:10 +0900 Subject: [PATCH] [Update] Config Page: VR Tab. Add button that send sample texts to Overlay. per 1 sec for now. --- locales/en.yml | 6 ++ locales/ja.yml | 10 ++- .../setting_section/setting_box/vr/Vr.jsx | 86 +++++++++++++++---- .../setting_box/vr/Vr.module.scss | 48 +++++++++++ src-ui/assets/triangle.svg | 1 + src-ui/logics/configs/index.js | 1 + .../logics/configs/vr/useSendTextToOverlay.js | 13 +++ src-ui/logics/useReceiveRoutes.js | 2 + 8 files changed, 150 insertions(+), 17 deletions(-) create mode 100644 src-ui/assets/triangle.svg create mode 100644 src-ui/logics/configs/vr/useSendTextToOverlay.js diff --git a/locales/en.yml b/locales/en.yml index 3ba93d8c..97d7627f 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -200,6 +200,12 @@ config_page: x_rotation: X-axis rotation y_rotation: Y-axis rotation z_rotation: Z-axis rotation + sample_text_button: + start: |- + Send sample texts + to Overlay + stop: Stop Sending + sample_text: Sample text. opacity: Opacity ui_scaling: UI Scaling display_duration: Display duration diff --git a/locales/ja.yml b/locales/ja.yml index df3b2742..dc6ffd97 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -193,14 +193,20 @@ config_page: restore_default_settings: 初期値に戻す position: 位置 rotation: 回転 - opacity: 透明度 - ui_scaling: サイズ x_position: X軸（左右） y_position: Y軸（上下） z_position: Z軸（前後） x_rotation: X軸の回転 y_rotation: Y軸の回転 z_rotation: Z軸の回転 + sample_text_button: + start: |- + サンプルテキストを + Overlayに送信する + stop: 送信を停止 + sample_text: サンプルテキスト + opacity: 透明度 + ui_scaling: サイズ display_duration: 表示時間 fadeout_duration: フェードアウト時間 common_settings: 共通設定 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 cea2ffc6..cf19c1ab 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 @@ -20,6 +20,7 @@ import { useIsEnabledOverlayLargeLog, useOverlayLargeLogSettings, useOverlayShowOnlyTranslatedMessages, + useSendTextToOverlay, } from "@logics_configs"; import RedoSvg from "@images/redo.svg?react"; @@ -50,26 +51,26 @@ export const Vr = () => { is_selected={is_opened_small_settings} label_1={t("config_page.vr.single_line")} label_2={t("config_page.vr.multi_lines")} - /> + /> {is_opened_small_settings ? ( ) : ( )} @@ -146,6 +147,7 @@ const OverlaySettingsContainer = ({ ) : ( )} + { ); +}; + +import SquareSvg from "@images/square.svg?react"; +import TriangleSvg from "@images/triangle.svg?react"; +import { randomIntMinMax } from "@utils"; + +const SendSampleTextToggleButton = () => { + const { t } = useTranslation(); + const { sendTextToOverlay } = useSendTextToOverlay(); + const [is_started, setIsStarted] = useState(false); + + useEffect(() => { + let interval_id; + + if (is_started) { + interval_id = setInterval(() => { + const text_data = Array.from( + { length: randomIntMinMax(1, 5) }, + () => t("config_page.vr.sample_text_button.sample_text") + ).join(" "); + sendTextToOverlay(text_data); + }, 1000); + }; + + return () => { + if (interval_id) { + clearInterval(interval_id); + } + }; + }, [is_started]); + + const toggleFunction = () => { + setIsStarted(!is_started); + }; + + const label = is_started + ? t("config_page.vr.sample_text_button.stop") + : t("config_page.vr.sample_text_button.start"); + + return ( +
+ +

{label}

+
+ ); }; \ No newline at end of file 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 f5e813a6..c18c2be7 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 @@ -56,6 +56,54 @@ transform: translate(-10%); } +.sample_text_button_wrapper { + position: absolute; + bottom: 0; + left: -74%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.sample_text_button { + background-color: var(--dark_850_color); + padding: 1.8rem; + border-radius: 50%; + &:hover { + background-color: var(--dark_800_color); + } + &:active { + background-color: var(--dark_925_color); + } + &.is_started { + background-color: var(--primary_600_color); + &:hover { + background-color: var(--primary_500_color); + } + &:active { + background-color: var(--primary_700_color); + } + } +} +.sample_text_button_triangle_svg, .sample_text_button_square_svg { + width: 2.4rem; +} +.sample_text_button_triangle_svg { + transform: translateX(10%) rotate(90deg); +} +.sample_text_button_label { + color: var(--dark_basic_text_color); + position: absolute; + left: 50%; + top: 110%; + // bottom: -2rem; + transform: translateX(-50%); + white-space: pre-wrap; + font-size: 1.2rem; + width: max-content; + text-align: center; +} + // .position_controls { // background-color: gray; // } diff --git a/src-ui/assets/triangle.svg b/src-ui/assets/triangle.svg new file mode 100644 index 00000000..ff16b225 --- /dev/null +++ b/src-ui/assets/triangle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index aff6b450..646d24c1 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -49,6 +49,7 @@ export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings"; export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog"; export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages"; export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings"; +export { useSendTextToOverlay } from "./vr/useSendTextToOverlay"; export { useOscIpAddress } from "./advanced_settings/useOscIpAddress"; export { useOscPort } from "./advanced_settings/useOscPort"; diff --git a/src-ui/logics/configs/vr/useSendTextToOverlay.js b/src-ui/logics/configs/vr/useSendTextToOverlay.js new file mode 100644 index 00000000..39561b64 --- /dev/null +++ b/src-ui/logics/configs/vr/useSendTextToOverlay.js @@ -0,0 +1,13 @@ +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSendTextToOverlay = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + + const sendTextToOverlay = (text) => { + asyncStdoutToPython("/run/send_text_overlay_small_log", text); + }; + + return { + sendTextToOverlay, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index a188dce2..cbe2e59f 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -427,6 +427,8 @@ export const useReceiveRoutes = () => { "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages, "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages, + "/run/send_text_overlay_small_log": () => {}, + // Others Tab "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox, "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,