279 lines
12 KiB
TypeScript
279 lines
12 KiB
TypeScript
import { Formik, Form, Field } from "formik";
|
|
import type { CameraSettings, CameraSettingsAction } from "../../../../utils/types";
|
|
import { useCameraController } from "../../hooks/useCameraControlConfig";
|
|
|
|
type CameraControlProps = {
|
|
state: CameraSettings["cameraControls"];
|
|
dispatch: React.Dispatch<CameraSettingsAction>;
|
|
};
|
|
|
|
const CameraControls = ({ state, dispatch }: CameraControlProps) => {
|
|
const { cameraControllerMutation } = useCameraController();
|
|
console.log(state);
|
|
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} 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>
|
|
);
|
|
};
|
|
|
|
export default CameraControls;
|