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

- Implemented camera control settings with auto/manual modes and integrate with CameraControls component

Browse Source
This commit is contained in:
Toba Ojo
2026-01-13 14:46:10 +00:00
parent 2ecc39317d
commit bb4234d336
6 changed files with 399 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/providers/CameraSettingsProvider.tsx
View File

@@ -1,9 +1,50 @@
import { CameraSettingsContext } from "../context/CameraSettingsContext"; import { CameraSettingsContext } from "../context/CameraSettingsContext";
import { useReducer, type ReactNode } from "react"; import { useEffect, useReducer, type ReactNode } from "react";
import { initialState, cameraSettingsReducer } from "../reducers/cameraSettingsReducer"; import { initialState, cameraSettingsReducer } from "../reducers/cameraSettingsReducer";
import { useCameraController } from "../../features/setup/hooks/useCameraControlConfig";
const CameraSettingsProvider = ({ children }: { children: ReactNode }) => { const CameraSettingsProvider = ({ children }: { children: ReactNode }) => {
const [state, dispatch] = useReducer(cameraSettingsReducer, initialState); const [state, dispatch] = useReducer(cameraSettingsReducer, initialState);
const { cameraControllerQuery } = useCameraController();
useEffect(() => {
if (cameraControllerQuery?.data) {
console.log(cameraControllerQuery?.data);
const currentCameraControlMode = cameraControllerQuery.data.propOperationMode.value.toLowerCase();
const currentAutoMaxGain = cameraControllerQuery.data.propAutoModeMaxGain.value;
const currentAutoMinShutter = cameraControllerQuery.data.propAutoModeMinShutter.value;
const currentAutoMaxShutter = cameraControllerQuery.data.propAutoModeMaxShutter.value;
const currentExposureCompensation = cameraControllerQuery.data.propAutoModeExposureCompensation.value;
const currentManualFixShutter = cameraControllerQuery.data.propManualModeShutter.value;
const currentManualFixGain = cameraControllerQuery.data.propManualModeFixGain.value;
const currentManualFixIris = cameraControllerQuery.data.propManualModeFixIris.value;
console.log({
currentCameraControlMode,
currentManualFixShutter,
currentManualFixGain,
currentManualFixIris,
});
dispatch({
type: "SET_CAMERA_CONTROLS",
payload: {
cameraControlMode: currentCameraControlMode,
auto: {
maxGain: currentAutoMaxGain,
minShutter: currentAutoMinShutter,
maxShutter: currentAutoMaxShutter,
exposureCompensation: currentExposureCompensation,
},
manual: {
fixShutter: currentManualFixShutter,
fixGain: currentManualFixGain,
fixIris: currentManualFixIris,
},
},
});
}
}, [cameraControllerQuery.data]);
return <CameraSettingsContext.Provider value={{ state, dispatch }}>{children}</CameraSettingsContext.Provider>; return <CameraSettingsContext.Provider value={{ state, dispatch }}>{children}</CameraSettingsContext.Provider>;
}; };

11
src/app/reducers/cameraSettingsReducer.ts
View File

@@ -4,6 +4,11 @@ export const initialState: CameraSettings = {
cameraMode: 0, cameraMode: 0,
mode: 0, mode: 0,
imageSize: { width: 1280, height: 960 }, imageSize: { width: 1280, height: 960 },
cameraControls: {
cameraControlMode: "auto",
auto: { minShutter: "1/100", maxShutter: "1/1000", maxGain: "0dB", exposureCompensation: "EC:off" },
manual: { fixShutter: "1/100", fixGain: "0dB", fixIris: "F2.0" },
},
regionPainter: { regionPainter: {
paintmode: "painter", paintmode: "painter",
paintedCells: new Map(), paintedCells: new Map(),
@@ -50,6 +55,12 @@ export const cameraSettingsReducer = (state: CameraSettings, action: CameraSetti
selectedRegionIndex: action.payload, selectedRegionIndex: action.payload,
}, },
}; };
case "SET_CAMERA_CONTROLS":
return {
...state,
cameraControls: action.payload,
};
default: default:
return state; return state;
} }

280
src/features/setup/components/cameraControls/CameraControls.tsx
View File

@@ -1,24 +1,276 @@
import { Formik, Form } from "formik"; import { Formik, Form, Field } from "formik";
import type { CameraSettings } from "../../../../utils/types"; import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
import { useCameraController } from "../../hooks/useCameraControlConfig";
type CameraControlProps = { type CameraControlProps = {
state: CameraSettings; state: CameraSettings["cameraControls"];
dispatch: React.Dispatch<CameraSettingsAction>;
}; };
const CameraControls = ({ state }: CameraControlProps) => { const CameraControls = ({ state, dispatch }: CameraControlProps) => {
const { cameraControllerMutation } = useCameraController();
console.log(state); console.log(state);
const initialValues = {}; const initialValues = {
cameraMode: state.cameraControlMode === "auto" ? "auto" : "manual",
const handleSumbit = (values: { test?: string }) => { auto: {
console.log(values); minShutter: state.auto.minShutter,
maxShutter: state.auto.maxShutter,
maxGain: state.auto.maxGain,
exposureCompensation: state.auto.exposureCompensation,
},
manual: {
fixShutter: state.manual.fixShutter,
fixGain: state.manual.fixGain,
fixIris: state.manual.fixIris,
},
}; };
const handleSumbit = (values: {
cameraMode: string;
auto: typeof initialValues.auto;
manual: typeof initialValues.manual;
}) => {
cameraControllerMutation.mutate({
cameraControlMode: values.cameraMode as "auto" | "manual",
auto: values.auto,
manual: values.manual,
});
dispatch({
type: "SET_CAMERA_CONTROLS",
payload: {
cameraControlMode: values.cameraMode as "auto" | "manual",
auto: values.auto,
manual: values.manual,
},
});
};
return ( return (
<Formik initialValues={initialValues} onSubmit={handleSumbit}> <Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize>
<Form> {({ values }) => (
<button type="submit" className="p-3 bg-green-700 hover:bg-green-900 rounded-md"> <Form className="flex flex-col gap-5 border border-gray-500 p-4 rounded-md">
Save Settings <h2 className="text-2xl mb-2">Controls</h2>
</button> <div className="flex flex-row gap-4">
</Form> <div>
<label
htmlFor="auto"
className={`p-4 border rounded-lg mb-2 text-lg
${values.cameraMode === "auto" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
Auto
<Field type="radio" id="auto" name="cameraMode" className="sr-only" value="auto" />
</label>
</div>
<div>
<label
htmlFor="manual"
className={`p-4 border rounded-lg mb-2 text-lg
${values.cameraMode === "manual" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
Manual
<Field type="radio" id="manual" name="cameraMode" className="sr-only" value="manual" />
</label>
</div>
</div>
{values.cameraMode === "auto" && (
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Shutter Speed</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="auto.minShutter" className="text-lg mb-1">
Min Shutter:
</label>
<Field
as="select"
id="auto.minShutter"
name="auto.minShutter"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="1/100">1/100</option>
<option value="1/120">1/120</option>
<option value="1/250">1/250</option>
<option value="1/500">1/500</option>
<option value="1/1000">1/1000</option>
<option value="1/2000">1/2000</option>
<option value="1/5000">1/5000</option>
<option value="1/10000">1/10000</option>
</Field>
</div>
<div className="flex flex-col gap-2">
<label htmlFor="auto.maxShutter" className="text-lg mb-1">
Max Shutter:
</label>
<Field
as="select"
id="auto.maxShutter"
name="auto.maxShutter"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="1/500">1/500</option>
<option value="1/1000">1/1000</option>
<option value="1/2000">1/2000</option>
<option value="1/5000">1/5000</option>
<option value="1/10000">1/10000</option>
</Field>
</div>
</div>
</div>
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Gain</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="auto.maxGain" className="text-lg mb-1">
Max Gain:
</label>
<Field
as="select"
id="auto.maxGain"
name="auto.maxGain"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="0dB">0dB</option>
<option value="2dB">2dB</option>
<option value="4dB">4dB</option>
<option value="6dB">6dB</option>
<option value="10dB">10dB</option>
<option value="12dB">12dB</option>
<option value="16dB">16dB</option>
<option value="18dB">18dB</option>
<option value="20dB">20dB</option>
<option value="24dB">24dB</option>
</Field>
</div>
</div>
</div>
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Exposure</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="auto.exposureCompensation" className="text-lg mb-1">
Exposure Compensation:
</label>
<Field
as="select"
id="auto.exposureCompensation"
name="auto.exposureCompensation"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="EC:off">EC:off</option>
<option value="EC:0">EC:0</option>
<option value="EC:1">EC:1</option>
<option value="EC:2">EC:2</option>
<option value="EC:3">EC:3</option>
<option value="EC:4">EC:4</option>
<option value="EC:5">EC:5</option>
<option value="EC:6">EC:6</option>
<option value="EC:7">EC:7</option>
<option value="EC:8">EC:8</option>
<option value="EC:9">EC:9</option>
<option value="EC:10">EC:10</option>
<option value="EC:11">EC:11</option>
<option value="EC:12">EC:12</option>
<option value="EC:13">EC:13</option>
<option value="EC:14">EC:14</option>
</Field>
</div>
</div>
</div>
</div>
)}
{values.cameraMode === "manual" && (
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Shutter Speed</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="manual.fixShutter" className="text-lg mb-1">
Fix Shutter:
</label>
<Field
as="select"
id="manual.fixShutter"
name="manual.fixShutter"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="1/100">1/100</option>
<option value="1/120">1/120</option>
<option value="1/250">1/250</option>
<option value="1/500">1/500</option>
<option value="1/1000">1/1000</option>
<option value="1/2000">1/2000</option>
<option value="1/5000">1/5000</option>
</Field>
</div>
</div>
</div>
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Gain</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="manual.fixGain" className="text-lg mb-1">
Fix Gain:
</label>
<Field
as="select"
id="manual.fixGain"
name="manual.fixGain"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="0dB">0dB</option>
<option value="2dB">2dB</option>
<option value="4dB">4dB</option>
<option value="6dB">6dB</option>
<option value="8dB">8dB</option>
<option value="10dB">10dB</option>
<option value="12dB">12dB</option>
<option value="16dB">16dB</option>
<option value="18dB">18dB</option>
<option value="20dB">20dB</option>
<option value="24dB">24dB</option>
</Field>
</div>
</div>
</div>
<div className="flex flex-col gap-2 border border-gray-600 p-4 rounded-md">
<h3 className="text-lg">Iris</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 ">
<div className="flex flex-col gap-2">
<label htmlFor="manual.fixIris" className="text-lg mb-1">
Fix Iris:
</label>
<Field
as="select"
id="manual.fixIris"
name="manual.fixIris"
className="p-2 border border-gray-600 rounded-md bg-[#253445]"
>
<option value="F1.4">F1.4</option>
<option value="F2.0">F2.0</option>
<option value="F2.8">F2.8</option>
<option value="F4.0">F4.0</option>
<option value="F5.6">F5.6</option>
<option value="F8.0">F8.0</option>
<option value="F11.0">F11.0</option>
<option value="F16.0">F16.0</option>
</Field>
</div>
</div>
</div>
</div>
)}
<button type="submit" className="p-3 rounded-md bg-green-700 hover:bg-green-900 cursor-pointer">
Save Settings
</button>
</Form>
)}
</Formik> </Formik>
); );
}; };

2
src/features/setup/components/cameraSetup/CameraSetup.tsx
View File

@@ -25,7 +25,7 @@ const CameraSetup = () => {
<Tab>Advanced</Tab> <Tab>Advanced</Tab>
</TabList> </TabList>
<TabPanel> <TabPanel>
<CameraControls state={state} /> <CameraControls state={state.cameraControls} dispatch={dispatch} />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<Region state={state} /> <Region state={state} />

60
src/features/setup/hooks/useCameraControlConfig.ts Normal file
View File

@@ -0,0 +1,60 @@
import { useQuery, useMutation } from "@tanstack/react-query";
import { cambase } from "../../../app/config";
import type { CameraSettings } from "../../../utils/types";
const fetchCameraControllerConfig = async () => {
const response = await fetch(`${cambase}/api/fetch-config?id=Colour--camera-control-widget-config`);
if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
return response.json();
};
const updateCameraControllerConfig = async (config: CameraSettings["cameraControls"]) => {
if (!config) return;
const fields = [];
if (config.cameraControlMode === "auto") {
fields.push(
{ name: "propOperationMode", value: "Auto" },
{ name: "propAutoModeMaxGain", value: config.auto.maxGain },
{ name: "propAutoModeMinShutter", value: config.auto.minShutter },
{ name: "propAutoModeMaxShutter", value: config.auto.maxShutter },
{ name: "propAutoModeExposureCompensation", value: config.auto.exposureCompensation },
);
} else if (config.cameraControlMode === "manual") {
fields.push(
{ name: "propOperationMode", value: "Manual" },
{ name: "propManualModeShutter", value: config.manual.fixShutter },
{ name: "propManualModeFixGain", value: config.manual.fixGain },
{ name: "propManualModeFixIris", value: config.manual.fixIris },
);
}
const data = {
id: "Colour--camera-control-widget-config",
fields: fields,
};
const response = await fetch(`${cambase}/api/update-config`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
if (!response.ok) throw new Error("Cannot reach camera controller endpoint");
console.log(response);
return response.json();
};
export const useCameraController = () => {
const cameraControllerQuery = useQuery({
queryKey: ["getcameraConfig"],
queryFn: fetchCameraControllerConfig,
});
const cameraControllerMutation = useMutation({
mutationKey: ["updateCameraConfig"],
mutationFn: (config: CameraSettings["cameraControls"]) => updateCameraControllerConfig(config),
});
return { cameraControllerQuery, cameraControllerMutation };
};

20
src/utils/types.ts
View File

@@ -66,6 +66,20 @@ export type CameraSettings = {
cameraMode: number; cameraMode: number;
mode: number; mode: number;
imageSize: { width: number; height: number }; imageSize: { width: number; height: number };
cameraControls: {
cameraControlMode: "auto" | "manual";
auto: {
minShutter: string;
maxShutter: string;
maxGain: string;
exposureCompensation: string;
};
manual: {
fixShutter: string;
fixGain: string;
fixIris: string;
};
};
regionPainter: { regionPainter: {
paintmode: "painter" | "eraser"; paintmode: "painter" | "eraser";
paintedCells: Map<string, PaintedCell>; paintedCells: Map<string, PaintedCell>;
@@ -90,7 +104,11 @@ export type CameraSettingsAction =
type: "SET_REGION_PAINTMODE"; type: "SET_REGION_PAINTMODE";
payload: "painter" | "eraser"; payload: "painter" | "eraser";
} }
| { type: "SET_SELECTED_REGION_INDEX"; payload: number }; | { type: "SET_SELECTED_REGION_INDEX"; payload: number }
| {
type: "SET_CAMERA_CONTROLS";
payload: CameraSettings["cameraControls"];
};
export type CameraStatus = { export type CameraStatus = {
id: string; id: string;