TDT4290-group-4 · gautegf · Oct 6, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git a/index.html b/index.html
@@ -24,6 +24,10 @@
       href="/libs/jstree/themes/mixed/style.css"
     />
     <link rel="stylesheet" type="text/css" href="src/style.css" />
+    <link
+      rel="stylesheet"
+      href="/src/MeasurementControl/measurementsPanel.css"
+    />
   </head>
 
   <body>
@@ -55,6 +59,8 @@
     </div>
 
     <script src="src/ElevationControl/elevationControl.js"></script>
+    <script src="/src/MeasurementControl/measurementsPanel.js"></script>
+
     <script type="module">
       window.viewer = new Potree.Viewer(
         document.getElementById('potree_render_area')
@@ -77,10 +83,19 @@
 
         if (window.initElevationControls) {
           window.initElevationControls(viewer)
+        } else {
+          console.warn('initElevationControls not found on window')
+        }
+
+        if (window.initMeasurementsPanel) {
+          window.initMeasurementsPanel(viewer)
+        } else {
+          console.warn('initMeasurementsPanel not found on window')
         }
       })
 
       let url = './pointclouds/data_converted/metadata.json'
+
       Potree.loadPointCloud(url).then((e) => {
         let pointcloud = e.pointcloud
         let material = pointcloud.material

diff --git a/src/ElevationControl/elevationControl.js b/src/ElevationControl/elevationControl.js
@@ -82,7 +82,6 @@ function moveElevationContainer() {
 
 //initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
 window.initElevationControls = function initElevationControls(viewer) {
-
   //Creates the section
   createElevationPanel(viewer)
 

diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
@@ -0,0 +1,273 @@
+#measurements_list .mcard {
+  background: #2d373c;
+  border: 1px solid #1c2428;
+  border-radius: 4px;
+  margin: 6px 4px;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12px;
+  color: #eee;
+}
+#measurements_list .mheader {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  font-weight: bold;
+}
+#measurements_list .mstatus {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #68d96e;
+  margin-right: 6px;
+}
+#measurements_list .mdelete {
+  margin-left: auto;
+  cursor: pointer;
+  color: #d55;
+  font-weight: bold;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+}
+#measurements_list table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 4px;
+}
+#measurements_list td {
+  padding: 2px 4px;
+}
+#measurements_list tr:nth-child(even) {
+  background: #3a454b;
+}
+#measurements_list .coordRow td {
+  background: #2f383d;
+  font-family: monospace;
+  font-size: 11px;
+  padding: 4px 6px;
+  border: 1px solid #404a50;
+  border-radius: 4px;
+  margin: 2px 0;
+}
+#measurements_list .segmentRow td {
+  background: transparent;
+  padding: 0 0 2px 0;
+}
+#measurements_list .segmentConnector {
+  width: 1px;
+  height: 12px;
+  background: #505b61;
+  margin: 2px auto 0;
+}
+#measurements_list .segmentPill {
+  display: inline-block;
+  background: #3d474d;
+  border: 1px solid #566067;
+  padding: 2px 10px;
+  margin: 2px auto 4px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-family: monospace;
+}
+#measurements_list .totalRow td {
+  background: #424d53;
+  font-weight: 600;
+  font-size: 12px;
+  text-align: center;
+  border: 1px solid #59646a;
+  border-radius: 6px;
+  margin-top: 4px;
+}
+#measurements_list .separator td {
+  padding: 0;
+  height: 2px;
+  background: transparent;
+}
+#measurements_list .attrRow td {
+  font-size: 11px;
+  color: #cfd5d8;
+}
+#measurements_list .empty {
+  opacity: 0.6;
+  padding: 8px;
+  text-align: center;
+}
+#measurements_list {
+  max-height: 400px;
+  overflow-y: auto;
+  margin: 10px 0;
+}
+#measurements_list::-webkit-scrollbar {
+  width: 8px;
+}
+#measurements_list::-webkit-scrollbar-track {
+  background: var(--bg-dark-color);
+}
+#measurements_list::-webkit-scrollbar-thumb {
+  background: var(--bg-color-2);
+  border-radius: 4px;
+}
+#measurements_list::-webkit-scrollbar-thumb:hover {
+  background: var(--color-1);
+}
+
+/* Modern grouped measurement list */
+#measurement_items {
+  background: #252d31;
+  border: 1px solid #1b2326;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #d9e2e6;
+}
+#measurement_items .m-empty {
+  padding: 10px;
+  text-align: center;
+  opacity: 0.6;
+}
+#measurement_items .m-group {
+  border-top: 1px solid #303a3f;
+}
+#measurement_items .m-group:first-child {
+  border-top: none;
+}
+#measurement_items .m-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-size: 11px;
+  background: linear-gradient(#2f383d, #2b3438);
+  cursor: pointer;
+  user-select: none;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+#measurement_items .m-group-header:hover {
+  background: #374247;
+}
+#measurement_items .m-group-caret {
+  font-size: 10px;
+  width: 14px;
+  text-align: center;
+  color: #8fb9c9;
+}
+#measurement_items .m-group-title {
+  flex: 1;
+  color: #c7d4d9;
+}
+#measurement_items .m-group-count {
+  background: #3d4850;
+  color: #9fb7c2;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  line-height: 1;
+}
+#measurement_items .m-group-body {
+  padding: 4px 4px 6px;
+}
+#measurement_items .m-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  margin: 2px 2px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #2c3539;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+  cursor: pointer;
+}
+#measurement_items .m-row-icon {
+  width: 16px;
+  flex: 0 0 16px;
+  text-align: center;
+  font-size: 12px;
+  color: #8fb9c9;
+  filter: drop-shadow(0 0 2px #0a0f12);
+}
+#measurement_items .m-row:hover {
+  background: #354045;
+  border-color: #425056;
+}
+#measurement_items .m-row.active {
+  background: #1f4b63;
+  border-color: #2f6b8c;
+  box-shadow: 0 0 0 1px #2f6b8c66;
+}
+#measurement_items .m-row-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#measurement_items .m-row-delete {
+  background: #3b2626;
+  border: 1px solid #5a3a3a;
+  color: #ff9a9a;
+  font-weight: 600;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+#measurement_items .m-row-delete:hover {
+  background: #5a2d2d;
+  color: #fff;
+}
+
+.measurements-panel {
+  position: relative;
+}
+.measurement-tools-host {
+  margin-bottom: 32px;
+}
+.measurement-items-root {
+  max-height: 260px;
+  overflow: auto;
+  margin-bottom: 6px;
+  border: 1px solid #333;
+  border-radius: 4px;
+}
+.measurement-info-message {
+  padding: 4px 8px;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.m-list-title,
+.m-data-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  padding: 6px 8px 4px 14px;
+  margin-left: 2px;
+  color: #c7d4d9;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.measurement-options-block {
+  margin-top: 12px !important;
+  display: block;
+}
+.m-list-title {
+  margin: 6px 0 4px;
+}
+.m-data-title {
+  margin: 10px 0 8px;
+  border-top: 1px solid #303a3f;
+  padding-top: 10px;
+}