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

Add visual design for pan / tilt

Browse Source
This commit is contained in:
Nick Mowen 2022-12-15 12:03:33 -07:00
parent aad4313470
commit 137e2d659a
5 changed files with 88 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/CameraControlPanel.jsx
View File

@ -3,6 +3,10 @@ import { useState } from 'preact/hooks';
import useSWR from 'swr';
import { usePtzCommand } from '../api/ws';
import ActivityIndicator from './ActivityIndicator';
import ArrowRightDouble from '../icons/ArrowRightDouble';
import ArrowUpDouble from '../icons/ArrowUpDouble';
import ArrowDownDouble from '../icons/ArrowDownDouble';
import ArrowLeftDouble from '../icons/ArrowLeftDouble';
import Button from './Button';
export default function CameraControlPanel({ camera = '' }) {
@ -27,8 +31,24 @@ export default function CameraControlPanel({ camera = '' }) {
}
return (
<div data-testid="control-panel" className="grid grid-cols-1 3xl:grid-cols-4 md:grid-cols-3 gap-4">
ptz is enabled with features {ptz.features[0]}
<div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{ptz.features.includes('pt') && (
<div className="w-44 p-4">
<div className="w-full flex justify-center">
<ArrowUpDouble className="h-12 p-2 bg-slate-500" />
</div>
<div className="w-full flex justify-between">
<ArrowLeftDouble className="h-12 p-2 bg-slate-500" />
<ArrowRightDouble className="h-12 p-2 bg-slate-500" />
</div>
<div className="flex justify-center">
<ArrowDownDouble className="h-12 p-2 bg-slate-500" />
</div>
</div>
)}
{ptz.features.includes('zoom') && <div>zoom</div>}
{ptz.presets && (
<div>
<div className="p-4">

19
web/src/icons/ArrowDownDouble.jsx Normal file
View File

@ -0,0 +1,19 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function ArrowDownDouble({ className = '' }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={`${className}`}
>
<path d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
</svg>
);
}
export default memo(ArrowDownDouble);

19
web/src/icons/ArrowLeftDouble.jsx Normal file
View File

@ -0,0 +1,19 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function ArrowLeftDouble({ className = '' }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={`${className}`}
>
<path d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
</svg>
);
}
export default memo(ArrowLeftDouble);

11
web/src/icons/ArrowRightDouble.jsx
View File

@ -3,8 +3,15 @@ import { memo } from 'preact/compat';
export function ArrowRightDouble({ className = '' }) {
return (
<svg className={`fill-current ${className}`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 3.795l2.995-2.98 11.132 11.185-11.132 11.186-2.995-2.981 8.167-8.205-8.167-8.205zm18.04 8.205l-8.167 8.205 2.995 2.98 11.132-11.185-11.132-11.186-2.995 2.98 8.167 8.206z" />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={`${className}`}
>
<path d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
</svg>
);
}

19
web/src/icons/ArrowUpDouble.jsx Normal file
View File

@ -0,0 +1,19 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function ArrowUpDouble({ className = '' }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className={`${className}`}
>
<path d="M4.5 12.75l7.5-7.5 7.5 7.5m-15 6l7.5-7.5 7.5 7.5" />
</svg>
);
}
export default memo(ArrowUpDouble);