[Update] Config Page: VR Tab. Add section show only translated messages.

locales/en.json

@@ -73,7 +73,10 @@
         "ui_scaling": "UI Scaling",
         "display_duration": "Display duration",
         "fadeout_duration": "Fadeout duration",
-        "tracker": "Tracker"
+        "tracker": "Tracker",
+        "overlay_show_only_translated_messages": {
+            "label": "Show Only Translated Messages"
+        }
     },
     "config_page": {
         "config_title": "Settings",

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

@@ -7,12 +7,19 @@ import { Slider } from "../_components/";
 import {
     RadioButtonContainer,
     SwitchBoxContainer,
+    CheckboxContainer,
 } from "../_templates/Templates";
+
+import {
+    SectionLabelComponent,
+} from "../_components/";
+
 import {
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
 } from "@logics_configs";
 
 export const Vr = () => {
@@ -56,6 +63,7 @@ export const Vr = () => {
                     />
                 )}
             </div>
+            <CommonSettingsContainer />
         </div>
     );
 };
@@ -312,3 +320,20 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
         </div>
     );
 };
+
+
+const CommonSettingsContainer = () => {
+    const { t } = useTranslation();
+    const { currentOverlayShowOnlyTranslatedMessages, toggleOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
+
+    return (
+        <div className={styles.common_container}>
+            <SectionLabelComponent label="Common Settings" />
+            <CheckboxContainer
+                label={t("overlay_settings.overlay_show_only_translated_messages.label")}
+                variable={currentOverlayShowOnlyTranslatedMessages}
+                toggleFunction={toggleOverlayShowOnlyTranslatedMessages}
+            />
+        </div>
+    );
+};

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

@@ -6,6 +6,7 @@
     position: relative;
     padding: 2rem;
     width: 100%;
+    gap: 4rem;
 }
 
 .wrapper {
@@ -188,3 +189,11 @@
     font-size: 1.6rem;
     width: 100%;
 }
+
+.common_container {
+    width: 100%;
+}
+
+.common_label {
+    font-size: 1.4rem;
+}

src-ui/logics/configs/index.js

@@ -47,6 +47,7 @@ export { useSelectedCTranslate2ComputeDevice } from "./translation/useSelectedCT
 export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
 export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
+export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
 export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";

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

@@ -0,0 +1,28 @@
+import { useStore_OverlayShowOnlyTranslatedMessages } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOverlayShowOnlyTranslatedMessages = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOverlayShowOnlyTranslatedMessages, updateOverlayShowOnlyTranslatedMessages, pendingOverlayShowOnlyTranslatedMessages } = useStore_OverlayShowOnlyTranslatedMessages();
+
+    const getOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        asyncStdoutToPython("/get/data/overlay_show_only_translated_messages");
+    };
+
+    const toggleOverlayShowOnlyTranslatedMessages = () => {
+        pendingOverlayShowOnlyTranslatedMessages();
+        if (currentOverlayShowOnlyTranslatedMessages.data) {
+            asyncStdoutToPython("/set/disable/overlay_show_only_translated_messages");
+        } else {
+            asyncStdoutToPython("/set/enable/overlay_show_only_translated_messages");
+        }
+    };
+
+    return {
+        currentOverlayShowOnlyTranslatedMessages,
+        getOverlayShowOnlyTranslatedMessages,
+        updateOverlayShowOnlyTranslatedMessages,
+        toggleOverlayShowOnlyTranslatedMessages,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -64,6 +64,7 @@ import {
     useOverlaySmallLogSettings,
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
+    useOverlayShowOnlyTranslatedMessages,
     useOscIpAddress,
     useOscPort,
 } from "@logics_configs";
@@ -161,6 +162,7 @@ export const useReceiveRoutes = () => {
     const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
     const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
     const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
+    const { updateOverlayShowOnlyTranslatedMessages } = useOverlayShowOnlyTranslatedMessages();
 
     const { updateOscIpAddress } = useOscIpAddress();
     const { updateOscPort } = useOscPort();
@@ -414,6 +416,10 @@ export const useReceiveRoutes = () => {
         "/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
         "/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
 
+        "/get/data/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+        "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,

src-ui/store.js

@@ -242,6 +242,7 @@ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_Ove
     tracker: "HMD",
 }, "OverlayLargeLogSettings");
 export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");
+export const { atomInstance: Atom_OverlayShowOnlyTranslatedMessages, useHook: useStore_OverlayShowOnlyTranslatedMessages } = createAtomWithHook(false, "OverlayShowOnlyTranslatedMessages");
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");