diff --git a/web/src/components/settings/MotionMaskEditPane.tsx b/web/src/components/settings/MotionMaskEditPane.tsx index eec5c9a38..e73409f50 100644 --- a/web/src/components/settings/MotionMaskEditPane.tsx +++ b/web/src/components/settings/MotionMaskEditPane.tsx @@ -73,6 +73,29 @@ export default function MotionMaskEditPane({ return `Motion Mask ${count + 1}`; }, [polygons]); + const polygonArea = useMemo(() => { + if (polygon && polygon.isFinished && scaledWidth && scaledHeight) { + const points = interpolatePoints( + polygon.points, + scaledWidth, + scaledHeight, + 1, + 1, + ); + + const n = points.length; + let area = 0; + + for (let i = 0; i < n; i++) { + const [x1, y1] = points[i]; + const [x2, y2] = points[(i + 1) % n]; + area += x1 * y2 - y1 * x2; + } + + return Math.abs(area) / 2; + } + }, [polygon, scaledWidth, scaledHeight]); + const formSchema = z .object({ polygon: z.object({ name: z.string(), isFinished: z.boolean() }), @@ -238,6 +261,28 @@ export default function MotionMaskEditPane({ + {polygonArea && polygonArea >= 0.35 && ( + <> +
+ The motion mask is covering {Math.round(polygonArea * 100)}% of the + camera frame. Large motion masks are not recommended. +
+
+ Motion masks do not prevent objects from being detected. You should + use a required zone instead. + + Read the documentation{" "} + + +
+ + )} +