diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx index c7eee76..1c22a6b 100644 --- a/src/components/Controller/Controller.tsx +++ b/src/components/Controller/Controller.tsx @@ -1,6 +1,11 @@ "use client"; -import { faRotate, faCheckCircle } from "@fortawesome/free-solid-svg-icons"; +import { + faRotate, + faCheckCircle, + faGears, + faGear, +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { ChangeEvent, useEffect, useRef, useState } from "react"; import { Console } from "@/components/Console/Console"; @@ -16,7 +21,7 @@ import { useSerial } from "@/components/SerialLoader/SerialLoader"; import ToggleSwitch from "@/components/ToggleSwitch/ToggleSwitch"; import { useDeviceSetup } from "@/hooks/useDeviceSetup"; import { useScreenFrame } from "@/hooks/useScreenFrame"; -import { ILatestVersions } from "@/types"; +import { ConfigItem, ILatestVersions, IUIConfig } from "@/types"; import { downloadFileFromUrl, useWriteCommand } from "@/utils/serialUtils"; import { getVersionType, @@ -42,6 +47,40 @@ const Controller = () => { const firmwareFileInputRef = useRef(null); const scriptFileInputRef = useRef(null); + const [UIConfigurationOpen, setUIConfigurationOpen] = + useState(false); + const [UIConfig, setUiConfig] = useState({ + screenHide: false, + controlButtonsHide: false, + fileSystemHide: false, + serialConsoleHide: false, + firmwareManagerHide: false, + }); + + const uiConfigItems: ConfigItem[] = [ + { + key: "controlButtonsHide", + label: "Hide Control Buttons", + }, + { + key: "screenHide", + label: "Hide Screen", + onToggle: () => toggleLiveScreen(!UIConfig.screenHide), + }, + { + key: "fileSystemHide", + label: "Hide File System", + }, + { + key: "serialConsoleHide", + label: "Hide Serial Console", + }, + { + key: "firmwareManagerHide", + label: "Hide Firmware Manager", + }, + ]; + const { serial, consoleMessage } = useSerial(); const { write, uploadFile, disableTransmitAction, setLoadingFrame } = useWriteCommand(); @@ -59,29 +98,6 @@ const Controller = () => { setCommand(""); }; - useEffect(() => { - // We dont add this to the console as its not needed. This may change in the future - if (consoleMessage.startsWith("screenframe")) { - renderFrame(consoleMessage); - setLoadingFrame(false); - } else { - setConsoleMessageList( - (prevConsoleMessageList) => prevConsoleMessageList + consoleMessage - ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [consoleMessage]); - - useEffect(() => { - let serial_console = document.getElementById( - "serial_console" - ) as HTMLElement; - - if (!!serial_console) { - serial_console.scrollTop = serial_console.scrollHeight; - } - }, [consoleMessageList]); - const handleKeyDown = (e: React.KeyboardEvent) => { if ( (e.key.length === 1 && /[a-zA-Z0-9 \\.]/.test(e.key)) || @@ -266,6 +282,52 @@ const Controller = () => { } }; + const handleUpdateUiHide = ( + value: boolean, + key: keyof IUIConfig, + setInState: (stateValue: boolean) => void + ) => { + const updatedValue = !value; + const newConfig = { ...UIConfig, [key]: updatedValue }; + localStorage.setItem("uiConfig", JSON.stringify(newConfig)); + setInState(updatedValue); + }; + + const toggleLiveScreen = (shouldUpdate: boolean) => { + if (!shouldUpdate) write("screenframeshort", false); + setAutoUpdateFrame(!shouldUpdate); + }; + + useEffect(() => { + // We dont add this to the console as its not needed. This may change in the future + if (consoleMessage.startsWith("screenframe")) { + if (!UIConfig.screenHide) renderFrame(consoleMessage); + setLoadingFrame(false); + } else { + setConsoleMessageList( + (prevConsoleMessageList) => prevConsoleMessageList + consoleMessage + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [consoleMessage]); + + useEffect(() => { + let serial_console = document.getElementById( + "serial_console" + ) as HTMLElement; + + if (!!serial_console) { + serial_console.scrollTop = serial_console.scrollHeight; + } + }, [consoleMessageList]); + + useEffect(() => { + const storedConfig = localStorage.getItem("uiConfig"); + if (storedConfig) { + setUiConfig(JSON.parse(storedConfig)); + } + }, []); + return ( <> {setupComplete ? ( @@ -279,58 +341,63 @@ const Controller = () => { {!serial.isReading && "Please enable the console, so the buttons can also be enabled!"} -
{ - handleKeyDown(e); - }} - > + {(!UIConfig.screenHide || !UIConfig.controlButtonsHide) && (
{ + handleKeyDown(e); + }} > - - -
-

Live Screen

-
- { - if (!autoUpdateFrame) write("screenframeshort", false); - setAutoUpdateFrame(!autoUpdateFrame); - }} - /> - } - disabled={disableTransmitAction} - onClickFunction={() => { - if (!disableTransmitAction) { - setLoadingFrame(true); - write("screenframeshort", false); - } - }} - className={"h-6 w-6 rounded-sm bg-green-500"} - shortcutKeys={"mod+R"} + {!UIConfig.screenHide && ( +
+ + +
+

Live Screen

+
+ { + toggleLiveScreen(autoUpdateFrame); + }} + /> + } + disabled={disableTransmitAction} + onClickFunction={() => { + if (!disableTransmitAction) { + setLoadingFrame(true); + write("screenframeshort", false); + } + }} + className={"size-6 min-w-6 rounded-sm bg-green-500"} + shortcutKeys={"mod+R"} + /> +
+
-
-
+ )} - -
+ {!UIConfig.controlButtonsHide && ( + + )} +
+ )} {!serial.isReading ? ( ) : ( <> -
- - -
-
-

- Firmware Version: {deviceVersion} -

+ {(!UIConfig.fileSystemHide || !UIConfig.serialConsoleHide) && ( +
+ {!UIConfig.fileSystemHide && ( + + )} + {!UIConfig.serialConsoleHide && ( + + )} +
+ )} + {!UIConfig.firmwareManagerHide && ( +
+

+ Firmware Version: {deviceVersion} +

+ +
+ )} +
@@ -410,6 +493,34 @@ const Controller = () => { /> )} + setUIConfigurationOpen(false)} + className="w-[20%]" + > +
+
+ {uiConfigItems.map((item) => ( + { + handleUpdateUiHide( + UIConfig[item.key], + item.key, + (updatedValue) => { + setUiConfig({ ...UIConfig, [item.key]: updatedValue }); + item.onToggle?.(); + } + ); + }} + /> + ))} +
+
+
); }; diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx index 6c6d613..ee92d9b 100644 --- a/src/components/ToggleSwitch/ToggleSwitch.tsx +++ b/src/components/ToggleSwitch/ToggleSwitch.tsx @@ -1,17 +1,29 @@ type IToggleSwitch = { isToggle: boolean; + toggleLabel?: string; toggleSwitch: () => void; }; -const ToggleSwitch: React.FC = ({ isToggle, toggleSwitch }) => { +const ToggleSwitch: React.FC = ({ + isToggle, + toggleLabel, + toggleSwitch, +}) => { return ( -