- improved zoom while clicking on on image to zoom

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

@@ -4,7 +4,6 @@ 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,
@@ -34,8 +33,6 @@ const RegionSelector = ({
   const { state, dispatch } = useCameraFeedContext();
   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();
@@ -51,6 +48,16 @@ const RegionSelector = ({
     }
   };
 
+  const socket = getCurrentSocket();
+
+  const getMagnificationLevel = () => {
+    const test = socket.data;
+    if (!socket.data) return null;
+
+    if (!test || !test.magnificationLevel) return "0x";
+    return test?.magnificationLevel;
+  };
+
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
@@ -99,23 +106,6 @@ 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());
@@ -213,6 +203,25 @@ const RegionSelector = ({
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <label
+              htmlFor="magnifyMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "magnify" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="magnifyMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "magnify"}
+                value="magnify"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Magnifier</span>
+                {mode === "magnify" && <small className={`text-gray-400 italic`}>Use mouse to magnify the image</small>}
+              </div>
+            </label>
             <label
               htmlFor="zoomMode"
               className={`p-4 border rounded-lg  mb-2
@@ -228,13 +237,11 @@ const RegionSelector = ({
                 className="sr-only"
               />
               <div className="flex flex-col space-y-3">
-                <span className="text-xl">Magnifier</span>
-                {mode === "zoom" && (
-                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
-                )}
+                <span className="text-xl">Digital Zoom mode</span>
+                <pre className="text-xs text-gray-400">{getMagnificationLevel()}</pre>
+                {mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
               </div>
             </label>
-            <button onClick={() => textClick(cameraFeedID)}>click me</button>
           </div>
         </div>