Merge remote-tracking branch 'origin/48-make-sidebar-more-intuitive' …

…into 47-improve-inspected-point-visualization
TDT4290-group-4 · Oct 29, 2025 · f8b22b0 · f8b22b0
2 parents 9c0c73d + 500894b
commit f8b22b0
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 14 deletions.
diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
@@ -128,22 +128,24 @@
   align-items: center;
   margin: 3px 0;
   font-size: 13px;
-  color: #ddd; /* visible text */
+  color: #ddd;
 }
 
-/* Color boxes */
+/* Color boxes → now circles */
 #accepted_legend .legend-color {
-  width: 16px;
-  height: 16px;
-  border: 1px solid #777;
-  margin-right: 8px;
-  border-radius: 2px;
+  width: 20px;
+  height: 8px;
+  border-radius: 4px; /* pill shape */
+  margin-left: 6px;
 }
 
 #accepted_legend .legend-color.accepted {
   background-color: #fff;
+  border: #0008;
+  box-shadow: 0 0 4px 1px #fff8;
 }
 
 #accepted_legend .legend-color.not-accepted {
   background-color: #000;
+  box-shadow: 0 0 4px 1px #fff8;
 }
diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js
@@ -299,12 +299,12 @@ function ensureAcceptedLegend() {
     legend.style.display = 'none'
     legend.innerHTML = `
       <div class="legend-row">
+        <span>Accepted points displayed as: </span>
         <div class="legend-color accepted"></div>
-        <span>Accepted points</span>
       </div>
       <div class="legend-row">
+        <span>Not accepted points displayed as: </span>
         <div class="legend-color not-accepted"></div>
-        <span>Not accepted points</span>
       </div>
     `
     list.appendChild(legend)

diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
@@ -276,3 +276,33 @@
   border-top: 1px solid #303a3f;
   padding-top: 10px;
 }
+
+.tool-with-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
+  cursor: pointer;  
+  border-radius: 4px;
+}
+.tool-with-label:hover {
+  box-shadow: 0 0 5px #fff8;
+}
+
+.tool-with-label:hover img {
+  filter: brightness(1.7); 
+}
+
+.tool-with-label:hover .tool-label {
+  color: #fff;
+}
+
+.tool-label {
+  font-size: 14px;
+  margin-top: 2px;
+  margin-left: 4px;
+  color: #aaa;
+  pointer-events: none; 
+}
+
+
diff --git a/src/MeasurementControl/measurementsPanel.js b/src/MeasurementControl/measurementsPanel.js
@@ -31,7 +31,7 @@ export function initMeasurementsPanel(viewer) {
       panel.appendChild(toolsHostDiv)
       panel.appendChild(listContainerDiv)
       // Insert before filters/tools if possible, else append at end
-      const tools = document.getElementById('menu_tools')
+      const tools = document.getElementById('menu_appearance')
       if (tools) {
         menu.insertBefore(panel, tools)
         menu.insertBefore(header, panel)
@@ -914,6 +914,46 @@ export function initMeasurementsPanel(viewer) {
     toolsHost.appendChild(existingTools)
   }
 
+  // After tools are moved into `toolsHost`
+  const toolDescriptions = {
+    'angle.png': 'Measure angle',
+    'point.svg': 'Add point',
+    'distance.svg': 'Measure distance',
+    'height.svg': 'Measure height',
+    'circle.svg': 'Circle',
+    'azimuth.svg': 'Azimuth',
+    'area.svg': 'Area',
+    'volume.svg': 'Volume',
+    'sphere_distances.svg': 'Sphere volume',
+    'profile.svg': '2D height profile',
+    'reset_tools.svg': 'Remove all'
+  };
+
+  const toolIcons = existingTools.querySelectorAll('img');
+  toolIcons.forEach(img => {
+    const src = img.getAttribute('src');
+    const file = src.split('/').pop(); // extract icon name
+    const baseName = file.replace(/\.[^/.]+$/, '');
+
+    if (toolDescriptions[file]) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'tool-with-label';
+      wrapper.id = `tool-wrapper-${baseName}`;
+
+      wrapper.addEventListener('click', () => img.click());
+
+      img.parentNode.insertBefore(wrapper, img);
+      wrapper.appendChild(img);
+
+      const label = document.createElement('span');
+      label.className = 'tool-label';
+      label.textContent = toolDescriptions[file];
+      label.id = `label-${file.replace(/\.[^/.]+$/, '')}`;
+      wrapper.appendChild(label);
+    }
+  });
+
+
   // Move measurement options UI into our tools host
   if (toolsHost) {
     const measOptions = document.getElementById('measurement_options_show')

diff --git a/src/potreeViewer.js b/src/potreeViewer.js
@@ -58,10 +58,10 @@ export async function createPotreeViewer(
 
   viewer.loadGUI(() => {
     viewer.setLanguage('en')
-    $('#menu_appearance').next().show()
-    $('#menu_tools').next().show()
-    $('#menu_scene').next().show()
-    $('#menu_filters').next().show()
+    $('#menu_appearance').next().hide()
+    $('#menu_tools').next().hide()
+    $('#menu_scene').next().hide()
+    $('#menu_filters').remove()
     viewer.toggleSidebar()
 
     // Store the last used elevation gradient