diff --git a/src/app/config/wsconfig.ts b/src/app/config/wsconfig.ts index d6fa33d..958ea01 100644 --- a/src/app/config/wsconfig.ts +++ b/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; diff --git a/src/app/context/WebSocketContext.ts b/src/app/context/WebSocketContext.ts index 65799c0..dd89d90 100644 --- a/src/app/context/WebSocketContext.ts +++ b/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(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; diff --git a/src/app/providers/CameraFeedProvider.tsx b/src/app/providers/CameraFeedProvider.tsx index 8e818e2..5c0b39e 100644 --- a/src/app/providers/CameraFeedProvider.tsx +++ b/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); diff --git a/src/app/providers/WebSocketProvider.tsx b/src/app/providers/WebSocketProvider.tsx index 42ff194..d2346a2 100644 --- a/src/app/providers/WebSocketProvider.tsx +++ b/src/app/providers/WebSocketProvider.tsx @@ -10,7 +10,11 @@ type WebSocketProviderProps = { export const WebSocketProvider = ({ children }: WebSocketProviderProps) => { const [systemData, setSystemData] = useState(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 {children}; diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx index f23722d..4b78604 100644 --- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx +++ b/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" />
- Enlarge image + Magnifier {mode === "zoom" && ( Use mouse to digitally zoom in and out )}
+ diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx index 31d812e..8d0b264 100644 --- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx +++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx @@ -64,6 +64,7 @@ const VideoFeedGridPainter = () => { map.delete(key); paintLayerRef.current?.batchDraw(); } + return; } diff --git a/src/utils/config.ts b/src/utils/config.ts index a8ef457..98dd355 100644 --- a/src/utils/config.ts +++ b/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;