+ {camera} mask & zone creator
+
-
+ {data.has_clip ? (
+
+ ) : (
+
);
diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index cec890dac..c081ead80 100644
--- a/web/src/components/Button.jsx
+++ b/web/src/components/Button.jsx
@@ -2,13 +2,14 @@ import { h } from 'preact';
const noop = () => {};
-export default function Button({ children, color, onClick, size }) {
+export default function Button({ children, className, color = 'blue', onClick, size, ...attrs }) {
return (
+ This tool can help you create masks & zones for your {camera} camera. When done, copy each mask configuration
+ into your config.yml file restart your Frigate instance to save your changes.
+
- {Object.keys(zonePoints).map((zone) => (
-
-
- {!mask ? : null}
-
+
+
);
}
+function maskYamlKeyPrefix(points) {
+ return ` - `;
+}
+
+function zoneYamlKeyPrefix(points, key) {
+ return ` ${key}:
+ coordinates: `;
+}
+
+function objectYamlKeyPrefix(points, key, subkey) {
+ return ` - `;
+}
+
function EditableMask({ onChange, points, scale, width, height }) {
+ if (!points) {
+ return null;
+ }
const boundingRef = useRef(null);
function boundedSize(value, maxValue) {
@@ -133,6 +316,7 @@ function EditableMask({ onChange, points, scale, width, height }) {
const index = points.indexOf(closest);
const newPoints = [...points];
newPoints.splice(index, 0, newPoint);
+ console.log(points, newPoints);
onChange(newPoints);
},
[scale, points, onChange]
@@ -180,29 +364,131 @@ function EditableMask({ onChange, points, scale, width, height }) {
);
}
-function MaskValues({ editing, name, onSelect, points }) {
- const handleClick = useCallback(() => {
- onSelect(name);
- }, [name, onSelect]);
+function MaskValues({
+ isMulti = false,
+ editing,
+ title,
+ onCopy,
+ onCreate,
+ onEdit,
+ onRemove,
+ points,
+ yamlPrefix,
+ yamlKeyPrefix,
+}) {
+ const [showButtons, setShowButtons] = useState(false);
+
+ const handleMousein = useCallback(() => {
+ setShowButtons(true);
+ }, [setShowButtons]);
+
+ const handleMouseout = useCallback(
+ (event) => {
+ const el = event.toElement || event.relatedTarget;
+ if (!el || el.parentNode === event.target) {
+ return;
+ }
+ setShowButtons(false);
+ },
+ [setShowButtons]
+ );
+
+ const handleEdit = useCallback(
+ (event) => {
+ const { key, subkey } = event.target.dataset;
+ onEdit(key, subkey);
+ },
+ [onEdit]
+ );
+
+ const handleRemove = useCallback(
+ (event) => {
+ const { key, subkey } = event.target.dataset;
+ onRemove(key, subkey);
+ },
+ [onRemove]
+ );
return (
+
-
- {name}
-
-
+
);
}
+function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handleRemove, yamlKeyPrefix }) {
+ return (
+
+ {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
+ {showButtons ? (
+
+ ) : null}
+
+ );
+}
+
function distance([x0, y0], [x1, y1]) {
return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
}
@@ -212,17 +498,14 @@ function getPolylinePoints(polyline) {
return;
}
- return polyline
- .replace('poly,', '')
- .split(',')
- .reduce((memo, point, i) => {
- if (i % 2) {
- memo[memo.length - 1].push(parseInt(point, 10));
- } else {
- memo.push([parseInt(point, 10)]);
- }
- return memo;
- }, []);
+ return polyline.split(',').reduce((memo, point, i) => {
+ if (i % 2) {
+ memo[memo.length - 1].push(parseInt(point, 10));
+ } else {
+ memo.push([parseInt(point, 10)]);
+ }
+ return memo;
+ }, []);
}
function scalePolylinePoints(polylinePoints, scale) {
diff --git a/web/src/Event.jsx b/web/src/Event.jsx
index f89f52a3f..d70e9c67a 100644
--- a/web/src/Event.jsx
+++ b/web/src/Event.jsx
@@ -30,10 +30,15 @@ export default function Event({ eventId }) {
{data.camera} {data.label} {datetime.toLocaleString()}
+
+ {title}
+
+
+
+
+
+ {yamlPrefix}
+ {Object.keys(points).map((mainkey) => {
+ if (isMulti) {
+ return (
+
+ {` ${mainkey}:\n mask:\n`}
+ {points[mainkey].map((item, subkey) => (
+
No clip available
+ )} +{JSON.stringify(data, null, 2)}
{children}