From 7372c1305b064cecb86eb1b7e026f9393f877792 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 22 Sep 2025 11:24:10 +0200 Subject: [PATCH 1/8] feat(#10): :sparkles: coordinates possible to see on scene --- index.html | 7 ++++++- src/main.js | 18 +++++++++++++++++- src/style.css | 11 ++++++++++- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c77bfb1..3370c31 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ type="text/css" href="/libs/jstree/themes/mixed/style.css" /> + @@ -39,6 +40,7 @@ +
+ > + +
@@ -88,5 +92,6 @@ viewer.fitToScreen() }) + diff --git a/src/main.js b/src/main.js index 79eee5f..a3de3e7 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,17 @@ -/* Empty for now, add logic later */ +// EPSG:32633 (WGS84 / UTM zone 33N) → WGS84 (lon/lat) +const utm33 = "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"; //UTM zone 33N +const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; //Current standard for GPS coordinates + +const posCanvas = document.getElementById('camera-pos'); +const context = posCanvas.getContext('2d'); + +function updateCameraOverlay() { + const cam = window.viewer.scene.view.position; + const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library + + context.clearRect(0, 0, posCanvas.width, posCanvas.height); + context.fillStyle = 'white'; + context.font = '20px Times New Roman'; + context.fillText(`lat=${lat.toFixed(2)}˚ lon=${lon.toFixed(2)}˚`, 10, 40); +} +viewer.addEventListener("update", updateCameraOverlay); diff --git a/src/style.css b/src/style.css index 5bc7676..9cdf607 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1,10 @@ -/* Empty for now, add styles later */ + +#camera-pos { + position: absolute; + left: 10px; + bottom: 10px; + width: 300px; + height: 60px; + pointer-events: none; + z-index: 10; +} \ No newline at end of file From c405e67505c355899dd7ba15634778b916f4c67b Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 29 Sep 2025 11:38:53 +0200 Subject: [PATCH 2/8] feat(#10): :sparkles: Made the text clearer, added a box for elevation target The text was blurry before, but should now be clear. Also added the showing of elevation for a target point --- index.html | 7 +++- src/coordinateShowing.css | 24 +++++++++++++ src/coordinateShowing.js | 74 +++++++++++++++++++++++++++++++++++++++ src/main.js | 16 --------- src/style.css | 10 ------ 5 files changed, 104 insertions(+), 27 deletions(-) create mode 100644 src/coordinateShowing.css create mode 100644 src/coordinateShowing.js diff --git a/index.html b/index.html index 3370c31..98d1737 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ href="/libs/jstree/themes/mixed/style.css" /> + @@ -52,7 +53,10 @@ background-image: url('/build/potree/resources/images/background.jpg'); " > - + + + +
@@ -93,5 +97,6 @@ }) + diff --git a/src/coordinateShowing.css b/src/coordinateShowing.css new file mode 100644 index 0000000..da616a2 --- /dev/null +++ b/src/coordinateShowing.css @@ -0,0 +1,24 @@ + +#posCanvas { + position: absolute; + left: 10px; + bottom: 10px; + width: 300px; + height: 50px; + pointer-events: none; + background-color: #19282C; + z-index: 10; + border-radius: 5px; +} + +#elevationCanvas { + position: absolute; + right: 100px; + top: 15px; + width: 300px; + height: 50px; + pointer-events: none; + background-color: #19282C; + z-index: 10; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/coordinateShowing.js b/src/coordinateShowing.js new file mode 100644 index 0000000..ed1a1f1 --- /dev/null +++ b/src/coordinateShowing.js @@ -0,0 +1,74 @@ +// EPSG:32633 (WGS84 / UTM zone 33N) to WGS84 (lon/lat) +const utm33 = "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"; //UTM zone 33N +const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; //WGS84 is the current standard for GPS coordinates + +const posCanvas = document.getElementById('posCanvas'); +let posCtx = posCanvas.getContext('2d'); + +const elevationCanvas = document.getElementById('elevationCanvas'); +let elevationCtx = elevationCanvas.getContext('2d'); + + +function resizeCanvas(canvas) { + const dpr = window.devicePixelRatio || 1; + const ctx = canvas.getContext('2d'); + + // Set canvas internal size + canvas.width = canvas.clientWidth * dpr; + canvas.height = canvas.clientHeight * dpr; + + // Scale context so drawing uses CSS pixels + ctx.setTransform(dpr, 0, 0, dpr, 0, 0); + return ctx; +} + +function updateCameraOverlay() { + const cam = window.viewer.scene.view.position; + const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library + + const centerX = posCanvas.clientWidth / 2; + const centerY = posCanvas.clientHeight / 2; + + posCtx.clearRect(0, 0, posCanvas.width, posCanvas.height); + posCtx.fillStyle = '#cccccc'; + posCtx.font = '20px Arial'; + posCtx.textAlign = "center"; + posCtx.textBaseline = "middle"; + posCtx.fillText(`lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, centerX, centerY); +} + + +function targetElevation() { + const pivot = window.viewer.scene.view.getPivot(); + const mode = window.viewer.getControls(); + + const centerX = elevationCanvas.clientWidth / 2; + const centerY = elevationCanvas.clientHeight / 2; + + if (mode === window.viewer.orbitControls) { + elevationCanvas.style.display = 'inline'; + elevationCtx.clearRect(0, 0, elevationCanvas.width, elevationCanvas.height); + elevationCtx.fillStyle = '#cccccc'; + elevationCtx.font = '20px Arial'; + elevationCtx.textAlign = "center"; + elevationCtx.textBaseline = "middle"; + elevationCtx.fillText(`Target elevation = ${pivot.z.toFixed(2)}m`, centerX, centerY); + } + else{ + elevationCanvas.style.display = 'none'; + } +} + + +viewer.addEventListener("update", targetElevation); +viewer.addEventListener("update", updateCameraOverlay); + +posCtx = resizeCanvas(posCanvas); +elevationCtx = resizeCanvas(elevationCanvas); + +window.addEventListener('resize', () => { + posCtx = resizeCanvas(posCanvas); + elevationCtx = resizeCanvas(elevationCanvas); +}); + + diff --git a/src/main.js b/src/main.js index a3de3e7..8b13789 100644 --- a/src/main.js +++ b/src/main.js @@ -1,17 +1 @@ -// EPSG:32633 (WGS84 / UTM zone 33N) → WGS84 (lon/lat) -const utm33 = "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"; //UTM zone 33N -const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; //Current standard for GPS coordinates -const posCanvas = document.getElementById('camera-pos'); -const context = posCanvas.getContext('2d'); - -function updateCameraOverlay() { - const cam = window.viewer.scene.view.position; - const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library - - context.clearRect(0, 0, posCanvas.width, posCanvas.height); - context.fillStyle = 'white'; - context.font = '20px Times New Roman'; - context.fillText(`lat=${lat.toFixed(2)}˚ lon=${lon.toFixed(2)}˚`, 10, 40); -} -viewer.addEventListener("update", updateCameraOverlay); diff --git a/src/style.css b/src/style.css index 9cdf607..e69de29 100644 --- a/src/style.css +++ b/src/style.css @@ -1,10 +0,0 @@ - -#camera-pos { - position: absolute; - left: 10px; - bottom: 10px; - width: 300px; - height: 60px; - pointer-events: none; - z-index: 10; -} \ No newline at end of file From 3d6ec5e4a6e889e2a3211569abccb9170a682df6 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 29 Sep 2025 13:39:36 +0200 Subject: [PATCH 3/8] docs(#10): :memo: Added function documentation --- src/coordinateShowing.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/coordinateShowing.js b/src/coordinateShowing.js index ed1a1f1..23ee291 100644 --- a/src/coordinateShowing.js +++ b/src/coordinateShowing.js @@ -8,7 +8,11 @@ let posCtx = posCanvas.getContext('2d'); const elevationCanvas = document.getElementById('elevationCanvas'); let elevationCtx = elevationCanvas.getContext('2d'); - +/** + * Resizes the canvas and its context to account for device pixel ratio. + * @param {*} canvas - The canvas element to resize. + * @returns {*} - The resized canvas context. + */ function resizeCanvas(canvas) { const dpr = window.devicePixelRatio || 1; const ctx = canvas.getContext('2d'); @@ -22,10 +26,12 @@ function resizeCanvas(canvas) { return ctx; } +/** + * Updates the camera overlay with the current latitude and longitude. + */ function updateCameraOverlay() { const cam = window.viewer.scene.view.position; const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library - const centerX = posCanvas.clientWidth / 2; const centerY = posCanvas.clientHeight / 2; @@ -37,7 +43,9 @@ function updateCameraOverlay() { posCtx.fillText(`lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, centerX, centerY); } - +/** + * Displays the target elevation when in orbit mode. + */ function targetElevation() { const pivot = window.viewer.scene.view.getPivot(); const mode = window.viewer.getControls(); From fd23c74f46d6706408498e979b6fd961efe34973 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Sun, 5 Oct 2025 20:03:41 +0200 Subject: [PATCH 4/8] refactor(#10): Changed to new coordinate system, generalized code The code is now refactored to use the new coordinate system. It is also generalized more to not look as messy as before. --- src/coordinateShowing.js | 89 ++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 44 deletions(-) diff --git a/src/coordinateShowing.js b/src/coordinateShowing.js index 23ee291..8bd0587 100644 --- a/src/coordinateShowing.js +++ b/src/coordinateShowing.js @@ -1,12 +1,11 @@ -// EPSG:32633 (WGS84 / UTM zone 33N) to WGS84 (lon/lat) -const utm33 = "+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs"; //UTM zone 33N -const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; //WGS84 is the current standard for GPS coordinates - -const posCanvas = document.getElementById('posCanvas'); -let posCtx = posCanvas.getContext('2d'); +const ecef = "+proj=geocent +datum=WGS84 +units=m +no_defs"; // EPSG:4978 (geocentric coordinates) +const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; // EPSG:4326 (geographic coordinates) +const posCanvas = document.getElementById('posCanvas'); // lat/lon const elevationCanvas = document.getElementById('elevationCanvas'); -let elevationCtx = elevationCanvas.getContext('2d'); + +let posCtx; +let elevationCtx; /** * Resizes the canvas and its context to account for device pixel ratio. @@ -17,7 +16,6 @@ function resizeCanvas(canvas) { const dpr = window.devicePixelRatio || 1; const ctx = canvas.getContext('2d'); - // Set canvas internal size canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; @@ -27,56 +25,59 @@ function resizeCanvas(canvas) { } /** - * Updates the camera overlay with the current latitude and longitude. + * Draw the text on a given canvas. + */ +function drawText(ctx, text, canvas) { + const centerX = canvas.clientWidth / 2; + const centerY = canvas.clientHeight / 2; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = '#cccccc'; + ctx.font = '20px Arial'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText(text, centerX, centerY); +} + +/** + * Updates the lat/lon position. */ -function updateCameraOverlay() { +function updatePosition() { const cam = window.viewer.scene.view.position; - const [lon, lat] = proj4(utm33, wgs84, [cam.x, cam.y]); // Conversion using proj4js library - const centerX = posCanvas.clientWidth / 2; - const centerY = posCanvas.clientHeight / 2; - - posCtx.clearRect(0, 0, posCanvas.width, posCanvas.height); - posCtx.fillStyle = '#cccccc'; - posCtx.font = '20px Arial'; - posCtx.textAlign = "center"; - posCtx.textBaseline = "middle"; - posCtx.fillText(`lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, centerX, centerY); + const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]); + drawText(posCtx, `lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, posCanvas); } -/** - * Displays the target elevation when in orbit mode. +/** + * Shows target elevations if camera is in orbit mode. */ -function targetElevation() { +function updateTargetElevation() { const pivot = window.viewer.scene.view.getPivot(); - const mode = window.viewer.getControls(); - - const centerX = elevationCanvas.clientWidth / 2; - const centerY = elevationCanvas.clientHeight / 2; + const controls = window.viewer.getControls(); + const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]; - if (mode === window.viewer.orbitControls) { + if (controls === window.viewer.orbitControls) { elevationCanvas.style.display = 'inline'; - elevationCtx.clearRect(0, 0, elevationCanvas.width, elevationCanvas.height); - elevationCtx.fillStyle = '#cccccc'; - elevationCtx.font = '20px Arial'; - elevationCtx.textAlign = "center"; - elevationCtx.textBaseline = "middle"; - elevationCtx.fillText(`Target elevation = ${pivot.z.toFixed(2)}m`, centerX, centerY); - } - else{ + drawText(elevationCtx, `Target elevation = ${height.toFixed(2)}m`, elevationCanvas); + } else { elevationCanvas.style.display = 'none'; } } -viewer.addEventListener("update", targetElevation); -viewer.addEventListener("update", updateCameraOverlay); - -posCtx = resizeCanvas(posCanvas); -elevationCtx = resizeCanvas(elevationCanvas); - -window.addEventListener('resize', () => { +function init() { posCtx = resizeCanvas(posCanvas); elevationCtx = resizeCanvas(elevationCanvas); -}); + + viewer.addEventListener("update", updatePosition); + viewer.addEventListener("update", updateTargetElevation); + + window.addEventListener('resize', () => { + posCtx = resizeCanvas(posCanvas); + elevationCtx = resizeCanvas(elevationCanvas); + }); +} + +init(); + From cbe01f879bb4ec84bb6be8bc6aa73a07fe0d2330 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 08:52:07 +0200 Subject: [PATCH 5/8] refactor(#10): moved init function to main --- index.html | 3 +- .../coordinateShowing.css | 0 .../coordinateShowing.js | 29 ++++++++----------- src/main.js | 12 ++++++++ 4 files changed, 25 insertions(+), 19 deletions(-) rename src/{ => coordinateShowing}/coordinateShowing.css (100%) rename src/{ => coordinateShowing}/coordinateShowing.js (84%) diff --git a/index.html b/index.html index 98d1737..cc1443f 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ href="/libs/jstree/themes/mixed/style.css" /> - + @@ -97,6 +97,5 @@ }) - diff --git a/src/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css similarity index 100% rename from src/coordinateShowing.css rename to src/coordinateShowing/coordinateShowing.css diff --git a/src/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js similarity index 84% rename from src/coordinateShowing.js rename to src/coordinateShowing/coordinateShowing.js index 8bd0587..8ec2d6a 100644 --- a/src/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -4,8 +4,16 @@ const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; // EPSG:4326 (geogr const posCanvas = document.getElementById('posCanvas'); // lat/lon const elevationCanvas = document.getElementById('elevationCanvas'); -let posCtx; -let elevationCtx; +export let posCtx; +export let elevationCtx; + +/** + * Initializes the canvases and their contexts. + */ +export function initCanvases() { + posCtx = resizeCanvas(posCanvas); + elevationCtx = resizeCanvas(elevationCanvas); +} /** * Resizes the canvas and its context to account for device pixel ratio. @@ -41,7 +49,7 @@ function drawText(ctx, text, canvas) { /** * Updates the lat/lon position. */ -function updatePosition() { +export function updatePosition() { const cam = window.viewer.scene.view.position; const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]); drawText(posCtx, `lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, posCanvas); @@ -50,7 +58,7 @@ function updatePosition() { /** * Shows target elevations if camera is in orbit mode. */ -function updateTargetElevation() { +export function updateTargetElevation() { const pivot = window.viewer.scene.view.getPivot(); const controls = window.viewer.getControls(); const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]; @@ -64,20 +72,7 @@ function updateTargetElevation() { } -function init() { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); - - viewer.addEventListener("update", updatePosition); - viewer.addEventListener("update", updateTargetElevation); - - window.addEventListener('resize', () => { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); - }); -} -init(); diff --git a/src/main.js b/src/main.js index 8b13789..2355872 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,13 @@ +import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js"; + +function init() { + initCanvases(); + + viewer.addEventListener("update", updatePosition); + viewer.addEventListener("update", updateTargetElevation); + + window.addEventListener('resize', initCanvases); +} + +init(); From 0b5b038ec5433ad9e31affa1788f14dfcd5cc989 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 10:59:54 +0200 Subject: [PATCH 6/8] refactor(#10): Added more decimals to lat/lon and elevation target Added more decimals to lat/lon and elevation target for more precission --- src/coordinateShowing/coordinateShowing.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js index 8ec2d6a..941afb3 100644 --- a/src/coordinateShowing/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -52,7 +52,7 @@ function drawText(ctx, text, canvas) { export function updatePosition() { const cam = window.viewer.scene.view.position; const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]); - drawText(posCtx, `lat = ${lat.toFixed(2)}˚ lon = ${lon.toFixed(2)}˚`, posCanvas); + drawText(posCtx, `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`, posCanvas); } /** @@ -65,7 +65,7 @@ export function updateTargetElevation() { if (controls === window.viewer.orbitControls) { elevationCanvas.style.display = 'inline'; - drawText(elevationCtx, `Target elevation = ${height.toFixed(2)}m`, elevationCanvas); + drawText(elevationCtx, `Target elevation = ${height.toFixed(4)}m`, elevationCanvas); } else { elevationCanvas.style.display = 'none'; } From 74016ea9a276bbb019e9bb95962025fcec2108a3 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 11:15:19 +0200 Subject: [PATCH 7/8] refactor(#10): Fix merge conflict and apply new changes --- src/coordinateShowing/coordinateShowing.css | 11 ++- src/coordinateShowing/coordinateShowing.js | 88 +++++++++++---------- src/main.js | 15 ++-- 3 files changed, 59 insertions(+), 55 deletions(-) diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css index da616a2..07f2133 100644 --- a/src/coordinateShowing/coordinateShowing.css +++ b/src/coordinateShowing/coordinateShowing.css @@ -1,12 +1,11 @@ - #posCanvas { position: absolute; left: 10px; bottom: 10px; width: 300px; height: 50px; - pointer-events: none; - background-color: #19282C; + pointer-events: none; + background-color: #19282c; z-index: 10; border-radius: 5px; } @@ -17,8 +16,8 @@ top: 15px; width: 300px; height: 50px; - pointer-events: none; - background-color: #19282C; + pointer-events: none; + background-color: #19282c; z-index: 10; border-radius: 5px; -} \ No newline at end of file +} diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js index 941afb3..7019138 100644 --- a/src/coordinateShowing/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -1,18 +1,18 @@ -const ecef = "+proj=geocent +datum=WGS84 +units=m +no_defs"; // EPSG:4978 (geocentric coordinates) -const wgs84 = "+proj=longlat +datum=WGS84 +no_defs"; // EPSG:4326 (geographic coordinates) +const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates) +const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates) -const posCanvas = document.getElementById('posCanvas'); // lat/lon -const elevationCanvas = document.getElementById('elevationCanvas'); +const posCanvas = document.getElementById('posCanvas') // lat/lon +const elevationCanvas = document.getElementById('elevationCanvas') -export let posCtx; -export let elevationCtx; +export let posCtx +export let elevationCtx -/** +/** * Initializes the canvases and their contexts. */ export function initCanvases() { - posCtx = resizeCanvas(posCanvas); - elevationCtx = resizeCanvas(elevationCanvas); + posCtx = resizeCanvas(posCanvas) + elevationCtx = resizeCanvas(elevationCanvas) } /** @@ -21,58 +21,60 @@ export function initCanvases() { * @returns {*} - The resized canvas context. */ function resizeCanvas(canvas) { - const dpr = window.devicePixelRatio || 1; - const ctx = canvas.getContext('2d'); + const dpr = window.devicePixelRatio || 1 + const ctx = canvas.getContext('2d') - canvas.width = canvas.clientWidth * dpr; - canvas.height = canvas.clientHeight * dpr; + canvas.width = canvas.clientWidth * dpr + canvas.height = canvas.clientHeight * dpr - // Scale context so drawing uses CSS pixels - ctx.setTransform(dpr, 0, 0, dpr, 0, 0); - return ctx; + // Scale context so drawing uses CSS pixels + ctx.setTransform(dpr, 0, 0, dpr, 0, 0) + return ctx } /** * Draw the text on a given canvas. */ function drawText(ctx, text, canvas) { - const centerX = canvas.clientWidth / 2; - const centerY = canvas.clientHeight / 2; - ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = '#cccccc'; - ctx.font = '20px Arial'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.fillText(text, centerX, centerY); + const centerX = canvas.clientWidth / 2 + const centerY = canvas.clientHeight / 2 + ctx.clearRect(0, 0, canvas.width, canvas.height) + ctx.fillStyle = '#cccccc' + ctx.font = '20px Arial' + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' + ctx.fillText(text, centerX, centerY) } /** * Updates the lat/lon position. */ export function updatePosition() { - const cam = window.viewer.scene.view.position; - const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]); - drawText(posCtx, `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`, posCanvas); + const cam = window.potreeViewer.scene.view.position + const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]) + drawText( + posCtx, + `lat = ${lat.toFixed(5)}˚ lon = ${lon.toFixed(5)}˚`, + posCanvas + ) } /** * Shows target elevations if camera is in orbit mode. */ export function updateTargetElevation() { - const pivot = window.viewer.scene.view.getPivot(); - const controls = window.viewer.getControls(); - const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2]; - - if (controls === window.viewer.orbitControls) { - elevationCanvas.style.display = 'inline'; - drawText(elevationCtx, `Target elevation = ${height.toFixed(4)}m`, elevationCanvas); - } else { - elevationCanvas.style.display = 'none'; - } + const pivot = window.potreeViewer.scene.view.getPivot() + const controls = window.potreeViewer.getControls() + const height = proj4(ecef, wgs84, [pivot.x, pivot.y, pivot.z])[2] + + if (controls === window.potreeViewer.orbitControls) { + elevationCanvas.style.display = 'inline' + drawText( + elevationCtx, + `Target elevation = ${height.toFixed(4)}m`, + elevationCanvas + ) + } else { + elevationCanvas.style.display = 'none' + } } - - - - - - diff --git a/src/main.js b/src/main.js index f736949..e1670e1 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,11 @@ import { POTREE_POINTCLOUD_URL, POTREE_SETTINGS } from './config.js' import { createCesiumViewer } from './cesiumViewer.js' import { createPotreeViewer } from './potreeViewer.js' import { syncCameras } from './cameraSync.js' -import { initCanvases, updatePosition, updateTargetElevation } from "./coordinateShowing/coordinateShowing.js"; - +import { + initCanvases, + updatePosition, + updateTargetElevation +} from './coordinateShowing/coordinateShowing.js' async function init() { window.cesiumViewer = createCesiumViewer('cesiumContainer') @@ -14,12 +17,12 @@ async function init() { POTREE_SETTINGS ) - initCanvases(); + initCanvases() - viewer.addEventListener("update", updatePosition); - viewer.addEventListener("update", updateTargetElevation); + potreeViewer.addEventListener('update', updatePosition) + potreeViewer.addEventListener('update', updateTargetElevation) - window.addEventListener('resize', initCanvases); + window.addEventListener('resize', initCanvases) function loop(timestamp) { requestAnimationFrame(loop) From b24f3aaa4ca4790b26a55fd8dc8bf1d3ca9ea215 Mon Sep 17 00:00:00 2001 From: Kleinc Date: Mon, 6 Oct 2025 11:54:56 +0200 Subject: [PATCH 8/8] refactor(#10): Refactored code according to comments --- index.html | 6 ++++-- src/config.js | 3 +++ src/coordinateShowing/coordinateShowing.css | 18 +++++++++++------- src/coordinateShowing/coordinateShowing.js | 10 +++++----- src/main.js | 12 ++++++------ src/potreeViewer.js | 3 ++- 6 files changed, 31 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 73306f0..695a3bc 100644 --- a/index.html +++ b/index.html @@ -67,8 +67,10 @@ >
- - +
+ + +
diff --git a/src/config.js b/src/config.js index fa55e71..16ac6ec 100644 --- a/src/config.js +++ b/src/config.js @@ -5,3 +5,6 @@ export const POTREE_SETTINGS = { fov: 60, pointBudget: 1_000_000 } + +export const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates) +export const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates) \ No newline at end of file diff --git a/src/coordinateShowing/coordinateShowing.css b/src/coordinateShowing/coordinateShowing.css index 07f2133..dd46e72 100644 --- a/src/coordinateShowing/coordinateShowing.css +++ b/src/coordinateShowing/coordinateShowing.css @@ -1,23 +1,27 @@ -#posCanvas { +#canvasContainer { + display: flex; + flex-direction: column; position: absolute; - left: 10px; + right: 10px; bottom: 10px; +} + +#posCanvas { + position: relative; width: 300px; height: 50px; - pointer-events: none; background-color: #19282c; z-index: 10; border-radius: 5px; } #elevationCanvas { - position: absolute; - right: 100px; - top: 15px; + position: relative; width: 300px; height: 50px; - pointer-events: none; background-color: #19282c; z-index: 10; + margin-bottom: 10px; border-radius: 5px; } + diff --git a/src/coordinateShowing/coordinateShowing.js b/src/coordinateShowing/coordinateShowing.js index 7019138..bb7f360 100644 --- a/src/coordinateShowing/coordinateShowing.js +++ b/src/coordinateShowing/coordinateShowing.js @@ -1,5 +1,5 @@ -const ecef = '+proj=geocent +datum=WGS84 +units=m +no_defs' // EPSG:4978 (geocentric coordinates) -const wgs84 = '+proj=longlat +datum=WGS84 +no_defs' // EPSG:4326 (geographic coordinates) +import { ecef } from "../config.js"; +import { wgs84 } from "../config.js"; const posCanvas = document.getElementById('posCanvas') // lat/lon const elevationCanvas = document.getElementById('elevationCanvas') @@ -10,7 +10,7 @@ export let elevationCtx /** * Initializes the canvases and their contexts. */ -export function initCanvases() { +export function initCoordinateCanvases() { posCtx = resizeCanvas(posCanvas) elevationCtx = resizeCanvas(elevationCanvas) } @@ -47,9 +47,9 @@ function drawText(ctx, text, canvas) { } /** - * Updates the lat/lon position. + * Updates the lat/lon coordinates. */ -export function updatePosition() { +export function updateCoordinateText() { const cam = window.potreeViewer.scene.view.position const [lon, lat] = proj4(ecef, wgs84, [cam.x, cam.y, cam.z]) drawText( diff --git a/src/main.js b/src/main.js index e1670e1..af6efff 100644 --- a/src/main.js +++ b/src/main.js @@ -3,10 +3,10 @@ import { createCesiumViewer } from './cesiumViewer.js' import { createPotreeViewer } from './potreeViewer.js' import { syncCameras } from './cameraSync.js' import { - initCanvases, - updatePosition, + initCoordinateCanvases, + updateCoordinateText, updateTargetElevation -} from './coordinateShowing/coordinateShowing.js' +} from "./CoordinateShowing/coordinateShowing.js"; async function init() { window.cesiumViewer = createCesiumViewer('cesiumContainer') @@ -17,12 +17,12 @@ async function init() { POTREE_SETTINGS ) - initCanvases() + initCoordinateCanvases() - potreeViewer.addEventListener('update', updatePosition) + potreeViewer.addEventListener('update', updateCoordinateText) potreeViewer.addEventListener('update', updateTargetElevation) - window.addEventListener('resize', initCanvases) + window.addEventListener('resize', initCoordinateCanvases) function loop(timestamp) { requestAnimationFrame(loop) diff --git a/src/potreeViewer.js b/src/potreeViewer.js index 3f04686..4644388 100644 --- a/src/potreeViewer.js +++ b/src/potreeViewer.js @@ -1,4 +1,5 @@ import { initElevationControls } from './ElevationControl/elevationControl.js' +import { ecef } from './config.js' /** * Initializes the Potree viewer used to visualize the point cloud. @@ -55,7 +56,7 @@ export async function createPotreeViewer(containerId, pointcloudUrl, settings) { pc.material.activeAttributeName = 'elevation' pc.material.gradient = Potree.Gradients['VIRIDIS'] - e.pointcloud.projection = '+proj=geocent +datum=WGS84 +units=m +no_defs' + e.pointcloud.projection = ecef // Initialize camera position and target point (manually chosen) viewer.scene.view.setView(