Support zooming

This commit is contained in:
Nick Mowen 2022-12-15 13:39:58 -07:00
parent 1cc7bb9a54
commit 0bb2f5b845
2 changed files with 35 additions and 5 deletions

View File

@ -152,7 +152,7 @@ class OnvifController:
if command == OnvifCommandEnum.zoom_in: if command == OnvifCommandEnum.zoom_in:
move_request.Velocity = {"Zoom": {"x": 0.5}} move_request.Velocity = {"Zoom": {"x": 0.5}}
elif command == OnvifCommandEnum.zoom_out: elif command == OnvifCommandEnum.zoom_out:
move_request.Velocity = {"PanTilt": {"x": -0.5}} move_request.Velocity = {"Zoom": {"x": -0.5}}
onvif.get_service("ptz").ContinuousMove(move_request) onvif.get_service("ptz").ContinuousMove(move_request)

View File

@ -8,6 +8,7 @@ import ArrowUpDouble from '../icons/ArrowUpDouble';
import ArrowDownDouble from '../icons/ArrowDownDouble'; import ArrowDownDouble from '../icons/ArrowDownDouble';
import ArrowLeftDouble from '../icons/ArrowLeftDouble'; import ArrowLeftDouble from '../icons/ArrowLeftDouble';
import Button from './Button'; import Button from './Button';
import Heading from './Heading';
export default function CameraControlPanel({ camera = '' }) { export default function CameraControlPanel({ camera = '' }) {
const { data: ptz } = useSWR(`${camera}/ptz/info`); const { data: ptz } = useSWR(`${camera}/ptz/info`);
@ -32,6 +33,12 @@ export default function CameraControlPanel({ camera = '' }) {
setCurrentPreset(''); setCurrentPreset('');
}; };
const onSetZoom = async (e, dir) => {
e.stopPropagation();
sendPtz(`ZOOM_${dir}`);
setCurrentPreset('');
};
const onSetStop = async (e) => { const onSetStop = async (e) => {
e.stopPropagation(); e.stopPropagation();
sendPtz('STOP'); sendPtz('STOP');
@ -44,7 +51,10 @@ export default function CameraControlPanel({ camera = '' }) {
return ( return (
<div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div data-testid="control-panel" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{ptz.features.includes('pt') && ( {ptz.features.includes('pt') && (
<div className="w-44 p-4"> <div className="w-44 px-4">
<Heading size="xs" className="my-4">
Pan / Tilt
</Heading>
<div className="w-full flex justify-center"> <div className="w-full flex justify-center">
<button onMouseDown={(e) => onSetMove(e, 'UP')} onMouseUp={(e) => onSetStop(e)}> <button onMouseDown={(e) => onSetMove(e, 'UP')} onMouseUp={(e) => onSetStop(e)}>
<ArrowUpDouble className="h-12 p-2 bg-slate-500" /> <ArrowUpDouble className="h-12 p-2 bg-slate-500" />
@ -66,11 +76,31 @@ export default function CameraControlPanel({ camera = '' }) {
</div> </div>
)} )}
{ptz.features.includes('zoom') && <div>zoom</div>} {ptz.features.includes('zoom') && (
<div className="w-44 px-4">
<Heading size="xs" className="my-4">
Zoom
</Heading>
<div className="w-full flex justify-center">
<button onMouseDown={(e) => onSetZoom(e, 'IN')} onMouseUp={(e) => onSetStop(e)}>
<div className="h-12 w-12 p-2 text-2xl bg-slate-500">+</div>
</button>
</div>
<div className="h-12" />
<div className="flex justify-center">
<button onMouseDown={(e) => onSetZoom(e, 'OUT')} onMouseUp={(e) => onSetStop(e)}>
<div className="h-12 w-12 p-2 text-2xl bg-slate-500">-</div>
</button>
</div>
</div>
)}
{ptz.presets && ( {ptz.presets && (
<div> <div className="px-4">
<div className="p-4"> <Heading size="xs" className="my-4">
Presets
</Heading>
<div className="py-4">
<select <select
className="cursor-pointer rounded dark:bg-slate-800" className="cursor-pointer rounded dark:bg-slate-800"
value={currentPreset} value={currentPreset}