relative coordinates and colors

web/src/components/settings/PolygonCanvas.tsx

@@ -191,6 +191,7 @@ export function PolygonCanvas({
             flattenedPoints={flattenPoints(polygon.points)}
             isActive={index === activePolygonIndex}
             isFinished={polygon.isFinished}
+            color={polygon.color}
             handlePointDragMove={handlePointDragMove}
             handleGroupDragEnd={handleGroupDragEnd}
             handleMouseOverStartPoint={handleMouseOverStartPoint}

web/src/components/settings/PolygonControls.tsx

@@ -53,6 +53,7 @@ export function PolygonControls({
         points: [],
         isFinished: false,
         name: "new",
+        color: updatedPolygons[activePolygonIndex].color ?? [220, 0, 0],
       };
       setPolygons(updatedPolygons);
     }
@@ -65,6 +66,7 @@ export function PolygonControls({
         points: [],
         isFinished: false,
         name: zoneName,
+        color: [220, 0, 0],
       },
     ]);
     setActivePolygonIndex(polygons.length);

web/src/components/settings/PolygonDrawer.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Line, Circle, Group } from "react-konva";
 import { minMax, dragBoundFunc } from "@/utils/canvasUtil";
 import type { KonvaEventObject } from "konva/lib/Node";
@@ -10,6 +10,7 @@ type PolygonDrawerProps = {
   flattenedPoints: number[];
   isActive: boolean;
   isFinished: boolean;
+  color: number[];
   handlePointDragMove: (e: KonvaEventObject<MouseEvent>) => void;
   handleGroupDragEnd: (e: KonvaEventObject<MouseEvent>) => void;
   handleMouseOverStartPoint: (e: KonvaEventObject<MouseEvent>) => void;
@@ -21,6 +22,7 @@ export default function PolygonDrawer({
   flattenedPoints,
   isActive,
   isFinished,
+  color,
   handlePointDragMove,
   handleGroupDragEnd,
   handleMouseOverStartPoint,
@@ -66,6 +68,17 @@ export default function PolygonDrawer({
     return { x, y };
   };
 
+  const colorString = useCallback(
+    (darkened: boolean) => {
+      if (color.length !== 3) {
+        return "rgb(220,0,0,0.5)";
+      }
+
+      return `rgb(${color[0]},${color[1]},${color[2]},${darkened ? "0.8" : "0.5"})`;
+    },
+    [color],
+  );
+
   return (
     <Group
       name="polygon"
@@ -78,10 +91,10 @@ export default function PolygonDrawer({
     >
       <Line
         points={flattenedPoints}
-        stroke="#aa0000"
+        stroke={colorString(true)}
         strokeWidth={3}
         closed={isFinished}
-        fill="rgb(220,0,0,0.5)"
+        fill={colorString(false)}
       />
       {points.map((point, index) => {
         if (!isActive) {
@@ -104,7 +117,7 @@ export default function PolygonDrawer({
             x={x}
             y={y}
             radius={vertexRadius}
-            fill="#dd0000"
+            fill={colorString(false)}
             stroke="#cccccc"
             strokeWidth={2}
             draggable={isActive}

web/src/components/settings/Zones.tsx

@@ -34,8 +34,8 @@ const parseCoordinates = (coordinatesString: string) => {
   const points = [];
 
   for (let i = 0; i < coordinates.length; i += 2) {
-    const x = parseInt(coordinates[i], 10);
-    const y = parseInt(coordinates[i + 1], 10);
+    const x = parseFloat(coordinates[i]);
+    const y = parseFloat(coordinates[i + 1]);
     points.push([x, y]);
   }
 
@@ -132,12 +132,13 @@ export default function SettingsZones() {
           name,
           points: interpolatePoints(
             parseCoordinates(zoneData.coordinates),
-            cameraConfig.detect.width,
-            cameraConfig.detect.height,
+            1,
+            1,
             scaledWidth,
             scaledHeight,
           ),
           isFinished: true,
+          color: zoneData.color,
         })),
       );
     }

web/src/types/canvas.ts

@@ -2,4 +2,5 @@ export type Polygon = {
   name: string;
   points: number[][];
   isFinished: boolean;
+  color: number[];
 };

web/src/types/frigateConfig.ts

@@ -200,6 +200,7 @@ export interface CameraConfig {
       filters: Record<string, unknown>;
       inertia: number;
       objects: string[];
+      color: number[];
     };
   };
 }