[Update] Config Page: VR Tab. Change the design.

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
+import { clsx } from "clsx";
 
 export const Slider = (props) => {
     const [baseColor, setBaseColor] = useState("");
@@ -17,7 +18,7 @@ export const Slider = (props) => {
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={clsx(styles.container, props.className)}>
             <MUI_Slider
                 className={styles.range_slider}
                 aria-label="Default"
@@ -31,6 +32,7 @@ export const Slider = (props) => {
                 marks={props.marks}
                 track={props.track}
                 orientation={props.orientation}
+                valueLabelFormat={props.valueLabelFormat ? props.valueLabelFormat : null}
                 sx={{
                     color: baseColor,
                     "& .MuiSlider-thumb": {
@@ -43,18 +45,19 @@ export const Slider = (props) => {
                             backgroundColor: toolTipColor,
                             padding: "0.6rem 1rem",
                             lineHeight: "1.15",
-                            top: "-1.4rem",
+                            // top: "-1.4rem",
-                            "&::before": {
+                            // "&::before": {
-                                left: "30%",
+                            //     left: "30%",
-                                width: "1rem",
+                            //     width: "1rem",
-                                height: "1rem",
+                            //     height: "1rem",
-                                clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+                            //     clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
-                            },
+                            // },
                         },
                     },
                     "& .MuiSlider-markLabel": {
                         fontSize: "1.4rem",
                         color: "white",
+                        whiteSpace: "nowrap",
                     },
                     "& .MuiSlider-markLabelActive": {
                         color: activeColor,

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.module.scss

@@ -4,7 +4,7 @@
     align-items: center; // 中央に揃え
     justify-content: center;
     width: 100%;
-    padding-left: 4rem;
+    // padding-left: 4rem;
 }
 
 .range_slider {

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

@@ -1,21 +1,151 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
+import { clsx } from "clsx";
 
 export const Vr = () => {
+    const { t } = useTranslation();
+    const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
+
+    const toggleController = () => {
+        setIsOpenedPositionController(!is_opened_position_controller);
+    };
+
+    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
+    });
+
+    return (
+        <div className={styles.container}>
+            <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>
+            <div className={styles.position_rotation_controls_box}>
+                {is_opened_position_controller
+                ? <PositionControls />
+                : <RotationControls />
+            }
+            </div>
+            <OtherControls />
+
+        </div>
+    );
+};
+
+const PositionControls = () => {
+    const { t } = useTranslation();
     const [position, setPosition] = useState({ x: 0, y: 0, z: 0 });
-    const [rotation, setRotation] = useState({ rotate_x: 0, rotate_y: 0, rotate_z: 0 });
-    const [opacity, setOpacity] = useState(1);
-    const [ui_scaling, setUiScaling] = useState(100);
 
     const handlePositionChange = (axis, value) => {
         setPosition((prev) => ({ ...prev, [axis]: value }));
     };
 
+    return (
+        <div className={styles.position_controls}>
+            <div className={styles.position_wrapper}>
+                <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)}
+                />
+            </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)}
+                    orientation="vertical"
+                />
+            </div>
+            <div className={styles.position_wrapper}>
+                <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)}
+                    orientation="vertical"
+                />
+            </div>
+        </div>
+    );
+};
+const RotationControls = () => {
+    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}>
+            <div className={styles.rotation_wrapper}>
+                <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}
+                    min={-180}
+                    max={180}
+                    onchangeFunction={(value) => handleRotationChange("rotate_x", -value)}
+                    orientation="vertical"
+                />
+            </div>
+            <div className={styles.rotation_wrapper}>
+                <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}
+                    min={-180}
+                    max={180}
+                    onchangeFunction={(value) => handleRotationChange("rotate_y", 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}
+                    min={-180}
+                    max={180}
+                    onchangeFunction={(value) => handleRotationChange("rotate_z", value)}
+                    orientation="vertical"
+                />
+            </div>
+        </div>
+    );
+};
+
+
+const OtherControls = () => {
+    const { t } = useTranslation();
+    const [opacity, setOpacity] = useState(1);
+    const [ui_scaling, setUiScaling] = useState(100);
+
     const handleOpacityChange = (value) => {
         setOpacity(value / 100);
     };
@@ -24,126 +154,70 @@ export const Vr = () => {
         setUiScaling(value);
     };
 
+    const ui_variable_opacity = (opacity * 100).toFixed(0);
 
-    const scale = position.z >= 0
+    const [display_duration, setDisplayDuration] = useState(5);
-        ? (1 - position.z / 200) * (ui_scaling / 100)
+    const [fadeout_duration, setFadeoutDuration] = useState(2);
-        : (1 + Math.abs(position.z) / 200) * (ui_scaling / 100);
+
+    const handleDisplayDurationChange = (value) => {
+        setDisplayDuration(value);
+    };
+
+    const handleFadeoutDurationChange = (value) => {
+        setFadeoutDuration(value);
+    };
 
 
-    const x_factor = Math.min(Math.abs(position.x) / 100, 1);
+    return(
-    const y_factor = Math.min(Math.abs(position.y) / 100, 1);
+        <div className={styles.other_controls}>
-
+            <div className={styles.other_controls_wrapper}>
-    const translate_x = position.x + (position.z * x_factor * (position.x >= 0 ? -1 : 1));
+                <label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>{t("overlay_settings.opacity")}</label>
-    const translate_y = -1 * (position.y + (position.z * y_factor * (position.y >= 0 ? -1 : 1)));
+                <Slider
-
+                    className={clsx(styles.other_controls_slider, styles.opacity_slider)}
-
+                    variable={(opacity * 100)}
-    return (
+                    valueLabelFormat={`${ui_variable_opacity}%`}
-        <div className={styles.app}>
+                    step={5}
-            <div className={styles.canvas_container}>
+                    min={10}
-                <div className={styles.z_position}>
+                    max={100}
-                    <label>Z Position</label>
+                    onchangeFunction={handleOpacityChange}
-                    <Slider
+                />
-                        variable={position.z}
-                        step={1}
-                        min={-100}
-                        max={100}
-                        onchangeFunction={(value) => handlePositionChange("z", value)}
-                        orientation="vertical"
-                    />
-                </div>
-                <div className={styles.canvas}>
-                    <div
-                        className={styles.chat_box}
-                        style={{
-                            transform: `
-                                translate(${translate_x}px, ${translate_y}px)
-                                scale(${scale})
-                                rotateX(${rotation.rotate_x}deg)
-                                rotateY(${rotation.rotate_y}deg)
-                                rotateZ(${rotation.rotate_z}deg)
-                            `,
-                            opacity: opacity
-                        }}
-                    >
-                        <p className={styles.chat_text}>
-                            実際の表示とは大きく違います。これはただのイメージ図です。
-                        </p>
-                    </div>
-                </div>
-                <div className={styles.y_position}>
-                    <label>Y Position</label>
-                    <Slider
-                        variable={position.y}
-                        step={1}
-                        min={-100}
-                        max={100}
-                        onchangeFunction={(value) => handlePositionChange("y", value)}
-                        orientation="vertical"
-                    />
-                </div>
-                <div className={styles.x_position}>
-                    <label>X Position</label>
-                    <Slider
-                        variable={position.x}
-                        step={1}
-                        min={-100}
-                        max={100}
-                        onchangeFunction={(value) => handlePositionChange("x", value)}
-                    />
-                </div>
             </div>
-            <div className={styles.other_controls}>
+            <div className={styles.other_controls_wrapper}>
-                <div className={styles.x_rotation}>
+                <label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>{t("overlay_settings.ui_scaling")}</label>
-                    <label>X Rotation</label>
+                <Slider
-                    <Slider
+                    className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
-                        variable={rotation.rotate_x}
+                    variable={ui_scaling}
-                        step={1}
+                    valueLabelFormat={`${ui_scaling}%`}
-                        min={-180}
+                    step={10}
-                        max={180}
+                    min={40}
-                        onchangeFunction={(value) => handleRotationChange("rotate_x", value)}
+                    max={200}
-                    />
+                    onchangeFunction={handleUiScalingChange}
-                </div>
+                />
-                <div className={styles.y_rotation}>
+            </div>
-                    <label>Y Rotation</label>
+            <div className={styles.other_controls_wrapper}>
-                    <Slider
+                <label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("overlay_settings.display_duration")}</label>
-                        variable={rotation.rotate_y}
+                <Slider
-                        step={1}
+                    className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
-                        min={-180}
+                    variable={display_duration}
-                        max={180}
+                    valueLabelFormat={`${display_duration} second(s)`}
-                        onchangeFunction={(value) => handleRotationChange("rotate_y", value)}
+                    step={1}
-                    />
+                    min={1}
-                </div>
+                    max={60}
-                <div className={styles.z_rotation}>
+                    onchangeFunction={handleDisplayDurationChange}
-                    <label>Z Rotation</label>
+                />
-                    <Slider
+            </div>
-                        variable={rotation.rotate_z}
+            <div className={styles.other_controls_wrapper}>
-                        step={1}
+                <label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("overlay_settings.fadeout_duration")}</label>
-                        min={-180}
+                <Slider
-                        max={180}
+                    className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
-                        onchangeFunction={(value) => handleRotationChange("rotate_z", value)}
+                    variable={fadeout_duration}
-                    />
+                    valueLabelFormat={`${fadeout_duration} second(s)`}
-                </div>
+                    step={1}
-                <div className={styles.opacity}>
+                    min={0}
-                    <label>Opacity</label>
+                    max={5}
-                    <Slider
+                    onchangeFunction={handleFadeoutDurationChange}
-                        variable={opacity * 100}
+                />
-                        step={1}
-                        min={0}
-                        max={100}
-                        onchangeFunction={handleOpacityChange}
-                    />
-                </div>
-                <div className={styles.ui_scaling}>
-                    <label>UI Scaling</label>
-                    <Slider
-                        variable={ui_scaling}
-                        step={1}
-                        min={40}
-                        max={200}
-                        onchangeFunction={handleUiScalingChange}
-                    />
-                </div>
             </div>
         </div>
     );
-};
+};

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

@@ -1,79 +1,182 @@
-.app {
+.container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
-    margin-top: 4rem;
+    padding: 2rem;
 }
 
-.canvas_container {
+.controller_type_switch {
-    display: flex;
-    position: relative;
-}
-
-.canvas {
-    width: 40rem;
-    height: 30rem;
-    border: 0.1rem solid #fff;
-    background-color: var(--dark_800_color);
     display: flex;
+    border: 0.1rem solid var(--dark_600_color);
+    border-radius: 0.4rem;
+    width: 50%;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    color: var(--dark_600_color);
+    &:hover {
+        color: var(--dark_400_color);
+    }
+}
+.controller_type_switcher {
+    width: 100%;
+    &.is_selected {
+        background-color: var(--dark_850_color);
+    }
+    &.is_selected .controller_switcher_label {
+        color: var(--dark_basic_text_color);
+    }
+}
+.controller_switcher_label {
+    padding: 1rem;
+    font-size: 1.6rem;
+}
+
+.position_rotation_controls_box {
+    margin-top: 14rem;
     position: relative;
+    aspect-ratio: 1 / 1;
+    width: 36%;
+    max-width: 40rem;
+    transform: translate(-10%);
 }
 
-.chat_box {
+// .position_controls {
-    max-width: 20rem;
+//     background-color: gray;
-    background-color: #33363a;
+// }
-    border-radius: 0.4rem;
-    padding: 1.2rem;
-    position: absolute;
-    transform-origin: center;
-    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
-}
 
-.chat_text {
+// .position_wrapper {
-    font-size: 1.2rem;
+//     background-color: gray;
-}
+// }
 
-.x_position {
+.slider_label {
-    position: absolute;
+    font-size: 1.6rem;
-    bottom: -6rem;
-    left: 50%;
-    transform: translateX(-50%);
     width: 100%;
 }
-
+.x_position_label {
-.y_position {
     position: absolute;
-    right: -8rem;
+    bottom: -4rem;
-    top: 50%;
+    right: -30%;
-    transform: translateY(-50%);
+    text-align: end;
-    writing-mode: vertical-rl;
+}
-    text-orientation: mixed;
+.y_position_label {
+    position: absolute;
+    top: -27%;
+    left: 10%;
+}
+.z_position_label {
+    position: absolute;
+    top: 30%;
+    left: 80%;
+}
+
+.x_position_slider {
+    position: absolute;
+    bottom: 0;
+    left: 27%;
+    width: 100%;
+    height: 0%;
+}
+
+.y_position_slider {
+    position: absolute;
+    bottom: 27%;
+    left: 0;
+    width: 0%;
     height: 100%;
 }
 
-.z_position {
+.z_position_slider {
     position: absolute;
-    left: -8rem;
+    bottom: 61%;
-    top: 50%;
+    left: 61%;
-    transform: translateY(-50%);
+    transform: translate(50%,50%) rotate(45deg);
-    writing-mode: vertical-rl;
+    width: 0%;
-    text-orientation: mixed;
     height: 100%;
 }
 
+
+
+
+// .rotation_controls {
+//     background-color: gray;
+// }
+
+// .rotation_wrapper {
+//     background-color: gray;
+// }
+
+.x_rotation_label {
+    position: absolute;
+    top: -27%;
+    left: 10%;
+}
+.y_rotation_label {
+    position: absolute;
+    bottom: -4rem;
+    right: -30%;
+    text-align: end;
+}
+.z_rotation_label {
+    position: absolute;
+    top: -10%;
+    right: -110%;
+}
+
+.x_rotation_slider {
+    position: absolute;
+    bottom: 27%;
+    left: 0;
+    width: 0%;
+    height: 100%;
+}
+
+.y_rotation_slider {
+    position: absolute;
+    bottom: 0;
+    left: 27%;
+    width: 100%;
+    height: 0%;
+}
+
+.z_rotation_slider {
+    position: absolute;
+    bottom: 90%;
+    left: 100%;
+    transform: translate(50%,50%) rotate(-45deg);
+    width: 0%;
+    height: 100%;
+}
+
+
+
+
 .other_controls {
     margin-top: 10rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 1rem;
+    gap: 2rem;
     width: 100%;
+    max-width: 56rem;
 }
 
-.x_rotation, .y_rotation, .z_rotation, .opacity, .ui_scaling {
+.other_controls_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+}
+.other_controls_slider {
+    margin-left: 18rem;
+}
+
+.other_controls_slider_label {
+    position: absolute;
+    font-size: 1.6rem;
     width: 100%;
 }