Dynamic console screen for PortaRF (#97)

* Enhance IScreen interface with screenDimensions

Added screenDimensions property to IScreen interface and updated canvas dimensions accordingly.

* Implement upload progress for file manager

Added upload progress handling for file manager and improved user feedback during uploads.

* Enhance IScreen interface with screenDimensions

Added screenDimensions property to IScreen interface and updated canvas dimensions accordingly.

* Update useScreenFrame.ts

---------

Co-authored-by: jLynx <admin@jlynx.net>

Author: RocketGod-git

src/components/Controller/Controller.tsx

@@ -70,7 +70,7 @@ const Controller = () => {
     setDirStructure,
     setLatestVersion,
   });
-  const { canvasRef, renderFrame } = useScreenFrame();
+  const { canvasRef, renderFrame, screenDimensions, needsRefresh, setNeedsRefresh } = useScreenFrame();
   const { UIConfig, setUiConfig, handleUpdateUiHide } = useUIConfig();
 
   const sendCommand = async () => {
@@ -287,6 +287,14 @@ const Controller = () => {
     setAutoUpdateFrame(!shouldUpdate);
   };
 
+  useEffect(() => {
+    if (needsRefresh && !disableTransmitAction) {
+      console.log("Executing refresh");
+      write("screenframeshort", false);
+      setNeedsRefresh(false);
+    }
+  }, [needsRefresh]);
+
   useEffect(() => {
     // We dont add this to the console as its not needed. This may change in the future
     if (consoleMessage.startsWith("screenframe")) {
@@ -343,6 +351,7 @@ const Controller = () => {
                     disableTransmitAction={disableTransmitAction}
                     autoUpdateFrame={autoUpdateFrame}
                     write={write}
+                    screenDimensions={screenDimensions}
                   />
 
                   <div className="flex flex-col items-center justify-center rounded-md bg-opacity-20 bg-slate-600 p-3 backdrop-blur-sm">

src/components/Screen/Screen.tsx

@@ -3,19 +3,21 @@ interface IScreen {
   disableTransmitAction: boolean;
   autoUpdateFrame: boolean;
   write: any;
+  screenDimensions: { width: number; height: number };
 }
 
 export const Screen: React.FC<IScreen> = ({
   canvasRef,
   disableTransmitAction,
   autoUpdateFrame,
   write,
+  screenDimensions,
 }) => {
   return (
     <canvas
       ref={canvasRef}
-      width={241}
-      height={321}
+      width={screenDimensions.width}
+      height={screenDimensions.height}
       className={`${
         !disableTransmitAction && "cursor-pointer"
       } shadow-glow shadow-neutral-500 outline-none focus:ring-0`}

src/hooks/useScreenFrame.ts

@@ -1,7 +1,10 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 export const useScreenFrame = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [screenDimensions, setScreenDimensions] = useState({ width: 240, height: 320 });
+  const [needsRefresh, setNeedsRefresh] = useState(false);
+  const lastWidth = useRef(240);
 
   const renderFrame = (consoleMessage: string) => {
     if (!consoleMessage.includes("screenframe")) return;
@@ -11,24 +14,64 @@ export const useScreenFrame = () => {
 
     if (!ctx) return false;
 
-    for (let y = 0; y < lines.length; y++) {
-      let line = lines[y];
+    // Find first data line
+    let dataLineIndex = 0;
+    for (let i = 0; i < lines.length; i++) {
+      if (!lines[i].startsWith("screenframe") && lines[i].length > 0) {
+        dataLineIndex = i;
+        break;
+      }
+    }
+
+    const firstDataLine = lines[dataLineIndex];
+    if (!firstDataLine) return;
+    
+    // Determine required dimensions based on line length
+    const requiredWidth = firstDataLine.length >= 320 ? 320 : 240;
+    const requiredHeight = firstDataLine.length >= 320 ? 480 : 320;
+    
+    // Check if dimensions need to change
+    if (lastWidth.current !== requiredWidth) {
+      console.log(`Dimension change: ${lastWidth.current} -> ${requiredWidth}`);
+      lastWidth.current = requiredWidth;
+      setScreenDimensions({ width: requiredWidth, height: requiredHeight });
+      
+      if (canvasRef.current) {
+        canvasRef.current.width = requiredWidth;
+        canvasRef.current.height = requiredHeight;
+      }
+      
+      // Set flag for refresh with a delay
+      setTimeout(() => {
+        setNeedsRefresh(true);
+      }, 500); // Give time for current operations to complete
+      
+      return; // Don't render this frame
+    }
+
+    // Render the frame
+    let y = 0;
+    for (let lineIndex = dataLineIndex; lineIndex < lines.length; lineIndex++) {
+      let line = lines[lineIndex];
       if (line.startsWith("screenframe")) continue;
-      for (let o = 0, x = 0; o < line.length && x < 240; o++, x++) {
+      
+      for (let x = 0; x < line.length; x++) {
         try {
-          let by = line.charCodeAt(o) - 32;
+          let by = line.charCodeAt(x) - 32;
+          
           let r = ((by >> 4) & 3) << 6;
           let g = ((by >> 2) & 3) << 6;
           let b = (by & 3) << 6;
 
           ctx.fillStyle = `rgb(${r},${g},${b})`;
-          ctx?.fillRect(x, y, 1, 1);
+          ctx.fillRect(x, y, 1, 1);
         } catch (err) {
           console.error(err);
         }
       }
+      y++;
     }
   };
 
-  return { canvasRef, renderFrame };
+  return { canvasRef, renderFrame, screenDimensions, needsRefresh, setNeedsRefresh };
 };