diff --git a/src-python/config.py b/src-python/config.py
index bc61ccd5..7b41b86f 100644
--- a/src-python/config.py
+++ b/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"
diff --git a/src-python/webui_controller.py b/src-python/webui_controller.py
index b449aaf8..953f3f5d 100644
--- a/src-python/webui_controller.py
+++ b/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
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 70c6d465..a420562e 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -14,6 +14,7 @@ export const App = () => {
+
);
};
@@ -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;
};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index de5223e2..36f38671 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/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 (
<>
-
+
+
@@ -107,3 +95,49 @@ const UiLanguageContainer = () => {
);
};
+
+
+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 (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx b/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx
index bcfb3458..280ec3f9 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.jsx
+++ b/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 (
- props.onchangeFunction(value)}
+ onChangeCommitted={(_e, value) => props.onchangeCommittedFunction(value)}
+ marks={props.marks}
+ track={props.track}
+ sx={{
+ color: baseColor,
+ "& .MuiSlider-thumb": {
+ backgroundColor: activeColor,
+ "&:hover, &.Mui-focusVisible, &.Mui-active": {
+ boxShadow: "0 0 0 0.8rem" + activeColor + "44",
+ },
+ "& .MuiSlider-valueLabel": {
+ fontSize: "1.4rem",
+ 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,
}
- }
- },
- }}
- />
+ }}
+ />
);
};
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss
index a6c960ff..873029b1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/slider/Slider.module.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
index e82175e8..d30197b2 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx
+++ b/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 (
+
+
+
+
+ );
+};
+
export const useSettingBox = () => {
- const SliderContainer = (props) => {
- return (
-
-
-
-
- );
- };
const CheckboxContainer = (props) => {
return (
@@ -121,7 +122,6 @@ export const useSettingBox = () => {
};
return {
- SliderContainer,
CheckboxContainer,
SwitchboxContainer,
EntryContainer,
diff --git a/src-ui/logics/configs/useUiScaling.js b/src-ui/logics/configs/useUiScaling.js
new file mode 100644
index 00000000..501118f1
--- /dev/null
+++ b/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,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index d0880152..0b07554f 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/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,
diff --git a/src-ui/store.js b/src-ui/store.js
index 363c21fb..28297dfa 100644
--- a/src-ui/store.js
+++ b/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");