Merge branch 'develop' into feature/dashboardPage

src/features/cameras/components/CameraGrid.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
+import CameraSettings from "./CameraSettings/CameraSettings";
+import type { Region } from "../../../types/types";
+import PlatePatch from "./PlatePatch/PlatePatch";
+
+const CameraGrid = () => {
+  const [regions, setRegions] = useState<Region[]>([
+    { name: "Region 1", brushColour: "#ff0000" },
+    { name: "Region 2", brushColour: "#00ff00" },
+    { name: "Region 3", brushColour: "#0400ff" },
+  ]);
+  const [selectedRegionIndex, setSelectedRegionIndex] = useState(0);
+  const [mode, setMode] = useState("");
+  const [tabIndex, setTabIndex] = useState(0);
+  console.log(tabIndex);
+  const updateRegionColour = (index: number, newColour: string) => {
+    setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
+  };
+  console.log(mode);
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
+      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+      <CameraSettings
+        regions={regions}
+        selectedRegionIndex={selectedRegionIndex}
+        onSelectRegion={setSelectedRegionIndex}
+        onChangeRegionColour={updateRegionColour}
+        mode={mode}
+        onSelectMode={setMode}
+        tabIndex={tabIndex}
+        setTabIndex={setTabIndex}
+      />
+      <PlatePatch />
+    </div>
+  );
+};
+
+export default CameraGrid;

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

@@ -0,0 +1,65 @@
+import Card from "../../../../ui/Card";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import RegionSelector from "./RegionSelector";
+import type { Region } from "../../../../types/types";
+
+type CameraSettingsProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+  onSelectRegion: (index: number) => void;
+  onChangeRegionColour: (index: number, colour: string) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
+  setTabIndex: (tabIndex: number) => void;
+  tabIndex: number;
+};
+
+const CameraSettings = ({
+  regions,
+  selectedRegionIndex,
+  onSelectRegion,
+  onChangeRegionColour,
+  mode,
+  onSelectMode,
+  tabIndex,
+  setTabIndex,
+}: CameraSettingsProps) => {
+  return (
+    <Card className="p-4 max-h-screen col-span-3">
+      <Tabs
+        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
+        className="react-tabs"
+        onSelect={(index) => setTabIndex(index)}
+      >
+        <TabList>
+          <Tab>Target Detection</Tab>
+          <Tab>Camera 1</Tab>
+          <Tab>Camera 2</Tab>
+          <Tab>Camera 3</Tab>
+        </TabList>
+        <TabPanel>
+          <RegionSelector
+            regions={regions}
+            selectedRegionIndex={selectedRegionIndex}
+            onSelectRegion={onSelectRegion}
+            onChangeRegionColour={onChangeRegionColour}
+            mode={mode}
+            onSelectMode={onSelectMode}
+          />
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+      </Tabs>
+    </Card>
+  );
+};
+
+export default CameraSettings;

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

@@ -0,0 +1,10 @@
+type ColourPickerProps = {
+  colour: string;
+  setColour: (colour: string) => void;
+};
+
+const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
+  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+};
+
+export default ColourPicker;

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

@@ -0,0 +1,69 @@
+import ColourPicker from "./ColourPicker";
+import type { Region } from "../../../../types/types";
+
+type RegionSelectorProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+  onSelectRegion: (index: number) => void;
+  onChangeRegionColour: (index: number, colour: string) => void;
+  mode: string;
+  onSelectMode: (mode: string) => void;
+};
+
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  onSelectRegion,
+  onChangeRegionColour,
+  mode,
+  onSelectMode,
+}: RegionSelectorProps) => {
+  const handleChange = (e: { target: { value: string } }) => {
+    onSelectMode(e.target.value);
+  };
+
+  return (
+    <div>
+      <div>
+        <h2 className="text-xl">Region Select</h2>
+      </div>
+      <div>
+        {regions.map((region, idx) => (
+          <div
+            key={region.name}
+            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
+          >
+            <label style={{ marginRight: "0.5rem" }}>
+              <input
+                type="radio"
+                checked={selectedRegionIndex === idx}
+                onChange={() => {
+                  onSelectMode("painter");
+                  onSelectRegion(idx);
+                }}
+              />{" "}
+              {region.name}
+            </label>
+            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
+          </div>
+        ))}
+        <div>
+          <h2 className="text-xl">Tools</h2>
+        </div>
+        <div className="flex flex-col">
+          <label htmlFor="mode">
+            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
+            Paint mode
+          </label>
+
+          <label htmlFor="erase">
+            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
+            Erase mode
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegionSelector;

src/features/cameras/components/PlatePatch/PlatePatch.tsx

@@ -0,0 +1,7 @@
+import Card from "../../../../ui/Card";
+
+const PlatePatch = () => {
+  return <Card>PlatePatch</Card>;
+};
+
+export default PlatePatch;

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

@@ -0,0 +1,153 @@
+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 type { Region } from "../../../../types/types";
+import Card from "../../../../ui/Card";
+
+const rows = 40;
+const cols = 40;
+const size = 20;
+const gap = 0;
+
+type VideoFeedGridPainterProps = {
+  regions: Region[];
+  selectedRegionIndex: number;
+  mode: string;
+};
+
+type PaintedCell = {
+  colour: string;
+};
+
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
+  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
+  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
+  const isDrawingRef = useRef(false);
+  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const paintLayerRef = useRef<any>(null);
+
+  const draw = (bmp: RefObject<ImageBitmap | null>): ImageBitmap | null => {
+    if (!bmp || !bmp.current) {
+      return null;
+    }
+    const image = bmp.current;
+    return image;
+  };
+
+  const image = draw(latestBitmapRef);
+
+  const paintCell = (x: number, y: number) => {
+    const col = Math.floor(x / (size + gap));
+    const row = Math.floor(y / (size + gap));
+
+    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 = paintedCellsRef.current;
+    const existing = map.get(key);
+
+    if (mode === "eraser") {
+      if (map.has(key)) {
+        map.delete(key);
+        paintLayerRef.current?.batchDraw();
+      }
+      return;
+    }
+
+    if (existing && existing.colour === currentColour) return;
+
+    map.set(key, { colour: currentColour });
+
+    paintLayerRef.current?.batchDraw();
+  };
+
+  const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
+    if (!regions[selectedRegionIndex]) 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) return;
+    if (!regions[selectedRegionIndex]) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) paintCell(pos.x, pos.y);
+  };
+
+  const handleStageMouseUp = () => {
+    isDrawingRef.current = false;
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+
+      const aspectRatio = 740 / 460;
+      const newWidth = width * 0.36;
+      const newHeight = newWidth / aspectRatio;
+      setStageSize({ width: newWidth, height: newHeight });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  if (image === null || isloading)
+    return (
+      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+        <span className="text-slate-500">Loading Video feed…</span>
+      </Card>
+    );
+  return (
+    <div className="row-span-1 col-span-2 rounded-lg">
+      <Stage
+        width={stageSize.width}
+        height={stageSize.height}
+        onMouseDown={handleStageMouseDown}
+        onMouseMove={handleStageMouseMove}
+        onMouseUp={handleStageMouseUp}
+        onMouseLeave={handleStageMouseUp}
+      >
+        <Layer>
+          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
+        </Layer>
+
+        <Layer ref={paintLayerRef} opacity={0.6}>
+          <Shape
+            sceneFunc={(ctx, shape) => {
+              const cells = paintedCellsRef.current;
+              cells.forEach((cell, key) => {
+                const [rowStr, colStr] = key.split("-");
+                const row = Number(rowStr);
+                const col = Number(colStr);
+
+                const x = col * (size + gap);
+                const y = row * (size + gap);
+
+                ctx.beginPath();
+                ctx.rect(x, y, size, size);
+                ctx.fillStyle = cell.colour;
+                ctx.fill();
+              });
+
+              ctx.fillStrokeShape(shape);
+            }}
+            width={stageSize.width}
+            height={stageSize.height}
+          />
+        </Layer>
+      </Stage>
+    </div>
+  );
+};
+
+export default VideoFeedGridPainter;

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+
+const getfeed = async () => {
+  const response = await fetch(`http://100.115.148.59/TargetDetectionColour-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+};
+
+export const useGetVideoFeed = () => {
+  const videoQuery = useQuery({
+    queryKey: ["getfeed"],
+    queryFn: getfeed,
+    refetchInterval: 500,
+  });
+
+  return { videoQuery };
+};

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { useGetVideoFeed } from "./useGetVideoFeed";
+
+export const useCreateVideoSnapshot = () => {
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
+  const { videoQuery } = useGetVideoFeed();
+
+  const snapShot = videoQuery?.data;
+  const isloading = videoQuery.isPending;
+
+  useEffect(() => {
+    async function createBitmap() {
+      if (!snapShot) return;
+
+      try {
+        const bitmap = await createImageBitmap(snapShot);
+        if (!bitmap) return;
+        latestBitmapRef.current = bitmap;
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    createBitmap();
+  }, [snapShot]);
+
+  return { latestBitmapRef, isloading };
+};

src/routes/baywatch.tsx

@@ -1,9 +1,17 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import CameraGrid from "../features/cameras/components/CameraGrid";
+import { Toaster } from "sonner";
 
-export const Route = createFileRoute('/baywatch')({
+export const Route = createFileRoute("/baywatch")({
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/baywatch"!</div>
+  return (
+    <div>
+      <h2 className="text-xl font-semibold">Cameras</h2>
+      <CameraGrid />
+      <Toaster />
+    </div>
+  );
 }

src/types/types.ts

@@ -12,3 +12,7 @@ export type InfoBarData = {
 };
 
 export type StatusIndicator = "neutral-quaternary" | "dark" | "info" | "success" | "warning" | "danger";
+export type Region = {
+  name: string;
+  brushColour: string;
+};

src/ui/Header.tsx

@@ -18,7 +18,7 @@ const Header = () => {
         </Link>
 
         <Link to="/baywatch" className="[&.active]:font-bold">
-          Baywatch
+          Cameras
         </Link>
         <Link to="/output" className="[&.active]:font-bold">
           Output