Merge branch 'add_ui_scaling' into for_webui

src-python/config.py

@@ -366,7 +366,7 @@ class Config:
 
     @UI_SCALING.setter
     def UI_SCALING(self, value):
-        if value in self.UI_SCALING_LIST:
+        if isinstance(value, int):
             self._UI_SCALING = value
             saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value)
 
@@ -1088,7 +1088,7 @@ class Config:
         ## Config Window
         self._TRANSPARENCY = 100
         self._APPEARANCE_THEME = "Dark"
-        self._UI_SCALING = "100%"
+        self._UI_SCALING = 100
         self._TEXTBOX_UI_SCALING = 100
         self._MESSAGE_BOX_RATIO = 10
         self._FONT_FAMILY = "Yu Gothic UI"

src-python/webui_controller.py

@@ -533,7 +533,7 @@ class Controller:
 
     @staticmethod
     def setUiScaling(data, *args, **kwargs) -> dict:
-        config.UI_SCALING = data
+        config.UI_SCALING = int(data)
         return {"status":200, "result":config.UI_SCALING}
 
     @staticmethod

src-ui/app/App.jsx

@@ -14,6 +14,7 @@ export const App = () => {
             <ConfigPageCloseTrigger />
             <ConfigPage />
             <MainPage />
+            <UiSizeController />
         </div>
     );
 };
@@ -30,6 +31,7 @@ import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
+import { useUiScaling } from "@logics_configs/useUiScaling";
 
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -61,6 +63,7 @@ const StartPythonFacadeComponent = () => {
     const { getEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
+    const { getUiScaling } = useUiScaling();
 
     const {
         getSelectedPresetTabNumber,
@@ -79,6 +82,7 @@ const StartPythonFacadeComponent = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getUiLanguage();
+                getUiScaling();
                 getIsMainPageCompactMode();
                 getMessageInputBoxRatio();
 
@@ -147,5 +151,17 @@ const ConfigPageCloseTrigger = () => {
             if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
         }
     }, [currentIsOpenedConfigPage]);
+    return null;
+};
+
+import React from "react";
+const UiSizeController = () => {
+    const { currentUiScaling } = useUiScaling();
+    const font_size = 62.5 * currentUiScaling.data / 100;
+
+    useEffect(() => {
+        document.documentElement.style.setProperty("font-size", `${font_size}%`);
+    }, [currentUiScaling.data]);
+
     return null;
 };

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -20,22 +20,10 @@ export const Appearance = () => {
         // ActionButtonContainer,
     } = useSettingBox();
 
-    const selectFunction = (selected_data) => {
-        const asyncFunction = () => {
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    resolve(selected_data.selected_id);
-                }, 3000);
-            });
-        };
-        updateSelectedMicDevice(asyncFunction);
-    };
-
     return (
         <>
-            <UiLanguageContainer
+            <UiLanguageContainer />
-
+            <UiScalingContainer />
-            />
 
 
 
@@ -107,3 +95,49 @@ const UiLanguageContainer = () => {
         </div>
     );
 };
+
+
+import { useUiScaling } from "@logics_configs/useUiScaling";
+import { SliderContainer } from "../components/useSettingBox";
+
+import { useEffect, useState } from "react";
+const UiScalingContainer = () => {
+    const { t } = useTranslation();
+    const { currentUiScaling, setUiScaling } = useUiScaling();
+    const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
+
+    const onchangeFunction = (value) => {
+        setUiUiScaling(value);
+    };
+    const onchangeCommittedFunction = (value) => {
+        setUiScaling(value);
+    };
+    useEffect(() => {
+        setUiUiScaling(currentUiScaling.data);
+    }, [currentUiScaling.data]);
+
+    const createMarks = (min, max) => {
+        const marks = [];
+        for (let value = min; value <= max; value += 10) {
+            const label = ([50,70,130,140,160,170,190].includes(value)) ? "" : value;
+            marks.push({ value, label: `${label}` });
+        }
+        return marks;
+    };
+
+    const marks = createMarks(40, 200);
+
+    return (
+        <SliderContainer
+            label={t("config_page.ui_size.label") + " (%)"}
+            min="40"
+            max="200"
+            onchangeCommittedFunction={onchangeCommittedFunction}
+            onchangeFunction={onchangeFunction}
+            variable={ui_ui_scaling}
+            marks={marks}
+            step={null}
+            track={false}
+        />
+    );
+};

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

@@ -2,54 +2,65 @@ import React, { useState, useEffect } from "react";
 import styles from "./Slider.module.scss";
 import MUI_Slider from "@mui/material/Slider";
 
-export const Slider = ({ min, max }) => {
+export const Slider = (props) => {
     const [baseColor, setBaseColor] = useState("");
     const [activeColor, setActiveColor] = useState("");
     const [toolTipColor, setToolTipColor] = useState("");
 
     useEffect(() => {
         const baseColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_700_color");
-        const activeColor = getComputedStyle(document.documentElement).getPropertyValue("--primary_600_color");
-        const toolTipColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_800_color");
         setBaseColor(baseColor.trim());
+        const activeColor = getComputedStyle(document.documentElement).getPropertyValue("--primary_600_color");
         setActiveColor(activeColor.trim());
+        const toolTipColor = getComputedStyle(document.documentElement).getPropertyValue("--dark_800_color");
         setToolTipColor(toolTipColor.trim());
     }, []);
 
-    const showSliderValue = (_e, value) => {
-        console.log(value);
-    };
-
     return (
         <div className={styles.container}>
-        <MUI_Slider className={styles.range_slider} defaultValue={50} aria-label="Default" valueLabelDisplay="auto"
+            <MUI_Slider
-        step={1}
+                className={styles.range_slider}
-        min={Number(min)}
+                defaultValue={50}
-        max={Number(max)}
+                aria-label="Default"
-        onChange={showSliderValue}
+                valueLabelDisplay="auto"
-        sx={{
+                value={props.variable}
-            color: baseColor,
+                step={props.step}
-                "& .MuiSlider-thumb": {
+                min={Number(props.min)}
-                    backgroundColor: activeColor,
+                max={Number(props.max)}
-                    "&:hover, &.Mui-focusVisible, &.Mui-active": {
+                onChange={(_e, value) => props.onchangeFunction(value)}
-                        boxShadow: "0 0 0 0.8rem" + activeColor + "44",
+                onChangeCommitted={(_e, value) => props.onchangeCommittedFunction(value)}
-                    },
+                marks={props.marks}
-                    "& .MuiSlider-valueLabel": {
+                track={props.track}
-                        fontSize: "1.4rem",
+                sx={{
-                        backgroundColor: toolTipColor,
+                    color: baseColor,
-                        padding: "0.6rem 1rem",
+                        "& .MuiSlider-thumb": {
-                        lineHeight: "1.15",
+                            backgroundColor: activeColor,
-                        top: "-1.4rem",
+                            "&:hover, &.Mui-focusVisible, &.Mui-active": {
-                        "&::before": {
+                                boxShadow: "0 0 0 0.8rem" + activeColor + "44",
-                            left: "30%",
+                            },
-                            width: "1rem",
+                            "& .MuiSlider-valueLabel": {
-                            height: "1rem",
+                                fontSize: "1.4rem",
-                            clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+                                backgroundColor: toolTipColor,
+                                padding: "0.6rem 1rem",
+                                lineHeight: "1.15",
+                                top: "-1.4rem",
+                                "&::before": {
+                                    left: "30%",
+                                    width: "1rem",
+                                    height: "1rem",
+                                    clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+                                }
+                            }
+                        },
+                        "& .MuiSlider-markLabel": {
+                            fontSize: "1.4rem",
+                            color: "white"
+                        },
+                        "& .MuiSlider-markLabelActive": {
+                            color: activeColor,
                         }
-                    }
+                    }}
-                },
+            />
-            }}
-        />
         </div>
     );
 };

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

@@ -4,8 +4,9 @@
     align-items: end;
     justify-content: center;
     width: 100%;
+    padding-left: 4rem;
 }
 
 .range_slider {
-    max-width: 40rem;
+    // max-width: 60rem;
 }

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -36,15 +36,16 @@ export const DropdownMenuContainer = (props) => {
 };
 
 
+export const SliderContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <Slider {...props}/>
+        </div>
+    );
+};
+
 export const useSettingBox = () => {
-    const SliderContainer = (props) => {
-        return (
-            <div className={styles.container}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <Slider {...props}/>
-            </div>
-        );
-    };
 
     const CheckboxContainer = (props) => {
         return (
@@ -121,7 +122,6 @@ export const useSettingBox = () => {
     };
 
     return {
-        SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,

src-ui/logics/configs/useUiScaling.js

@@ -0,0 +1,24 @@
+import { useStore_UiScaling } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useUiScaling = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentUiScaling, updateUiScaling, pendingUiScaling } = useStore_UiScaling();
+
+    const getUiScaling = () => {
+        pendingUiScaling();
+        asyncStdoutToPython("/get/data/ui_scaling");
+    };
+
+    const setUiScaling = (selected_ui_scaling) => {
+        pendingUiScaling();
+        asyncStdoutToPython("/set/data/ui_scaling", selected_ui_scaling);
+    };
+
+    return {
+        currentUiScaling,
+        getUiScaling,
+        updateUiScaling,
+        setUiScaling,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -27,6 +27,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
+import { useUiScaling } from "@logics_configs/useUiScaling";
 
 export const useReceiveRoutes = () => {
     const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -63,6 +64,7 @@ export const useReceiveRoutes = () => {
     const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
     const { updateSendMessageButtonType } = useSendMessageButtonType();
     const { updateUiLanguage } = useUiLanguage();
+    const { updateUiScaling } = useUiScaling();
     const {
         updateVolumeVariable_Mic,
         updateVolumeVariable_Speaker,
@@ -198,6 +200,9 @@ export const useReceiveRoutes = () => {
         "/get/data/ui_language": updateUiLanguage,
         "/set/data/ui_language": updateUiLanguage,
 
+        "/get/data/ui_scaling": updateUiScaling,
+        "/set/data/ui_scaling": updateUiScaling,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,

src-ui/store.js

@@ -165,6 +165,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
 
 // Appearance
 export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
+export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
 
 
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");