From 6f2bc96ac7cfbe38af2c4f1db8ef2b458c72d4d5 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 1 Oct 2025 10:59:10 +0100 Subject: [PATCH 1/3] Add camera zoom functionality and refactor blackboard data fetching - Introduced `useCameraZoom` hook for managing camera zoom operations. - Refactored `useCameraBlackboard` to improve data fetching function naming. - Updated `CameraSettingFields` to utilize new zoom functionality and handle zoom level changes. - Removed unnecessary console logs from `Dashboard`. --- .../CameraSettings/CameraSettingFields.tsx | 37 ++++++++++++++++--- src/hooks/useCameraBlackboard.ts | 4 +- src/hooks/useCameraZoom.ts | 22 +++++++++++ src/pages/Dashboard.tsx | 1 - src/types/types.ts | 5 +++ 5 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 src/hooks/useCameraZoom.ts diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 90cf47b..8b5c42e 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -3,12 +3,15 @@ import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, + ZoomInOptions, 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"; +import { useCameraZoom } from "../../hooks/useCameraZoom"; +import { useCameraBlackboard } from "../../hooks/useCameraBlackboard"; type CameraSettingsProps = { initialData: CameraConfig; @@ -24,7 +27,9 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - console.log(initialData); + const { mutation } = useCameraZoom(); + const { mutation: blackboardMuation, query: blackboardQuery } = + useCameraBlackboard(); const initialValues = useMemo( () => ({ friendlyName: initialData?.id ?? "", @@ -32,6 +37,7 @@ const CameraSettingFields = ({ userName: "", password: "", id: initialData?.id, + //TODO: update zoomlevel to query data zoom: zoomLevel?.level ? zoomLevel.level : 1, }), [initialData?.id, initialData?.propURI?.value, zoomLevel?.level] @@ -41,23 +47,42 @@ const CameraSettingFields = ({ const errors: CameraSettingErrorValues = {}; if (!values.friendlyName) errors.friendlyName = "Required"; if (!values.cameraAddress) errors.cameraAddress = "Required"; - if (!values.userName) errors.userName = "Required"; - if (!values.password) errors.password = "Required"; - return errors; }; const handleSubmit = (values: CameraSettingValues) => { - console.log(values); updateCameraConfig(values); }; - const handleRadioButtonChange = (levelNumber: number) => { + const handleRadioButtonChange = async (levelNumber: number) => { if (!onZoomLevelChange || !zoomLevel) return; onZoomLevelChange({ ...zoomLevel, level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level, }); + const cameraControllerSide = + initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + + const zoomInOptions: ZoomInOptions = { + camera: cameraControllerSide, + multiplier: levelNumber, + }; + + mutation.mutate(zoomInOptions); + + if (!blackboardQuery.data.cameraZoom) { + blackboardMuation.mutate({ + operation: "INSERT", + path: "cameraZoom", + value: zoomInOptions, + }); + } else { + blackboardMuation.mutate({ + operation: "APPEND", + path: "cameraZoom", + value: zoomInOptions, + }); + } }; return ( diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts index d8cd31b..81c16a8 100644 --- a/src/hooks/useCameraBlackboard.ts +++ b/src/hooks/useCameraBlackboard.ts @@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import { CAM_BASE } from "../utils/config"; import type { CameraBlackBoardOptions } from "../types/types"; -const getBlackboardData = async () => { +const getAllBlackboardData = async () => { const response = await fetch(`${CAM_BASE}/api/blackboard`); if (!response.ok) { throw new Error("Failed to fetch blackboard data"); @@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => { export const useCameraBlackboard = () => { const query = useQuery({ queryKey: ["cameraBlackboard"], - queryFn: getBlackboardData, + queryFn: getAllBlackboardData, }); const mutation = useMutation({ diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts new file mode 100644 index 0000000..474c29e --- /dev/null +++ b/src/hooks/useCameraZoom.ts @@ -0,0 +1,22 @@ +import { useMutation } from "@tanstack/react-query"; +import { CAM_BASE } from "../utils/config"; +import type { ZoomInOptions } from "../types/types"; + +async function zoomIn(options: ZoomInOptions) { + const response = await fetch( + `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x` + ); + if (!response.ok) { + throw new Error("Cannot reach camera zoom endpoint"); + } + return; +} + +export const useCameraZoom = () => { + const mutation = useMutation({ + mutationKey: ["zoomIn"], + mutationFn: (options: ZoomInOptions) => zoomIn(options), + }); + + return { mutation }; +}; diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index b46ffe1..fb0182a 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -7,7 +7,6 @@ const Dashboard = () => { const mode = import.meta.env.MODE; const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`; console.log(mode); - console.log(base_url); return (
diff --git a/src/types/types.ts b/src/types/types.ts index e70d706..55e2d88 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -261,3 +261,8 @@ export type ZoomLevel = { py: number; level?: number; }; + +export type ZoomInOptions = { + camera: string; + multiplier: number; +}; From 4eeb3684847526ae967924a1b3af08f1d40a1fb5 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 1 Oct 2025 11:30:06 +0100 Subject: [PATCH 2/3] Refactor SnapshotContainer to integrate camera zoom functionality and improve error handling --- .../CameraOverview/SnapshotContainer.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 5e1698f..7d85dad 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -1,6 +1,8 @@ import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot"; -import type { ZoomLevel } from "../../types/types"; +import type { ZoomInOptions, ZoomLevel } from "../../types/types"; import NavigationArrow from "../UI/NavigationArrow"; +import { useCameraZoom } from "../../hooks/useCameraZoom"; +import { useEffect } from "react"; type SnapshotContainerProps = { side: string; @@ -16,8 +18,9 @@ export const SnapshotContainer = ({ onZoomLevelChange, }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - if (isError) return

An error occurred

; - if (isPending) return

Loading...

; + const { mutation } = useCameraZoom(); + const cameraControllerSide = + side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const handleZoomClick = (event: React.MouseEvent) => { const bounds = canvasRef.current?.getBoundingClientRect(); @@ -45,8 +48,24 @@ export const SnapshotContainer = ({ py, level: newLevel, }); + + if (!zoomLevel?.level) return; }; + useEffect(() => { + if (zoomLevel?.level) { + const zoomInOptions: ZoomInOptions = { + camera: cameraControllerSide, + multiplier: zoomLevel.level, + }; + mutation.mutate(zoomInOptions); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [zoomLevel?.level]); + + if (isError) return

An error occurred

; + if (isPending) return

Loading...

; + return (
From 82ef562046c9ca226725d52f2cfe54a5e7d094e8 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Thu, 2 Oct 2025 16:07:05 +0100 Subject: [PATCH 3/3] camera zoom handling across components; unify zoom level type and improve state management --- .../CameraOverview/SnapshotContainer.tsx | 43 ++--- .../CameraSettings/CameraSettingFields.tsx | 168 +++++++----------- .../CameraSettings/CameraSettings.tsx | 6 +- .../OverviewVideoContainer.tsx | 5 +- src/hooks/useCameraZoom.ts | 30 +++- src/pages/FrontCamera.tsx | 11 +- src/types/types.ts | 4 + 7 files changed, 111 insertions(+), 156 deletions(-) diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 7d85dad..c7a26b9 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -1,5 +1,5 @@ import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot"; -import type { ZoomInOptions, ZoomLevel } from "../../types/types"; +import type { ZoomInOptions } from "../../types/types"; import NavigationArrow from "../UI/NavigationArrow"; import { useCameraZoom } from "../../hooks/useCameraZoom"; import { useEffect } from "react"; @@ -7,8 +7,8 @@ import { useEffect } from "react"; type SnapshotContainerProps = { side: string; settingsPage?: boolean; - zoomLevel?: ZoomLevel; - onZoomLevelChange?: (level: ZoomLevel) => void; + zoomLevel?: number; + onZoomLevelChange?: (level: number) => void; }; export const SnapshotContainer = ({ @@ -18,50 +18,29 @@ export const SnapshotContainer = ({ onZoomLevelChange, }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - const { mutation } = useCameraZoom(); const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const { mutation } = useCameraZoom({ camera: cameraControllerSide }); - const handleZoomClick = (event: React.MouseEvent) => { - const bounds = canvasRef.current?.getBoundingClientRect(); - if (!bounds) return; - const left = bounds.left; - const top = bounds.top; - const x = event.pageX; - const y = event.pageY; - const cw = canvasRef.current?.clientWidth; - const ch = canvasRef.current?.clientHeight; - if (!cw || !ch) return; - const px = x / cw; - const py = y / ch; - - const baseLevel = zoomLevel?.level ?? 1; + const handleZoomClick = () => { + const baseLevel = zoomLevel ?? 1; const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2; - if (onZoomLevelChange) - onZoomLevelChange({ - left, - top, - x, - y, - px, - py, - level: newLevel, - }); + if (onZoomLevelChange) onZoomLevelChange(newLevel); - if (!zoomLevel?.level) return; + if (!zoomLevel) return; }; useEffect(() => { - if (zoomLevel?.level) { + if (zoomLevel) { const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, - multiplier: zoomLevel.level, + multiplier: zoomLevel, }; mutation.mutate(zoomInOptions); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [zoomLevel?.level]); + }, [zoomLevel]); if (isError) return

An error occurred

; if (isPending) return

Loading...

; diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 8b5c42e..d530db3 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -4,20 +4,18 @@ import type { CameraSettingErrorValues, CameraSettingValues, ZoomInOptions, - ZoomLevel, } from "../../types/types"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import CardHeader from "../UI/CardHeader"; import { useCameraZoom } from "../../hooks/useCameraZoom"; -import { useCameraBlackboard } from "../../hooks/useCameraBlackboard"; type CameraSettingsProps = { initialData: CameraConfig; updateCameraConfig: (values: CameraSettingValues) => Promise | void; - zoomLevel?: ZoomLevel; - onZoomLevelChange?: (level: ZoomLevel) => void; + zoomLevel?: number; + onZoomLevelChange?: (level: number) => void; }; const CameraSettingFields = ({ @@ -27,9 +25,38 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - const { mutation } = useCameraZoom(); - const { mutation: blackboardMuation, query: blackboardQuery } = - useCameraBlackboard(); + const cameraControllerSide = + initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); + const zoomOptions = [1, 2, 4, 8]; + + useEffect(() => { + if (!query.data) return; + const apiZoom = getZoomLevel(query.data); + onZoomLevelChange?.(apiZoom); + }, [query.data, onZoomLevelChange]); + + const getZoomLevel = (levelstring: string | undefined) => { + switch (levelstring) { + case "1x": + return 1; + break; + case "2x": + return 2; + break; + case "4x": + return 4; + break; + case "8x": + return 8; + default: + return 1; + } + }; + const level = getZoomLevel(query.data); + + console.log("level from get", level); + console.log("zoomLevel state", zoomLevel); const initialValues = useMemo( () => ({ friendlyName: initialData?.id ?? "", @@ -37,10 +64,10 @@ const CameraSettingFields = ({ userName: "", password: "", id: initialData?.id, - //TODO: update zoomlevel to query data - zoom: zoomLevel?.level ? zoomLevel.level : 1, + + zoom: zoomLevel, }), - [initialData?.id, initialData?.propURI?.value, zoomLevel?.level] + [initialData?.id, initialData?.propURI?.value, zoomLevel] ); const validateValues = (values: CameraSettingValues) => { @@ -56,12 +83,7 @@ const CameraSettingFields = ({ const handleRadioButtonChange = async (levelNumber: number) => { if (!onZoomLevelChange || !zoomLevel) return; - onZoomLevelChange({ - ...zoomLevel, - level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level, - }); - const cameraControllerSide = - initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + onZoomLevelChange(levelNumber); const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, @@ -69,28 +91,16 @@ const CameraSettingFields = ({ }; mutation.mutate(zoomInOptions); - - if (!blackboardQuery.data.cameraZoom) { - blackboardMuation.mutate({ - operation: "INSERT", - path: "cameraZoom", - value: zoomInOptions, - }); - } else { - blackboardMuation.mutate({ - operation: "APPEND", - path: "cameraZoom", - value: zoomInOptions, - }); - } }; - + const selectedZoom = zoomLevel ?? 1; + console.log(selectedZoom); return ( {({ errors, touched }) => (
@@ -169,78 +179,28 @@ const CameraSettingFields = ({
-
-
- handleRadioButtonChange(1)} - /> - -
- -
- handleRadioButtonChange(2)} - /> - -
- -
- handleRadioButtonChange(4)} - /> - -
- -
- handleRadioButtonChange(8)} - /> - -
+
+ {zoomOptions.map((zoom) => ( +
+ handleRadioButtonChange(zoom)} + /> + +
+ ))}