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

[Update] Add Ui Scaling.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-27 07:48:29 +09:00
parent 4bd659103b
commit 14843066bb
10 changed files with 153 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-python/config.py
View File

@@ -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"

2
src-python/webui_controller.py
View File

@@ -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

16
src-ui/app/App.jsx
View File

@@ -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;
};

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

@@ -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}
/>
);
};

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

@@ -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"
step={1}
min={Number(min)}
max={Number(max)}
onChange={showSliderValue}
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%)",
<MUI_Slider
className={styles.range_slider}
defaultValue={50}
aria-label="Default"
valueLabelDisplay="auto"
value={props.variable}
step={props.step}
min={Number(props.min)}
max={Number(props.max)}
onChange={(_e, value) => 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,
}
}
},
}}
/>
}}
/>
</div>
);
};

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

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

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

@@ -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,

24
src-ui/logics/configs/useUiScaling.js Normal file
View File

@@ -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,
};
};

5
src-ui/logics/useReceiveRoutes.js
View File

@@ -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,

1
src-ui/store.js
View File

@@ -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");