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

match replay objects list with debug view

Browse Source
This commit is contained in:
Josh Hawkins 2026-04-08 07:34:17 -05:00
parent 3d18780aef
commit c0f70295d8
1 changed files with 70 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/pages/Replay.tsx
View File

@ -41,6 +41,7 @@ import { Toaster } from "@/components/ui/sonner";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig"; import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import { getIconForLabel } from "@/utils/iconUtil"; import { getIconForLabel } from "@/utils/iconUtil";
import { getTranslatedLabel } from "@/utils/i18n"; import { getTranslatedLabel } from "@/utils/i18n";
import { Card } from "@/components/ui/card";
import { ObjectType } from "@/types/ws"; import { ObjectType } from "@/types/ws";
import WsMessageFeed from "@/components/ws/WsMessageFeed"; import WsMessageFeed from "@/components/ws/WsMessageFeed";
import { ConfigSectionTemplate } from "@/components/config-form/sections/ConfigSectionTemplate"; import { ConfigSectionTemplate } from "@/components/config-form/sections/ConfigSectionTemplate";
@ -633,7 +634,7 @@ type ObjectListProps = {
}; };
function ObjectList({ cameraConfig, objects, config }: ObjectListProps) { function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings", "common"]);
const colormap = useMemo(() => { const colormap = useMemo(() => {
if (!config) { if (!config) {
@ -660,14 +661,12 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
} }
return ( return (
<div className="flex w-full flex-col gap-2"> <div className="scrollbar-container relative flex w-full flex-col overflow-y-auto">
{objects.map((obj: ObjectType) => { {objects.map((obj: ObjectType) => {
return ( return (
<div <Card className="mb-1 p-2 text-sm" key={obj.id}>
key={obj.id}
className="flex flex-col rounded-lg bg-secondary/30 p-2"
>
<div className="flex flex-row items-center gap-3 pb-1"> <div className="flex flex-row items-center gap-3 pb-1">
<div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
<div <div
className="rounded-lg p-2" className="rounded-lg p-2"
style={{ style={{
@ -676,57 +675,66 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
: getColorForObjectName(obj.label), : getColorForObjectName(obj.label),
}} }}
> >
{getIconForLabel(obj.label, "object", "size-4 text-white")} {getIconForLabel(obj.label, "object", "size-5 text-white")}
</div> </div>
<div className="text-sm font-medium"> <div className="ml-3 text-lg">
{getTranslatedLabel(obj.label)} {getTranslatedLabel(obj.label)}
</div> </div>
</div> </div>
<div className="flex flex-col gap-1 pl-1 text-xs text-primary-variant"> <div className="flex w-8/12 flex-row items-center justify-end">
<div className="flex items-center justify-between"> <div className="text-md mr-2 w-1/3">
<span> <div className="flex flex-col items-end justify-end">
<p className="mb-1.5 text-sm text-primary-variant">
{t("debug.objectShapeFilterDrawing.score", { {t("debug.objectShapeFilterDrawing.score", {
ns: "views/settings", ns: "views/settings",
})} })}
: </p>
</span> {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}%
<span className="text-primary">
{obj.score ? (obj.score * 100).toFixed(1) : "-"}%
</span>
</div> </div>
{obj.ratio && ( </div>
<div className="flex items-center justify-between"> <div className="text-md mr-2 w-1/3">
<span> <div className="flex flex-col items-end justify-end">
<p className="mb-1.5 text-sm text-primary-variant">
{t("debug.objectShapeFilterDrawing.ratio", { {t("debug.objectShapeFilterDrawing.ratio", {
ns: "views/settings", ns: "views/settings",
})} })}
: </p>
</span> {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
<span className="text-primary">{obj.ratio.toFixed(2)}</span>
</div> </div>
)} </div>
{obj.area && cameraConfig && ( <div className="text-md mr-2 w-1/3">
<div className="flex items-center justify-between"> <div className="flex flex-col items-end justify-end">
<span> <p className="mb-1.5 text-sm text-primary-variant">
{t("debug.objectShapeFilterDrawing.area", { {t("debug.objectShapeFilterDrawing.area", {
ns: "views/settings", ns: "views/settings",
})} })}
: </p>
</span> {obj.area && cameraConfig ? (
<span className="text-primary"> <div className="text-end">
{obj.area} px ( <div className="text-xs">
{t("information.pixels", {
ns: "common",
area: obj.area,
})}
</div>
<div className="text-xs">
{( {(
(obj.area / (obj.area /
(cameraConfig.detect.width * (cameraConfig.detect.width *
cameraConfig.detect.height)) * cameraConfig.detect.height)) *
100 100
).toFixed(2)} ).toFixed(2)}
%) %
</span>
</div> </div>
</div>
) : (
"-"
)} )}
</div> </div>
</div> </div>
</div>
</div>
</Card>
); );
})} })}
</div> </div>