TDT4290-group-4 · mariewah · Oct 8, 2025 · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ Molloy Explorer is a 3D seabed visualization tool built with **Potree**. It allo
 
 ### Add point cloud data
 
-Place the point cloud data (in Potree format) in `public/pointclouds/data_converted`.
+Place the point cloud data (in Potree format with EPSG:4978 coordinates) in `public/pointclouds/data_converted`.
 
 **Note:** Point cloud files should not be committed to Git.
 

diff --git a/index.html b/index.html
@@ -23,6 +23,21 @@
       type="text/css"
       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/coordinateShowing.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
+    />
+    <link
+      rel="stylesheet"
+      href="/src/MeasurementControl/measurementsPanel.css"
+    />
   </head>
 
   <body>
@@ -39,54 +54,30 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
+    <script src="/libs/Cesium/Cesium.js"></script>
 
     <div
       class="potree_container"
-      style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px"
+      style="
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0px;
+        top: 0px;
+        background-color: black;
+      "
     >
-      <div
-        id="potree_render_area"
-        style="
-          background-image: url('/build/potree/resources/images/background.jpg');
-        "
-      ></div>
+      <div id="potree_render_area">
+        <div id="cesiumContainer"></div>
+        <div id="canvasContainer">
+          <canvas id="elevationCanvas" width="200" height="30"></canvas>
+          <canvas id="posCanvas" width="200" height="30"></canvas>
+        </div>
+      </div>
       <div id="potree_sidebar_container"></div>
     </div>
 
-    <script type="module">
-      window.viewer = new Potree.Viewer(
-        document.getElementById('potree_render_area')
-      )
-
-      viewer.setEDLEnabled(true)
-      viewer.setFOV(60)
-      viewer.setPointBudget(5_000_000)
-      viewer.loadSettingsFromURL()
-
-      viewer.setDescription('Molloy Explorer')
-
-      viewer.loadGUI(() => {
-        viewer.setLanguage('en')
-        $('#menu_appearance').next().show()
-        $('#menu_tools').next().show()
-        $('#menu_scene').next().show()
-        $('#menu_filters').next().show()
-        viewer.toggleSidebar()
-      })
-
-      let url = './pointclouds/data_converted/metadata.json'
-      Potree.loadPointCloud(url).then((e) => {
-        let pointcloud = e.pointcloud
-        let material = pointcloud.material
-
-        material.pointSizeType = Potree.PointSizeType.ADAPTIVE
-        material.shape = Potree.PointShape.CIRCLE
-        material.activeAttributeName = 'elevation'
-        material.gradient = Potree.Gradients['RAINBOW']
-
-        viewer.scene.addPointCloud(pointcloud)
-        viewer.fitToScreen()
-      })
-    </script>
+    <script type="module" src="src/main.js"></script>
   </body>
 </html>
diff --git a/src/ElevationControl/elevationControl.js b/src/ElevationControl/elevationControl.js
@@ -0,0 +1,113 @@
+//Cerating a customized section "Elevation Control"
+window.createElevationPanel = function createElevationPanel(viewer) {
+  const container = document.getElementById('elevation_list')
+  let targetContainer = container
+  if (!targetContainer) {
+    // Create a new accordion section for Elevation Control
+    const menu = document.getElementById('potree_menu')
+    if (menu) {
+      const header = document.createElement('h3')
+      header.id = 'menu_elevation'
+      header.innerHTML = '<span>Elevation Control</span>'
+      const panel = document.createElement('div')
+      panel.className = 'pv-menu-list'
+      panel.innerHTML = '<div id="elevation_list" class="auto"></div>'
+      const about = document.getElementById('menu_appearance')
+      if (about) {
+        menu.insertBefore(panel, about)
+        menu.insertBefore(header, panel)
+      } else {
+        menu.appendChild(header)
+        menu.appendChild(panel)
+      }
+      // Activate accordion behavior if jQuery UI accordion already initialized
+      if ($(menu).accordion) {
+        try {
+          $(menu).accordion('refresh')
+        } catch (e) {}
+      }
+      // Toggle on header click if not managed by accordion refresh
+      header.addEventListener(
+        'click',
+        () =>
+          (panel.style.display = panel.style.display === 'none' ? '' : 'none')
+      )
+      targetContainer = panel.querySelector('#elevation_list')
+    }
+  }
+}
+
+//Select the fist pointcloud in the sidebar so that the Elevation section is built
+function autoSelectFirstPointCloud() {
+  const cloudIcon = document.querySelector(
+    '#scene_objects i.jstree-themeicon-custom'
+  )
+  if (cloudIcon) {
+    cloudIcon.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    return true
+  }
+  return false
+}
+
+//(re)connect the elevation labels to the slider after the container is moved (was not handled by default)
+function rebindElevationLabel() {
+  const slider = window.jQuery ? window.jQuery('#sldHeightRange') : null
+  const label = document.getElementById('lblHeightRange')
+  if (!slider || !slider.length || !label) return
+
+  const update = () => {
+    const low = slider.slider('values', 0)
+    const high = slider.slider('values', 1)
+    label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}`
+  }
+
+  // Adjust slider limits
+  slider.slider({
+    min: -10000,
+    max: 0,
+    values: [-10000, 0]
+  })
+
+  //clear any old namespaced handlers and attach fresh ones
+  slider.off('slide.custom slidestop.custom change.custom')
+  slider.on('slide.custom', update)
+  slider.on('slidestop.custom change.custom', update)
+  update()
+}
+
+//Move the elevation range section to the customised "Elevation Control" section
+function moveElevationContainer() {
+  const target = document.getElementById('elevation_list')
+  const elevationContainer = document.querySelector(
+    '#materials\\.elevation_container'
+  )
+  if (!elevationContainer) return false
+  target.appendChild(elevationContainer)
+  rebindElevationLabel()
+  return true
+}
+
+//initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
+export function initElevationControls(viewer) {
+  //Creates the section
+  createElevationPanel(viewer)
+
+  //Only move the ElevationContainer if the source container to exist
+  const menu =
+    document.getElementById('potree_menu') ||
+    document.getElementById('menu') ||
+    document.body
+  const observer = new MutationObserver(() => {
+    const found = document.querySelector('#materials\\.elevation_container')
+    if (found) {
+      observer.disconnect()
+      //Move and rebind once it exists
+      const ok = moveElevationContainer()
+      if (!ok) console.warn('[Elevation] moveElevationContainer failed')
+    }
+  })
+  observer.observe(menu, { childList: true, subtree: true })
+
+  //Trigger Potree to build Materials UI by selecting the first point cloud (if nothing selected yet)
+  autoSelectFirstPointCloud()
+}