TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved zoom while clicking on on image to zoom

Browse Source
This commit is contained in:
Toba Ojo
2025-12-10 13:09:07 +00:00
parent 0ff43d975d
commit 10e2644666
7 changed files with 126 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/context/WebSocketContext.ts
View File

@@ -1,6 +1,6 @@
import { createContext, useContext } from "react";
import { ReadyState } from "react-use-websocket";
import type { InfoBarData } from "../../types/types";
import type { CameraZoomData, InfoBarData } from "../../types/types";
type InfoSocketState = {
data: InfoBarData | null;
@@ -10,7 +10,7 @@ type InfoSocketState = {
};
type CameraSocketState = {
data: null;
data: CameraZoomData | null;
readyState: ReadyState;
send: (msg: string) => void;
};

24
src/app/providers/WebSocketProvider.tsx
View File

@@ -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 { InfoBarData } from "../../types/types";
import type { CameraZoomData, InfoBarData } from "../../types/types";
type WebSocketProviderProps = {
children: ReactNode;
@@ -10,7 +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 });
@@ -23,9 +23,20 @@ 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>(
() => ({
@@ -35,19 +46,19 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
sendJson: infoSocket.sendJsonMessage,
},
cameraFeedA: {
data: null,
data: socketData,
readyState: cameraFeedASocket.readyState,
send: cameraFeedASocket.sendMessage,
},
cameraFeedB: {
data: null,
data: socketData,
readyState: cameraFeedBSocket.readyState,
send: cameraFeedBSocket.sendMessage,
},
cameraFeedC: {
data: null,
data: socketData,
readyState: cameraFeedCSocket.readyState,
send: cameraFeedCSocket.sendMessage,
@@ -62,6 +73,7 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
cameraFeedCSocket.sendMessage,
infoSocket.readyState,
infoSocket.sendJsonMessage,
socketData,
systemData,
],
);

57
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -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>

72
src/features/cameras/components/Video/VideoFeedGridPainter.tsx
View File

@@ -2,8 +2,14 @@ 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;
@@ -25,6 +31,7 @@ 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);
@@ -34,6 +41,55 @@ 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 socket = getCurrentSocket();
const getMagnificationLevel = () => {
const test = socket.data;
if (!socket.data) return null;
if (!test || !test.magnificationLevel) return "0x";
return test?.magnificationLevel;
};
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;
@@ -76,14 +132,14 @@ const VideoFeedGridPainter = () => {
};
const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
if (!regions[selectedRegionIndex] || mode === "zoom") return;
if (!regions[selectedRegionIndex] || mode === "magnify" || 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 === "zoom") return;
if (!isDrawingRef.current || mode === "magnify") return;
if (!regions[selectedRegionIndex]) return;
const pos = e.target.getStage()?.getPointerPosition();
if (pos) paintCell(pos.x, pos.y);
@@ -94,7 +150,7 @@ const VideoFeedGridPainter = () => {
};
const handleMouseEnter = () => {
if (mode !== "zoom") return;
if (mode !== "magnify") return;
setScale(2);
};
const handleMouseLeave = () => {
@@ -171,7 +227,13 @@ const VideoFeedGridPainter = () => {
x={position.x}
y={position.y}
>
<Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
<Image
image={image}
width={stageSize.width}
height={stageSize.height}
classname={"rounded-lg"}
onClick={(e) => handleZoomClick(e, cameraFeedID)}
/>
</Layer>
<Layer ref={paintLayerRef} opacity={0.6}>

4
src/features/cameras/hooks/useGetVideoFeed.ts
View File

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

2
src/features/cameras/hooks/useGetvideoSnapshots.ts
View File

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

4
src/types/types.ts
View File

@@ -11,6 +11,10 @@ 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;