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

Reviewed-on: #28

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bayiq-ui",
   "private": true,
-  "version": "1.0.1",
+  "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) {
@@ -48,7 +55,6 @@ const RegionSelector = ({
   const getMagnificationLevel = () => {
     const test = socket?.data;
     if (!socket?.data) return null;
-    console.log(test);
     if (!test || !test.magnificationLevel) return "1x";
     return test?.magnificationLevel;
   };

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%]">
+    <div>
-      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
-      <div className="w-[70%] ">
+        <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
-        <label htmlFor="zoom">Zoom {zoomLevel} </label>
+        <div className="w-[70%] ">
-        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+          <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,11 +23,13 @@ const postZoomLevel = async (zoomConfig: CameraZoomConfig) => {
     id: `Camera${zoomConfig.cameraFeedID}-onvif-controller`,
     fields,
   };
-  console.log(zoomPayload);
+  const response = await fetch(
-  const response = await fetch(`${CAMBASE}/api/update-config`, {
+    `${CAMBASE}/Camera${zoomConfig.cameraFeedID}-camera-control?command=setAbsoluteZoom&zoomLevel=${zoomConfig.zoomLevel}`,
-    method: "POST",
+    {
-    body: JSON.stringify(zoomPayload),
+      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/features/output/components/OSD/OSDFields.tsx

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from "formik";
-import { useOSDConfig } from "../hooks/useOSDConfig";
+import { useOSDConfig } from "../../hooks/useOSDConfig";
 import OSDFieldToggle from "./OSDFieldToggle";
-import type { OSDConfigFields } from "../../../types/types";
+import type { OSDConfigFields } from "../../../../types/types";
 import { toast } from "sonner";
 
 type OSDFieldsProps = {
@@ -12,7 +12,16 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
   const { osdMutation } = useOSDConfig();
   const { values } = useFormikContext<OSDConfigFields>();
 
-  const includeKeys = Object.keys(values as OSDConfigFields).filter((value) => value.includes("include"));
+  const validOSDKeys: Array<keyof OSDConfigFields> = [
+    "includeVRM",
+    "includeMotion",
+    "includeTimeStamp",
+    "includeCameraName",
+    "overlayPosition",
+    "OSDTimestampFormat",
+  ];
+
+  const includeKeys = validOSDKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");
 
   const handleSubmit = async (values: OSDConfigFields) => {
     const result = await osdMutation.mutateAsync(values);

src/features/output/components/OSD/OSDOptionsCard.tsx

@@ -1,5 +1,6 @@
-import Card from "../../../ui/Card";
+import Card from "../../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
+import CardHeader from "../../../../ui/CardHeader";
+import PayloadOptions from "../PayloadOptions/PayloadOptions";
 import OSDFields from "./OSDFields";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
@@ -15,13 +16,13 @@ const OSDOptionsCard = ({ isOSDLoading }: OSDOptionsCardProps) => {
       <Tabs>
         <TabList>
           <Tab>OSD Settings</Tab>
-          <Tab>payload Settings</Tab>
+          <Tab>Payload Settings</Tab>
         </TabList>
         <TabPanel>
           <OSDFields isOSDLoading={isOSDLoading} />
         </TabPanel>
         <TabPanel>
-          <div>payload settings</div>
+          <PayloadOptions />
         </TabPanel>
       </Tabs>
     </Card>

src/features/output/components/OutputForms.tsx

@@ -6,7 +6,7 @@ import { usePostBearerConfig } from "../hooks/useBearer";
 import { useDispatcherConfig } from "../hooks/useDispatcherConfig";
 import { useOptionalConstants } from "../hooks/useOptionalConstants";
 import { useCustomFields } from "../hooks/useCustomFields";
-import OSDOptionsCard from "./OSDOptionsCard";
+import OSDOptionsCard from "./OSD/OSDOptionsCard";
 import { useOSDConfig } from "../hooks/useOSDConfig";
 
 const OutputForms = () => {
@@ -89,6 +89,39 @@ const OutputForms = () => {
     includeCameraName: includeCameraName ?? false,
     overlayPosition: overlayPosition ?? "Top",
     OSDTimestampFormat: OSDTimestampFormat ?? "UTC",
+
+    // payload ooptions
+    includeMac: false,
+    includeSaFID: false,
+    includeCharHeight: false,
+    includeConfidence: false,
+    includeCorrectSpacing: false,
+    includeDecodeID: false,
+    includeDirection: false,
+    includeFrameHeight: false,
+    includeFrameID: false,
+    includeFrameTimeRef: false,
+    includeFrameWidth: false,
+    includeHorizSlew: false,
+    inclduePlate: false,
+    includeNightModeAction: false,
+    includeOverview: false,
+    includePlateSecondary: false,
+    includePlateTrack: false,
+    includePlateTrackSecondary: false,
+    includePreferredCountry: false,
+    includeRawReads: false,
+    includeRawREADSSecondary: false,
+    includeRef: false,
+    includeSeenCount: false,
+    includeRepeatedPlate: false,
+    includeSerialCount: false,
+    includeTraceCount: false,
+    includeTrack: false,
+    includeTrackSecondary: false,
+    includeVertSlew: false,
+    includeVRMSecondary: false,
+    includeHotListMatches: false,
   };
 
   const handleSubmit = async (values: FormTypes) => {

src/features/output/components/PayloadOptions/PayloadOptions.tsx

@@ -0,0 +1,56 @@
+import { useFormikContext } from "formik";
+import type { PayloadConfigFields } from "../../../../types/types";
+import PayloadOptionsToggle from "./PayloadOptionsToggle";
+
+const PayloadOptions = () => {
+  const { values } = useFormikContext<PayloadConfigFields>();
+
+  const validPayloadKeys: Array<keyof PayloadConfigFields> = [
+    "includeMac",
+    "includeSaFID",
+    "includeCharHeight",
+    "includeConfidence",
+    "includeCorrectSpacing",
+    "includeDecodeID",
+    "includeDirection",
+    "includeFrameHeight",
+    "includeFrameID",
+    "includeFrameTimeRef",
+    "includeFrameWidth",
+    "includeHorizSlew",
+    "inclduePlate",
+    "includeNightModeAction",
+    "includeOverview",
+    "includePlateSecondary",
+    "includePlateTrack",
+  ];
+
+  const includeKeys = validPayloadKeys.filter((key) => key.includes("include") && typeof values[key] === "boolean");
+
+  const handleSubmit = async (values: PayloadConfigFields) => {
+    console.log("Payload Config Submitted:", values);
+  };
+
+  return (
+    <div className="">
+      <div className="flex flex-col space-y-4">
+        <div className="p-4 border border-gray-600 rounded-lg flex flex-col space-y-4">
+          <div className="flex flex-col space-y-4 h-100 overflow-y-auto p-3">
+            {includeKeys.map((key, index) => (
+              <PayloadOptionsToggle key={index} label={key} value={key} />
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={() => handleSubmit(values)}
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+          >
+            Save Settings
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PayloadOptions;

src/features/output/components/PayloadOptions/PayloadOptionsToggle.tsx

@@ -0,0 +1,22 @@
+import { Field } from "formik";
+
+type PayloadOptionsToggleProps = {
+  label: string;
+  value: string;
+};
+
+const PayloadOptionsToggle = ({ label, value }: PayloadOptionsToggleProps) => {
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
+      <span className="text-lg">{label}</span>
+      <Field id={value} type="checkbox" name={value} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+         after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+         after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default PayloadOptionsToggle;

src/features/output/hooks/usePayloadConfig.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+
+const fetchPayloadConfig = async () => {
+  const response = await fetch("/api/payload-config");
+  if (!response.ok) throw new Error("Failed to fetch payload config");
+  return response.json();
+};
+
+export const usePayloadCongfig = () => {
+  const payloadConfigQuery = useQuery({
+    queryKey: ["payloadConfig"],
+    queryFn: fetchPayloadConfig,
+  });
+
+  return { payloadConfigQuery };
+};

src/types/types.ts

@@ -88,7 +88,51 @@ export type OSDConfigFields = {
   OSDTimestampFormat: "UTC" | "LOCAL";
 };
 
-export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs & CustomFields & OSDConfigFields;
+export type PayloadConfigFields = {
+  includeMac: boolean;
+  includeSaFID: boolean;
+  includeCameraName: boolean;
+  includeCharHeight: boolean;
+  includeConfidence: boolean;
+  includeCorrectSpacing: boolean;
+  includeDecodeID: boolean;
+  includeDirection: boolean;
+  includeFrameHeight: boolean;
+  includeFrameID: boolean;
+  includeFrameTimeRef: boolean;
+  includeFrameWidth: boolean;
+  includeHorizSlew: boolean;
+  includeMotion: boolean;
+  inclduePlate: boolean;
+  includeNightModeAction: boolean;
+  includeOverview: boolean;
+  includePlateSecondary: boolean;
+  includePlateTrack: boolean;
+  includePlateTrackSecondary: boolean;
+  includePreferredCountry: boolean;
+  includeRawReads: boolean;
+  includeRawREADSSecondary: boolean;
+  includeRef: boolean;
+  includeSeenCount: boolean;
+  includeRepeatedPlate: boolean;
+  includeSerialCount: boolean;
+  includeTimeStamp: boolean;
+  includeTraceCount: boolean;
+  includeTrack: boolean;
+  includeTrackSecondary: boolean;
+  includeVertSlew: boolean;
+  includeVRM: boolean;
+  includeVRMSecondary: boolean;
+  includeHotListMatches: boolean;
+};
+
+export type FormTypes = BearerTypeFields &
+  OptionalConstants &
+  OptionalLaneIDs &
+  CustomFields &
+  OSDConfigFields &
+  PayloadConfigFields;
+
 type FieldProperty = {
   datatype: string;
   value: string;