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

[Update] Config Page: VR Tab. Add button that send sample texts to Overlay. per 1 sec for now.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-18 16:31:10 +09:00
parent 8629d9aa4a
commit 8cc66ca0cc
8 changed files with 150 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
locales/en.yml
View File

@@ -200,6 +200,12 @@ config_page:
x_rotation: X-axis rotation
y_rotation: Y-axis rotation
z_rotation: Z-axis rotation
sample_text_button:
start: |-
Send sample texts
to Overlay
stop: Stop Sending
sample_text: Sample text.
opacity: Opacity
ui_scaling: UI Scaling
display_duration: Display duration

10
locales/ja.yml
View File

@@ -193,14 +193,20 @@ config_page:
restore_default_settings: 初期値に戻す
position: 位置
rotation: 回転
opacity: 透明度
ui_scaling: サイズ
x_position: X軸（左右）
y_position: Y軸（上下）
z_position: Z軸（前後）
x_rotation: X軸の回転
y_rotation: Y軸の回転
z_rotation: Z軸の回転
sample_text_button:
start: |-
サンプルテキストを
Overlayに送信する
stop: 送信を停止
sample_text: サンプルテキスト
opacity: 透明度
ui_scaling: サイズ
display_duration: 表示時間
fadeout_duration: フェードアウト時間
common_settings: 共通設定

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

@@ -20,6 +20,7 @@ import {
useIsEnabledOverlayLargeLog,
useOverlayLargeLogSettings,
useOverlayShowOnlyTranslatedMessages,
useSendTextToOverlay,
} from "@logics_configs";
import RedoSvg from "@images/redo.svg?react";
@@ -50,26 +51,26 @@ export const Vr = () => {
is_selected={is_opened_small_settings}
label_1={t("config_page.vr.single_line")}
label_2={t("config_page.vr.multi_lines")}
/>
/>
{is_opened_small_settings ? (
<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}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
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}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
/>
) : (
<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}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
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}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
/>
)}
</div>
@@ -146,6 +147,7 @@ const OverlaySettingsContainer = ({
) : (
<RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
)}
<SendSampleTextToggleButton />
</div>
<OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
<RadioButtonContainer
@@ -380,3 +382,57 @@ const ResetButton = ({onClickFunction}) => {
</button>
);
};
import SquareSvg from "@images/square.svg?react";
import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
const SendSampleTextToggleButton = () => {
const { t } = useTranslation();
const { sendTextToOverlay } = useSendTextToOverlay();
const [is_started, setIsStarted] = useState(false);
useEffect(() => {
let interval_id;
if (is_started) {
interval_id = setInterval(() => {
const text_data = Array.from(
{ length: randomIntMinMax(1, 5) },
() => t("config_page.vr.sample_text_button.sample_text")
).join(" ");
sendTextToOverlay(text_data);
}, 1000);
};
return () => {
if (interval_id) {
clearInterval(interval_id);
}
};
}, [is_started]);
const toggleFunction = () => {
setIsStarted(!is_started);
};
const label = is_started
? t("config_page.vr.sample_text_button.stop")
: t("config_page.vr.sample_text_button.start");
return (
<div className={styles.sample_text_button_wrapper}>
<button
className={clsx(styles.sample_text_button, { [styles.is_started]: is_started })}
onClick={toggleFunction}
>
{is_started ? (
<SquareSvg className={styles.sample_text_button_square_svg} />
) : (
<TriangleSvg className={styles.sample_text_button_triangle_svg} />
)}
</button>
<p className={styles.sample_text_button_label}>{label}</p>
</div>
);
};

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

@@ -56,6 +56,54 @@
transform: translate(-10%);
}
.sample_text_button_wrapper {
position: absolute;
bottom: 0;
left: -74%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sample_text_button {
background-color: var(--dark_850_color);
padding: 1.8rem;
border-radius: 50%;
&:hover {
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_925_color);
}
&.is_started {
background-color: var(--primary_600_color);
&:hover {
background-color: var(--primary_500_color);
}
&:active {
background-color: var(--primary_700_color);
}
}
}
.sample_text_button_triangle_svg, .sample_text_button_square_svg {
width: 2.4rem;
}
.sample_text_button_triangle_svg {
transform: translateX(10%) rotate(90deg);
}
.sample_text_button_label {
color: var(--dark_basic_text_color);
position: absolute;
left: 50%;
top: 110%;
// bottom: -2rem;
transform: translateX(-50%);
white-space: pre-wrap;
font-size: 1.2rem;
width: max-content;
text-align: center;
}
// .position_controls {
// background-color: gray;
// }

1
src-ui/assets/triangle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.574 3.712c.195-.323.662-.323.857 0l9.37 15.545c.2.333-.039.757-.429.757l-18.668-.006c-.385 0-.629-.422-.428-.758l9.298-15.538zm.429-2.483c-.76 0-1.521.37-1.966 1.111l-9.707 16.18c-.915 1.523.182 3.472 1.965 3.472h19.416c1.783 0 2.879-1.949 1.965-3.472l-9.707-16.18c-.446-.741-1.205-1.111-1.966-1.111z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 382 B

1
src-ui/logics/configs/index.js
View File

@@ -49,6 +49,7 @@ export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
export { useSendTextToOverlay } from "./vr/useSendTextToOverlay";
export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
export { useOscPort } from "./advanced_settings/useOscPort";

13
src-ui/logics/configs/vr/useSendTextToOverlay.js Normal file
View File

@@ -0,0 +1,13 @@
import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useSendTextToOverlay = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const sendTextToOverlay = (text) => {
asyncStdoutToPython("/run/send_text_overlay_small_log", text);
};
return {
sendTextToOverlay,
};
};

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

@@ -427,6 +427,8 @@ export const useReceiveRoutes = () => {
"/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
"/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
"/run/send_text_overlay_small_log": () => {},
// Others Tab
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,