Add pan/tilt support

This commit is contained in:
Nick Mowen 2022-12-15 12:17:45 -07:00
parent 137e2d659a
commit 1cc7bb9a54

View File

@ -26,6 +26,17 @@ export default function CameraControlPanel({ camera = '' }) {
setCurrentPreset(''); setCurrentPreset('');
}; };
const onSetMove = async (e, dir) => {
e.stopPropagation();
sendPtz(`MOVE_${dir}`);
setCurrentPreset('');
};
const onSetStop = async (e) => {
e.stopPropagation();
sendPtz('STOP');
};
if (!ptz) { if (!ptz) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
@ -35,14 +46,22 @@ export default function CameraControlPanel({ camera = '' }) {
{ptz.features.includes('pt') && ( {ptz.features.includes('pt') && (
<div className="w-44 p-4"> <div className="w-44 p-4">
<div className="w-full flex justify-center"> <div className="w-full flex justify-center">
<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" />
</button>
</div> </div>
<div className="w-full flex justify-between"> <div className="w-full flex justify-between">
<ArrowLeftDouble className="h-12 p-2 bg-slate-500" /> <button onMouseDown={(e) => onSetMove(e, 'LEFT')} onMouseUp={(e) => onSetStop(e)}>
<ArrowLeftDouble className="btn h-12 p-2 bg-slate-500" />
</button>
<button onMouseDown={(e) => onSetMove(e, 'RIGHT')} onMouseUp={(e) => onSetStop(e)}>
<ArrowRightDouble className="h-12 p-2 bg-slate-500" /> <ArrowRightDouble className="h-12 p-2 bg-slate-500" />
</button>
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
<button onMouseDown={(e) => onSetMove(e, 'DOWN')} onMouseUp={(e) => onSetStop(e)}>
<ArrowDownDouble className="h-12 p-2 bg-slate-500" /> <ArrowDownDouble className="h-12 p-2 bg-slate-500" />
</button>
</div> </div>
</div> </div>
)} )}