[UPdate] Config Page: Vr Tab. Add tracker settings.

This commit is contained in:
Sakamoto Shiina
2024-11-15 17:35:06 +09:00
parent d024062a05
commit d47b47cc5a
3 changed files with 26 additions and 2 deletions

View File

@@ -72,7 +72,8 @@
"opacity": "Opacity", "opacity": "Opacity",
"ui_scaling": "UI Scaling", "ui_scaling": "UI Scaling",
"display_duration": "Display duration", "display_duration": "Display duration",
"fadeout_duration": "Fadeout duration" "fadeout_duration": "Fadeout duration",
"tracker": "Tracker"
}, },
"config_page": { "config_page": {
"config_title": "Settings", "config_title": "Settings",

View File

@@ -4,6 +4,7 @@ import { clsx } from "clsx";
import styles from "./Vr.module.scss"; import styles from "./Vr.module.scss";
import { Slider } from "../_components/"; import { Slider } from "../_components/";
import { import {
RadioButtonContainer,
SwitchBoxContainer, SwitchBoxContainer,
} from "../_templates/Templates"; } from "../_templates/Templates";
import { import {
@@ -25,7 +26,6 @@ export const Vr = () => {
const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings(); const { currentOverlayLargeLogSettings, setOverlayLargeLogSettings } = useOverlayLargeLogSettings();
const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog(); const { currentIsEnabledOverlayLargeLog, toggleIsEnabledOverlayLargeLog } = useIsEnabledOverlayLargeLog();
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.wrapper}> <div className={styles.wrapper}>
@@ -37,6 +37,7 @@ export const Vr = () => {
/> />
{is_opened_small_settings ? ( {is_opened_small_settings ? (
<OverlaySettingsContainer <OverlaySettingsContainer
id="overlay_settings_small"
current_overlay_settings={currentOverlaySmallLogSettings.data} current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings} set_overlay_settings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog} current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
@@ -44,6 +45,7 @@ export const Vr = () => {
/> />
) : ( ) : (
<OverlaySettingsContainer <OverlaySettingsContainer
id="overlay_settings_large"
current_overlay_settings={currentOverlayLargeLogSettings.data} current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings} set_overlay_settings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog} current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
@@ -60,6 +62,7 @@ const OverlaySettingsContainer = ({
set_overlay_settings, set_overlay_settings,
current_is_enabled_overlay, current_is_enabled_overlay,
toggle_is_enabled_overlay, toggle_is_enabled_overlay,
id
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -88,6 +91,12 @@ const OverlaySettingsContainer = ({
setTimeoutId(newTimeoutId); setTimeoutId(newTimeoutId);
}; };
const selectTrackerFunction = (value) => {
const new_data = { ...settings, tracker: value };
set_overlay_settings(new_data);
};
return ( return (
<> <>
<SwitchBoxContainer <SwitchBoxContainer
@@ -110,6 +119,18 @@ const OverlaySettingsContainer = ({
)} )}
</div> </div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} /> <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
<RadioButtonContainer
label={t("overlay_settings.tracker")}
selectFunction={selectTrackerFunction}
name={id}
options={[
{ id: "HMD", label: "HMD" },
{ id: "LeftHand", label: "LeftHand" },
{ id: "RightHand", label: "RightHand" },
]}
checked_variable={{data: settings.tracker}}
column={true}
/>
</> </>
); );
}; };

View File

@@ -216,6 +216,7 @@ export const { atomInstance: Atom_OverlaySmallLogSettings, useHook: useStore_Ove
z_rotation: 0.0, z_rotation: 0.0,
display_duration: 5, display_duration: 5,
fadeout_duration: 2, fadeout_duration: 2,
tracker: "HMD",
}, "OverlaySmallLogSettings"); }, "OverlaySmallLogSettings");
export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog"); export const { atomInstance: Atom_IsEnabledOverlaySmallLog, useHook: useStore_IsEnabledOverlaySmallLog } = createAtomWithHook(false, "IsEnabledOverlaySmallLog");
export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = createAtomWithHook({ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_OverlayLargeLogSettings } = createAtomWithHook({
@@ -227,6 +228,7 @@ export const { atomInstance: Atom_OverlayLargeLogSettings, useHook: useStore_Ove
z_rotation: 0.0, z_rotation: 0.0,
display_duration: 5, display_duration: 5,
fadeout_duration: 2, fadeout_duration: 2,
tracker: "HMD",
}, "OverlayLargeLogSettings"); }, "OverlayLargeLogSettings");
export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog"); export const { atomInstance: Atom_IsEnabledOverlayLargeLog, useHook: useStore_IsEnabledOverlayLargeLog } = createAtomWithHook(false, "IsEnabledOverlayLargeLog");