From bbca5ffdfad260828d5040041c822fd8f5482321 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Mon, 8 Apr 2024 11:02:35 -0500 Subject: [PATCH] multi zones --- web/src/components/settings/PolygonCanvas.tsx | 107 +++++++++--------- web/src/components/settings/Zones.tsx | 85 +++++++++++--- web/src/utils/canvasUtil.ts | 2 +- 3 files changed, 126 insertions(+), 68 deletions(-) diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx index a83163ab2..a55cd5e21 100644 --- a/web/src/components/settings/PolygonCanvas.tsx +++ b/web/src/components/settings/PolygonCanvas.tsx @@ -72,6 +72,7 @@ export function PolygonCanvas({ }; videoElement.addEventListener("load", onload); return () => { + console.log("unloading"); videoElement.removeEventListener("load", onload); }; }, [videoElement]); @@ -112,53 +113,53 @@ export function PolygonCanvas({ }; const handleMouseDown = (e: KonvaEventObject) => { - if (activePolygonIndex === null || !polygons) { + if (!activePolygonIndex || !polygons) { return; } console.log("mouse down polygons", polygons); console.log(activePolygonIndex); - if (!polygons[activePolygonIndex].points.length) { - // Start a new polygon - const stage = e.target.getStage()!; - const mousePos = getMousePos(stage); - setPolygons([ - ...polygons, - { - name: "foo", - points: [mousePos], - isFinished: false, - }, - ]); - setActivePolygonIndex(polygons.length); - } else { - const updatedPolygons = [...polygons]; - const activePolygon = updatedPolygons[activePolygonIndex]; - const stage = e.target.getStage()!; - const mousePos = getMousePos(stage); + // if (!polygons[activePolygonIndex].points.length) { + // // Start a new polygon + // const stage = e.target.getStage()!; + // const mousePos = getMousePos(stage); + // setPolygons([ + // ...polygons, + // { + // name: "foo", + // points: [mousePos], + // isFinished: false, + // }, + // ]); + // setActivePolygonIndex(polygons.length); + // } else { + const updatedPolygons = [...polygons]; + const activePolygon = updatedPolygons[activePolygonIndex]; + const stage = e.target.getStage()!; + const mousePos = getMousePos(stage); - if ( - isMouseOverPoint(activePolygon, mousePos) && - activePolygon.points.length >= 3 - ) { - // Close the polygon + if ( + activePolygon.points.length >= 3 && + isMouseOverPoint(activePolygon, mousePos) + ) { + // Close the polygon + updatedPolygons[activePolygonIndex] = { + ...activePolygon, + isFinished: true, + }; + setPolygons(updatedPolygons); + // setActivePolygonIndex(null); + } else { + if (!activePolygon.isFinished) { + // Add a new point to the active polygon updatedPolygons[activePolygonIndex] = { ...activePolygon, - isFinished: true, + points: [...activePolygon.points, mousePos], }; setPolygons(updatedPolygons); - // setActivePolygonIndex(null); - } else { - if (!activePolygon.isFinished) { - // Add a new point to the active polygon - updatedPolygons[activePolygonIndex] = { - ...activePolygon, - points: [...activePolygon.points, mousePos], - }; - setPolygons(updatedPolygons); - } } } + // } }; const handleMouseMove = (e: KonvaEventObject) => { @@ -177,16 +178,16 @@ export function PolygonCanvas({ }; const handleMouseOutStartPoint = (e: KonvaEventObject) => { - console.log("active index:", activePolygonIndex); + // console.log("active index:", activePolygonIndex); e.currentTarget.scale({ x: 1, y: 1 }); if (activePolygonIndex !== null && polygons) { const activePolygon = polygons[activePolygonIndex]; - console.log(activePolygon); + // console.log(activePolygon); if ( (!activePolygon.isFinished && activePolygon.points.length >= 3) || activePolygon.isFinished ) { - console.log(e.currentTarget); + // console.log(e.currentTarget); e.currentTarget.scale({ x: 1, y: 1 }); } } @@ -237,13 +238,14 @@ export function PolygonCanvas({ setPolygons(updatedPolygons); } }; + // console.log("rendering canvas", Date.now()); return ( @@ -255,20 +257,19 @@ export function PolygonCanvas({ width={width} height={height} /> - {polygons && - polygons.map((polygon, index) => ( - - ))} + {polygons?.map((polygon, index) => ( + + ))} ); diff --git a/web/src/components/settings/Zones.tsx b/web/src/components/settings/Zones.tsx index 2ddf4c186..bc8f325a0 100644 --- a/web/src/components/settings/Zones.tsx +++ b/web/src/components/settings/Zones.tsx @@ -8,6 +8,14 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; import { FrigateConfig } from "@/types/frigateConfig"; import useSWR from "swr"; import ActivityIndicator from "@/components/indicators/activity-indicator"; @@ -21,6 +29,7 @@ import { isDesktop } from "react-device-detect"; import PolygonControls from "./PolygonControls"; import { Skeleton } from "../ui/skeleton"; import { useResizeObserver } from "@/hooks/resize-observer"; +import { LuPencil } from "react-icons/lu"; const parseCoordinates = (coordinatesString: string) => { const coordinates = coordinatesString.split(","); @@ -97,26 +106,30 @@ export default function SettingsZones() { } }, [cameraAspect]); - const [{ width: containerWidth, height: containerHeight }] = - useResizeObserver(containerRef); + // const [{ width: containerWidth, height: containerHeight }] = + // useResizeObserver(containerRef); + const containerWidth = containerRef.current?.clientWidth; + const containerHeight = containerRef.current?.clientHeight; // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering. // https://github.com/blakeblackshear/frigate/issues/1657 let scrollBarWidth = 0; - if (window.innerWidth && document.body.offsetWidth) { - scrollBarWidth = window.innerWidth - document.body.offsetWidth; - } - const availableWidth = scrollBarWidth - ? containerWidth + scrollBarWidth - : containerWidth; + // if (window.innerWidth && document.body.offsetWidth) { + // scrollBarWidth = window.innerWidth - document.body.offsetWidth; + // } + // const availableWidth = scrollBarWidth + // ? containerWidth + scrollBarWidth + // : containerWidth; + + const availableWidth = containerWidth; const { width, height } = cameraConfig ? cameraConfig.detect : { width: 1, height: 1 }; const aspectRatio = width / height; - const stretch = true; - const fitAspect = 1.8; + const stretch = false; + const fitAspect = 1; const scaledHeight = useMemo(() => { const scaledHeight = aspectRatio < (fitAspect ?? 0) @@ -158,7 +171,9 @@ export default function SettingsZones() { })), ); } - }, [cameraConfig, containerRef, scaledWidth, scaledHeight]); + // we know that these deps are correct + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [cameraConfig, containerRef]); // const image = useMemo(() => { // if (cameraConfig && containerRef && containerRef.current) { @@ -193,7 +208,7 @@ export default function SettingsZones() { return ( <> - Motion Detection Tuner + Zones