every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Config Page: Vr Tab: Add OverlayLargeLogSettings.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-11-15 16:54:23 +09:00
parent e68cdfbf19
commit d024062a05
10 changed files with 217 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { clsx } from "clsx";
import styles from "./Vr.module.scss";
@@ -8,163 +8,132 @@ import {
} from "../_templates/Templates";
import {
useIsEnabledOverlaySmallLog,
useOverlaySettings,
useOverlaySmallLogSettings,
useIsEnabledOverlayLargeLog,
useOverlayLargeLogSettings,
} from "@logics_configs";
export const Vr = () => {
const { t } = useTranslation();
const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
const toggleController = () => {
setIsOpenedPositionController(!is_opened_position_controller);
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
const toggleIsOpenedSmallSettings = () => {
setIsOpenedSmallSettings(!is_opened_small_settings);
};
const { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
const [settings, setSettings] = useState({
x_pos: 0,
y_pos: 0,
z_pos: 0,
x_rotation: 0,
y_rotation: 0,
z_rotation: 0,
display_duration: 5,
fadeout_duration: 2,
});
const [timeout_id, setTimeoutId] = useState(null);
const onchangeFunction = (key, value) => {
setSettings((prev) => {
const new_data = { ...prev, [key]: value };
return new_data;
});
if (timeout_id) {
clearTimeout(timeout_id);
}
const newTimeoutId = setTimeout(() => {
let new_data = settings;
new_data[key] = value;
setOverlaySmallLogSettings(new_data);
}, 50);
setTimeoutId(newTimeoutId);
};
const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
[styles.is_selected]: is_opened_position_controller,
});
const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
[styles.is_selected]: !is_opened_position_controller,
});
const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
return (
<div className={styles.container}>
<EnableOverlaySmallLogContainer />
<CommonControls />
<div className={styles.controller_type_switch} onClick={toggleController}>
<div className={toggle_button_class_names__position}>
<p className={styles.controller_switcher_label}>Position</p>
</div>
<div className={toggle_button_class_names__rotation}>
<p className={styles.controller_switcher_label}>Rotation</p>
</div>
<div className={styles.wrapper}>
<PageSwitcherContainer
toggleFunction={toggleIsOpenedSmallSettings}
is_selected={is_opened_small_settings}
label_1="Small"
label_2="Large"
/>
{is_opened_small_settings ? (
<OverlaySettingsContainer
current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
/>
) : (
<OverlaySettingsContainer
current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
/>
)}
</div>
<div className={styles.position_rotation_controls_box}>
{is_opened_position_controller
? <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
: <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
}
</div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} />
</div>
);
};
const EnableOverlaySmallLogContainer = () => {
const OverlaySettingsContainer = ({
current_overlay_settings,
set_overlay_settings,
current_is_enabled_overlay,
toggle_is_enabled_overlay,
}) => {
const { t } = useTranslation();
const { currentIsEnabledOverlaySmallLog, toggleIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
return (
<SwitchBoxContainer
label={t("config_page.enable_overlay_small_log.label")}
variable={currentIsEnabledOverlaySmallLog}
toggleFunction={toggleIsEnabledOverlaySmallLog}
/>
);
};
const CommonControls = () => {
const { t } = useTranslation();
const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
const [settings, setSettings] = useState({
opacity: 1,
ui_scaling: 1,
});
useEffect(() => {
setSettings(current_overlay_settings);
}, [current_overlay_settings]);
const [settings, setSettings] = useState(current_overlay_settings);
const [timeout_id, setTimeoutId] = useState(null);
const onchangeFunction = (key, value) => {
setSettings((prev) => {
const new_data = { ...prev, [key]: value };
return new_data;
});
const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
const togglePositionRotationController = () => {
setIsOpenedPositionController(!is_opened_position_controller);
};
if (timeout_id) {
clearTimeout(timeout_id);
}
const onchangeFunction = (key, value) => {
setSettings((prev) => ({ ...prev, [key]: value }));
if (timeout_id) clearTimeout(timeout_id);
const newTimeoutId = setTimeout(() => {
let new_data = settings;
new_data[key] = value;
setOverlaySettings(settings);
const new_data = { ...settings, [key]: value };
set_overlay_settings(new_data);
}, 50);
setTimeoutId(newTimeoutId);
};
const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
return (
<div className={styles.common_controls}>
<div className={styles.common_controls_wrapper}>
<label className={clsx(styles.common_controls_slider_label, styles.opacity_label)}>
{t("overlay_settings.opacity")}
</label>
<Slider
className={clsx(styles.common_controls_slider, styles.opacity_slider)}
variable={settings.opacity * 100}
valueLabelFormat={`${ui_variable_opacity}%`}
step={5}
min={10}
max={100}
onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
/>
<>
<SwitchBoxContainer
label={t("overlay_settings.enable")}
variable={current_is_enabled_overlay}
toggleFunction={toggle_is_enabled_overlay}
/>
<PageSwitcherContainer
toggleFunction={togglePositionRotationController}
is_selected={is_opened_position_controller}
label_1={t("overlay_settings.position")}
label_2={t("overlay_settings.rotation")}
/>
<div className={styles.position_rotation_controls_box}>
{is_opened_position_controller ? (
<PositionControls settings={settings} onchangeFunction={onchangeFunction} />
) : (
<RotationControls settings={settings} onchangeFunction={onchangeFunction} />
)}
</div>
<div className={styles.common_controls_wrapper}>
<label className={clsx(styles.common_controls_slider_label, styles.ui_scaling_label)}>
{t("overlay_settings.ui_scaling")}
</label>
<Slider
className={clsx(styles.common_controls_slider, styles.ui_scaling_slider)}
variable={settings.ui_scaling * 100}
valueLabelFormat={`${ui_variable_ui_scaling}%`}
step={10}
min={40}
max={200}
onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
/>
</div>
</div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} />
</>
);
};
const PageSwitcherContainer = (props) => {
const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
[styles.is_selected]: props.is_selected,
});
const toggle_button_class_names__rotation = clsx(styles.controller_type_switcher, {
[styles.is_selected]: !props.is_selected,
});
return (
<div className={styles.controller_type_switch} onClick={() => props.toggleFunction()}>
<div className={toggle_button_class_names__position}>
<p className={styles.controller_switcher_label}>{props.label_1}</p>
</div>
<div className={toggle_button_class_names__rotation}>
<p className={styles.controller_switcher_label}>{props.label_2}</p>
</div>
</div>
);
};
const PositionControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
@@ -258,8 +227,39 @@ const RotationControls = ({settings, onchangeFunction}) => {
const OtherControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);
return(
<div className={styles.other_controls}>
<div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
{t("overlay_settings.opacity")}
</label>
<Slider
className={clsx(styles.other_controls_slider, styles.opacity_slider)}
variable={settings.opacity * 100}
valueLabelFormat={`${ui_variable_opacity}%`}
step={5}
min={10}
max={100}
onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
/>
</div>
<div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
{t("overlay_settings.ui_scaling")}
</label>
<Slider
className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
variable={settings.ui_scaling * 100}
valueLabelFormat={`${ui_variable_ui_scaling}%`}
step={10}
min={40}
max={200}
onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
/>
</div>
<div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("overlay_settings.display_duration")}</label>
<Slider

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

@@ -5,14 +5,25 @@
justify-content: center;
position: relative;
padding: 2rem;
width: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 56rem;
gap: 2rem;
}
.controller_type_switch {
margin-top: 6rem;
margin-top: 2rem;
display: flex;
border: 0.1rem solid var(--dark_600_color);
border-radius: 0.4rem;
width: 50%;
width: 80%;
align-items: center;
justify-content: center;
cursor: pointer;
@@ -151,41 +162,6 @@
height: 100%;
}
.common_controls {
padding-top: 4rem;
padding-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
width: 100%;
max-width: 56rem;
border-bottom: 0.1rem solid var(--dark_700_color);
}
.common_controls_wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
}
.common_controls_slider {
margin-left: 18rem;
}
.common_controls_slider_label {
position: absolute;
font-size: 1.6rem;
width: 100%;
}
.other_controls {
margin-top: 6rem;
display: flex;
@@ -193,7 +169,6 @@
align-items: center;
gap: 2rem;
width: 100%;
max-width: 56rem;
}
.other_controls_wrapper {

3
src-ui/logics/configs/index.js
View File

@@ -41,8 +41,9 @@ export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2Weig
export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
export { useOverlaySettings } from "./vr/useOverlaySettings";
export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
export { useOscPort } from "./advanced_settings/useOscPort";

28
src-ui/logics/configs/vr/useIsEnabledOverlayLargeLog.js Normal file
View File

@@ -0,0 +1,28 @@
import { useStore_IsEnabledOverlayLargeLog } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useIsEnabledOverlayLargeLog = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentIsEnabledOverlayLargeLog, updateIsEnabledOverlayLargeLog, pendingIsEnabledOverlayLargeLog } = useStore_IsEnabledOverlayLargeLog();
const getIsEnabledOverlayLargeLog = () => {
pendingIsEnabledOverlayLargeLog();
asyncStdoutToPython("/get/data/overlay_large_log");
};
const toggleIsEnabledOverlayLargeLog = () => {
pendingIsEnabledOverlayLargeLog();
if (currentIsEnabledOverlayLargeLog.data) {
asyncStdoutToPython("/set/disable/overlay_large_log");
} else {
asyncStdoutToPython("/set/enable/overlay_large_log");
}
};
return {
currentIsEnabledOverlayLargeLog,
getIsEnabledOverlayLargeLog,
updateIsEnabledOverlayLargeLog,
toggleIsEnabledOverlayLargeLog,
};
};

2
src-ui/logics/configs/vr/useIsEnabledOverlaySmallLog.js
View File

@@ -7,7 +7,7 @@ export const useIsEnabledOverlaySmallLog = () => {
const getIsEnabledOverlaySmallLog = () => {
pendingIsEnabledOverlaySmallLog();
asyncStdoutToPython("/get/data/overlay_settings");
asyncStdoutToPython("/get/data/overlay_small_log");
};
const toggleIsEnabledOverlaySmallLog = () => {

24
src-ui/logics/configs/vr/useOverlayLargeLogSettings.js Normal file
View File

@@ -0,0 +1,24 @@
import { useStore_OverlayLargeLogSettings } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOverlayLargeLogSettings = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOverlayLargeLogSettings, updateOverlayLargeLogSettings, pendingOverlayLargeLogSettings } = useStore_OverlayLargeLogSettings();
const getOverlayLargeLogSettings = () => {
// pendingOverlayLargeLogSettings();
asyncStdoutToPython("/get/data/overlay_large_log_settings");
};
const setOverlayLargeLogSettings = (overlay_large_log_settings) => {
// pendingOverlayLargeLogSettings();
asyncStdoutToPython("/set/data/overlay_large_log_settings", overlay_large_log_settings);
};
return {
currentOverlayLargeLogSettings,
getOverlayLargeLogSettings,
updateOverlayLargeLogSettings,
setOverlayLargeLogSettings,
};
};

24
src-ui/logics/configs/vr/useOverlaySettings.js
View File

@@ -1,24 +0,0 @@
import { useStore_OverlaySettings } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOverlaySettings = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOverlaySettings, updateOverlaySettings, pendingOverlaySettings } = useStore_OverlaySettings();
const getOverlaySettings = () => {
// pendingOverlaySettings();
asyncStdoutToPython("/get/data/overlay_settings");
};
const setOverlaySettings = (overlay_settings) => {
// pendingOverlaySettings();
asyncStdoutToPython("/set/data/overlay_settings", overlay_settings);
};
return {
currentOverlaySettings,
getOverlaySettings,
updateOverlaySettings,
setOverlaySettings,
};
};

16
src-ui/logics/useReceiveRoutes.js
View File

@@ -54,9 +54,10 @@ import {
useSelectedTranscriptionEngine,
useSelectedWhisperWeightType,
useWhisperWeightTypeStatus,
useOverlaySettings,
useIsEnabledOverlaySmallLog,
useOverlaySmallLogSettings,
useIsEnabledOverlayLargeLog,
useOverlayLargeLogSettings,
useOscIpAddress,
useOscPort,
} from "@logics_configs";
@@ -144,9 +145,10 @@ export const useReceiveRoutes = () => {
downloadedWhisperWeightType,
} = useWhisperWeightTypeStatus();
const { updateOverlaySettings } = useOverlaySettings();
const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
const { updateIsEnabledOverlaySmallLog } = useIsEnabledOverlaySmallLog();
const { updateOverlayLargeLogSettings } = useOverlayLargeLogSettings();
const { updateIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
const { updateOscIpAddress } = useOscIpAddress();
const { updateOscPort } = useOscPort();
@@ -372,9 +374,6 @@ export const useReceiveRoutes = () => {
"/run/downloaded_whisper_weight": downloadedWhisperWeightType,
// VR
"/get/data/overlay_settings": updateOverlaySettings,
"/set/data/overlay_settings": updateOverlaySettings,
"/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,
"/set/enable/overlay_small_log": updateIsEnabledOverlaySmallLog,
"/set/disable/overlay_small_log": updateIsEnabledOverlaySmallLog,
@@ -382,6 +381,13 @@ export const useReceiveRoutes = () => {
"/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
"/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
"/get/data/overlay_large_log": updateIsEnabledOverlayLargeLog,
"/set/enable/overlay_large_log": updateIsEnabledOverlayLargeLog,
"/set/disable/overlay_large_log": updateIsEnabledOverlayLargeLog,
"/get/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
"/set/data/overlay_large_log_settings": updateOverlayLargeLogSettings,
// Others Tab
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,

15
src-ui/store.js
View File

@@ -207,10 +207,6 @@ export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore
// VR
export const { atomInstance: Atom_OverlaySettings, useHook: useStore_OverlaySettings } = createAtomWithHook({
opacity: 1.0,
ui_scaling: 1.0,
}, "OverlaySettings");
export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_OverlaySmallLogSettings } = createAtomWithHook({
x_pos: 0.0,
y_pos: 0.0,
@@ -222,6 +218,17 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove
fadeout_duration: 2,
}, "OverlaySmallLogSettings");
export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = createAtomWithHook({
x_pos: 0.0,
y_pos: 0.0,
z_pos: 0.0,
x_rotation: 0.0,
y_rotation: 0.0,
z_rotation: 0.0,
display_duration: 5,
fadeout_duration: 2,
}, "OverlayLargeLogSettings");
export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");
// Others
export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");