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

[Update] Config Page: VR Tab. Connect to the backend and save the data.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-10-24 15:45:23 +09:00
parent 984f989646
commit ed24dbd428
7 changed files with 209 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,15 +3,43 @@ import { useTranslation } from "react-i18next";
import styles from "./Vr.module.scss";
import { Slider } from "../_components/";
import { clsx } from "clsx";
import {
useOverlaySettings,
useOverlaySmallLogSettings,
} 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 { currentOverlaySmallLogSettings, setOverlaySmallLogSettings } = useOverlaySmallLogSettings();
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 onchangeFunction = (key, value) => {
setSettings((prev) => {
const new_data = { ...prev, [key]: value };
setOverlaySmallLogSettings(new_data);
return new_data;
});
};
const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
[styles.is_selected]: is_opened_position_controller
});
@@ -21,6 +49,7 @@ export const Vr = () => {
return (
<div className={styles.container}>
<CommonControls />
<div className={styles.controller_type_switch} onClick={toggleController}>
<div className={toggle_button_class_names__position}>
<p className={styles.controller_switcher_label}>Position</p>
@@ -31,23 +60,17 @@ export const Vr = () => {
</div>
<div className={styles.position_rotation_controls_box}>
{is_opened_position_controller
? <PositionControls />
: <RotationControls />
}
? <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
: <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
}
</div>
<OtherControls />
<OtherControls settings={settings} onchangeFunction={onchangeFunction} />
</div>
);
};
const PositionControls = () => {
const PositionControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
const handlePositionChange = (axis, value) => {
setPosition((prev) => ({ ...prev, [axis]: value }));
};
return (
<div className={styles.position_controls}>
@@ -55,22 +78,22 @@ const PositionControls = () => {
<label className={clsx(styles.slider_label, styles.x_position_label)}>{t("overlay_settings.x_position")}</label>
<Slider
className={styles.x_position_slider}
variable={position.x}
step={1}
min={-100}
max={100}
onchangeFunction={(value) => handlePositionChange("x", value)}
variable={settings.x_pos}
step={0.05}
min={-0.5}
max={0.5}
onchangeFunction={(value) => onchangeFunction("x_pos", value)}
/>
</div>
<div className={styles.position_wrapper}>
<label className={clsx(styles.slider_label, styles.y_position_label)}>{t("overlay_settings.y_position")}</label>
<Slider
className={styles.y_position_slider}
variable={position.y}
step={1}
min={-100}
max={100}
onchangeFunction={(value) => handlePositionChange("y", value)}
variable={settings.y_pos}
step={0.05}
min={-0.8}
max={0.8}
onchangeFunction={(value) => onchangeFunction("y_pos", value)}
orientation="vertical"
/>
</div>
@@ -78,25 +101,20 @@ const PositionControls = () => {
<label className={clsx(styles.slider_label, styles.z_position_label)}>{t("overlay_settings.z_position")}</label>
<Slider
className={styles.z_position_slider}
variable={position.z}
step={1}
min={-100}
max={100}
onchangeFunction={(value) => handlePositionChange("z", value)}
variable={settings.z_pos}
step={0.05}
min={-0.5}
max={1.5}
onchangeFunction={(value) => onchangeFunction("z_pos", value)}
orientation="vertical"
/>
</div>
</div>
);
};
const RotationControls = () => {
const RotationControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
const [rotation, setRotation] = useState({ rotate_x: 0, rotate_y: 0, rotate_z: 0 });
const handleRotationChange = (axis, value) => {
setRotation((prev) => ({ ...prev, [axis]: value }));
};
return (
<div className={styles.rotation_controls}>
@@ -104,12 +122,12 @@ const RotationControls = () => {
<label className={clsx(styles.slider_label, styles.x_rotation_label)}>{t("overlay_settings.x_rotation")}</label>
<Slider
className={styles.x_rotation_slider}
variable={-rotation.rotate_x}
valueLabelFormat={rotation.rotate_x}
step={10}
variable={-settings.x_rotation}
valueLabelFormat={settings.x_rotation}
step={5}
min={-180}
max={180}
onchangeFunction={(value) => handleRotationChange("rotate_x", -value)}
onchangeFunction={(value) => onchangeFunction("x_rotation", -value)}
orientation="vertical"
/>
</div>
@@ -117,22 +135,22 @@ const RotationControls = () => {
<label className={clsx(styles.slider_label, styles.y_rotation_label)}>{t("overlay_settings.y_rotation")}</label>
<Slider
className={styles.y_rotation_slider}
variable={rotation.rotate_y}
step={10}
variable={settings.y_rotation}
step={5}
min={-180}
max={180}
onchangeFunction={(value) => handleRotationChange("rotate_y", value)}
onchangeFunction={(value) => onchangeFunction("y_rotation", value)}
/>
</div>
<div className={styles.rotation_wrapper}>
<label className={clsx(styles.slider_label, styles.z_rotation_label)}>{t("overlay_settings.z_rotation")}</label>
<Slider
className={styles.z_rotation_slider}
variable={rotation.rotate_z}
step={15}
variable={settings.z_rotation}
step={5}
min={-180}
max={180}
onchangeFunction={(value) => handleRotationChange("rotate_z", value)}
onchangeFunction={(value) => onchangeFunction("z_rotation", value)}
orientation="vertical"
/>
</div>
@@ -141,39 +159,34 @@ const RotationControls = () => {
};
const OtherControls = () => {
const CommonControls = () => {
const { t } = useTranslation();
const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
const [opacity, setOpacity] = useState(1);
const [ui_scaling, setUiScaling] = useState(100);
const [ui_scaling, setUiScaling] = useState(1);
const handleOpacityChange = (value) => {
setOpacity(value / 100);
const set_data = { opacity: (value / 100), ui_scaling: ui_scaling };
setOverlaySettings(set_data);
};
const handleUiScalingChange = (value) => {
setUiScaling(value);
setUiScaling(value / 100);
const set_data = { opacity: opacity, ui_scaling: (value / 100) };
setOverlaySettings(set_data);
};
const ui_variable_opacity = (opacity * 100).toFixed(0);
const [display_duration, setDisplayDuration] = useState(5);
const [fadeout_duration, setFadeoutDuration] = useState(2);
const handleDisplayDurationChange = (value) => {
setDisplayDuration(value);
};
const handleFadeoutDurationChange = (value) => {
setFadeoutDuration(value);
};
const ui_variable_ui_scaling = (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>
<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.other_controls_slider, styles.opacity_slider)}
className={clsx(styles.common_controls_slider, styles.opacity_slider)}
variable={(opacity * 100)}
valueLabelFormat={`${ui_variable_opacity}%`}
step={5}
@@ -182,40 +195,48 @@ const OtherControls = () => {
onchangeFunction={handleOpacityChange}
/>
</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>
<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.other_controls_slider, styles.ui_scaling_slider)}
variable={ui_scaling}
valueLabelFormat={`${ui_scaling}%`}
className={clsx(styles.common_controls_slider, styles.ui_scaling_slider)}
variable={(ui_scaling * 100)}
valueLabelFormat={`${ui_variable_ui_scaling}%`}
step={10}
min={40}
max={200}
onchangeFunction={handleUiScalingChange}
/>
</div>
</div>
);
};
const OtherControls = ({settings, onchangeFunction}) => {
const { t } = useTranslation();
return(
<div className={styles.other_controls}>
<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
className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
variable={display_duration}
valueLabelFormat={`${display_duration} second(s)`}
variable={settings.display_duration}
valueLabelFormat={`${settings.display_duration} second(s)`}
step={1}
min={1}
max={60}
onchangeFunction={handleDisplayDurationChange}
onchangeFunction={(value) => onchangeFunction("display_duration", value)}
/>
</div>
<div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("overlay_settings.fadeout_duration")}</label>
<Slider
className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
variable={fadeout_duration}
valueLabelFormat={`${fadeout_duration} second(s)`}
variable={settings.fadeout_duration}
valueLabelFormat={`${settings.fadeout_duration} second(s)`}
step={1}
min={0}
max={5}
onchangeFunction={handleFadeoutDurationChange}
onchangeFunction={(value) => onchangeFunction("fadeout_duration", value)}
/>
</div>
</div>

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

@@ -8,6 +8,7 @@
}
.controller_type_switch {
margin-top: 6rem;
display: flex;
border: 0.1rem solid var(--dark_600_color);
border-radius: 0.4rem;
@@ -35,11 +36,11 @@
}
.position_rotation_controls_box {
margin-top: 14rem;
margin-top: 8rem;
position: relative;
aspect-ratio: 1 / 1;
width: 36%;
max-width: 40rem;
max-width: 36rem;
transform: translate(-10%);
}
@@ -153,8 +154,40 @@
.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: 10rem;
margin-top: 6rem;
display: flex;
flex-direction: column;
align-items: center;

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

@@ -31,6 +31,9 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
export { useOverlaySettings } from "./vr/useOverlaySettings";
export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
export { useOscPort } from "./advanced_settings/useOscPort";

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

@@ -0,0 +1,24 @@
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,
};
};

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

@@ -0,0 +1,24 @@
import { useStore_OverlaySmallLogSettings } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useOverlaySmallLogSettings = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentOverlaySmallLogSettings, updateOverlaySmallLogSettings, pendingOverlaySmallLogSettings } = useStore_OverlaySmallLogSettings();
const getOverlaySmallLogSettings = () => {
// pendingOverlaySmallLogSettings();
asyncStdoutToPython("/get/data/overlay_small_log_settings");
};
const setOverlaySmallLogSettings = (overlay_small_log_settings) => {
// pendingOverlaySmallLogSettings();
asyncStdoutToPython("/set/data/overlay_small_log_settings", overlay_small_log_settings);
};
return {
currentOverlaySmallLogSettings,
getOverlaySmallLogSettings,
updateOverlaySmallLogSettings,
setOverlaySmallLogSettings,
};
};

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

@@ -45,6 +45,8 @@ import {
useSpeakerRecordTimeout,
useSpeakerPhraseTimeout,
useSpeakerMaxWords,
useOverlaySettings,
useOverlaySmallLogSettings,
useOscIpAddress,
useOscPort,
} from "@logics_configs";
@@ -113,6 +115,9 @@ export const useReceiveRoutes = () => {
const { updateSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
const { updateSpeakerMaxWords } = useSpeakerMaxWords();
const { updateOverlaySettings } = useOverlaySettings();
const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
const { updateOscIpAddress } = useOscIpAddress();
const { updateOscPort } = useOscPort();
@@ -311,6 +316,13 @@ export const useReceiveRoutes = () => {
"/get/data/speaker_max_phrases": updateSpeakerMaxWords,
"/set/data/speaker_max_phrases": updateSpeakerMaxWords,
// VR
"/get/data/overlay_settings": updateOverlaySettings,
"/set/data/overlay_settings": updateOverlaySettings,
"/get/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
"/set/data/overlay_small_log_settings": updateOverlaySmallLogSettings,
// Others Tab
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,

16
src-ui/store.js
View File

@@ -189,6 +189,22 @@ export const { atomInstance: Atom_SpeakerRecordTimeout, useHook: useStore_Speake
export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_SpeakerPhraseTimeout } = createAtomWithHook(0, "SpeakerPhraseTimeout");
export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
// 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,
z_pos: 0.0,
x_rotation: 0.0,
y_rotation: 0.0,
z_rotation: 0.0,
display_duration: 5,
fadeout_duration: 2,
}, "OverlaySmallLogSettings");
// Others
export const { atomInstance: Atom_EnableAutoClearMessageInputBox, useHook: useStore_EnableAutoClearMessageInputBox } = createAtomWithHook(true, "EnableAutoClearMessageInputBox");
export const { atomInstance: Atom_EnableSendOnlyTranslatedMessages, useHook: useStore_EnableSendOnlyTranslatedMessages } = createAtomWithHook(false, "EnableSendOnlyTranslatedMessages");