administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-09 08:37: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";
import Konva from "konva";
import { useResizeObserver } from "@/hooks/resize-observer";
import { useTranslation } from "react-i18next";
type DebugDrawingLayerProps = {
containerRef: React.RefObject<HTMLDivElement | null>;
@ -28,6 +29,7 @@ function DebugDrawingLayer({
} | null>(null);
const [isDrawing, setIsDrawing] = useState(false);
const [showPopover, setShowPopover] = useState(false);
const { t } = useTranslation(["common"]);
const stageRef = useRef<Konva.Stage>(null);
const [{ width: containerWidth }] = useResizeObserver(containerRef);
@ -153,10 +155,13 @@ function DebugDrawingLayer({
<div className="flex flex-col text-primary">
Area:{" "}
<span className="text-sm text-primary-variant">
px: {calculateArea().toFixed(0)}
{t("information.pixels", {
ns: "common",
area: calculateArea().toFixed(0),
})}
</span>
<span className="text-sm text-primary-variant">
%: {calculateAreaPercentage().toFixed(4)}
{(calculateAreaPercentage() * 100).toFixed(2)}%
</span>
</div>
<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) {
const { t } = useTranslation(["views/settings"]);
const { t } = useTranslation(["views/settings", "common"]);
const { data: config } = useSWR<FrigateConfig>("config");
const colormap = useMemo(() => {
@ -440,17 +440,21 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
{obj.area ? (
<div className="text-end">
<div className="text-xs">
px: {obj.area.toString()}
{t("information.pixels", {
ns: "common",
area: obj.area,
})}
</div>
<div className="text-xs">
%:{" "}
{(
obj.area /
(cameraConfig.detect.width *
cameraConfig.detect.height)
(obj.area /
(cameraConfig.detect.width *
cameraConfig.detect.height)) *
100
)
.toFixed(4)
.toFixed(2)
.toString()}
%
</div>
</div>
) : (