- added digital zoom functionality on fixed location via web sockets

src/app/config/wsconfig.ts

@@ -1,5 +1,10 @@
+import { CAMBASE_WS } from "../../utils/config";
+
 export const wsConfig = {
-  infoBar: "ws://100.115.125.56/websocket-infobar",
+  infoBar: `${CAMBASE_WS}/websocket-infobar`,
+  cameraFeedA: `${CAMBASE_WS}/websocket-CameraA-live-video`,
+  cameraFeedB: `${CAMBASE_WS}/websocket-CameraB-live-video`,
+  cameraFeedC: `${CAMBASE_WS}/websocket-CameraC-live-video`,
 };
 
 export type SocketKey = keyof typeof wsConfig;

src/app/context/WebSocketContext.ts

@@ -6,10 +6,20 @@ type InfoSocketState = {
   data: InfoBarData | null;
   readyState: ReadyState;
   sendJson: (msg: unknown) => void;
+  send?: (msg: string) => void;
+};
+
+type CameraSocketState = {
+  data: null;
+  readyState: ReadyState;
+  send: (msg: string) => void;
 };
 
 export type WebSocketConextValue = {
   info: InfoSocketState;
+  cameraFeedA: CameraSocketState;
+  cameraFeedB: CameraSocketState;
+  cameraFeedC: CameraSocketState;
 };
 
 export const WebsocketContext = createContext<WebSocketConextValue | null>(null);
@@ -21,3 +31,6 @@ const useWebSocketContext = () => {
 };
 
 export const useInfoSocket = () => useWebSocketContext().info;
+export const useCameraFeedASocket = () => useWebSocketContext().cameraFeedA;
+export const useCameraFeedBSocket = () => useWebSocketContext().cameraFeedB;
+export const useCameraFeedCSocket = () => useWebSocketContext().cameraFeedC;

src/app/providers/CameraFeedProvider.tsx

@@ -42,7 +42,6 @@ export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
         cameraZoomQueryC.refetch(),
       ]);
 
-      console.log(resultA?.data);
       const zoomLevelAnumber = parseFloat(resultA.data?.propPhysCurrent?.value);
       const zoomLevelBnumber = parseFloat(resultB.data?.propPhysCurrent?.value);
       const zoomLevelCnumber = parseFloat(resultC.data?.propPhysCurrent?.value);

src/app/providers/WebSocketProvider.tsx

@@ -10,7 +10,11 @@ type WebSocketProviderProps = {
 
 export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
   const [systemData, setSystemData] = useState<InfoBarData | null>(null);
+
   const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
+  const cameraFeedASocket = useWebSocket(wsConfig.cameraFeedA, { share: true, shouldReconnect: () => true });
+  const cameraFeedBSocket = useWebSocket(wsConfig.cameraFeedB, { share: true, shouldReconnect: () => true });
+  const cameraFeedCSocket = useWebSocket(wsConfig.cameraFeedC, { share: true, shouldReconnect: () => true });
 
   useEffect(() => {
     async function parseData() {
@@ -30,8 +34,36 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         readyState: infoSocket.readyState,
         sendJson: infoSocket.sendJsonMessage,
       },
+      cameraFeedA: {
+        data: null,
+        readyState: cameraFeedASocket.readyState,
+
+        send: cameraFeedASocket.sendMessage,
+      },
+      cameraFeedB: {
+        data: null,
+        readyState: cameraFeedBSocket.readyState,
+
+        send: cameraFeedBSocket.sendMessage,
+      },
+      cameraFeedC: {
+        data: null,
+        readyState: cameraFeedCSocket.readyState,
+
+        send: cameraFeedCSocket.sendMessage,
+      },
     }),
-    [infoSocket.readyState, infoSocket.sendJsonMessage, systemData],
+    [
+      cameraFeedASocket.readyState,
+      cameraFeedASocket.sendMessage,
+      cameraFeedBSocket.readyState,
+      cameraFeedBSocket.sendMessage,
+      cameraFeedCSocket.readyState,
+      cameraFeedCSocket.sendMessage,
+      infoSocket.readyState,
+      infoSocket.sendJsonMessage,
+      systemData,
+    ],
   );
 
   return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;

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;
     }
 

src/utils/config.ts

@@ -1 +1,3 @@
 export const CAMBASE = import.meta.env.VITE_BASEURL;
+
+export const CAMBASE_WS = import.meta.env.VITE_BASE_WS;