- added digital zoom functionality on fixed location via web sockets

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -4,6 +4,12 @@ import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext"
 import { useColourDectection } from "../../hooks/useColourDetection";
 import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
+import { ReadyState } from "react-use-websocket";
+import {
+  useCameraFeedASocket,
+  useCameraFeedBSocket,
+  useCameraFeedCSocket,
+} from "../../../../app/context/WebSocketContext";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -29,6 +35,22 @@ const RegionSelector = ({
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
 
+  // Get the socket for the current camera only
+  const cameraASocket = useCameraFeedASocket();
+  const cameraBSocket = useCameraFeedBSocket();
+  const cameraCSocket = useCameraFeedCSocket();
+
+  const getCurrentSocket = () => {
+    switch (cameraFeedID) {
+      case "A":
+        return cameraASocket;
+      case "B":
+        return cameraBSocket;
+      case "C":
+        return cameraCSocket;
+    }
+  };
+
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
@@ -77,6 +99,23 @@ const RegionSelector = ({
     setIsResetModalOpen(true);
   };
 
+  const textClick = (cameraFeedID: "A" | "B" | "C") => {
+    const socket = getCurrentSocket();
+
+    // Check if WebSocket is connected
+    if (socket.readyState !== ReadyState.OPEN) {
+      toast.error(`Camera ${cameraFeedID} WebSocket is not connected`);
+      return;
+    }
+
+    try {
+      socket.send("ZOOM=0.3,0.3");
+      toast.success(`Zoom command sent to Camera ${cameraFeedID}`);
+    } catch (error) {
+      console.error("WebSocket send error:", error);
+      toast.error(`Failed to send command to Camera ${cameraFeedID}`);
+    }
+  };
   const handleSaveclick = () => {
     const regions: ColourData[] = [];
     const test = Array.from(paintedCells.entries());
@@ -189,12 +228,13 @@ const RegionSelector = ({
                 className="sr-only"
               />
               <div className="flex flex-col space-y-3">
-                <span className="text-xl">Enlarge image</span>
+                <span className="text-xl">Magnifier</span>
                 {mode === "zoom" && (
                   <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
                 )}
               </div>
             </label>
+            <button onClick={() => textClick(cameraFeedID)}>click me</button>
           </div>
         </div>
 

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -64,6 +64,7 @@ const VideoFeedGridPainter = () => {
         map.delete(key);
         paintLayerRef.current?.batchDraw();
       }
+
       return;
     }