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,
} from "@logics_configs";
import RedoSvg from "@images/redo.svg?react";
export const Vr = () => {
const { t } = useTranslation();
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
@@ -53,6 +55,7 @@ export const Vr = () => {
<OverlaySettingsContainer
id="overlay_settings_small"
ui_configs={ui_configs.overlay_small_log}
default_ui_configs={ui_configs.overlay_small_log_default_settings}
current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
@@ -62,6 +65,7 @@ export const Vr = () => {
<OverlaySettingsContainer
id="overlay_settings_large"
ui_configs={ui_configs.overlay_large_log}
default_ui_configs={ui_configs.overlay_large_log_default_settings}
current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
@@ -86,6 +90,7 @@ const OverlaySettingsContainer = ({
current_is_enabled_overlay,
toggle_is_enabled_overlay,
ui_configs,
default_ui_configs,
id
}) => {
@@ -115,8 +120,8 @@ const OverlaySettingsContainer = ({
setTimeoutId(newTimeoutId);
};
const selectTrackerFunction = (value) => {
const new_data = { ...settings, tracker: value };
const selectFunction = (key, value) => {
const new_data = { ...settings, [key]: value };
set_overlay_settings(new_data);
};
@@ -137,15 +142,15 @@ const OverlaySettingsContainer = ({
<div className={styles.position_rotation_controls_box}>
{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>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
<RadioButtonContainer
label={t("config_page.vr.tracker")}
selectFunction={selectTrackerFunction}
selectFunction={(value) => selectFunction("tracker", value)}
name={id}
options={[
{ 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();
return (
<div className={styles.position_controls}>
<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
className={styles.x_position_slider}
variable={settings.x_pos}
@@ -197,7 +205,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
/>
</div>
<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
className={styles.y_position_slider}
variable={settings.y_pos}
@@ -209,7 +220,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
/>
</div>
<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
className={styles.z_position_slider}
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();
return (
<div className={styles.rotation_controls}>
<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
className={styles.x_rotation_slider}
variable={-settings.x_rotation}
@@ -243,7 +260,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
/>
</div>
<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
className={styles.y_rotation_slider}
variable={settings.y_rotation}
@@ -254,7 +274,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
/>
</div>
<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
className={styles.z_rotation_slider}
variable={settings.z_rotation}
@@ -278,9 +301,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
return(
<div className={styles.other_controls}>
<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")}
</label>
</p>
<Slider
className={clsx(styles.other_controls_slider, styles.opacity_slider)}
variable={settings.opacity * 100}
@@ -292,9 +315,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/>
</div>
<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")}
</label>
</p>
<Slider
className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
variable={settings.ui_scaling * 100}
@@ -306,7 +329,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/>
</div>
<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
className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
variable={settings.display_duration}
@@ -318,7 +341,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
/>
</div>
<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
className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
variable={settings.fadeout_duration}
@@ -348,4 +371,12 @@ const CommonSettingsContainer = () => {
/>
</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 {
font-size: 1.6rem;
font-size: 1.4rem;
width: 100%;
display: flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
}
.x_position_label {
position: absolute;
bottom: -4rem;
right: -30%;
text-align: end;
bottom: -4.6rem;
right: -46%;
justify-content: end;
}
.y_position_label {
position: absolute;
top: -36%;
top: -44%;
left: 10%;
justify-content: start;
}
.z_position_label {
position: absolute;
@@ -123,14 +128,14 @@
.x_rotation_label {
position: absolute;
top: -36%;
top: -44%;
left: 10%;
}
.y_rotation_label {
position: absolute;
bottom: -4rem;
right: -30%;
text-align: end;
bottom: -4.6rem;
right: -46%;
justify-content: end;
}
.z_rotation_label {
position: absolute;
@@ -163,6 +168,33 @@
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 {
margin-top: 6rem;
display: flex;