[Update] Config Page: VR Tab. Add button that send sample texts to Overlay. per 1 sec for now.

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

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: 共通設定

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 ? (
                     <OverlaySettingsContainer
-                    id="overlay_settings_small"
+                        id="overlay_settings_small"
-                    ui_configs={ui_configs.overlay_small_log}
+                        ui_configs={ui_configs.overlay_small_log}
-                    default_ui_configs={ui_configs.overlay_small_log_default_settings}
+                        default_ui_configs={ui_configs.overlay_small_log_default_settings}
-                    current_overlay_settings={currentOverlaySmallLogSettings.data}
+                        current_overlay_settings={currentOverlaySmallLogSettings.data}
-                    set_overlay_settings={setOverlaySmallLogSettings}
+                        set_overlay_settings={setOverlaySmallLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
+                        current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
                     />
                 ) : (
                     <OverlaySettingsContainer
-                    id="overlay_settings_large"
+                        id="overlay_settings_large"
-                    ui_configs={ui_configs.overlay_large_log}
+                        ui_configs={ui_configs.overlay_large_log}
-                    default_ui_configs={ui_configs.overlay_large_log_default_settings}
+                        default_ui_configs={ui_configs.overlay_large_log_default_settings}
-                    current_overlay_settings={currentOverlayLargeLogSettings.data}
+                        current_overlay_settings={currentOverlayLargeLogSettings.data}
-                    set_overlay_settings={setOverlayLargeLogSettings}
+                        set_overlay_settings={setOverlayLargeLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
+                        current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
                     />
                 )}
             </div>
@@ -146,6 +147,7 @@ const OverlaySettingsContainer = ({
                 ) : (
                     <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
                 )}
+                <SendSampleTextToggleButton />
             </div>
             <OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
             <RadioButtonContainer
@@ -380,3 +382,57 @@ const ResetButton = ({onClickFunction}) => {
         </button>
     );
 };
+
+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 (
+        <div className={styles.sample_text_button_wrapper}>
+            <button
+                className={clsx(styles.sample_text_button, { [styles.is_started]: is_started })}
+                onClick={toggleFunction}
+            >
+                {is_started ? (
+                    <SquareSvg className={styles.sample_text_button_square_svg} />
+                ) : (
+                    <TriangleSvg className={styles.sample_text_button_triangle_svg} />
+                )}
+            </button>
+            <p className={styles.sample_text_button_label}>{label}</p>
+        </div>
+    );
+};

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;
 // }

src-ui/assets/triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.574 3.712c.195-.323.662-.323.857 0l9.37 15.545c.2.333-.039.757-.429.757l-18.668-.006c-.385 0-.629-.422-.428-.758l9.298-15.538zm.429-2.483c-.76 0-1.521.37-1.966 1.111l-9.707 16.18c-.915 1.523.182 3.472 1.965 3.472h19.416c1.783 0 2.879-1.949 1.965-3.472l-9.707-16.18c-.446-.741-1.205-1.111-1.966-1.111z"/></svg>

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";

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,
+    };
+};

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,