Merge pull request 'develop' (#22) from develop into main

Reviewed-on: #22

src/app/config/wsconfig.ts

@@ -1,10 +1,5 @@
-import { CAMBASE_WS } from "../../utils/config";
-
 export const wsConfig = {
-  infoBar: `${CAMBASE_WS}/websocket-infobar`,
+  infoBar: "ws://100.115.125.56/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

@@ -1,25 +1,15 @@
 import { createContext, useContext } from "react";
 import { ReadyState } from "react-use-websocket";
-import type { CameraZoomData, InfoBarData } from "../../types/types";
+import type { InfoBarData } from "../../types/types";
 
 type InfoSocketState = {
   data: InfoBarData | null;
   readyState: ReadyState;
   sendJson: (msg: unknown) => void;
-  send?: (msg: string) => void;
-};
-
-type CameraSocketState = {
-  data: CameraZoomData | 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);
@@ -31,6 +21,3 @@ 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,6 +42,7 @@ 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

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
 import useWebSocket from "react-use-websocket";
 import { wsConfig } from "../config/wsconfig";
-import type { CameraZoomData, InfoBarData } from "../../types/types";
+import type { InfoBarData } from "../../types/types";
 
 type WebSocketProviderProps = {
   children: ReactNode;
@@ -10,11 +10,7 @@ type WebSocketProviderProps = {
 
 export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
   const [systemData, setSystemData] = useState<InfoBarData | null>(null);
-  const [socketData, setSocketData] = useState<CameraZoomData | 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() {
@@ -23,20 +19,9 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         const data = JSON.parse(text);
         setSystemData(data);
       }
-      if (cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage) {
-        const message = cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage;
-        const data = await message?.data.text();
-        const parsedData: CameraZoomData = JSON.parse(data || "");
-        setSocketData(parsedData);
-      }
     }
     parseData();
-  }, [
+  }, [infoSocket.lastMessage]);
-    cameraFeedASocket.lastMessage,
-    cameraFeedBSocket.lastMessage,
-    cameraFeedCSocket.lastMessage,
-    infoSocket.lastMessage,
-  ]);
 
   const value = useMemo<WebSocketConextValue>(
     () => ({
@@ -45,37 +30,8 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         readyState: infoSocket.readyState,
         sendJson: infoSocket.sendJsonMessage,
       },
-      cameraFeedA: {
-        data: socketData,
-        readyState: cameraFeedASocket.readyState,
-
-        send: cameraFeedASocket.sendMessage,
-      },
-      cameraFeedB: {
-        data: socketData,
-        readyState: cameraFeedBSocket.readyState,
-
-        send: cameraFeedBSocket.sendMessage,
-      },
-      cameraFeedC: {
-        data: socketData,
-        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,
-      socketData,
-      systemData,
-    ],
   );
 
   return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;

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

@@ -4,11 +4,6 @@ import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext"
 import { useColourDectection } from "../../hooks/useColourDetection";
 import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
-import {
-  useCameraFeedASocket,
-  useCameraFeedBSocket,
-  useCameraFeedCSocket,
-} from "../../../../app/context/WebSocketContext";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -33,30 +28,6 @@ const RegionSelector = ({
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
-  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 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 } });
@@ -203,25 +174,6 @@ 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
@@ -237,9 +189,10 @@ const RegionSelector = ({
                 className="sr-only"
               />
               <div className="flex flex-col space-y-3">
-                <span className="text-xl">Digital Zoom mode</span>
+                <span className="text-xl">Enlarge image</span>
-                <pre className="text-xs text-gray-400">{`current Zoom: ${getMagnificationLevel()}`}</pre>
+                {mode === "zoom" && (
-                {mode === "zoom" && <small className={`text-gray-400 italic`}>Click image to digitally zoom</small>}
+                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                )}
               </div>
             </label>
           </div>

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

@@ -2,14 +2,8 @@ import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
+
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
-import {
-  useCameraFeedASocket,
-  useCameraFeedBSocket,
-  useCameraFeedCSocket,
-} from "../../../../app/context/WebSocketContext";
-import { ReadyState } from "react-use-websocket";
-import { toast } from "sonner";
 
 const BACKEND_WIDTH = 640;
 const BACKEND_HEIGHT = 360;
@@ -31,7 +25,6 @@ const VideoFeedGridPainter = () => {
   const isDrawingRef = useRef(false);
   const [scale, setScale] = useState(1);
   const [position, setPosition] = useState({ x: 0, y: 0 });
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const stageRef = useRef<any>(null);
 
@@ -41,45 +34,6 @@ const VideoFeedGridPainter = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const paintLayerRef = useRef<any>(null);
 
-  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 handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: "A" | "B" | "C") => {
-    if (mode !== "zoom") return;
-    const socket = getCurrentSocket();
-    const stage = e.target.getStage();
-    const coords = stage?.getPointerPosition();
-    if (!coords || !socket) return;
-
-    const newX = coords.x / stageSize.width;
-    const newY = coords.y / stageSize.height;
-
-    // Check if WebSocket is connected
-    if (socket.readyState !== ReadyState.OPEN) {
-      toast.error(`Camera ${cameraFeedID} WebSocket is not connected`);
-      return;
-    }
-
-    try {
-      socket.send(`ZOOM=${newX.toFixed(2)},${newY.toFixed(2)}`);
-    } catch (error) {
-      console.error("WebSocket send error:", error);
-      toast.error(`Failed to send command to Camera ${cameraFeedID}`);
-    }
-  };
-
   const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
     if (!bmp || !bmp.current) {
       return null;
@@ -110,7 +64,6 @@ const VideoFeedGridPainter = () => {
         map.delete(key);
         paintLayerRef.current?.batchDraw();
       }
-
       return;
     }
 
@@ -122,14 +75,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex] || mode === "magnify" || mode === "zoom") return;
+    if (!regions[selectedRegionIndex] || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current || mode === "magnify") return;
+    if (!isDrawingRef.current || mode === "zoom") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -140,7 +93,7 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleMouseEnter = () => {
-    if (mode !== "magnify") return;
+    if (mode !== "zoom") return;
     setScale(2);
   };
   const handleMouseLeave = () => {
@@ -217,13 +170,7 @@ const VideoFeedGridPainter = () => {
           x={position.x}
           y={position.y}
         >
-          <Image
+          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
-            image={image}
-            width={stageSize.width}
-            height={stageSize.height}
-            classname={"rounded-lg"}
-            onClick={(e) => handleZoomClick(e, cameraFeedID)}
-          />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -28,14 +28,14 @@ export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: stri
     queryKey: ["getfeed", cameraFeedID],
     queryFn: () => targetDectionFeed(cameraFeedID),
     refetchInterval: 500,
-    enabled: mode !== "magnify" && mode !== "zoom",
+    enabled: mode !== "zoom",
   });
 
   const videoFeedQuery = useQuery({
     queryKey: ["videoQuery", cameraFeedID, mode],
     queryFn: () => getVideoFeed(cameraFeedID),
     refetchInterval: 500,
-    enabled: mode === "magnify" || mode === "zoom",
+    enabled: mode === "zoom",
   });
 
   return { targetDetectionQuery, videoFeedQuery };

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -15,7 +15,7 @@ export const useCreateVideoSnapshot = () => {
   const videoSnapShot = videoFeedQuery?.data;
   const isVideoLoading = videoFeedQuery.isPending;
 
-  if ((isVideoLoading === false && videoSnapShot && mode === "magnify") || mode === "zoom") {
+  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
     snapShot = videoSnapShot;
   }
 

src/types/types.ts

@@ -11,10 +11,6 @@ export type InfoBarData = {
   "thread-count": string;
 };
 
-export type CameraZoomData = {
-  magnificationLevel: string;
-};
-
 export type StatusIndicator = "neutral-quaternary" | "dark" | "info" | "success" | "warning" | "danger";
 export type Region = {
   name: string;

src/utils/config.ts

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