- Implemented camera control settings with auto/manual modes and integrate with CameraControls component
This commit is contained in:
@@ -1,24 +1,276 @@
|
||||
import { Formik, Form } from "formik";
|
||||
import type { CameraSettings } from "../../../../utils/types";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
|
||||
import { useCameraController } from "../../hooks/useCameraControlConfig";
|
||||
|
||||
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);
|
||||
const initialValues = {};
|
||||
|
||||
const handleSumbit = (values: { test?: string }) => {
|
||||
console.log(values);
|
||||
const initialValues = {
|
||||
cameraMode: state.cameraControlMode === "auto" ? "auto" : "manual",
|
||||
auto: {
|
||||
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 (
|
||||
<Formik initialValues={initialValues} onSubmit={handleSumbit}>
|
||||
<Form>
|
||||
<button type="submit" className="p-3 bg-green-700 hover:bg-green-900 rounded-md">
|
||||
Save Settings
|
||||
</button>
|
||||
</Form>
|
||||
<Formik initialValues={initialValues} onSubmit={handleSumbit} enableReinitialize>
|
||||
{({ values }) => (
|
||||
<Form className="flex flex-col gap-5 border border-gray-500 p-4 rounded-md">
|
||||
<h2 className="text-2xl mb-2">Controls</h2>
|
||||
<div className="flex flex-row gap-4">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user