feat(#9): ✨ 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
TDT4290-group-4 · Sep 29, 2025 · 043ca86 · 043ca86
1 parent 7372c13
commit 043ca86
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -24,6 +24,7 @@
       href="/libs/jstree/themes/mixed/style.css"
     />
     <link rel="stylesheet" type="text/css" href="src/style.css" />
+    <link rel="stylesheet" type="text/css" href="src/coordinateShowing.css" />
   </head>
 
   <body>
@@ -52,7 +53,10 @@
           background-image: url('/build/potree/resources/images/background.jpg');
         "
       >
-        <canvas id="camera-pos" width="400" height="60"></canvas>
+        <canvas id="posCanvas" width="200" height="30"></canvas>
+        <canvas id="elevationCanvas" width="200" height="30"></canvas>
+      </div>
+
       </div>
       <div id="potree_sidebar_container"></div>
     </div>
@@ -93,5 +97,6 @@
       })
     </script>
     <script type="module" src="src/main.js"></script>
+    <script type="module" src="src/coordinateShowing.js"></script>
   </body>
 </html>
diff --git a/src/coordinateShowing.css 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;
+}
diff --git a/src/coordinateShowing.js 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
@@ -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
@@ -1,10 +0,0 @@
-
-#camera-pos {
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-  width: 300px;
-  height: 60px;
-  pointer-events: none; 
-  z-index: 10;
-}