68 lines
2.5 KiB
JavaScript
68 lines
2.5 KiB
JavaScript
// import { Fragment, h } from 'preact';
|
|
// import { useState } from 'preact/hooks';
|
|
|
|
export {}
|
|
|
|
// export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) {
|
|
// const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 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 boxBottomEdge = Math.round((1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100);
|
|
|
|
// const [isHovering, setIsHovering] = useState(false);
|
|
// const getHoverStyle = () => {
|
|
// if (boxLeftEdge < 15) {
|
|
// // show object stats on right side
|
|
// return {
|
|
// left: `${boxLeftEdge + eventOverlay.data.box[2] * 100 + 1}%`,
|
|
// top: `${boxTopEdge}%`,
|
|
// };
|
|
// }
|
|
|
|
// return {
|
|
// right: `${boxRightEdge + eventOverlay.data.box[2] * 100 + 1}%`,
|
|
// top: `${boxTopEdge}%`,
|
|
// };
|
|
// };
|
|
|
|
// const getObjectArea = () => {
|
|
// const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
|
|
// const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
|
|
// return Math.round(width * height);
|
|
// };
|
|
|
|
// const getObjectRatio = () => {
|
|
// const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
|
|
// const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
|
|
// return Math.round(100 * (width / height)) / 100;
|
|
// };
|
|
|
|
// return (
|
|
// <Fragment>
|
|
// <div
|
|
// className="absolute border-4 border-red-600"
|
|
// onMouseEnter={() => setIsHovering(true)}
|
|
// onMouseLeave={() => setIsHovering(false)}
|
|
// onTouchStart={() => setIsHovering(true)}
|
|
// onTouchEnd={() => setIsHovering(false)}
|
|
// style={{
|
|
// left: `${boxLeftEdge}%`,
|
|
// top: `${boxTopEdge}%`,
|
|
// right: `${boxRightEdge}%`,
|
|
// bottom: `${boxBottomEdge}%`,
|
|
// }}
|
|
// >
|
|
// {eventOverlay.class_type == 'entered_zone' ? (
|
|
// <div className="absolute w-2 h-2 bg-yellow-500 left-[50%] -translate-x-1/2 translate-y-3/4 bottom-0" />
|
|
// ) : null}
|
|
// </div>
|
|
// {isHovering && (
|
|
// <div className="absolute bg-white dark:bg-slate-800 p-4 block text-black dark:text-white text-lg" style={getHoverStyle()}>
|
|
// <div>{`Area: ${getObjectArea()} px`}</div>
|
|
// <div>{`Ratio: ${getObjectRatio()}`}</div>
|
|
// </div>
|
|
// )}
|
|
// </Fragment>
|
|
// );
|
|
// }
|