Add person's name to event label if sub_label exists

This commit is contained in:
Sergey Krashevich 2023-06-26 08:49:48 +03:00
parent c25367221e
commit 4617f488d0
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
2 changed files with 3 additions and 1 deletions

View File

@ -1,7 +1,7 @@
import { Fragment, h } from 'preact'; import { Fragment, h } from 'preact';
import { useState } from 'preact/hooks'; import { useState } from 'preact/hooks';
export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) { export default function TimelineEventOverlay({ event, eventOverlay, cameraConfig }) {
const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100); const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100); const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100); const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
@ -56,6 +56,7 @@ export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) {
</div> </div>
{isHovering && ( {isHovering && (
<div className="absolute bg-white dark:bg-slate-800 p-4 block dark:text-white text-lg" style={getHoverStyle()}> <div className="absolute bg-white dark:bg-slate-800 p-4 block dark:text-white text-lg" style={getHoverStyle()}>
{event.label == 'person' && event.sub_label && (<div>Name: {event.sub_label}</div>)}
<div>{`Area: ${getObjectArea()} px`}</div> <div>{`Area: ${getObjectArea()} px`}</div>
<div>{`Ratio: ${getObjectRatio()}`}</div> <div>{`Ratio: ${getObjectRatio()}`}</div>
</div> </div>

View File

@ -719,6 +719,7 @@ export default function Events({ path, ...props }) {
> >
{eventOverlay ? ( {eventOverlay ? (
<TimelineEventOverlay <TimelineEventOverlay
event={event}
eventOverlay={eventOverlay} eventOverlay={eventOverlay}
cameraConfig={config.cameras[event.camera]} cameraConfig={config.cameras[event.camera]}
/> />