administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 09:15:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

chore: revert quotes in camermap

Browse Source
This commit is contained in:
JohnMark Sill 2022-02-16 10:59:21 -06:00
parent 1dc73ddc92
commit eaeda18453
1 changed files with 55 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/routes/CameraMap.jsx
View File

@ -20,7 +20,10 @@ export default function CameraMasks({ camera, url }) {
zones, zones,
} = cameraConfig; } = cameraConfig;
const { width, height } = cameraConfig.detect; const {
width,
height
} = cameraConfig.detect;
const [{ width: scaledWidth }] = useResizeObserver(imageRef); const [{ width: scaledWidth }] = useResizeObserver(imageRef);
const imageScale = scaledWidth / width; const imageScale = scaledWidth / width;
@ -29,8 +32,8 @@ export default function CameraMasks({ camera, url }) {
Array.isArray(motionMask) Array.isArray(motionMask)
? motionMask.map((mask) => getPolylinePoints(mask)) ? motionMask.map((mask) => getPolylinePoints(mask))
: motionMask : motionMask
? [getPolylinePoints(motionMask)] ? [getPolylinePoints(motionMask)]
: [] : []
); );
const [zonePoints, setZonePoints] = useState( const [zonePoints, setZonePoints] = useState(
@ -44,8 +47,8 @@ export default function CameraMasks({ camera, url }) {
[name]: Array.isArray(objectFilters[name].mask) [name]: Array.isArray(objectFilters[name].mask)
? objectFilters[name].mask.map((mask) => getPolylinePoints(mask)) ? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
: objectFilters[name].mask : objectFilters[name].mask
? [getPolylinePoints(objectFilters[name].mask)] ? [getPolylinePoints(objectFilters[name].mask)]
: [], : [],
}), }),
{} {}
) )
@ -128,11 +131,11 @@ ${motionMaskPoints.map((mask, i) => ` - ${polylinePointsToPolyline(mask)}`)
const handleCopyZones = useCallback(async () => { const handleCopyZones = useCallback(async () => {
await window.navigator.clipboard.writeText(` zones: await window.navigator.clipboard.writeText(` zones:
${Object.keys(zonePoints) ${Object.keys(zonePoints)
.map( .map(
(zoneName) => ` ${zoneName}: (zoneName) => ` ${zoneName}:
coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}` coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
) )
.join('\n')}`); .join('\n')}`);
}, [zonePoints]); }, [zonePoints]);
// Object methods // Object methods
@ -164,14 +167,14 @@ ${Object.keys(zonePoints)
await window.navigator.clipboard.writeText(` objects: await window.navigator.clipboard.writeText(` objects:
filters: filters:
${Object.keys(objectMaskPoints) ${Object.keys(objectMaskPoints)
.map((objectName) => .map((objectName) =>
objectMaskPoints[objectName].length objectMaskPoints[objectName].length
? ` ${objectName}: ? ` ${objectName}:
mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}` mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
: '' : ''
) )
.filter(Boolean) .filter(Boolean)
.join('\n')}`); .join('\n')}`);
}, [objectMaskPoints]); }, [objectMaskPoints]);
const handleAddToObjectMask = useCallback( const handleAddToObjectMask = useCallback(
@ -196,8 +199,8 @@ ${Object.keys(objectMaskPoints)
); );
return ( return (
<div className='flex-col space-y-4 p-2 px-4'> <div className="flex-col space-y-4 p-2 px-4">
<Heading size='2xl'>{camera} mask & zone creator</Heading> <Heading size="2xl">{camera} mask & zone creator</Heading>
<Card <Card
content={ content={
@ -207,11 +210,11 @@ ${Object.keys(objectMaskPoints)
save your changes. save your changes.
</p> </p>
} }
header='Warning' header="Warning"
/> />
<div className='space-y-4'> <div className="space-y-4">
<div className='relative'> <div className="relative">
<img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} /> <img ref={imageRef} src={`${apiHost}/api/${camera}/latest.jpg`} />
<EditableMask <EditableMask
onChange={handleUpdateEditable} onChange={handleUpdateEditable}
@ -222,12 +225,12 @@ ${Object.keys(objectMaskPoints)
height={height} height={height}
/> />
</div> </div>
<div className='max-w-xs'> <div className="max-w-xs">
<Switch checked={snap} label='Snap to edges' labelPosition='after' onChange={handleChangeSnap} /> <Switch checked={snap} label="Snap to edges" labelPosition="after" onChange={handleChangeSnap} />
</div> </div>
</div> </div>
<div className='flex-col space-y-4'> <div className="flex-col space-y-4">
<MaskValues <MaskValues
editing={editing} editing={editing}
title='Motion masks' title='Motion masks'
@ -242,20 +245,20 @@ ${Object.keys(objectMaskPoints)
<MaskValues <MaskValues
editing={editing} editing={editing}
title='Zones' title="Zones"
onCopy={handleCopyZones} onCopy={handleCopyZones}
onCreate={handleAddZone} onCreate={handleAddZone}
onEdit={handleEditZone} onEdit={handleEditZone}
onRemove={handleRemoveZone} onRemove={handleRemoveZone}
points={zonePoints} points={zonePoints}
yamlPrefix='zones:' yamlPrefix="zones:"
yamlKeyPrefix={zoneYamlKeyPrefix} yamlKeyPrefix={zoneYamlKeyPrefix}
/> />
<MaskValues <MaskValues
isMulti isMulti
editing={editing} editing={editing}
title='Object masks' title="Object masks"
onAdd={handleAddToObjectMask} onAdd={handleAddToObjectMask}
onCopy={handleCopyObjectMasks} onCopy={handleCopyObjectMasks}
onCreate={handleAddObjectMask} onCreate={handleAddObjectMask}
@ -354,31 +357,31 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
return ( return (
<div <div
className='absolute' className="absolute"
style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`} style={`top: -${MaskInset}px; right: -${MaskInset}px; bottom: -${MaskInset}px; left: -${MaskInset}px`}
> >
{!scaledPoints {!scaledPoints
? null ? null
: scaledPoints.map(([x, y], i) => ( : scaledPoints.map(([x, y], i) => (
<PolyPoint <PolyPoint
boundingRef={boundingRef} boundingRef={boundingRef}
index={i} index={i}
onMove={handleMovePoint} onMove={handleMovePoint}
onRemove={handleRemovePoint} onRemove={handleRemovePoint}
x={x + MaskInset} x={x + MaskInset}
y={y + MaskInset} y={y + MaskInset}
/> />
))} ))}
<div className='absolute inset-0 right-0 bottom-0' onClick={handleAddPoint} ref={boundingRef} /> <div className="absolute inset-0 right-0 bottom-0" onClick={handleAddPoint} ref={boundingRef} />
<svg <svg
width='100%' width="100%"
height='100%' height="100%"
className='absolute pointer-events-none' className="absolute pointer-events-none"
style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`} style={`top: ${MaskInset}px; right: ${MaskInset}px; bottom: ${MaskInset}px; left: ${MaskInset}px`}
> >
{!scaledPoints ? null : ( {!scaledPoints ? null : (
<g> <g>
<polyline points={polylinePointsToPolyline(scaledPoints)} fill='rgba(244,0,0,0.5)' /> <polyline points={polylinePointsToPolyline(scaledPoints)} fill="rgba(244,0,0,0.5)" />
</g> </g>
)} )}
</svg> </svg>
@ -441,15 +444,15 @@ function MaskValues({
); );
return ( return (
<div className='overflow-hidden' onMouseOver={handleMousein} onMouseOut={handleMouseout}> <div className="overflow-hidden" onMouseOver={handleMousein} onMouseOut={handleMouseout}>
<div className='flex space-x-4'> <div className="flex space-x-4">
<Heading className='flex-grow self-center' size='base'> <Heading className="flex-grow self-center" size="base">
{title} {title}
</Heading> </Heading>
<Button onClick={onCopy}>Copy</Button> <Button onClick={onCopy}>Copy</Button>
<Button onClick={onCreate}>Add</Button> <Button onClick={onCreate}>Add</Button>
</div> </div>
<pre className='relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2'> <pre className="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
{yamlPrefix} {yamlPrefix}
{Object.keys(points).map((mainkey) => { {Object.keys(points).map((mainkey) => {
if (isMulti) { if (isMulti) {
@ -457,7 +460,7 @@ function MaskValues({
<div> <div>
{` ${mainkey}:\n mask:\n`} {` ${mainkey}:\n mask:\n`}
{onAdd && showButtons ? ( {onAdd && showButtons ? (
<Button className='absolute -mt-12 right-0 font-sans' data-key={mainkey} onClick={handleAdd}> <Button className="absolute -mt-12 right-0 font-sans" data-key={mainkey} onClick={handleAdd}>
{`Add to ${mainkey}`} {`Add to ${mainkey}`}
</Button> </Button>
) : null} ) : null}
@ -503,13 +506,13 @@ function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handl
editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : '' editing.key === mainkey && editing.subkey === subkey ? 'text-blue-800 dark:text-blue-600' : ''
}`} }`}
onClick={handleEdit} onClick={handleEdit}
title='Click to edit' title="Click to edit"
> >
{`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`} {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
{showButtons ? ( {showButtons ? (
<Button <Button
className='absolute top-0 right-0' className="absolute top-0 right-0"
color='red' color="red"
data-key={mainkey} data-key={mainkey}
data-subkey={subkey} data-subkey={subkey}
onClick={handleRemove} onClick={handleRemove}