administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-09 16:47:37 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

display area as proper percentage in debug view

Browse Source
This commit is contained in:
Josh Hawkins 2026-04-08 07:31:34 -05:00
parent 5d2a725428
commit 3d18780aef
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/overlay/DebugDrawingLayer.tsx
View File

@ -8,6 +8,7 @@ import {
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import Konva from "konva"; import Konva from "konva";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import { useTranslation } from "react-i18next";
type DebugDrawingLayerProps = { type DebugDrawingLayerProps = {
containerRef: React.RefObject<HTMLDivElement | null>; containerRef: React.RefObject<HTMLDivElement | null>;
@ -28,6 +29,7 @@ function DebugDrawingLayer({
} | null>(null); } | null>(null);
const [isDrawing, setIsDrawing] = useState(false); const [isDrawing, setIsDrawing] = useState(false);
const [showPopover, setShowPopover] = useState(false); const [showPopover, setShowPopover] = useState(false);
const { t } = useTranslation(["common"]);
const stageRef = useRef<Konva.Stage>(null); const stageRef = useRef<Konva.Stage>(null);
const [{ width: containerWidth }] = useResizeObserver(containerRef); const [{ width: containerWidth }] = useResizeObserver(containerRef);
@ -153,10 +155,13 @@ function DebugDrawingLayer({
<div className="flex flex-col text-primary"> <div className="flex flex-col text-primary">
Area:{" "} Area:{" "}
<span className="text-sm text-primary-variant"> <span className="text-sm text-primary-variant">
px: {calculateArea().toFixed(0)} {t("information.pixels", {
ns: "common",
area: calculateArea().toFixed(0),
})}
</span> </span>
<span className="text-sm text-primary-variant"> <span className="text-sm text-primary-variant">
%: {calculateAreaPercentage().toFixed(4)} {(calculateAreaPercentage() * 100).toFixed(2)}%
</span> </span>
</div> </div>
<div className="flex flex-col text-primary"> <div className="flex flex-col text-primary">

18
web/src/views/settings/ObjectSettingsView.tsx
View File

@ -370,7 +370,7 @@ type ObjectListProps = {
}; };
function ObjectList({ cameraConfig, objects }: ObjectListProps) { function ObjectList({ cameraConfig, objects }: ObjectListProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings", "common"]);
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const colormap = useMemo(() => { const colormap = useMemo(() => {
@ -440,17 +440,21 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
{obj.area ? ( {obj.area ? (
<div className="text-end"> <div className="text-end">
<div className="text-xs"> <div className="text-xs">
px: {obj.area.toString()} {t("information.pixels", {
ns: "common",
area: obj.area,
})}
</div> </div>
<div className="text-xs"> <div className="text-xs">
%:{" "}
{( {(
obj.area / (obj.area /
(cameraConfig.detect.width * (cameraConfig.detect.width *
cameraConfig.detect.height) cameraConfig.detect.height)) *
100
) )
.toFixed(4) .toFixed(2)
.toString()} .toString()}
%
</div> </div>
</div> </div>
) : ( ) : (