mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-19 01:17:06 +03:00
debug draw area and ratio
This commit is contained in:
Josh Hawkins
parent
0b02fe02ea
commit
9623bda393
177
web/src/components/overlay/DebugDrawingLayer.tsx
Normal file
177
web/src/components/overlay/DebugDrawingLayer.tsx
Normal file
@ -0,0 +1,177 @@
|
||||
import React, { useState, useRef, useCallback, useMemo } from "react";
|
||||
import { Stage, Layer, Rect } from "react-konva";
|
||||
import { KonvaEventObject } from "konva/lib/Node";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import Konva from "konva";
|
||||
import { useResizeObserver } from "@/hooks/resize-observer";
|
||||
|
||||
type DebugDrawingLayerProps = {
|
||||
containerRef: React.RefObject<HTMLDivElement>;
|
||||
cameraWidth: number;
|
||||
cameraHeight: number;
|
||||
};
|
||||
|
||||
function DebugDrawingLayer({
|
||||
containerRef,
|
||||
cameraWidth,
|
||||
cameraHeight,
|
||||
}: DebugDrawingLayerProps) {
|
||||
const [rectangle, setRectangle] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
} | null>(null);
|
||||
const [isDrawing, setIsDrawing] = useState(false);
|
||||
const [showPopover, setShowPopover] = useState(false);
|
||||
const stageRef = useRef<Konva.Stage>(null);
|
||||
|
||||
const [{ width: containerWidth }] = useResizeObserver(containerRef);
|
||||
|
||||
const imageSize = useMemo(() => {
|
||||
const aspectRatio = cameraWidth / cameraHeight;
|
||||
const imageWidth = containerWidth;
|
||||
const imageHeight = imageWidth / aspectRatio;
|
||||
return { width: imageWidth, height: imageHeight };
|
||||
}, [containerWidth, cameraWidth, cameraHeight]);
|
||||
|
||||
const handleMouseDown = (e: KonvaEventObject<MouseEvent>) => {
|
||||
const pos = e.target.getStage()?.getPointerPosition();
|
||||
if (pos) {
|
||||
setIsDrawing(true);
|
||||
setRectangle({ x: pos.x, y: pos.y, width: 0, height: 0 });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
|
||||
if (!isDrawing) return;
|
||||
|
||||
const pos = e.target.getStage()?.getPointerPosition();
|
||||
if (pos && rectangle) {
|
||||
setRectangle({
|
||||
...rectangle,
|
||||
width: pos.x - rectangle.x,
|
||||
height: pos.y - rectangle.y,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDrawing(false);
|
||||
if (rectangle) {
|
||||
setShowPopover(true);
|
||||
}
|
||||
};
|
||||
|
||||
const convertToRealCoordinates = useCallback(
|
||||
(x: number, y: number, width: number, height: number) => {
|
||||
const scaleX = cameraWidth / imageSize.width;
|
||||
const scaleY = cameraHeight / imageSize.height;
|
||||
return {
|
||||
x: x * scaleX,
|
||||
y: y * scaleY,
|
||||
width: width * scaleX,
|
||||
height: height * scaleY,
|
||||
};
|
||||
},
|
||||
[cameraWidth, cameraHeight, imageSize.width, imageSize.height],
|
||||
);
|
||||
|
||||
const calculateArea = useCallback(() => {
|
||||
if (!rectangle) return 0;
|
||||
const { width, height } = convertToRealCoordinates(
|
||||
0,
|
||||
0,
|
||||
Math.abs(rectangle.width),
|
||||
Math.abs(rectangle.height),
|
||||
);
|
||||
return width * height;
|
||||
}, [rectangle, convertToRealCoordinates]);
|
||||
|
||||
const calculateAreaPercentage = useCallback(() => {
|
||||
if (!rectangle) return 0;
|
||||
const { width, height } = convertToRealCoordinates(
|
||||
0,
|
||||
0,
|
||||
Math.abs(rectangle.width),
|
||||
Math.abs(rectangle.height),
|
||||
);
|
||||
return (width * height) / (cameraWidth * cameraHeight);
|
||||
}, [rectangle, convertToRealCoordinates, cameraWidth, cameraHeight]);
|
||||
|
||||
const calculateRatio = useCallback(() => {
|
||||
if (!rectangle) return 0;
|
||||
const { width, height } = convertToRealCoordinates(
|
||||
0,
|
||||
0,
|
||||
Math.abs(rectangle.width),
|
||||
Math.abs(rectangle.height),
|
||||
);
|
||||
return width / height;
|
||||
}, [rectangle, convertToRealCoordinates]);
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 cursor-crosshair">
|
||||
<Stage
|
||||
width={imageSize.width}
|
||||
height={imageSize.height}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
ref={stageRef}
|
||||
>
|
||||
<Layer>
|
||||
{rectangle && (
|
||||
<Rect
|
||||
x={rectangle.x}
|
||||
y={rectangle.y}
|
||||
width={rectangle.width}
|
||||
height={rectangle.height}
|
||||
stroke="white"
|
||||
strokeWidth={4}
|
||||
/>
|
||||
)}
|
||||
</Layer>
|
||||
</Stage>
|
||||
{showPopover && rectangle && (
|
||||
<Popover open={showPopover} onOpenChange={setShowPopover}>
|
||||
<PopoverTrigger asChild>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: `${rectangle.x + rectangle.width / 2}px`,
|
||||
top: `${rectangle.y + rectangle.height / 2}px`,
|
||||
}}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-5 text-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col text-primary">
|
||||
Area:{" "}
|
||||
<span className="text-sm text-primary-variant">
|
||||
px: {calculateArea().toFixed(0)}
|
||||
</span>
|
||||
<span className="text-sm text-primary-variant">
|
||||
%: {calculateAreaPercentage().toFixed(4)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col text-primary">
|
||||
Ratio:{" "}
|
||||
<span className="text-sm text-primary-variant">
|
||||
{" "}
|
||||
{calculateRatio().toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DebugDrawingLayer;
|
||||
@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import ActivityIndicator from "@/components/indicators/activity-indicator";
|
||||
import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
|
||||
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
|
||||
@ -23,6 +23,9 @@ import { getIconForLabel } from "@/utils/iconUtil";
|
||||
import { capitalizeFirstLetter } from "@/utils/stringUtil";
|
||||
import { LuExternalLink, LuInfo } from "react-icons/lu";
|
||||
import { Link } from "react-router-dom";
|
||||
import DebugDrawingLayer from "@/components/overlay/DebugDrawingLayer";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
|
||||
type ObjectSettingsViewProps = {
|
||||
selectedCamera?: string;
|
||||
@ -37,6 +40,8 @@ export default function ObjectSettingsView({
|
||||
}: ObjectSettingsViewProps) {
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const DEBUG_OPTIONS = [
|
||||
{
|
||||
param: "bbox",
|
||||
@ -130,6 +135,12 @@ export default function ObjectSettingsView({
|
||||
[options, setOptions],
|
||||
);
|
||||
|
||||
const [debugDraw, setDebugDraw] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDebugDraw(false);
|
||||
}, [selectedCamera]);
|
||||
|
||||
const cameraConfig = useMemo(() => {
|
||||
if (config && selectedCamera) {
|
||||
return config.cameras[selectedCamera];
|
||||
@ -234,7 +245,7 @@ export default function ObjectSettingsView({
|
||||
<span className="sr-only">Info</span>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80">
|
||||
<PopoverContent className="w-80 text-sm">
|
||||
{info}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
@ -256,6 +267,62 @@ export default function ObjectSettingsView({
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isDesktop && (
|
||||
<>
|
||||
<Separator className="my-2" />
|
||||
<div className="flex w-full flex-row items-center justify-between">
|
||||
<div className="mb-2 flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label
|
||||
className="mb-0 cursor-pointer capitalize text-primary"
|
||||
htmlFor="debugdraw"
|
||||
>
|
||||
Object Shape Filter Drawing
|
||||
</Label>
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<div className="cursor-pointer p-0">
|
||||
<LuInfo className="size-4" />
|
||||
<span className="sr-only">Info</span>
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80 text-sm">
|
||||
Enable this option to draw a rectangle on the
|
||||
camera image to show its area and ratio. These
|
||||
values can then be used to set object shape filter
|
||||
parameters in your config.
|
||||
<div className="mt-2 flex items-center text-primary">
|
||||
<Link
|
||||
to="https://docs.frigate.video/configuration/object_filters#object-shape"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline"
|
||||
>
|
||||
Read the documentation{" "}
|
||||
<LuExternalLink className="ml-2 inline-flex size-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-muted-foreground">
|
||||
Draw a rectangle on the image to view area and ratio
|
||||
details
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
key={`$draw-${selectedCamera}`}
|
||||
className="ml-1"
|
||||
id="debug_draw"
|
||||
checked={debugDraw}
|
||||
onCheckedChange={(isChecked) => {
|
||||
setDebugDraw(isChecked);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
@ -267,7 +334,7 @@ export default function ObjectSettingsView({
|
||||
|
||||
{cameraConfig ? (
|
||||
<div className="flex md:h-dvh md:max-h-full md:w-7/12 md:grow">
|
||||
<div className="size-full min-h-10">
|
||||
<div ref={containerRef} className="relative size-full min-h-10">
|
||||
<AutoUpdatingCameraImage
|
||||
camera={cameraConfig.name}
|
||||
searchParams={searchParams}
|
||||
@ -275,6 +342,13 @@ export default function ObjectSettingsView({
|
||||
className="size-full"
|
||||
cameraClasses="relative w-full h-full flex flex-col justify-start"
|
||||
/>
|
||||
{debugDraw && (
|
||||
<DebugDrawingLayer
|
||||
containerRef={containerRef}
|
||||
cameraWidth={cameraConfig.detect.width}
|
||||
cameraHeight={cameraConfig.detect.height}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user