diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index af1b4cf2..1e3b57a8 100644 --- a/src-ui/app/App.jsx +++ b/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); }); diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx index a38aa994..d78ec87e 100644 --- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx +++ b/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 ; case "others": return ; + case "advanced_settings": + return ; // case "about_vrct": // return ; diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.jsx new file mode 100644 index 00000000..ab181e61 --- /dev/null +++ b/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 ( + <> + + + + + ); +}; + +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 ( + + ); +}; + +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 ( + + ); +}; +const OpenConfigFolderContainer = () => { + const { t } = useTranslation(); + const { openFolder_ConfigFile } = useOpenFolder(); + + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss b/src-ui/app/config_page/setting_section/setting_box/advanced_settings/AdvancedSettings.module.scss new file mode 100644 index 00000000..fa5eefb3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src-ui/logics/common/useOpenFolder.js b/src-ui/logics/common/useOpenFolder.js index 5fc6c580..202ef5ad 100644 --- a/src-ui/logics/common/useOpenFolder.js +++ b/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, }; }; \ No newline at end of file diff --git a/src-ui/logics/configs/advanced_settings/useOscIpAddress.js b/src-ui/logics/configs/advanced_settings/useOscIpAddress.js new file mode 100644 index 00000000..702a6d98 --- /dev/null +++ b/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, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/advanced_settings/useOscPort.js b/src-ui/logics/configs/advanced_settings/useOscPort.js new file mode 100644 index 00000000..947d613d --- /dev/null +++ b/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, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index f9555445..9badb2fd 100644 --- a/src-ui/logics/configs/index.js +++ b/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"; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index 86439f9d..fe75557d 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/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 = { diff --git a/src-ui/store.js b/src-ui/store.js index 1ea68913..2bb95a9d 100644 --- a/src-ui/store.js +++ b/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");