diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
index e83b9e6..8dbde01 100644
--- 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
index 249df0f..e39cf65 100644
--- a/src/AcceptedFiltering/threePanels.js
+++ b/src/AcceptedFiltering/threePanels.js
@@ -299,12 +299,12 @@ function ensureAcceptedLegend() {
legend.style.display = 'none'
legend.innerHTML = `
+
Accepted points displayed as:
-
Accepted points
+
Not accepted points displayed as:
-
Not accepted points
`
list.appendChild(legend)
diff --git a/src/MeasurementControl/measurementsPanel.css b/src/MeasurementControl/measurementsPanel.css
index d5fa999..e767c65 100644
--- 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
index a64202f..d8c59c0 100644
--- 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
index ad7a0dc..86e1d1b 100644
--- 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