[Update] Config Page: Add Advanced Settings Tab.

src-ui/app/App.jsx

@@ -62,6 +62,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOscIpAddress,
+    useOscPort,
 } from "@logics_configs";
 
 import {
@@ -126,6 +128,8 @@ const StartPythonFacadeComponent = () => {
     const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { getSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { getOscIpAddress } = useOscIpAddress();
+    const { getOscPort } = useOscPort();
 
     useEffect(() => {
         if (!hasRunRef.current) {
@@ -185,6 +189,9 @@ const StartPythonFacadeComponent = () => {
                 getEnableAutoExportMessageLogs();
                 getEnableVrcMicMuteSync();
                 getEnableSendMessageToVrc();
+
+                getOscIpAddress();
+                getOscPort();
             }).catch((err) => {
                 console.error(err);
             });

src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -4,6 +4,7 @@ import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
 import { Transcription } from "./transcription/Transcription";
 import { Others } from "./others/Others";
+import { AdvancedSettings } from "./advanced_settings/AdvancedSettings";
 // import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -17,6 +18,8 @@ export const SettingBox = () => {
             return <Transcription />;
         case "others":
             return <Others />;
+        case "advanced_settings":
+            return <AdvancedSettings />;
         // case "about_vrct":
         //     return <AboutVrct />;
 

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./AdvancedSettings.module.scss";
+
+import { useOpenFolder } from "@logics_common";
+import {
+    useOscIpAddress,
+    useOscPort,
+} from "@logics_configs";
+
+import {
+    ActionButtonContainer,
+    EntryContainer,
+} from "../_templates/Templates";
+
+
+import OpenFolderSvg from "@images/open_folder.svg?react";
+
+export const AdvancedSettings = () => {
+    return (
+        <>
+            <OscIpAddressContainer />
+            <OscPortContainer />
+            <OpenConfigFolderContainer />
+        </>
+    );
+};
+
+const OscIpAddressContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscIpAddress, setOscIpAddress } = useOscIpAddress();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscIpAddress(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscIpAddress.data);
+    }, [currentOscIpAddress]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_ip_address.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+
+const OscPortContainer = () => {
+    const { t } = useTranslation();
+    const [ui_variable, setUiVariable] = useState("");
+    const { currentOscPort, setOscPort } = useOscPort();
+    const onChangeFunction = (e) => {
+        const value = e.currentTarget.value;
+        if (value === "") {
+            setUiVariable("");
+        } else {
+            setUiVariable(value);
+            setOscPort(value);
+        }
+    };
+
+    useEffect(()=> {
+        setUiVariable(currentOscPort.data);
+    }, [currentOscPort]);
+
+    return (
+        <EntryContainer
+            label={t("config_page.osc_port.label")}
+            ui_variable={ui_variable}
+            onChange={onChangeFunction}
+        />
+    );
+};
+const OpenConfigFolderContainer = () => {
+    const { t } = useTranslation();
+    const { openFolder_ConfigFile } = useOpenFolder();
+
+    return (
+        <>
+            <ActionButtonContainer
+                label={t("config_page.auto_export_message_logs.label")}
+                desc={t("config_page.auto_export_message_logs.desc")}
+                IconComponent={OpenFolderSvg}
+                onclickFunction={openFolder_ConfigFile}
+            />
+        </>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss

@@ -0,0 +1,22 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    align-items: center;
+    gap: 2rem;
+    &.flex_column {
+        flex-direction: column;
+    }
+    border-bottom: solid 0.1rem var(--dark_800_color);
+}
+
+.switch_section_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    align-items: center;
+    gap: 2rem;
+}

src-ui/logics/common/useOpenFolder.js

@@ -6,7 +6,12 @@ export const useOpenFolder = () => {
         asyncStdoutToPython("/run/open_filepath_logs");
     };
 
+    const openFolder_ConfigFile = () => {
+        asyncStdoutToPython("/run/open_filepath_config_file");
+    };
+
     return {
         openFolder_MessageLogs,
+        openFolder_ConfigFile,
     };
 };

src-ui/logics/configs/advanced_settings/useOscIpAddress.js

@@ -0,0 +1,24 @@
+import { useStore_OscIpAddress } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscIpAddress = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOscIpAddress, updateOscIpAddress, pendingOscIpAddress } = useStore_OscIpAddress();
+
+    const getOscIpAddress = () => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/get/data/osc_ip_address");
+    };
+
+    const setOscIpAddress = (osc_ip_address) => {
+        pendingOscIpAddress();
+        asyncStdoutToPython("/set/data/osc_ip_address", osc_ip_address);
+    };
+
+    return {
+        currentOscIpAddress,
+        getOscIpAddress,
+        updateOscIpAddress,
+        setOscIpAddress,
+    };
+};

src-ui/logics/configs/advanced_settings/useOscPort.js

@@ -0,0 +1,24 @@
+import { useStore_OscPort } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useOscPort = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentOscPort, updateOscPort, pendingOscPort } = useStore_OscPort();
+
+    const getOscPort = () => {
+        pendingOscPort();
+        asyncStdoutToPython("/get/data/osc_port");
+    };
+
+    const setOscPort = (osc_port) => {
+        pendingOscPort();
+        asyncStdoutToPython("/set/data/osc_port", osc_port);
+    };
+
+    return {
+        currentOscPort,
+        getOscPort,
+        updateOscPort,
+        setOscPort,
+    };
+};

src-ui/logics/configs/index.js

@@ -31,4 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
+export { useOscPort } from "./advanced_settings/useOscPort";
+
 export { useSoftwareVersion } from "./useSoftwareVersion";

src-ui/logics/useReceiveRoutes.js

@@ -45,6 +45,8 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+    useOscIpAddress,
+    useOscPort,
 } from "@logics_configs";
 
 export const useReceiveRoutes = () => {
@@ -111,13 +113,16 @@ export const useReceiveRoutes = () => {
     const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
     const { updateSpeakerMaxWords } = useSpeakerMaxWords();
 
+    const { updateOscIpAddress } = useOscIpAddress();
+    const { updateOscPort } = useOscPort();
+
     const routes = {
         // Common
         "/run/feed_watchdog": () => {},
         "/get/data/main_window_geometry": restoreWindowGeometry,
         "/set/data/main_window_geometry": () => {},
-        "/run/open_filepath_logs": () => {console.log("Opened Directory, Message Logs");
-        },
+        "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
+        "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
 
         // Main Page
         // Page Controls
@@ -326,6 +331,13 @@ export const useReceiveRoutes = () => {
         "/get/data/send_message_to_vrc": updateEnableSendMessageToVrc,
         "/set/enable/send_message_to_vrc": updateEnableSendMessageToVrc,
         "/set/disable/send_message_to_vrc": updateEnableSendMessageToVrc,
+
+        // Advanced Settings
+        "/get/data/osc_ip_address": updateOscIpAddress,
+        "/set/data/osc_ip_address": updateOscIpAddress,
+
+        "/get/data/osc_port": updateOscPort,
+        "/set/data/osc_port": updateOscPort,
     };
 
     const error_routes = {

src-ui/store.js

@@ -196,6 +196,12 @@ export const { atomInstance: Atom_EnableAutoExportMessageLogs, useHook: useStore
 export const { atomInstance: Atom_EnableVrcMicMuteSync, useHook: useStore_EnableVrcMicMuteSync } = createAtomWithHook(false, "EnableVrcMicMuteSync");
 export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc");
 
+// Advanced Settings
+export const { atomInstance: Atom_OscIpAddress, useHook: useStore_OscIpAddress } = createAtomWithHook("127.0.0.1", "OscIpAddress");
+export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createAtomWithHook("9000", "OscPort");
+
+
+
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
 export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");