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

[Update] Config Page: VR Tab: Position, Rotation settings. Add reset button that is set default settings.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-17 20:00:04 +09:00
parent ea59cdc63c
commit 988a42f15d
2 changed files with 91 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,8 @@ import {
useOverlayShowOnlyTranslatedMessages, useOverlayShowOnlyTranslatedMessages,
} from "@logics_configs"; } from "@logics_configs";
import RedoSvg from "@images/redo.svg?react";
export const Vr = () => { export const Vr = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true); const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
@@ -53,6 +55,7 @@ export const Vr = () => {
<OverlaySettingsContainer <OverlaySettingsContainer
id="overlay_settings_small" id="overlay_settings_small"
ui_configs={ui_configs.overlay_small_log} ui_configs={ui_configs.overlay_small_log}
default_ui_configs={ui_configs.overlay_small_log_default_settings}
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}
@@ -62,6 +65,7 @@ export const Vr = () => {
<OverlaySettingsContainer <OverlaySettingsContainer
id="overlay_settings_large" id="overlay_settings_large"
ui_configs={ui_configs.overlay_large_log} ui_configs={ui_configs.overlay_large_log}
default_ui_configs={ui_configs.overlay_large_log_default_settings}
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}
@@ -86,6 +90,7 @@ const OverlaySettingsContainer = ({
current_is_enabled_overlay, current_is_enabled_overlay,
toggle_is_enabled_overlay, toggle_is_enabled_overlay,
ui_configs, ui_configs,
default_ui_configs,
id id
}) => { }) => {
@@ -115,8 +120,8 @@ const OverlaySettingsContainer = ({
setTimeoutId(newTimeoutId); setTimeoutId(newTimeoutId);
}; };
const selectTrackerFunction = (value) => { const selectFunction = (key, value) => {
const new_data = { ...settings, tracker: value }; const new_data = { ...settings, [key]: value };
set_overlay_settings(new_data); set_overlay_settings(new_data);
}; };
@@ -137,15 +142,15 @@ const OverlaySettingsContainer = ({
<div className={styles.position_rotation_controls_box}> <div className={styles.position_rotation_controls_box}>
{is_opened_position_controller ? ( {is_opened_position_controller ? (
<PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} /> <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
) : ( ) : (
<RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} /> <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
)} )}
</div> </div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} /> <OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
<RadioButtonContainer <RadioButtonContainer
label={t("config_page.vr.tracker")} label={t("config_page.vr.tracker")}
selectFunction={selectTrackerFunction} selectFunction={(value) => selectFunction("tracker", value)}
name={id} name={id}
options={[ options={[
{ id: "HMD", label: t("config_page.vr.hmd") }, { id: "HMD", label: t("config_page.vr.hmd") },
@@ -180,13 +185,16 @@ const PageSwitcherContainer = (props) => {
); );
}; };
const PositionControls = ({settings, onchangeFunction, ui_configs}) => { const PositionControls = ({settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs}) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className={styles.position_controls}> <div className={styles.position_controls}>
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<label className={clsx(styles.slider_label, styles.x_position_label)}>{t("config_page.vr.x_position")}</label> <p className={clsx(styles.slider_label, styles.x_position_label)}>
{t("config_page.vr.x_position")}
<ResetButton onClickFunction={() => selectFunction("x_pos", default_ui_configs.x_pos)} />
</p>
<Slider <Slider
className={styles.x_position_slider} className={styles.x_position_slider}
variable={settings.x_pos} variable={settings.x_pos}
@@ -197,7 +205,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
/> />
</div> </div>
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<label className={clsx(styles.slider_label, styles.y_position_label)}>{t("config_page.vr.y_position")}</label> <p className={clsx(styles.slider_label, styles.y_position_label)}>
{t("config_page.vr.y_position")}
<ResetButton onClickFunction={() => selectFunction("y_pos", default_ui_configs.y_pos)} />
</p>
<Slider <Slider
className={styles.y_position_slider} className={styles.y_position_slider}
variable={settings.y_pos} variable={settings.y_pos}
@@ -209,7 +220,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
/> />
</div> </div>
<div className={styles.position_wrapper}> <div className={styles.position_wrapper}>
<label className={clsx(styles.slider_label, styles.z_position_label)}>{t("config_page.vr.z_position")}</label> <p className={clsx(styles.slider_label, styles.z_position_label)}>
{t("config_page.vr.z_position")}
<ResetButton onClickFunction={() => selectFunction("z_pos", default_ui_configs.z_pos)} />
</p>
<Slider <Slider
className={styles.z_position_slider} className={styles.z_position_slider}
variable={settings.z_pos} variable={settings.z_pos}
@@ -224,13 +238,16 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
); );
}; };
const RotationControls = ({settings, onchangeFunction}) => { const RotationControls = ({settings, onchangeFunction, selectFunction, default_ui_configs}) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className={styles.rotation_controls}> <div className={styles.rotation_controls}>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
<label className={clsx(styles.slider_label, styles.x_rotation_label)}>{t("config_page.vr.x_rotation")}</label> <p className={clsx(styles.slider_label, styles.x_rotation_label)}>
{t("config_page.vr.x_rotation")}
<ResetButton onClickFunction={() => selectFunction("x_rotation", default_ui_configs.y_pos)} />
</p>
<Slider <Slider
className={styles.x_rotation_slider} className={styles.x_rotation_slider}
variable={-settings.x_rotation} variable={-settings.x_rotation}
@@ -243,7 +260,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
/> />
</div> </div>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
<label className={clsx(styles.slider_label, styles.y_rotation_label)}>{t("config_page.vr.y_rotation")}</label> <p className={clsx(styles.slider_label, styles.y_rotation_label)}>
{t("config_page.vr.y_rotation")}
<ResetButton onClickFunction={() => selectFunction("y_rotation", default_ui_configs.y_pos)} />
</p>
<Slider <Slider
className={styles.y_rotation_slider} className={styles.y_rotation_slider}
variable={settings.y_rotation} variable={settings.y_rotation}
@@ -254,7 +274,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
/> />
</div> </div>
<div className={styles.rotation_wrapper}> <div className={styles.rotation_wrapper}>
<label className={clsx(styles.slider_label, styles.z_rotation_label)}>{t("config_page.vr.z_rotation")}</label> <p className={clsx(styles.slider_label, styles.z_rotation_label)}>
{t("config_page.vr.z_rotation")}
<ResetButton onClickFunction={() => selectFunction("z_rotation", default_ui_configs.y_pos)} />
</p>
<Slider <Slider
className={styles.z_rotation_slider} className={styles.z_rotation_slider}
variable={settings.z_rotation} variable={settings.z_rotation}
@@ -278,9 +301,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
return( return(
<div className={styles.other_controls}> <div className={styles.other_controls}>
<div className={styles.other_controls_wrapper}> <div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}> <p className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
{t("config_page.vr.opacity")} {t("config_page.vr.opacity")}
</label> </p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.opacity_slider)} className={clsx(styles.other_controls_slider, styles.opacity_slider)}
variable={settings.opacity * 100} variable={settings.opacity * 100}
@@ -292,9 +315,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/> />
</div> </div>
<div className={styles.other_controls_wrapper}> <div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}> <p className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
{t("config_page.vr.ui_scaling")} {t("config_page.vr.ui_scaling")}
</label> </p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)} className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
variable={settings.ui_scaling * 100} variable={settings.ui_scaling * 100}
@@ -306,7 +329,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/> />
</div> </div>
<div className={styles.other_controls_wrapper}> <div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</label> <p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.display_duration_slider)} className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
variable={settings.display_duration} variable={settings.display_duration}
@@ -318,7 +341,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/> />
</div> </div>
<div className={styles.other_controls_wrapper}> <div className={styles.other_controls_wrapper}>
<label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</label> <p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
<Slider <Slider
className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)} className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
variable={settings.fadeout_duration} variable={settings.fadeout_duration}
@@ -348,4 +371,12 @@ const CommonSettingsContainer = () => {
/> />
</div> </div>
); );
};
const ResetButton = ({onClickFunction}) => {
return (
<button className={styles.slider_reset_button} onClick={onClickFunction}>
<RedoSvg className={styles.slider_reset_svg}/>
</button>
);
}; };

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

@@ -65,19 +65,24 @@
// } // }
.slider_label { .slider_label {
font-size: 1.6rem; font-size: 1.4rem;
width: 100%; width: 100%;
display: flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
} }
.x_position_label { .x_position_label {
position: absolute; position: absolute;
bottom: -4rem; bottom: -4.6rem;
right: -30%; right: -46%;
text-align: end; justify-content: end;
} }
.y_position_label { .y_position_label {
position: absolute; position: absolute;
top: -36%; top: -44%;
left: 10%; left: 10%;
justify-content: start;
} }
.z_position_label { .z_position_label {
position: absolute; position: absolute;
@@ -123,14 +128,14 @@
.x_rotation_label { .x_rotation_label {
position: absolute; position: absolute;
top: -36%; top: -44%;
left: 10%; left: 10%;
} }
.y_rotation_label { .y_rotation_label {
position: absolute; position: absolute;
bottom: -4rem; bottom: -4.6rem;
right: -30%; right: -46%;
text-align: end; justify-content: end;
} }
.z_rotation_label { .z_rotation_label {
position: absolute; position: absolute;
@@ -163,6 +168,33 @@
height: 100%; height: 100%;
} }
.slider_reset_button {
background-color: var(--dark_850_color);
padding: 0.6rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.4rem;
flex-shrink: 0;
&:hover {
background-color: var(--dark_800_color);
& .slider_reset_svg {
color: var(--dark_200_color);
}
}
&:active {
background-color: var(--dark_900_color);
}
}
.slider_reset_svg {
width: 1.4rem;
color: var(--dark_550_color);
}
.other_controls { .other_controls {
margin-top: 6rem; margin-top: 6rem;
display: flex; display: flex;