TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- added zoom options per camera and oneshot button

Browse Source 
- enhanced to remove painting when in zoom mode
This commit is contained in:
Toba Ojo
2026-01-12 15:10:40 +00:00
parent 61c85fdc3f
commit eb5eb69c28
9 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
View File

@@ -1,3 +1,4 @@
import { useEffect } from "react";
import type { CameraID } from "../../../../../app/config/cameraConfig";
import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
import SliderComponent from "../../../../../ui/SliderComponent";
@@ -6,13 +7,25 @@ import { useDebouncedCallback } from "use-debounce";
type CameraControlsProps = {
cameraFeedID: CameraID;
subTabIndex?: number;
};
const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
const CameraControls = ({ cameraFeedID, subTabIndex }: CameraControlsProps) => {
const { state, dispatch } = useCameraFeedContext();
const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
const { cameraZoomMutation, cameraZoomQuery } = useCameraZoom(cameraFeedID);
const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 0;
const currentZoomLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysCurrent"].value : 0;
const minLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMin"].value : 0;
const maxLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMax"].value : 0;
const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
useEffect(() => {
if (subTabIndex === 1) {
dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "controller" } });
}
}, [cameraFeedID, dispatch, subTabIndex]);
const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
const debouncedMutation = useDebouncedCallback(async (value) => {
await cameraZoomMutation.mutateAsync({
cameraFeedID,
@@ -24,17 +37,34 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
const newZoom = value as number;
dispatch({
type: "SET_ZOOM_LEVEL",
payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
payload: { cameraFeedID: cameraFeedID, zoomLevel: newZoom },
});
debouncedMutation(newZoom);
};
const handleOneShotClick = () => {
debouncedMutation(normalizedZoomLevel);
};
return (
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
<h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
<div className="w-[70%] ">
<label htmlFor="zoom">Zoom {zoomLevel} </label>
<SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
<div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
<h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
<div className="w-[70%] ">
<label htmlFor="zoom">Zoom {zoomLevel}</label>
<SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={0} max={1} step={0.1} />
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
<h2>One Shot</h2>
<button
type="button"
className="p-2 bg-gray-500 rounded-xl w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
onClick={handleOneShotClick}
>
One Shot
</button>
</div>
</div>
);