- improved ui for region selector and camera settings

2025-11-25 14:57:18 +00:00
parent 6ecb005417
commit 18124924f7
7 changed files with 133 additions and 58 deletions
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -1,8 +1,8 @@
-import { useState } from "react";
+import { useRef, useState } from "react";

 import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
-import type { Region } from "../../../types/types";
+import type { PaintedCell, Region } from "../../../types/types";
 import PlatePatch from "./PlatePatch/PlatePatch";

 const CameraGrid = () => {
@@ -14,14 +14,21 @@ const CameraGrid = () => {
  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);
+
+  const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
+
  return (
-    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
-      <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} mode={mode} />
+    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+      <VideoFeedGridPainter
+        regions={regions}
+        selectedRegionIndex={selectedRegionIndex}
+        mode={mode}
+        paintedCells={paintedCellsRef}
+      />
      <CameraSettings
        regions={regions}
        selectedRegionIndex={selectedRegionIndex}
@@ -31,6 +38,7 @@ const CameraGrid = () => {
        onSelectMode={setMode}
        tabIndex={tabIndex}
        setTabIndex={setTabIndex}
+        paintedCells={paintedCellsRef}
      />
      <PlatePatch />
    </div>
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -2,7 +2,8 @@ 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";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";

 type CameraSettingsProps = {
  regions: Region[];
@@ -13,6 +14,7 @@ type CameraSettingsProps = {
  onSelectMode: (mode: string) => void;
  setTabIndex: (tabIndex: number) => void;
  tabIndex: number;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

 const CameraSettings = ({
@@ -24,9 +26,10 @@ const CameraSettings = ({
  onSelectMode,
  tabIndex,
  setTabIndex,
+  paintedCells,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <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">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
@@ -46,6 +49,7 @@ const CameraSettings = ({
            onChangeRegionColour={onChangeRegionColour}
            mode={mode}
            onSelectMode={onSelectMode}
+            paintedCells={paintedCells}
          />
        </TabPanel>
        <TabPanel>
--- a/src/features/cameras/components/CameraSettings/ColourPicker.tsx
+++ b/src/features/cameras/components/CameraSettings/ColourPicker.tsx
@@ -4,7 +4,16 @@ type ColourPickerProps = {
 };

 const ColourPicker = ({ colour, setColour }: ColourPickerProps) => {
-  return <input type="color" name="" id="" value={colour} onChange={(e) => setColour(e.target.value)} />;
+  return (
+    <input
+      type="color"
+      name=""
+      id=""
+      value={colour}
+      onChange={(e) => setColour(e.target.value)}
+      className="h-8 w-8 p-0 rounded-md border border-slate-500 cursor-pointer"
+    />
+  );
 };

 export default ColourPicker;
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -1,5 +1,6 @@
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";

 type RegionSelectorProps = {
  regions: Region[];
@@ -8,6 +9,7 @@ type RegionSelectorProps = {
  onChangeRegionColour: (index: number, colour: string) => void;
  mode: string;
  onSelectMode: (mode: string) => void;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

 const RegionSelector = ({
@@ -17,49 +19,100 @@ const RegionSelector = ({
  onChangeRegionColour,
  mode,
  onSelectMode,
+  paintedCells,
 }: RegionSelectorProps) => {
  const handleChange = (e: { target: { value: string } }) => {
    onSelectMode(e.target.value);
  };

+  const handleResetClick = () => {
+    const map = paintedCells.current;
+    map.clear();
+  };
+
  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%]"
+    <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">
+        <h2 className="text-2xl mb-2">Tools</h2>
+        <div className="flex flex-col">
+          <label
+            htmlFor="paintMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
          >
-            <label style={{ marginRight: "0.5rem" }}>
+            <input
+              id="paintMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "painter"}
+              value="painter"
+              className="sr-only"
+            />
+            <span className="text-xl">Paint mode</span>
+          </label>
+          <label
+            htmlFor="eraseMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="eraseMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "eraser"}
+              value={"eraser"}
+              className="sr-only"
+            />
+            <span className="text-xl">Erase mode</span>
+          </label>
+        </div>
+      </div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Region Select</h2>
+        <>
+          {regions.map((region, idx) => {
+            const isSelected = selectedRegionIndex === idx;
+            const inputId = `region-${idx}`;
+            return (
+              <label
+                htmlFor={inputId}
+                key={region.name}
+                className={`items-center p-4 m-4 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">
                  <input
                    type="radio"
-                checked={selectedRegionIndex === idx}
+                    checked={isSelected}
+                    id={inputId}
+                    name="region"
+                    className="sr-only"
                    onChange={() => {
                      onSelectMode("painter");
                      onSelectRegion(idx);
                    }}
-              />{" "}
-              {region.name}
-            </label>
+                  />
+                  <span className="text-xl">{region.name}</span>
+                </div>
                <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
+                <p className="text-slate-400">{region.brushColour}</p>
              </label>
+            );
+          })}
+        </>
+      </div>

-          <label htmlFor="erase">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
-            Erase mode
-          </label>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+        <div className="flex flex-col">
+          <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleResetClick}
+            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"
+          >
+            Reset Regions
+          </button>
        </div>
      </div>
    </div>
--- a/src/features/cameras/components/PlatePatch/PlatePatch.tsx
+++ b/src/features/cameras/components/PlatePatch/PlatePatch.tsx
@@ -1,7 +1,7 @@
 import Card from "../../../../ui/Card";

 const PlatePatch = () => {
-  return <Card>PlatePatch</Card>;
+  return <Card className="md:row-start-4 md:col-span-2">PlatePatch</Card>;
 };

 export default PlatePatch;
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -2,7 +2,7 @@ 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 type { PaintedCell, Region } from "../../../../types/types";
 import Card from "../../../../ui/Card";

 const rows = 40;
@@ -14,17 +14,14 @@ type VideoFeedGridPainterProps = {
  regions: Region[];
  selectedRegionIndex: number;
  mode: string;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };

-type PaintedCell = {
-  colour: string;
-};
-
-const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedGridPainterProps) => {
+const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode, paintedCells }: 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);

@@ -50,7 +47,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
    const key = `${row}-${col}`;
    const currentColour = regions[selectedRegionIndex].brushColour;

-    const map = paintedCellsRef.current;
+    const map = paintedCells.current;
    const existing = map.get(key);

    if (mode === "eraser") {
@@ -103,12 +100,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG

  if (image === null || isloading)
    return (
-      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+      <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="row-span-1 col-span-2 rounded-lg">
+    <div className="mt-4.5 row-span-1 col-span-2">
      <Stage
        width={stageSize.width}
        height={stageSize.height}
@@ -124,7 +121,7 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, mode }: VideoFeedG
        <Layer ref={paintLayerRef} opacity={0.6}>
          <Shape
            sceneFunc={(ctx, shape) => {
-              const cells = paintedCellsRef.current;
+              const cells = paintedCells.current;
              cells.forEach((cell, key) => {
                const [rowStr, colStr] = key.split("-");
                const row = Number(rowStr);
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -57,3 +57,7 @@ export type InitialValuesFormErrors = {
 };

 export type FormTypes = BearerTypeFields & OptionalConstants & OptionalLaneIDs;
+
+export type PaintedCell = {
+  colour: string;
+};