- enhancedcamera settings and region painter.

- Can send to the back end

src/app/reducers/cameraFeedReducer.ts

@@ -12,12 +12,23 @@ export const initialState: CameraFeedState = {
       { name: "Region 1", brushColour: "#ff0000" },
       { name: "Region 2", brushColour: "#00ff00" },
       { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
     ],
     B: [
       { name: "Region 1", brushColour: "#ff0000" },
       { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
+    ],
+    C: [
+      { name: "Region 1", brushColour: "#ff0000" },
+      { name: "Region 2", brushColour: "#00ff00" },
+      { name: "Region 3", brushColour: "#0400ff" },
+      { name: "Region 4", brushColour: "#ffff00" },
+      { name: "Region 5", brushColour: "#fc35db" },
     ],
-    C: [{ name: "Region 1", brushColour: "#ff0000" }],
   },
 
   selectedRegionIndex: 0,

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

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
 
 const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
+    <Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

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

@@ -10,6 +10,7 @@ const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
       name=""
       id=""
       value={colour}
+      disabled
       onChange={(e) => setColour(e.target.value)}
       className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
     />

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

@@ -1,6 +1,7 @@
-import type { PaintedCell, Region } from "../../../../types/types";
+import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
+import { useColourDectection } from "../../hooks/useColourDetection";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -10,7 +11,10 @@ type RegionSelectorProps = {
 };
 
 const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
-  const { dispatch } = useCameraFeedContext();
+  const { colourMutation } = useColourDectection();
+  const { state, dispatch } = useCameraFeedContext();
+  const paintedCells = state.paintedCells[cameraFeedID];
+
   const handleChange = (e: { target: { value: string } }) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
@@ -54,6 +58,53 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
+  const handleSaveclick = () => {
+    const regions: ColourData[] = [];
+    const test = Array.from(paintedCells.entries());
+    const region1 = test.filter(([, cell]) => cell.region.name === "Region 1");
+    const region2 = test.filter(([, cell]) => cell.region.name === "Region 2");
+    const region3 = test.filter(([, cell]) => cell.region.name === "Region 3");
+    const region4 = test.filter(([, cell]) => cell.region.name === "Region 4");
+    const region5 = test.filter(([, cell]) => cell.region.name === "Region 5");
+    const region1Data = {
+      id: 1,
+      cells: region1.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region2Data = {
+      id: 2,
+      cells: region2.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region3Data = {
+      id: 3,
+      cells: region3.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region4Data = {
+      id: 4,
+      cells: region4.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    const region5Data = {
+      id: 5,
+      cells: region5.map(([key]) => [parseInt(key.split("-")[1]), parseInt(key.split("-")[0])]),
+    };
+    if (region1Data.cells.length > 0) {
+      regions.push(region1Data);
+    }
+    if (region2Data.cells.length > 0) {
+      regions.push(region2Data);
+    }
+    if (region3Data.cells.length > 0) {
+      regions.push(region3Data);
+    }
+    if (region4Data.cells.length > 0) {
+      regions.push(region4Data);
+    }
+    if (region5Data.cells.length > 0) {
+      regions.push(region5Data);
+    }
+
+    colourMutation.mutate({ cameraFeedID, regions: regions });
+  };
+
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
@@ -103,7 +154,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
               <label
                 htmlFor={inputId}
                 key={region.name}
-                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
+                className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
                   ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
               >
                 <div className="flex flex-row gap-4 items-center">
@@ -121,16 +172,16 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
                   <span className="text-xl">{region.name}</span>
                 </div>
                 <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
-                <p className="text-slate-400">{region.brushColour}</p>
+                <div></div>
               </label>
             );
           })}
         </>
         <div className=" mx-auto flex flex-row gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 rounded-md" onClick={handleAddRegionClick}>
+          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
             Add Region
           </button>
-          <button className="border border-red-900 px-4 rounded-md" onClick={handleRemoveClick}>
+          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
             Remove Region
           </button>
         </div>
@@ -139,6 +190,12 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
         <div className="flex flex-col">
           <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleSaveclick}
+            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
+          >
+            Save Region
+          </button>
           <button
             onClick={handleResetRegion}
             className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"

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

@@ -3,12 +3,14 @@ import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
 
-import Card from "../../../../ui/Card";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 
-const rows = 40;
+const BACKEND_WIDTH = 640;
+const BACKEND_HEIGHT = 360;
+const BACKEND_CELL_SIZE = 16;
+
+const rows = 22.5;
 const cols = 40;
-const size = 20;
 const gap = 0;
 
 const VideoFeedGridPainter = () => {
@@ -19,9 +21,12 @@ const VideoFeedGridPainter = () => {
   const selectedRegionIndex = state.selectedRegionIndex;
   const mode = state.modeByCamera[cameraFeedID];
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
-  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
+  const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
 
+  const currentScale = stageSize.width / BACKEND_WIDTH;
+  const size = BACKEND_CELL_SIZE * currentScale;
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const paintLayerRef = useRef<any>(null);
 
@@ -60,7 +65,7 @@ const VideoFeedGridPainter = () => {
 
     if (existing && existing.colour === currentColour) return;
 
-    map.set(key, { colour: currentColour });
+    map.set(key, { colour: currentColour, region: activeRegion });
 
     paintLayerRef.current?.batchDraw();
   };
@@ -87,25 +92,25 @@ const VideoFeedGridPainter = () => {
     const handleResize = () => {
       const width = window.innerWidth;
 
-      const aspectRatio = 740 / 460;
+      const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
       const newWidth = width * 0.39;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };
+
     handleResize();
     window.addEventListener("resize", handleResize);
 
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  if (image === null || isloading)
+  if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
-    return (
-      <Card className="row-span-3 col-span-2 rounded-lg p-4 w-full">
-        <span className="text-slate-500">Loading Video feed…</span>
-      </Card>
-    );
   return (
-    <div className="mt-4.5 row-span-1 col-span-2">
+    <div
+      className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+        mode === "eraser" ? "hover:cursor-pointer" : ""
+      }`}
+    >
       <Stage
         width={stageSize.width}
         height={stageSize.height}

src/features/cameras/hooks/useColourDetection.ts

@@ -0,0 +1,24 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
+import type { ColourDetectionPayload } from "../../../types/types";
+
+const sendColourDetectionData = async (colourData: ColourDetectionPayload) => {
+  const regions = {
+    regions: colourData.regions,
+  };
+  const response = await fetch(`${CAMBASE}/TargetDetectionColour${colourData.cameraFeedID}-region-update`, {
+    method: "POST",
+    body: JSON.stringify(regions),
+  });
+  if (!response.ok) throw new Error("Cannot send data to colour detection endpoint");
+  return response.json();
+};
+
+export const useColourDectection = () => {
+  const colourMutation = useMutation({
+    mutationKey: ["colour detection"],
+    mutationFn: (colourData: ColourDetectionPayload) => sendColourDetectionData(colourData),
+  });
+
+  return { colourMutation };
+};

src/types/types.ts

@@ -76,6 +76,7 @@ export type OutputDataResponse = {
 
 export type PaintedCell = {
   colour: string;
+  region: Region;
 };
 
 export type DispatcherConfig = {
@@ -164,3 +165,13 @@ export type DecodeReading = {
   firstSeenTimeHumane: string;
   lastSeenTimeHumane: string;
 };
+
+export type ColourData = {
+  id: string | number;
+  cells: number[][];
+};
+
+export type ColourDetectionPayload = {
+  cameraFeedID: "A" | "B" | "C";
+  regions: ColourData[];
+};

src/utils/utils.ts

@@ -9,3 +9,12 @@ export const convertObjtoArray = (obj: Record<string, SystemHealthStatus[]>) =>
   const statusCategoryArray = Object.entries(obj);
   return statusCategoryArray;
 };
+
+// const data = {
+//   camera: cameraFeedID,
+//   cells: Array.from(paintedCells.entries()).map(([key, cell]) => ({
+//     position: key,
+//     ...cell,
+//     region: regions[selectedRegionIndex]?.name || "Unnamed",
+//   })),
+// };