From 3d18780aef7b13c4f239048aa6b8cf716815defd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 8 Apr 2026 07:31:34 -0500
Subject: [PATCH] display area as proper percentage in debug view

---
 .../components/overlay/DebugDrawingLayer.tsx   |  9 +++++++--
 web/src/views/settings/ObjectSettingsView.tsx  | 18 +++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/src/components/overlay/DebugDrawingLayer.tsx b/web/src/components/overlay/DebugDrawingLayer.tsx
index 7cc52bc93..845217adc 100644
--- a/web/src/components/overlay/DebugDrawingLayer.tsx
+++ b/web/src/components/overlay/DebugDrawingLayer.tsx
@@ -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">
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index 2f4ec5eaf..3179fb85c 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -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>
                       ) : (