Camera calibration
- {/* Tabs row */} -
-
-
-
-
-
+ {/* Tabs row */}
+
+
+
+
+
+
{/* Tab content */}
-
+
{activeTab === 'video' && (
-
- {/* Right-side button to toggle the menu */}
-
- {/* Sliding menu (right tabs column) */}
-
@@ -231,100 +228,103 @@ const Calibration = () => {
)}
{activeTab === 'map' &&
- (
-
-
- 
- {' '} GCPs
-
-
-
);
};
diff --git a/dashboard/src/views/calibrationTabs/mapTab.jsx b/dashboard/src/views/calibrationTabs/mapTab.jsx
index 382df1b..92c94d5 100644
--- a/dashboard/src/views/calibrationTabs/mapTab.jsx
+++ b/dashboard/src/views/calibrationTabs/mapTab.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
import proj4 from 'proj4';
-import epsg from 'epsg-index';
-import epsgDB from '../../proj-db.json'; // Adjust the path as needed
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
-import { createCustomMarker } from '../../utils/leafletUtils';
+import L from 'leaflet';
+
import "leaflet/dist/leaflet.css";
+import epsgDB from '../../proj-db.json'; // Adjust the path as needed
// Ensure proj4 is set up to convert between CRS definitions
@@ -14,10 +14,10 @@ proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs');
console.log(proj4.defs['EPSG:4326']); // Output: "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"
console.log(proj4.defs[epsgDB[28992]]); // Output: "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"
-const MapTab = ({epsgCode, widgets, selectedWidgetId, updateWidget, mapIsVisible}) => {
+import PropTypes from "prop-types";
+
+const MapTab = ({epsgCode, widgets, mapIsVisible}) => {
const [mapLayers, setMapLayers] = useState("OSM"); // Map layer type
- const [controlPoints, setControlPoints] = useState([]); // Coordinate set
- const [coordinateForms, setCoordinateForms] = useState([]); // Track widgets
const mapRef = useRef(null);
// Define the default CRS as WGS84
const defaultCrs = 'EPSG:4326';
@@ -78,12 +78,12 @@ const MapTab = ({epsgCode, widgets, selectedWidgetId, updateWidget, mapIsVisible
// try to get the proj4 from the defs directly
try {
proj4Def = proj4.defs[`EPSG:${sourceCrs.toString()}`]
- } catch (error) {
- console.error(`Projection ${sourceCode} not found in proj4 lib`)
+ } catch {
+ console.error(`Projection ${sourceCrs} not found in proj4 lib`)
}
}
- } catch (error) {
- console.error(`Projection ${sourceCode} not found in proj4 or EPSG database`);
+ } catch {
+ console.error(`Projection ${sourceCrs} not found in proj4 or EPSG database`);
return null;
}
} else {
@@ -100,24 +100,25 @@ const MapTab = ({epsgCode, widgets, selectedWidgetId, updateWidget, mapIsVisible
};
/* first div is problematic, makes the page overflow */
return (
-
- {' '} GCPs
-
- -
- {/* File Upload Button */}
-
-
- {/* Error Message */}
- {fileError &&
- {/* Submit button section */}
- {fileError}
}
-
- {/* CRS Input */}
-
-
- setEpsgCode(e.target.value)}
- placeholder="4326"
- style={{ width: '300px' }}
- />
+ (
+
-
-
- {widgets.map((widget) => (
-
- setSelectedWidgetId(widget.id)
- }
- style={{
- border: selectedWidgetId === widget.id ? `4px solid ${widget.color}` : `1px solid ${widget.color}`,
- marginTop: '10px',
- marginBottom: '10px',
- padding: '5px',
- color: 'white',
- cursor: 'pointer',
- }}
- >
- updateWidget(id, coordinates)}
- onDelete={deleteWidget}
+ {/* Right-side button to toggle the menu */}
+
+
+ {/* Sliding menu (right tabs column) */}
+
+
+ 
+ {' '} GCPs
+
+
+
+
+ {' '} GCPs
+
+ +
+ {/* File Upload Button */}
+
+
+ {/* Error Message */}
+ {fileError &&
+
+
+ {widgets.map((widget) => (
+ {fileError}
}
+
+ {/* CRS Input */}
+
+
+ setEpsgCode(e.target.value)}
+ placeholder="4326"
+ style={{width: '200px'}}
/>
- ))}
-
+ setSelectedWidgetId(widget.id)
+ }
+ style={{
+ border: selectedWidgetId === widget.id ? `4px solid ${widget.color}` : `1px solid ${widget.color}`,
+ marginTop: '10px',
+ marginBottom: '10px',
+ padding: '5px',
+ color: 'white',
+ cursor: 'pointer',
+ }}
+ >
+ updateWidget(id, coordinates)}
+ onDelete={deleteWidget}
+ />
+
+ ))}
+
-
-
+ {/*/!* Submit button section *!/*/}
+ {/**/}
+ {/* */}
+ {/*
*/}
+
);
};
+VideoTab.propTypes = {
+ widgets: PropTypes.array.isRequired,
+ selectedWidgetId: PropTypes.oneOfType([PropTypes.number]),
+ updateWidget: PropTypes.func.isRequired,
+ dots: PropTypes.object.isRequired,
+ imgDims: PropTypes.object,
+ setDots: PropTypes.func.isRequired,
+ setImgDims: PropTypes.func.isRequired,
+};
+
export default VideoTab;
diff --git a/dashboard/src/views/home.jsx b/dashboard/src/views/home.jsx
index c3ab9e0..76144ea 100644
--- a/dashboard/src/views/home.jsx
+++ b/dashboard/src/views/home.jsx
@@ -1,8 +1,7 @@
-import React, {useState, useEffect} from 'react';
+import { useState } from 'react';
import { FaTimes } from 'react-icons/fa';
import reactLogo from '/react.svg'
import orcLogo from '/orc_favicon.svg'
-import api from "../api"
const Home = () => {
const [count, setCount] = useState(0)
diff --git a/tests/test_routers/test_camera_config.py b/tests/test_routers/test_camera_config.py
index 932c180..b980974 100644
--- a/tests/test_routers/test_camera_config.py
+++ b/tests/test_routers/test_camera_config.py
@@ -24,18 +24,44 @@ def gcps_data():
[192105.2958125107, 313172.0257530752, 150.616],
[192110.35620407888, 313162.5371485311, 150.758],
],
- "crs": None,
+ "crs": "28992",
"height": 1080,
"width": 1920
}
+@pytest.fixture
+def gcps_data_lat_lon():
+ return {
+ "src": [[158, 314], [418, 245], [655, 162], [948, 98], [1587, 321],[1465, 747]],
+ "dst": [
+ [5.913539646666668, 50.80710705166666, 150.831],
+ [5.913524096666666, 50.80712979166666, 150.717],
+ [5.913501468333333, 50.80715845, 150.807],
+ [5.913461251666667, 50.80721228666666, 150.621],
+ [5.913580743333333, 50.80723664166667, 150.616],
+ [5.91365156, 50.80715102666666, 150.758],
+ ],
+ "crs": "4326",
+ "height": 1080,
+ "width": 1920
+
+ }
+
+
def test_fit_perspective_success(gcps_data):
response = client.post("/camera_config/fit_perspective", json=gcps_data)
assert response.status_code == 200
assert "src_est" in response.json()
assert "dst_est" in response.json()
+def test_fit_perspective_lat_lon_success(gcps_data_lat_lon):
+ response = client.post("/camera_config/fit_perspective", json=gcps_data_lat_lon)
+ assert response.status_code == 200
+ assert "src_est" in response.json()
+ assert "dst_est" in response.json()
+
+
def test_fit_perspective_mismatched_input_lengths(gcps_data):
# reduce nr of points
gcps_data["src"] = gcps_data["src"][:-1]
{/* Map container */}
{/* Tile layers */}
{mapLayers === "OSM" && (
+
)}
{/* Render dynamically added markers */}
@@ -144,8 +145,8 @@ const MapTab = ({epsgCode, widgets, selectedWidgetId, updateWidget, mapIsVisible
- {
+import {useState, useEffect} from 'react';
+import {TransformComponent, useTransformEffect, useTransformInit} from 'react-zoom-pan-pinch';
+import './photoComponent.css';
+import PropTypes from 'prop-types';
+
+const PhotoComponent = ({
+ imageRef,
+ selectedWidgetId,
+ updateWidget,
+ widgets,
+ scale,
+ dots,
+ imgDims,
+ setDots,
+ setImgDims
+ }) => {
const [transformState, setTransformState] = useState(null); // state of zoom is stored here
- const [photoBbox, setPhotoBbox ] = useState(null);
- const [imgDims, setImgDims] = useState(null);
+ const [photoBbox, setPhotoBbox] = useState(null);
const [fittedPoints, setFittedPoints] = useState([]);
- useTransformInit(({state, instance}) => {
+ const updateFittedPoints = () => {
+ const fP = widgets.map(({id, fit, color}) => {
+ if (!fit) return null; // Skip widgets without the `fit` property
+ const {row, col} = fit;
+ const screenPoint = convertToPhotoCoordinates(row, col);
+ return {
+ "id": id,
+ "x": screenPoint.x,
+ "y": screenPoint.y,
+ "color": color
+ }
+
+ });
+ setFittedPoints(fP);
+ }
+
+ // update the dot locations when user resizes the browser window
+ const updateDots = () => {
+ try {
+ const updatedDots = Object.entries(dots).reduce((newDots, [id, dot]) => {
+ const newX = dot.xNorm * photoBbox.width / transformState.scale; //
+ const newY = dot.yNorm * photoBbox.height / transformState.scale; //
+ // Recalculate the actual position relative to the new photoBbox and dimensions
+ newDots[id] = {
+ ...dot,
+ x: newX,
+ y: newY,
+ };
+ return newDots;
+ }, {});
+ setDots(updatedDots);
+ } catch {
+ console.log("Skipping dot rendering, image not yet initialized")
+ }
+
+ }
+
+ // run these as soon as the TransformComponent is ready
+ useTransformInit(({state}) => {
// ensure the zoom/pan state is stored in a react state at the mounting of the photo element
setTransformState(state);
+ // ensure we have a method (event listener) to reproject the plotted points upon changes in window size
+ const handleResize = () => {
+ const imgElement = imageRef.current;
+ setPhotoBbox(imgElement.getBoundingClientRect());
+ setTransformState(state); // Update the transformState on every transformation
+ };
+
+ window.addEventListener("resize", handleResize);
+ handleResize();
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
+
+ }, [imageRef, updateFittedPoints]);
+
+ // triggered when user resizes the window, after this, the dot locations must be updated
+ useEffect(() => {
+ updateDots();
+ }, [photoBbox]); // TODO: updateDots is a dependency, but it changes all the time, perhaps put updateDots inside useEffect
- }, []);
useEffect(() => {
try {
@@ -19,11 +87,15 @@ const PhotoComponent = ({imageRef, selectedWidgetId, updateWidget, widgets, scal
setImgDims({width: imageRef.current.naturalWidth, height: imgElement.naturalHeight});
setPhotoBbox(imgElement.getBoundingClientRect());
updateFittedPoints();
+
+ // updateFittedPoints();
} catch {
- console.log("Image not yet initialized")}
- }, [widgets, transformState]);
+ console.error("Image not yet initialized")
+ }
+ }, [widgets, transformState, window]);
- useTransformEffect(({ state, instance }) => {
+
+ useTransformEffect(({state}) => {
const imgElement = imageRef.current;
setPhotoBbox(imgElement.getBoundingClientRect());
setTransformState(state); // Update the transformState on every transformation
@@ -38,26 +110,10 @@ const PhotoComponent = ({imageRef, selectedWidgetId, updateWidget, widgets, scal
// Function to convert row/column to pixel coordinates
const convertToPhotoCoordinates = (row, col) => {
const x = col / imgDims.width * photoBbox.width / transformState.scale;
- const y = row / imgDims.height * photoBbox.height / transformState.Scale;
- return { x, y };
+ const y = row / imgDims.height * photoBbox.height / transformState.scale;
+ return {x, y};
};
- const updateFittedPoints = () => {
- const fP = widgets.map(({ id, fit, color }) => {
- if (!fit) return null; // Skip widgets without the `fit` property
- const { row, col } = fit;
- const screenPoint = convertToPhotoCoordinates(row, col);
- return {
- "id": id,
- "x": screenPoint.x,
- "y": screenPoint.y,
- "color": color
- }
-
- });
- setFittedPoints(fP);
- console.log(fP);
- }
const handlePhotoClick = (event) => {
event.stopPropagation();
if (!transformState) {
@@ -70,7 +126,7 @@ const PhotoComponent = ({imageRef, selectedWidgetId, updateWidget, widgets, scal
const clickY = event.clientY - photoBbox.top;
// Account for current zoom and pan state
- const { previousScale, scale, positionX, positionY } = transformState;
+ const {scale} = transformState;
// Use normalized coordinates relative to the original image dimensions
const normalizedX = clickX / photoBbox.width; // X in percentage of displayed width
@@ -79,93 +135,105 @@ const PhotoComponent = ({imageRef, selectedWidgetId, updateWidget, widgets, scal
// Adjust for zoom scale using zoom state
const adjustedX = clickX / scale;
const adjustedY = clickY / scale;
+
+
// Calculate the row and column on the **original image** (as percentages)
const originalRow = Math.round(normalizedY * imgDims.height * 100) / 100;
const originalCol = Math.round(normalizedX * imgDims.width * 100) / 100;
- // Add the new dot to the state with the ID of the associated widget
- if (!selectedWidgetId) {
- alert("Please select a widget to update its row/column.");
- return;
- }
-
- // Update the dots
- setDots((prevDots) => ({
- ...prevDots,
- [selectedWidgetId]: { x: adjustedX, y: adjustedY, scale: scale, color: getWidgetById(selectedWidgetId).color },
- }));
+ // Add the new dot to the state with the ID of the associated widget
+ if (!selectedWidgetId) {
+ alert("Please select a widget to update its row/column.");
+ return;
+ }
- updateWidget(selectedWidgetId, {
- ...widgets.find((widget) => widget.id === selectedWidgetId).coordinates,
- row: originalRow,
- col: originalCol,
- });
+ // Update the dots
+ setDots((prevDots) => ({
+ ...prevDots,
+ [selectedWidgetId]: {
+ x: adjustedX,
+ y: adjustedY,
+ xNorm: normalizedX,
+ yNorm: normalizedY,
+ scale: scale,
+ color: getWidgetById(selectedWidgetId).color
+ },
+ }));
+
+ updateWidget(selectedWidgetId, {
+ ...widgets.find((widget) => widget.id === selectedWidgetId).coordinates,
+ row: originalRow,
+ col: originalCol,
+ });
}
+ PhotoComponent.propTypes = {
+ imageRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+ selectedWidgetId: PropTypes.number,
+ updateWidget: PropTypes.func.isRequired,
+ widgets: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.number.isRequired,
+ fit: PropTypes.shape({
+ row: PropTypes.number,
+ col: PropTypes.number
+ }),
+ color: PropTypes.string
+ })).isRequired,
+ scale: PropTypes.number,
+ dots: PropTypes.object.isRequired,
+ imgDims: PropTypes.shape({
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+ }),
+ setDots: PropTypes.func.isRequired,
+ setImgDims: PropTypes.func.isRequired
+ };
+
return (
-
- 
+
+
{/* Render colored dots */}
{Object.entries(dots).map(([widgetId, dot]) => {
- const imgElement = imageRef.current;
return (
-
);
diff --git a/dashboard/src/views/calibrationTabs/videoTab.jsx b/dashboard/src/views/calibrationTabs/videoTab.jsx
index c943fc8..29f6246 100644
--- a/dashboard/src/views/calibrationTabs/videoTab.jsx
+++ b/dashboard/src/views/calibrationTabs/videoTab.jsx
@@ -1,8 +1,10 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { TransformWrapper, TransformComponent, useTransformEffect, useTransformInit } from 'react-zoom-pan-pinch';
+import { useState, useRef } from 'react';
+import { TransformWrapper } from 'react-zoom-pan-pinch';
import PhotoComponent from './photoComponent';
-const VideoTab = ({widgets, selectedWidgetId, updateWidget, dots, setDots}) => {
+import PropTypes from 'prop-types';
+
+const VideoTab = ({widgets, selectedWidgetId, updateWidget, dots, imgDims, setDots, setImgDims}) => {
const [scale, setScale] = useState(1);
const imageRef = useRef(null); // Reference to image within TransFormWrapper
@@ -28,20 +30,30 @@ const VideoTab = ({widgets, selectedWidgetId, updateWidget, dots, setDots}) => {
widgets={widgets}
scale={scale}
dots={dots}
+ imgDims={imgDims}
setDots={setDots}
+ setImgDims={setImgDims}
/>
-
+
{/* Render colored dots */}
{Object.entries(dots).map(([widgetId, dot]) => {
- const imgElement = imageRef.current;
return (
-
- {widgetId}
+ {widgetId}
);
- })}
- {/* Render colored dots */}
+ })}
+ {/* Render fitted points */}
{fittedPoints.map((point) => {
if (!point || point.x === undefined || point.y === undefined) return null;
- return (
-
- {point.id}
+ +
);
- })}
+ })}
Click on the photo to select row/column
-
Current Coordinates:
-{JSON.stringify(widgets, null, 2)}
+{/* Current Coordinates:
*/} +{/*{JSON.stringify(widgets, null, 2)} */}