Implemented brush size feature in camera feed settings

Reviewed-on: #31

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/app/providers/CameraZoomFetcher.tsx

@@ -14,16 +14,23 @@ const CameraZoomFetcher = ({ cameraId, dispatch }: CameraZoomFetcherProps) => {
   useEffect(() => {
     const fetchZoomLevel = async () => {
       const result = await cameraZoomQuery.refetch();
-      if (result.data && typeof result.data.zoomLevel === "number") {
+
+      if (result?.data) {
+        const currentZoomLevel = result?.data["propPhysCurrent"].value;
+        const minLevel = result?.data["propPhysMin"].value;
+        const maxLevel = result?.data["propPhysMax"].value;
+
+        const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
+
         dispatch({
           type: "SET_ZOOM_LEVEL",
-          payload: { cameraFeedID: cameraId, zoomLevel: result.data.zoomLevel },
+          payload: { cameraFeedID: cameraId, zoomLevel: parseFloat(normalizedZoomLevel) },
         });
       }
     };
 
     fetchZoomLevel();
-  }, [cameraId, cameraZoomQuery, dispatch]);
+  }, [cameraId]);
 
   return null;
 };

src/app/reducers/cameraFeedReducer.ts

@@ -3,6 +3,7 @@ import { CAMERA_IDS, DEFAULT_REGIONS, type CameraID } from "../config/cameraConf
 
 export const initialState: CameraFeedState = {
   cameraFeedID: CAMERA_IDS[0],
+  brushSize: 1,
   paintedCells: CAMERA_IDS.reduce(
     (acc, id) => {
       acc[id] = new Map<string, PaintedCell>();
@@ -28,7 +29,7 @@ export const initialState: CameraFeedState = {
   ),
   zoomLevel: CAMERA_IDS.reduce(
     (acc, id) => {
-      acc[id] = 1;
+      acc[id] = 0;
       return acc;
     },
     {} as Record<CameraID, number>,
@@ -110,6 +111,12 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
           [action.payload.cameraFeedID]: action.payload.zoomLevel,
         },
       };
+
+    case "SET_BRUSH_SIZE":
+      return {
+        ...state,
+        brushSize: action.payload.brushSize,
+      };
     default:
       return state;
   }

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

@@ -1,5 +1,5 @@
 import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
 import CameraControls from "./cameraControls/CameraControls";
@@ -13,6 +13,7 @@ type CameraPanelProps = {
 
 const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
   const { state, dispatch } = useCameraFeedContext();
+  const [subTabIndex, setSubTabIndex] = useState(0);
   const cameraFeedID = state.cameraFeedID;
   const regions = state.regionsByCamera[cameraFeedID];
 
@@ -39,7 +40,7 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
   }, [dispatch, tabIndex]);
 
   return (
-    <Tabs>
+    <Tabs onSelect={(index) => setSubTabIndex(index)}>
       <TabList>
         <Tab>Target Detection</Tab>
         <Tab>Camera Controls</Tab>
@@ -53,10 +54,11 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
           isResetAllModalOpen={isResetAllModalOpen}
           handleClose={handleClose}
           setIsResetModalOpen={setIsResetModalOpen}
+          subTabIndex={subTabIndex}
         />
       </TabPanel>
       <TabPanel>
-        <CameraControls cameraFeedID={cameraFeedID} />
+        <CameraControls cameraFeedID={cameraFeedID} subTabIndex={subTabIndex} />
       </TabPanel>
     </Tabs>
   );

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

@@ -6,6 +6,8 @@ import { useBlackBoard } from "../../../../hooks/useBlackBoard";
 import { toast } from "sonner";
 import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import type { CameraID } from "../../../../app/config/cameraConfig";
+import { useEffect } from "react";
+import SliderComponent from "../../../../ui/SliderComponent";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -15,6 +17,7 @@ type RegionSelectorProps = {
   isResetAllModalOpen: boolean;
   handleClose: () => void;
   setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  subTabIndex?: number;
 };
 
 const RegionSelector = ({
@@ -23,14 +26,20 @@ const RegionSelector = ({
   mode,
   cameraFeedID,
   isResetAllModalOpen,
-
+  subTabIndex,
   setIsResetModalOpen,
 }: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
+  const brushSize = state.brushSize;
   const cameraSocket = useCameraFeedSocket();
+  useEffect(() => {
+    if (subTabIndex === 0) {
+      dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "painter" } });
+    }
+  }, [cameraFeedID, dispatch, subTabIndex]);
 
   const getCurrentSocket = () => {
     switch (cameraFeedID) {
@@ -164,7 +173,7 @@ const RegionSelector = ({
       <div className="flex flex-col md:flex-row gap-3">
         <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
-          <div className="flex flex-col">
+          <div className="flex flex-col gap-2">
             <label
               htmlFor="paintMode"
               className={`p-4 border rounded-lg  mb-2
@@ -197,6 +206,19 @@ const RegionSelector = ({
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <div className="flex flex-col border border-gray-600 rounded-lg p-4">
+              <span className="text-lg mb-2">
+                {mode === "painter" ? "Brush" : "Eraser"} Size: {brushSize}
+              </span>
+              <SliderComponent
+                id="brushSize"
+                onChange={(value) => dispatch({ type: "SET_BRUSH_SIZE", payload: { brushSize: value as number } })}
+                value={brushSize}
+                min={1}
+                max={5}
+                step={1}
+              />
+            </div>
             <label
               htmlFor="magnifyMode"
               className={`p-4 border rounded-lg  mb-2

src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import type { CameraID } from "../../../../../app/config/cameraConfig";
 import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
 import SliderComponent from "../../../../../ui/SliderComponent";
@@ -6,13 +7,25 @@ import { useDebouncedCallback } from "use-debounce";
 
 type CameraControlsProps = {
   cameraFeedID: CameraID;
+  subTabIndex?: number;
 };
 
-const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+const CameraControls = ({ cameraFeedID, subTabIndex }: CameraControlsProps) => {
   const { state, dispatch } = useCameraFeedContext();
-  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+  const { cameraZoomMutation, cameraZoomQuery } = useCameraZoom(cameraFeedID);
+
+  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 0;
+  const currentZoomLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysCurrent"].value : 0;
+  const minLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMin"].value : 0;
+  const maxLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMax"].value : 0;
+
+  const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
+  useEffect(() => {
+    if (subTabIndex === 1) {
+      dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "controller" } });
+    }
+  }, [cameraFeedID, dispatch, subTabIndex]);
 
-  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
   const debouncedMutation = useDebouncedCallback(async (value) => {
     await cameraZoomMutation.mutateAsync({
       cameraFeedID,
@@ -24,17 +37,34 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
     const newZoom = value as number;
     dispatch({
       type: "SET_ZOOM_LEVEL",
-      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: newZoom },
     });
     debouncedMutation(newZoom);
   };
 
+  const handleOneShotClick = () => {
+    debouncedMutation(normalizedZoomLevel);
+  };
+
   return (
-    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
-      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
-      <div className="w-[70%] ">
-        <label htmlFor="zoom">Zoom {zoomLevel} </label>
-        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+    <div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
+        <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+        <div className="w-[70%] ">
+          <label htmlFor="zoom">Zoom {zoomLevel}</label>
+          <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={0} max={1} step={0.1} />
+        </div>
+      </div>
+
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
+        <h2>One Shot</h2>
+        <button
+          type="button"
+          className="p-2 bg-gray-500 rounded-xl w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
+          onClick={handleOneShotClick}
+        >
+          One Shot
+        </button>
       </div>
     </div>
   );

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

@@ -23,6 +23,8 @@ const VideoFeedGridPainter = () => {
   const regions = state.regionsByCamera[cameraFeedID];
   const selectedRegionIndex = state.selectedRegionIndex;
   const mode = state.modeByCamera[cameraFeedID];
+  const brushSize = state.brushSize;
+
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
@@ -85,34 +87,37 @@ const VideoFeedGridPainter = () => {
 
   const image = draw(latestBitmapRef);
 
-  const paintCell = (x: number, y: number) => {
+  const paintCell = (x: number, y: number, brushSize: number) => {
+    if (mode === "controller" || mode === "zoom" || mode === "magnify") return;
     const col = Math.floor(x / (size + gap));
     const row = Math.floor(y / (size + gap));
+    const radius = Math.floor(brushSize / 2);
 
     if (row < 0 || row >= rows || col < 0 || col >= cols) return;
 
     const activeRegion = regions[selectedRegionIndex];
     if (!activeRegion) return;
 
-    const key = `${row}-${col}`;
     const currentColour = regions[selectedRegionIndex].brushColour;
 
-    const map = paintedCells;
-    const existing = map.get(key);
-
-    if (mode === "eraser") {
-      if (map.has(key)) {
-        map.delete(key);
-        paintLayerRef.current?.batchDraw();
+    for (let r = row - radius; r <= row + radius; r++) {
+      for (let c = col - radius; c <= col + radius; c++) {
+        if (r < 0 || r >= rows || c < 0 || c >= cols) continue;
+        const key = `${r}-${c}`;
+        const map = paintedCells;
+        const existing = map.get(key);
+        if (mode === "eraser") {
+          if (map.has(key)) {
+            map.delete(key);
+            paintLayerRef.current?.batchDraw();
+          }
+          continue;
+        }
+        if (existing && existing.colour === currentColour) continue;
+        map.set(key, { colour: currentColour, region: activeRegion });
       }
-
-      return;
     }
 
-    if (existing && existing.colour === currentColour) return;
-
-    map.set(key, { colour: currentColour, region: activeRegion });
-
     paintLayerRef.current?.batchDraw();
   };
 
@@ -120,14 +125,14 @@ const VideoFeedGridPainter = () => {
     if (!regions[selectedRegionIndex] || mode === "magnify" || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
     if (!isDrawingRef.current || mode === "magnify") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
-    if (pos) paintCell(pos.x, pos.y);
+    if (pos) paintCell(pos.x, pos.y, brushSize);
   };
 
   const handleStageMouseUp = () => {

src/features/cameras/hooks/useCameraZoom.ts

@@ -23,10 +23,13 @@ const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
     id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
     fields,
   };
-  const response = await fetch(`${CAMBASE}/api/update-config`, {
-    method: "POST",
-    body: JSON.stringify(zoomPayload),
-  });
+  const response = await fetch(
+    `${CAMBASE}/Camera${zoomConfig.cameraFeedID}-camera-control?command=setAbsoluteZoom&zoomLevel=${zoomConfig.zoomLevel}`,
+    {
+      method: "POST",
+      body: JSON.stringify(zoomPayload),
+    },
+  );
 
   if (!response.ok) {
     throw new Error("Network response was not ok");

src/features/dashboard/components/systemHealth/SystemHealth.tsx

@@ -39,7 +39,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
   }
   return (
     <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+      <div className="p-2 border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
         <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
         </div>

src/types/types.ts

@@ -175,6 +175,7 @@ export type OptionalBOF2LaneIDs = {
 
 export type CameraFeedState = {
   cameraFeedID: CameraID;
+  brushSize: number;
   paintedCells: Record<CameraID, Map<string, PaintedCell>>;
 
   regionsByCamera: Record<CameraID, Region[]>;
@@ -221,6 +222,10 @@ export type CameraFeedAction =
   | {
       type: "SET_ZOOM_LEVEL";
       payload: { cameraFeedID: CameraID; zoomLevel: number };
+    }
+  | {
+      type: "SET_BRUSH_SIZE";
+      payload: { brushSize: number };
     };
 
 export type DecodeReading = {