TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added zoom functionality, need to add endpoint to post

Browse Source
This commit is contained in:
Toba Ojo
2025-09-29 15:21:22 +01:00
parent 3b9469496b
commit c5c8218e1a
9 changed files with 171 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/CameraOverview/SnapshotContainer.tsx
View File

@@ -1,17 +1,21 @@
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
import type { ZoomLevel } from "../../types/types";
import NavigationArrow from "../UI/NavigationArrow";
type SnapshotContainerProps = {
side: string;
settingsPage?: boolean;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
};
export const SnapshotContainer = ({
side,
settingsPage,
zoomLevel,
onZoomLevelChange,
}: SnapshotContainerProps) => {
const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
if (isError) return <p className="h-100">An error occurred</p>;
if (isPending) return <p className="h-100">Loading...</p>;
@@ -27,13 +31,19 @@ export const SnapshotContainer = ({
if (!cw || !ch) return;
const px = x / cw;
const py = y / ch;
console.log({
const baseLevel = zoomLevel?.level ?? 1;
const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
if (onZoomLevelChange)
onZoomLevelChange({
left,
top,
x,
y,
px,
py,
level: newLevel,
});
};

96
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -3,19 +3,25 @@ import type {
CameraConfig,
CameraSettingErrorValues,
CameraSettingValues,
ZoomLevel,
} from "../../types/types";
import { useMemo, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
import CardHeader from "../UI/CardHeader";
type CameraSettingsProps = {
initialData: CameraConfig;
updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
};
const CameraSettingFields = ({
initialData,
updateCameraConfig,
zoomLevel,
onZoomLevelChange,
}: CameraSettingsProps) => {
const [showPwd, setShowPwd] = useState(false);
@@ -26,8 +32,9 @@ const CameraSettingFields = ({
userName: "",
password: "",
id: initialData?.id,
zoom: zoomLevel?.level ? zoomLevel.level : 1,
}),
[initialData?.id, initialData?.propURI?.value]
[initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
);
const validateValues = (values: CameraSettingValues) => {
@@ -41,16 +48,24 @@ const CameraSettingFields = ({
};
const handleSubmit = (values: CameraSettingValues) => {
console.log(values);
updateCameraConfig(values);
};
const handleRadioButtonChange = (levelNumber: number) => {
if (!onZoomLevelChange || !zoomLevel) return;
onZoomLevelChange({
...zoomLevel,
level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
});
};
return (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validate={validateValues}
validateOnChange={false}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-6 p-2">
@@ -111,7 +126,7 @@ const CameraSettingFields = ({
{errors.password}
</small>
)}
<div className="flex gap-2 items-center relative">
<div className="flex gap-2 items-center relative mb-4">
<Field
id="password"
name="password"
@@ -127,7 +142,82 @@ const CameraSettingFields = ({
icon={showPwd ? faEyeSlash : faEye}
/>
</div>
<div className="my-3">
<CardHeader title="Zoom settings" />
<div className="mx-auto flex gap-10 items-center ">
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
checked={zoomLevel?.level === 1}
className="hidden peer"
id="zoom1"
onChange={() => handleRadioButtonChange(1)}
/>
<label
htmlFor="zoom1"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x1
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
checked={zoomLevel?.level === 2}
className="hidden peer"
id="zoom2"
onChange={() => handleRadioButtonChange(2)}
/>
<label
htmlFor="zoom2"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x2
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
checked={zoomLevel?.level === 4}
className="hidden peer"
id="zoom4"
onChange={() => handleRadioButtonChange(4)}
/>
<label
htmlFor="zoom4"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x4
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
checked={zoomLevel?.level === 8}
className="hidden peer"
id="zoom8"
onChange={() => handleRadioButtonChange(8)}
/>
<label
htmlFor="zoom8"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x8
</label>
</div>
</div>
</div>
<button
type="submit"
className="bg-[#26B170] text-white rounded-lg p-2 mx-auto h-[100%] w-full"

25
src/components/CameraSettings/CameraSettings.tsx
View File

@@ -1,18 +1,23 @@
import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
import type { ZoomLevel } from "../../types/types";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import CameraSettingFields from "./CameraSettingFields";
import { faWrench } from "@fortawesome/free-solid-svg-icons";
const CameraSettings = ({ title, side }: { title: string; side: string }) => {
const {
data,
isError,
isPending,
updateCameraConfig,
updateCameraConfigError,
} = useFetchCameraConfig(side);
console.log(updateCameraConfigError);
const CameraSettings = ({
title,
side,
zoomLevel,
onZoomLevelChange,
}: {
title: string;
side: string;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
}) => {
const { data, isError, isPending, updateCameraConfig } =
useFetchCameraConfig(side);
return (
<Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
@@ -23,6 +28,8 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
<CameraSettingFields
initialData={data}
updateCameraConfig={updateCameraConfig}
zoomLevel={zoomLevel}
onZoomLevelChange={onZoomLevelChange}
/>
</div>
</Card>

12
src/components/FrontCameraSettings/OverviewVideoContainer.tsx
View File

@@ -3,14 +3,19 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import Card from "../UI/Card";
import { useNavigate } from "react-router";
import { useSwipeable } from "react-swipeable";
import type { ZoomLevel } from "../../types/types";
const OverviewVideoContainer = ({
side,
settingsPage,
zoomLevel,
onZoomLevelChange,
}: {
title: string;
side: string;
settingsPage?: boolean;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
}) => {
const navigate = useNavigate();
const handlers = useSwipeable({
@@ -24,7 +29,12 @@ const OverviewVideoContainer = ({
)}
>
<div className="w-full" {...handlers}>
<SnapshotContainer side={side} settingsPage={settingsPage} />
<SnapshotContainer
side={side}
settingsPage={settingsPage}
zoomLevel={zoomLevel}
onZoomLevelChange={onZoomLevelChange}
/>
</div>
</Card>
);

2
src/hooks/useGetOverviewSnapshot.ts
View File

@@ -5,7 +5,7 @@ import { CAM_BASE } from "../utils/config";
const apiUrl = CAM_BASE;
async function fetchSnapshot() {
const response = await fetch(`${apiUrl}/CameraA-preview`);
const response = await fetch(`${apiUrl}/CameraRear-preview`);
if (!response.ok) {
throw new Error("Cannot reach endpoint");
}

2
src/pages/Dashboard.tsx
View File

@@ -4,7 +4,7 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
import { CAM_BASE } from "../utils/config";
const Dashboard = () => {
const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
return (
<SightingFeedProvider url={base_url} side="Front">
<div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">

20
src/pages/FrontCamera.tsx
View File

@@ -1,16 +1,34 @@
import { useState } from "react";
import CameraSettings from "../components/CameraSettings/CameraSettings";
import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
import { Toaster } from "sonner";
import type { ZoomLevel } from "../types/types";
const FrontCamera = () => {
const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
left: 0,
top: 0,
x: 0,
y: 0,
px: 0,
py: 0,
level: 1,
});
return (
<div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
<OverviewVideoContainer
title={"Front Camera"}
side="CameraRear"
settingsPage={true}
zoomLevel={zoomLevel}
onZoomLevelChange={setZoomLevel}
/>
<CameraSettings
title="Front Camera Settings"
side="CameraFront"
zoomLevel={zoomLevel}
onZoomLevelChange={setZoomLevel}
/>
<CameraSettings title="Front Camera Settings" side="CameraFront" />
<Toaster />
</div>
);

10
src/types/types.ts
View File

@@ -251,3 +251,13 @@ export type CameraBlackBoardOptions = {
export type CameraBlackboardResponse = {
data: object;
};
export type ZoomLevel = {
left: number;
top: number;
x: number;
y: number;
px: number;
py: number;
level?: number;
};

2
src/utils/config.ts
View File

@@ -1,4 +1,4 @@
const rawCamBase = import.meta.env.VITE_CAM_BASE;
const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
export const CAM_BASE =
rawCamBase && rawCamBase.trim().length > 0
? rawCamBase