package.json

@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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

@@ -28,7 +28,7 @@ export const initialState: CameraFeedState = {
   ),
   zoomLevel: CAMERA_IDS.reduce(
     (acc, id) => {
-      acc[id] = 1;
+      acc[id] = 0;
       return acc;
     },
     {} as Record<CameraID, number>,

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,7 @@ 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";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -15,6 +16,7 @@ type RegionSelectorProps = {
   isResetAllModalOpen: boolean;
   handleClose: () => void;
   setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  subTabIndex?: number;
 };
 
 const RegionSelector = ({
@@ -23,7 +25,7 @@ const RegionSelector = ({
   mode,
   cameraFeedID,
   isResetAllModalOpen,
-
+  subTabIndex,
   setIsResetModalOpen,
 }: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
@@ -31,6 +33,11 @@ const RegionSelector = ({
   const { blackboardMutation } = useBlackBoard();
   const paintedCells = state.paintedCells[cameraFeedID];
   const cameraSocket = useCameraFeedSocket();
+  useEffect(() => {
+    if (subTabIndex === 0) {
+      dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "painter" } });
+    }
+  }, [cameraFeedID, dispatch, subTabIndex]);
 
   const getCurrentSocket = () => {
     switch (cameraFeedID) {

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

@@ -86,6 +86,7 @@ const VideoFeedGridPainter = () => {
   const image = draw(latestBitmapRef);
 
   const paintCell = (x: number, y: number) => {
+    if (mode === "controller" || mode === "zoom" || mode === "magnify") return;
     const col = Math.floor(x / (size + gap));
     const row = Math.floor(y / (size + gap));
 
@@ -218,6 +219,7 @@ const VideoFeedGridPainter = () => {
             height={stageSize.height}
             classname={"rounded-lg"}
             onClick={(e) => handleZoomClick(e, cameraFeedID)}
+            cornerRadius={10}
           />
         </Layer>
 

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>