+
+There are eight tabs in the sidebar that can be opened and collapsed by clicking on them.
+
+
+
+### Elevation Control
+
+---
+
+Elevation control applies gradients based on the elevation of the data points.
+By default elevation control is active. The “Activate elevation control” button will be visible and can be pressed after looking at the Accepted Filter to reset the view back to default. See image below.
+Use the slider to set the range by clicking and dragging the squares on either end of the scale.
+Gradient is set to Clamp by default, but can be changed to “Repeat” or “Mirrored Repeat” by clicking on them.
+There are nine different gradient schemes to choose from. These are also selected by clicking on them.
+
+
+
+
+
+### Accepted Filter
+
+---
+
+The accepted filter contains one button to change the view to show which datapoints are accepted as part of the seabed, when the elevation control is active. When the “Activate accepted filter” button is pressed, accepted points are displayed in white and not accepted points are displayed in black. This data regarding if a point is accepted or not is an attribute of each datapoint and can not be changed.
+
+
+
+
+
+### Measurements
+
+---
+
+The Measurements tab allows you to measure angles, distances, heights, areas, volumes, and other properties directly within the point cloud. All tools are located in the Measurements tab in the sidebar. You can perform multiple measurements simultaneously, and all results are tracked in the "List of Measurements" section.
+
+For all the measurements below, you stop by right clicking.
+
+
+
+#### Measure Angle
+
+To measure angles between points:
+
+1. Click on the "Measure Angle" icon or text.
+2. Click three points in the point cloud. A red triangle will appear connecting the points, and the corresponding angle will be displayed.
+
+To adjust a point in the triangle, click on the point you want to move, then click a new point in the point cloud.
+There is no limit to the number of triangles you can display.
+Measurement details appear in the "List of Measurements" below the sidebar. The default name is "Distance#1"; make sure it is selected when reviewing the data.
+
+#### Inspect Point
+
+To inspect a point in the point cloud:
+
+1. Click the "Inspect Point" icon.
+2. Click on the point you want to examine.
+
+The coordinates and other available attributes of that point will be displayed in the corresponding panel.
+
+#### Measure Distance
+
+To measure the distance between two points:
+
+1. Click the "Measure Distance" icon.
+2. Click the first point, then the second point in the point cloud.
+
+The distance between the points will be displayed, and a connecting line will appear.
+To adjust points, click the point and select a new location.
+
+#### Measure Height
+
+To measure vertical height differences:
+
+1. Click the "Measure Height" icon.
+2. Click the lower point first, then the higher point.
+
+The vertical distance will be displayed.
+
+#### Circle
+
+To measure a circle:
+
+1. Click the "Circle" icon.
+2. Click the center point, then a point on the circumference.
+
+The radius and circumference will be displayed.
+
+#### Azimuth
+
+To measure azimuth (direction relative to north):
+
+1. Click the "Azimuth" icon.
+2. Click the starting point, then the ending point.
+
+Azimuth measures the directional angle in degrees between two points relative to true north.
+
+#### Area
+
+To measure a polygonal area:
+
+1. Click the "Area" icon.
+2. Click points to form the vertices of the polygon.
+3. Double-click the last point to complete the polygon.
+
+The calculated area will be displayed.
+
+#### Volume
+
+To measure a 3D volume:
+
+1. Click the "Volume" icon.
+2. Select points to define the base polygon of the volume.
+3. Click an additional point to define the top plane (height).
+
+The volume enclosed by the selected points will be calculated.
+
+#### Sphere Volume
+
+To measure a sphere’s volume:
+
+1. Click the "Sphere Volume" icon.
+2. Click the center point of the sphere, then a point on the surface to define the radius.
+
+The sphere volume will be displayed.
+
+#### 2D Height Profile
+
+To generate a 2D height profile along a line:
+
+1. Click the "2D Height Profile" icon.
+2. Click the starting point of the profile line, then click the ending point.
+3. Click the "show 2D profile".
+
+A 2D plot of height along the line will be displayed.
+You can hover over or click points on the profile to see specific elevation values.
+Multiple profile lines can be drawn for comparison.
+To adjust the profile line, select a point and move it to a new location.
+
+#### Remove All
+
+Click the "Remove All" icon to clear all measurements currently displayed in the scene. This will remove all lines, polygons, volume measurements, height profiles, and labels at once.
+
+#### Deleting Measurements
+
+To delete individual measurements:
+
+1. Select the measurement in the "List of Measurements".
+2. Click the red "x" icon next to the measurement.
+
+This applies to all measurement types including angles, distances, heights, areas, volumes, spheres, circles, azimuths, and 2D height profiles.
+
+#### Values/Names/Hide All Labels
+
+To show or hide Values or Names for measurements:
+
+1. Click the "Values" or "Names" button to display it for all measurements currently in the scene.
+2. Click the "Hide All" button to hide all measurement labels without deleting the measurements themselves.
+
+This applies to all measurement types, including angles, distances, heights, areas, volumes, spheres, circles, azimuths, and 2D height profiles.
+
+#### List of Measurements
+
+All measurements are tracked in the "List of Measurements" panel at the bottom of the sidebar. Each measurement can be selected to view detailed information or deleted individually. This list provides an easy way to manage multiple measurements in a large point cloud.
+
+### Saved Locations
+
+---
+
+The Saved Locations tab allows you to quickly navigate to specific points or viewpoints that you have saved within the scene. Annotations can also be created here to mark points of interest. By default, annotation labels are visible in the point cloud and on the map, making it easy to locate important areas.
+
+
+
+
+
+#### Show/Hide Annotations
+
+Below the list of annotations, there are toggle buttons to show or hide all annotation labels in the point cloud. Use this to declutter the view or focus on specific points as needed.
+
+#### Creating an Annotation
+
+To create an annotation:
+
+1. Click the "Add a Location" button in the Saved Locations section.
+2. Click on a point in the point cloud.
+
+As you hover over points, an annotation label will appear above the cursor to indicate that a point can be selected.
+The annotation will be added to a list right below the "Add a Location" button upon creation.
+
+#### Managing Annotations
+
+Each annotation in the list has three icons:
+
+- **Pen Icon** – Rename the annotation or edit its description.
+- **Arrow Icon** – Move the camera to the annotation from anywhere in the scene.
+- **Red X Icon** – Delete the annotation.
+
+To add a description to an annotation:
+
+1. Click the annotation text in the Saved Locations list.
+2. Click the pen icon next to "Annotation Description".
+
+The point coordinates and the current camera coordinates will be displayed below the description field.
+
+### Appearance
+
+---
+
+The Appearance tab allows you to adjust the visual rendering and display settings of the point cloud and scene to optimize clarity, performance, and visual preference.
+
+
+
+#### Point Budget
+
+The Point Budget controls the maximum number of points rendered at any time.
+
+- Adjustable using a slider ranging from **100,000 to 10,000,000 points**.
+- Higher values provide more detail but may impact performance, while lower values improve performance at the cost of detail.
+
+#### Field of View
+
+The Field of View (FOV) controls the camera’s viewing angle.
+
+- Adjustable using a slider ranging from **20° to 100°**.
+- A wider FOV shows more of the scene but may distort perspective, while a narrower FOV provides a more focused view.
+
+#### Eye-Dome Lighting (EDL)
+
+Eye-Dome Lighting enhances depth perception by shading points based on their relative distance.
+
+- **Enable Checkbox** – Turn EDL on or off.
+- **Radius Slider** – Adjusts the size of the area used to calculate shading.
+- **Strength Slider** – Controls the intensity of the depth effect.
+- **Opacity Slider** – Adjusts the transparency of the shading effect.
+
+#### Background
+
+The Background setting controls the scene’s visual backdrop. Options include:
+
+- **Skybox** – A textured 3D background simulating a sky.
+- **Gradient** – Smooth transition between two colors.
+- **Black** – Solid black background.
+- **White** – Solid white background.
+- **Globe** – Displays the Earth or a globe representation, this is the default.
+
+#### Other Settings
+
+- **Splat Quality** – Adjusts the rendering quality of point splats:
+ - **Standard** – Default quality, optimized for performance.
+ - **High Quality** – Improved visual detail, may impact performance.
+- **Min Node Size** – Controls the smallest size of nodes rendered in the point cloud.
+- **Box** – Toggle the visibility of bounding boxes around point clouds or objects.
+- **Lock View** – Keeps the bounding boxes or other visual guides in a fixed position.
+
+### Tools
+
+---
+
+The Tools section is located in the sidebar and contains functionalities for clipping, navigation, camera control, and speed adjustment. Clicking on a tool will open the corresponding options.
+
+
+
+#### Clipping
+
+Clipping allows you to focus on specific regions of the point cloud or dataset by hiding or highlighting data based on user-defined areas.
+
+- **Volume Clip**
+ Lets you define a 3D box or other volume to clip the data inside or outside of it. This is useful when you want to focus on a particular region of the seabed or point cloud.
+
+- **Polygon Clip**
+ Allows you to draw a polygon on the screen and clip data based on the shape of that polygon. Only data inside or outside the polygon will be affected depending on your settings.
+
+- **Draw a Selection Box**
+ Enables you to quickly create a rectangular selection in the scene. This box can then be used as a clipping volume to isolate a section of the dataset.
+
+- **Remove All Clipping Volumes**
+ Resets all clipping operations and displays the entire dataset again. Use this when you want to start over or remove all applied selections.
+
+#### Clip Task
+
+The Clip Task determines what happens to the points in the clipping area:
+
+- **None**: No changes are applied to the points within the clip volume.
+- **Highlight**: Points within the clipping area are highlighted to make them easier to see.
+- **Inside**: Only points inside the clipping area remain visible; all others are hidden.
+- **Outside**: Only points outside the clipping area remain visible; all points inside are hidden.
+
+#### Clip Method
+
+When multiple clipping volumes are active, the Clip Method determines how they are combined:
+
+- **Inside Any**: Points inside any of the clipping volumes will be affected. This creates a union of all clipping areas.
+- **Inside All**: Points must be inside all defined clipping volumes to be affected. This creates an intersection of all volumes.
+
+#### Navigation
+
+Navigation tools allow you to move around the dataset and view it from different angles or perspectives.
+
+- **Earth Control**
+ Moves the camera around the globe, allowing rotation, panning, and tilting. Useful for general exploration of the point cloud relative to the Earth’s surface.
+
+- **Fly Control**
+ Simulates a flying camera, allowing smooth free movement in any direction. Useful for inspecting large areas of the seabed.
+
+- **Helicopter Control**
+ Similar to Fly Control, but movement mimics the behaviour of a helicopter, including tilt and banking effects.
+
+- **Orbit Control**
+ Lets the camera orbit around a selected point, object, or region. Ideal for inspecting objects from multiple angles without changing the target point. This is the default mode.
+
+- **Full Extent**
+ Resets the view to show the entire dataset or point cloud. This is useful if you have zoomed in too far or moved to a specific area and want to see the whole scene.
+
+- **Navigation Cube**
+ A visual cube in the scene that allows you to quickly change views by clicking on its faces, edges, or corners. It can switch between standard perspectives like top, side, or front views.
+
+- **Compass**
+ Displays a compass in the top right corner of the screen. This shows the current orientation and allows you to reset the view to north-up.
+
+- **Camera Animation**
+ Lets you create or play smooth camera movements, such as flying along a path or rotating around a point. To utilize this tool, click on the Scene tab, then go to Objects/Other, an animation icon will show up. Click on this, adjust properties as wanted(you can move the points or adjust the duration of the animation here), and click on play.
+
+ 
+
+- **Left View / Right View / Front View / Back View / Top View / Bottom View**
+ Predefined fixed perspectives that allow you to quickly switch to standard orthogonal views of your dataset.
+
+#### Camera Projection
+
+Camera projection defines how depth and distance are perceived in the 3D view.
+
+- **Perspective**
+ Standard 3D view where objects appear smaller as they get farther away. This view simulates how humans naturally perceive depth.
+
+#### Speed
+
+The Speed control adjusts how fast the camera or navigation responds to user inputs.
+
+- Increasing speed makes zooming, panning, and flying faster, which is useful for exploring large datasets quickly.
+- Decreasing speed allows for precise adjustments when inspecting small details or measuring specific points.
+- The speed will be adjusted automatically when you zoom in and out, providing a more intuitive navigation experience.
+
+This section ensures that all users can efficiently navigate and manipulate the point cloud data, while providing control over the view, clipping, and camera behaviour.
+
+### Scene
+
+---
+
+The Scene tab allows you to manage and organize all the elements currently loaded in the application. It provides tools to view, modify, and export components such as point clouds, measurements, annotations, and other objects, giving you complete control over the content of your 3D environment.
+
+
+
+#### Export
+
+The Export feature allows you to save elements from the scene into different file formats for external use:
+
+1. **JSON** – Exports the scene configuration and metadata for use in other applications or for project backup.
+2. **DXF** – Exports measurements and geometry into a CAD-compatible format.
+3. **Potree** – Exports the point cloud and scene data into a Potree-compatible format for web-based visualization.
+
+#### Objects
+
+The Objects section lists all items currently present in the scene, grouped into categories:
+
+- **Point Clouds** – Displays all loaded point clouds in the scene. You can toggle visibility, inspect properties, or remove them.
+- **Measurements** – See [Measurements panel](#measurements).
+- **Annotations** – See [Saved Locations panel](#saved-locations).
+- **Other** – Contains additional scene elements:
+ - **Camera** – Tracks the position and orientation of the current viewpoint.
+- **Vectors** – Displays any vector elements present in the scene.
+- **Images** – Shows any images linked to points or objects in the scene.
+
+#### Properties
+
+The Properties panel provides detailed information about the selected object in the scene. Depending on the object type, you can view:
+
+- Coordinates and dimensions
+- Colors and intensity values
+- Metadata and attributes
+- Visibility and rendering settings
+
+This section gives you full control over the content, allowing you to inspect, modify, or export scene elements efficiently.
+
+### About
+
+---
+
+General information regarding the application, licences, contributors and more will show up here. This is default information from Potree.
+
+## Minimap
+
+The map icon below the sidebar icon in the top left corner, will show and collapse a minimap.
+In the minimap you can zoom using the mouse, touchpad or the icons in the top left corner.
+You can move around by clicking and moving the mouse around simultaneously. The coordinates your cursor hover over will show up in the top right corner of the minimap.
+
+## Coordinates
+
+In the bottom right corner there is a black box that lists coordinates. These coordinates correspond to the target point, which is continuously updated to be the most recent point the user has double clicked on. Latitude and longitude are measured in degrees, while elevation is measured in metres from the sea level.
+Coordinates are only shown in the "Orbit Control" Navigation mode.
diff --git a/index.html b/index.html
index 2f98510..b0488b6 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,8 @@
href="/src/MeasurementControl/measurementsPanel.css"
/>
-
+
+
diff --git a/public/img/00_icons.png b/public/img/00_icons.png
new file mode 100644
index 0000000..1aef21c
Binary files /dev/null and b/public/img/00_icons.png differ
diff --git a/public/img/01_menuBarTabs.png b/public/img/01_menuBarTabs.png
new file mode 100644
index 0000000..ac3a94d
Binary files /dev/null and b/public/img/01_menuBarTabs.png differ
diff --git a/public/img/02_ElevationControlTab.png b/public/img/02_ElevationControlTab.png
new file mode 100644
index 0000000..26ef7b1
Binary files /dev/null and b/public/img/02_ElevationControlTab.png differ
diff --git a/public/img/03_ElevationControlTab.png b/public/img/03_ElevationControlTab.png
new file mode 100644
index 0000000..9b3fcdf
Binary files /dev/null and b/public/img/03_ElevationControlTab.png differ
diff --git a/public/img/04_AcceptedFilter.png b/public/img/04_AcceptedFilter.png
new file mode 100644
index 0000000..ce218ad
Binary files /dev/null and b/public/img/04_AcceptedFilter.png differ
diff --git a/public/img/05_AcceptedFilter.png b/public/img/05_AcceptedFilter.png
new file mode 100644
index 0000000..8dfa909
Binary files /dev/null and b/public/img/05_AcceptedFilter.png differ
diff --git a/public/img/06_Measurements.png b/public/img/06_Measurements.png
new file mode 100644
index 0000000..d24f47d
Binary files /dev/null and b/public/img/06_Measurements.png differ
diff --git a/public/img/07_SavedLocations.png b/public/img/07_SavedLocations.png
new file mode 100644
index 0000000..31aa2e6
Binary files /dev/null and b/public/img/07_SavedLocations.png differ
diff --git a/public/img/08_Appearance.png b/public/img/08_Appearance.png
new file mode 100644
index 0000000..ab9f09e
Binary files /dev/null and b/public/img/08_Appearance.png differ
diff --git a/public/img/09_Tools.png b/public/img/09_Tools.png
new file mode 100644
index 0000000..cd259db
Binary files /dev/null and b/public/img/09_Tools.png differ
diff --git a/public/img/10_Scene.png b/public/img/10_Scene.png
new file mode 100644
index 0000000..045067a
Binary files /dev/null and b/public/img/10_Scene.png differ
diff --git a/public/img/11_SavedLocations.png b/public/img/11_SavedLocations.png
new file mode 100644
index 0000000..83153ed
Binary files /dev/null and b/public/img/11_SavedLocations.png differ
diff --git a/public/img/12_Measurements_updated.jpg b/public/img/12_Measurements_updated.jpg
new file mode 100644
index 0000000..f3aa31e
Binary files /dev/null and b/public/img/12_Measurements_updated.jpg differ
diff --git a/public/img/13_Tools_updated.jpg b/public/img/13_Tools_updated.jpg
new file mode 100644
index 0000000..a8466dc
Binary files /dev/null and b/public/img/13_Tools_updated.jpg differ
diff --git a/public/img/14_Animation.jpg b/public/img/14_Animation.jpg
new file mode 100644
index 0000000..8581e9d
Binary files /dev/null and b/public/img/14_Animation.jpg differ
diff --git a/src/2DProfileOverride/2DProfileOverride.css b/src/2DProfileOverride/2DProfileOverride.css
new file mode 100644
index 0000000..b14df6d
--- /dev/null
+++ b/src/2DProfileOverride/2DProfileOverride.css
@@ -0,0 +1,12 @@
+/* Keep profile SVG content (axes/labels) from being clipped */
+#profileSVG {
+ overflow: visible !important;
+}
+
+/* Improve axis label readability against varying backgrounds */
+#profile_window .axis text {
+ paint-order: stroke;
+ stroke: #000;
+ stroke-width: 3px;
+ stroke-linejoin: round;
+}
diff --git a/src/2DProfileOverride/2DProfileOverride.js b/src/2DProfileOverride/2DProfileOverride.js
new file mode 100644
index 0000000..721a67c
--- /dev/null
+++ b/src/2DProfileOverride/2DProfileOverride.js
@@ -0,0 +1,224 @@
+import { ecef, wgs84 } from '../config.js'
+
+/**
+ * Initialize runtime overrides for Potree 2D profile behavior.
+ * - Patches ProfileWindow.addPoints: converts each point's Z to elevation instead.
+ * - Rewrites selection info table to show lon/lat/elevation.
+ */
+export function init2DProfileOverride(viewer) {
+ const tryPatchAddPoints = (target) => {
+ if (!target || target.__elevationPatchApplied) return false
+ const originalAddPoints = target.addPoints
+ if (typeof originalAddPoints !== 'function') return false
+
+ target.addPoints = function patchedAddPoints(pointcloud, points) {
+ try {
+ if (!points || !points.data || !points.data.position) {
+ return originalAddPoints.call(this, pointcloud, points)
+ }
+
+ const srcPos = points.data.position
+ // Divide by 3 because positions are [x0,y0,z0, x1,y1,z1, ...]
+ const count = points.numPoints || Math.floor(srcPos.length / 3)
+ const posArray = srcPos.constructor || Float32Array
+
+ // Clone without changing original buffers
+ const cloned = {
+ ...points,
+ data: { ...points.data, position: new posArray(srcPos) }
+ }
+ const dstPos = cloned.data.position
+
+ const pcx = pointcloud?.position?.x || 0
+ const pcy = pointcloud?.position?.y || 0
+ const pcz = pointcloud?.position?.z || 0
+
+ // Preserve world ECEF Z per point (best-effort). Some Potree UIs attach
+ // selectedPoint from these attributes; we keep it on the cloned structure
+ // for later retrieval in the selection panel override.
+ const ecefZWorld = new Float64Array(count)
+
+ for (let i = 0; i < count; i++) {
+ const ix = 3 * i
+ const x = srcPos[ix + 0] + pcx
+ const y = srcPos[ix + 1] + pcy
+ const z = srcPos[ix + 2] + pcz
+
+ const [, , elevation] = proj4(ecef, wgs84, [x, y, z])
+ // Internally, Potree adds pointcloud.position.z back later.
+ dstPos[ix + 2] = elevation - pcz
+
+ ecefZWorld[i] = z
+ }
+
+ cloned.data.ecefZWorld = ecefZWorld
+
+ const result = originalAddPoints.call(this, pointcloud, cloned)
+
+ // Try to tag currently selectedPoint with the original ECEF Z if available
+ try {
+ if (
+ this &&
+ this.selectedPoint &&
+ Number.isFinite(this.selectedPoint.index)
+ ) {
+ const idx = this.selectedPoint.index
+ if (ecefZWorld && idx >= 0 && idx < ecefZWorld.length) {
+ this.selectedPoint.ecefZWorld = ecefZWorld[idx]
+ }
+ }
+ } catch {}
+
+ return result
+ } catch (err) {
+ console.warn(
+ '2DProfileOverride: failed to apply elevation override',
+ err
+ )
+ return originalAddPoints.call(this, pointcloud, points)
+ }
+ }
+
+ target.__elevationPatchApplied = true
+ return true
+ }
+
+ let patched = false
+ if (viewer && viewer.profileWindow) {
+ patched = tryPatchAddPoints(viewer.profileWindow)
+ }
+ if (window.Potree?.ProfileWindow?.prototype) {
+ patched =
+ tryPatchAddPoints(window.Potree.ProfileWindow.prototype) || patched
+ }
+
+ const afterPatched = () => {
+ attachSelectionInfoOverride(viewer)
+ }
+
+ if (patched) {
+ afterPatched()
+ } else {
+ // Poll until the profile window/prototype is available
+ let tries = 0
+ const maxTries = 40
+ const timer = setInterval(() => {
+ tries += 1
+ if (
+ tryPatchAddPoints(window.Potree?.ProfileWindow?.prototype) ||
+ (viewer?.profileWindow && tryPatchAddPoints(viewer.profileWindow))
+ ) {
+ clearInterval(timer)
+ afterPatched()
+ } else if (tries >= maxTries) {
+ clearInterval(timer)
+ }
+ }, 250)
+ }
+}
+
+// Rewrites the selection properties table inside the profile window
+function attachSelectionInfoOverride(viewer) {
+ const getInfoEl = () => document.getElementById('profileSelectionProperties')
+ let infoEl = getInfoEl()
+ if (!infoEl) {
+ const obs = new MutationObserver(() => {
+ infoEl = getInfoEl()
+ if (infoEl) {
+ obs.disconnect()
+ monitorSelectionInfo(viewer, infoEl)
+ }
+ })
+ obs.observe(document.body, { childList: true, subtree: true })
+ } else {
+ monitorSelectionInfo(viewer, infoEl)
+ }
+}
+
+function monitorSelectionInfo(viewer, infoEl) {
+ let scheduled = false
+ let selfUpdating = false
+
+ const updateOnce = () => {
+ scheduled = false
+ selfUpdating = true
+ try {
+ const table = infoEl.querySelector('table')
+ if (!table) return
+ const rows = [...table.querySelectorAll('tr')]
+ if (rows.length < 3) return
+
+ const pw = viewer?.profileWindow
+ const pos = pw?.viewerPickSphere?.position
+ const sp = pw?.selectedPoint
+ if (!pos || !sp) return
+
+ // Use preserved ECEF Z if we have it; otherwise fall back to pos.z
+ const trueZ = Number(sp?.ecefZWorld ?? NaN)
+ let lon, lat
+ if (Number.isFinite(trueZ)) {
+ ;[lon, lat] = proj4(ecef, wgs84, [pos.x, pos.y, trueZ])
+ } else {
+ ;[lon, lat] = proj4(ecef, wgs84, [pos.x, pos.y, pos.z])
+ }
+ const elevation = pos.z
+
+ const setRow = (row, label, val) => {
+ const tds = row.querySelectorAll('td')
+ if (tds[0] && tds[0].textContent !== label) tds[0].textContent = label
+ if (tds[1]) {
+ const txt = Number.isFinite(val)
+ ? val.toLocaleString(undefined, {
+ minimumFractionDigits: 4,
+ maximumFractionDigits: 4
+ })
+ : ''
+ if (tds[1].textContent !== txt) tds[1].textContent = txt
+ }
+ }
+
+ setRow(rows[0], 'lon', lon)
+ setRow(rows[1], 'lat', lat)
+ setRow(rows[2], 'elevation', elevation)
+
+ // Remove unwanted rows from the hover info table
+ const labelsToHide = new Set([
+ 'intensity',
+ 'return number',
+ 'number of returns',
+ 'classification flags',
+ 'classification',
+ 'user data',
+ 'scan angle',
+ 'gps time',
+ 'gps-time',
+ 'rgba'
+ ])
+
+ // iterate over a snapshot to avoid issues while removing
+ const allRows = [...table.querySelectorAll('tr')]
+ for (let i = 3; i < allRows.length; i++) {
+ const row = allRows[i]
+ const labelCell = row.querySelector('td')
+ const label = (labelCell?.textContent || '').trim().toLowerCase()
+ if (labelsToHide.has(label)) {
+ row.remove()
+ }
+ }
+ } finally {
+ setTimeout(() => {
+ selfUpdating = false
+ }, 0)
+ }
+ }
+
+ const mo = new MutationObserver(() => {
+ if (selfUpdating) return
+ if (!scheduled) {
+ scheduled = true
+ requestAnimationFrame(updateOnce)
+ }
+ })
+ mo.observe(infoEl, { childList: true, subtree: true })
+ requestAnimationFrame(updateOnce)
+}
diff --git a/src/Accessibility/makeMenuTabbable.js b/src/Accessibility/makeMenuTabbable.js
new file mode 100644
index 0000000..04821f3
--- /dev/null
+++ b/src/Accessibility/makeMenuTabbable.js
@@ -0,0 +1,492 @@
+/**
+ * Makes menu tabbable keyboard accessible.
+ */
+export function makeMenuTabbable() {
+ makeMenuToggleTabbable()
+ makeMiniMapTabbable()
+ makePanelsTabbable()
+ makeElevationControlTabbable()
+ makeAcceptedFilteringTabbable()
+ makeObjectsTabbable()
+ makeObjectsDropdownsTabbable()
+ makeMeasurementsTabbable()
+ makeAppearancePanelTabbable()
+ makeToolsPanelTabbable()
+}
+
+/**
+ * Makes menu toggle tabbable and adds keyboard event listeners.
+ */
+function makeMenuToggleTabbable() {
+ const quickButtonsContainer = document.getElementById('potree_quick_buttons')
+ if (!quickButtonsContainer) return
+ const toggle = quickButtonsContainer.querySelector('.potree_menu_toggle')
+ if (toggle) {
+ toggle.tabIndex = 0
+ toggle.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ toggle.click()
+ }
+ })
+ }
+}
+
+/**
+ * Makes minimap tabbable and keyboard clickable
+ */
+function makeMiniMapTabbable() {
+ const quickButtonsContainer = document.getElementById('potree_quick_buttons')
+ if (!quickButtonsContainer) return
+ const toggle = quickButtonsContainer.querySelector('#potree_map_toggle')
+ if (toggle) {
+ toggle.tabIndex = 0
+ toggle.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ toggle.click()
+ }
+ })
+ }
+}
+
+/**
+ * Makes accordion titles tabbable and keyboard clickable
+ */
+function makePanelsTabbable() {
+ const menu = document.getElementById('potree_menu')
+ if (menu) {
+ const headers = menu.querySelectorAll('h3')
+ headers.forEach((header) => {
+ header.tabIndex = 0
+ header.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ header.click()
+ }
+ })
+ })
+ }
+}
+
+/**
+ * Makes elevation control panel tabbable and keyboard clickable
+ */
+function makeElevationControlTabbable() {
+ // Make activate elevation control button tabbable and keyboard clickable
+ const activateButton = document.getElementById('btnDoElevationControl')
+ if (activateButton) {
+ activateButton.tabIndex = 0
+ activateButton.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ activateButton.click()
+ activateButton.focus()
+ }
+ })
+ }
+
+ // Make gradient clamp, repeat and mirrored repeat buttons tabbable and keyboard clickable
+ const gradientButtons = document.querySelectorAll(
+ '#gradient_repeat_option label'
+ )
+ gradientButtons.forEach((label) => {
+ label.tabIndex = 0
+ label.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ label.click()
+ }
+ })
+ })
+
+ // Make gradient schemes tabbable and keyboard clickable
+ const gradientSpans = document.querySelectorAll(
+ '#elevation_gradient_scheme_selection span'
+ )
+ gradientSpans.forEach((span) => {
+ span.tabIndex = 0
+ span.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ span.click()
+ }
+ })
+ })
+}
+
+/**
+ * Makes accepted filtering panel tabbable and keyboard clickable
+ */
+function makeAcceptedFilteringTabbable() {
+ const activateButton = document.getElementById('doAcceptedFiltering')
+ if (activateButton) {
+ activateButton.tabIndex = 0
+ activateButton.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ activateButton.click()
+ activateButton.focus()
+ }
+ })
+ }
+}
+
+/**
+ * Makes appearance panel tabbable and keyboard clickable
+ */
+function makeAppearancePanelTabbable() {
+ // Make EDL checkbox tabbable and keyboard clickable
+ const edlCheckbox = document.getElementById('chkEDLEnabled')
+ if (edlCheckbox) {
+ edlCheckbox.tabIndex = 0
+ edlCheckbox.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ edlCheckbox.click()
+ }
+ })
+ }
+
+ // Make background buttons tabbable and keyboard clickable
+ const backgroundButtons = document.querySelectorAll(
+ '#background_options label'
+ )
+ backgroundButtons.forEach((label) => {
+ label.tabIndex = 0
+ label.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ label.click()
+ }
+ })
+ })
+
+ // Make splat quality buttons tabbable and keyboard clickable
+ const splatQualityButtons = document.querySelectorAll(
+ '#splat_quality_options label'
+ )
+ splatQualityButtons.forEach((label) => {
+ label.tabIndex = 0
+ label.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ label.click()
+ }
+ })
+ })
+
+ // Make box checkbox tabbable and keyboard clickable
+ const boxCheckbox = document.getElementById('show_bounding_box')
+ if (boxCheckbox) {
+ boxCheckbox.tabIndex = 0
+ boxCheckbox.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ boxCheckbox.click()
+ }
+ })
+ }
+
+ // Make lock view checkbox tabbable and keyboard clickable
+ const lockViewCheckBox = document.getElementById('set_freeze')
+ if (lockViewCheckBox) {
+ lockViewCheckBox.tabIndex = 0
+ lockViewCheckBox.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ lockViewCheckBox.click()
+ }
+ })
+ }
+}
+
+/**
+ * Makes tools panel tabbable and keyboard clickable
+ */
+function makeToolsPanelTabbable() {
+ // Make clipping tools tabbable and keyboard clickable
+ const clippingTools = document.querySelectorAll('#clipping_tools img')
+ clippingTools.forEach((img, index) => {
+ // Hide unsupported tool
+ if (index === 2) {
+ img.hidden = true
+ return
+ }
+ img.tabIndex = 0
+ img.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ img.click()
+ }
+ })
+ })
+
+ // Make clip task buttons tabbable and keyboard clickable
+ const clipTaskButtons = document.querySelectorAll('#cliptask_options label')
+ clipTaskButtons.forEach((label) => {
+ label.tabIndex = 0
+ label.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ label.click()
+ }
+ })
+ })
+
+ // Make clip method buttons tabbable and keyboard clickable
+ const clipMethodButtons = document.querySelectorAll(
+ '#clipmethod_options label'
+ )
+ clipMethodButtons.forEach((label) => {
+ label.tabIndex = 0
+ label.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ label.click()
+ }
+ })
+ })
+
+ // Hide camera projection options as they are not supported
+ const cameraProjection = document.getElementById('camera_projection_options')
+ if (cameraProjection) cameraProjection.hidden = true
+
+ // Make navigation tools tabbable and keyboard clickable
+ const navigationTools = document.querySelectorAll('#navigation img')
+ const renderArea = document.querySelector('#potree_render_area')
+ // Keep wrapper focusable as a fallback target (doesn't change tab order elsewhere)
+ if (renderArea && !renderArea.hasAttribute('tabindex')) {
+ renderArea.setAttribute('tabindex', '0')
+ }
+
+ navigationTools.forEach((img) => {
+ img.tabIndex = 0
+ img.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ img.click()
+
+ // Switch controls directly via Potree API, then focus the keyboard input target (canvas)
+ const pv = window.potreeViewer || window.viewer || null
+ const target = renderArea
+ if (pv) {
+ const src = (img.getAttribute && img.getAttribute('src')) || ''
+ const title =
+ img.getAttribute &&
+ (img.getAttribute('title') || img.getAttribute('data-i18n') || '')
+ const key = (src + ' ' + title).toLowerCase()
+
+ if (key.includes('earth')) {
+ pv.setControls(pv.earthControls)
+ } else if (key.includes('heli') || key.includes('helicopter')) {
+ pv.setControls(pv.fpControls)
+ if (pv.fpControls) pv.fpControls.lockElevation = true
+ } else if (
+ key.includes('fps') ||
+ key.includes('flight') ||
+ key.includes('flight_control')
+ ) {
+ pv.setControls(pv.fpControls)
+ if (pv.fpControls) pv.fpControls.lockElevation = false
+ } else if (key.includes('orbit')) {
+ pv.setControls(pv.orbitControls)
+ }
+
+ const dom = pv && pv.renderer && pv.renderer.domElement
+ if (dom) {
+ if (!dom.hasAttribute('tabindex'))
+ dom.setAttribute('tabindex', '-1')
+ dom.focus()
+ } else if (target) {
+ // conservative fallback
+ if (!target.hasAttribute('tabindex'))
+ target.setAttribute('tabindex', '0')
+ target.focus()
+ }
+ } else if (target) {
+ if (!target.hasAttribute('tabindex'))
+ target.setAttribute('tabindex', '0')
+ target.focus()
+ }
+ }
+ })
+ })
+}
+
+function makeMeasurementsTabbable() {
+ // Select every tool inside the measurement tools host
+ const tools = document.querySelectorAll(
+ '#measurement_tools_host .tool-with-label'
+ )
+ tools.forEach((tool) => {
+ tool.tabIndex = 0
+ tool.setAttribute('role', 'button')
+ tool.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ tool.click()
+ }
+ })
+ })
+}
+
+/**
+ * Makes the Scene > Objects tree tabbable and keyboard operable
+ * - Tab to anchors
+ * - Enter/Space = select (click)
+ * - ArrowRight = open node, ArrowLeft = close node (uses jsTree if available)
+ * - ArrowUp/ArrowDown = move focus to previous/next visible item
+ * - Home/End = first/last visible item
+ */
+function makeObjectsTabbable() {
+ const install = (tree) => {
+ if (!tree) return
+
+ // Ensure all anchors are tabbable
+ const setTabbable = (root) => {
+ root.querySelectorAll('a.jstree-anchor').forEach((a) => {
+ a.tabIndex = 0
+ })
+ }
+ setTabbable(tree)
+
+ // Keep anchors tabbable when jsTree updates DOM
+ const mo = new MutationObserver((muts) => {
+ for (const m of muts) {
+ if (m.addedNodes && m.addedNodes.length) {
+ m.addedNodes.forEach((n) => {
+ if (n.nodeType === 1) setTabbable(n)
+ })
+ }
+ }
+ })
+ mo.observe(tree, { childList: true, subtree: true })
+
+ const getAnchors = () =>
+ Array.from(tree.querySelectorAll('a.jstree-anchor'))
+ const focusMove = (from, dir) => {
+ const anchors = getAnchors()
+ const i = anchors.indexOf(from)
+ const next = anchors[i + dir]
+ if (next) next.focus()
+ }
+ const focusEdge = (toLast) => {
+ const anchors = getAnchors()
+ const target = toLast ? anchors[anchors.length - 1] : anchors[0]
+ if (target) target.focus()
+ }
+
+ // Delegate key handling on anchors
+ tree.addEventListener('keydown', (e) => {
+ const a = e.target
+ if (
+ !a ||
+ !(a instanceof HTMLElement) ||
+ !a.classList.contains('jstree-anchor')
+ )
+ return
+ const li = a.closest('li')
+ const id = li && li.id
+ const $ = window.jQuery || window.$
+ const inst = $ && $(tree).jstree ? $(tree).jstree(true) : null
+
+ switch (e.key) {
+ case 'Enter':
+ case ' ': // space
+ e.preventDefault()
+ a.click()
+ break
+ case 'ArrowDown':
+ e.preventDefault()
+ focusMove(a, +1)
+ break
+ case 'ArrowUp':
+ e.preventDefault()
+ focusMove(a, -1)
+ break
+ case 'Home':
+ e.preventDefault()
+ focusEdge(false)
+ break
+ case 'End':
+ e.preventDefault()
+ focusEdge(true)
+ break
+ case 'ArrowRight':
+ e.preventDefault()
+ if (inst && id) {
+ inst.open_node(id)
+ } else if (li && li.classList.contains('jstree-closed')) {
+ const toggle = li.querySelector('.jstree-ocl')
+ if (toggle)
+ toggle.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ }
+ break
+ case 'ArrowLeft':
+ e.preventDefault()
+ if (inst && id) {
+ inst.close_node(id)
+ } else if (li && li.classList.contains('jstree-open')) {
+ const toggle = li.querySelector('.jstree-ocl')
+ if (toggle)
+ toggle.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ }
+ break
+ }
+ })
+ }
+
+ const tryInit = () => {
+ const tree = document.getElementById('scene_objects')
+ if (tree) {
+ install(tree)
+ return true
+ }
+ return false
+ }
+
+ if (!tryInit()) {
+ // Wait for GUI to load
+ const obs = new MutationObserver(() => {
+ if (tryInit()) obs.disconnect()
+ })
+ obs.observe(document.body, { childList: true, subtree: true })
+ }
+}
+
+/**
+ * Make dropdowns in Properties tabbable: focus the associated input/select when label is activated via keyboard.
+ */
+function makeObjectsDropdownsTabbable() {
+ const make = () => {
+ const container = document.getElementById('potree_menu')
+ if (!container) return false
+
+ // Labels that point to inputs/selects
+ container.querySelectorAll('label[for]').forEach((lbl) => {
+ lbl.tabIndex = 0
+ lbl.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ const id = lbl.getAttribute('for')
+ const target = id && document.getElementById(id)
+ if (target instanceof HTMLElement) target.focus()
+ }
+ })
+ })
+
+ // Ensure selects are in tab order (usually default) and openable via keyboard focus
+ container.querySelectorAll('select').forEach((sel) => {
+ sel.tabIndex = 0
+ })
+ return true
+ }
+
+ if (!make()) {
+ const obs = new MutationObserver(() => {
+ if (make()) obs.disconnect()
+ })
+ obs.observe(document.body, { childList: true, subtree: true })
+ }
+}
diff --git a/src/AnnotationControl/annotationPanel.css b/src/AnnotationControl/annotationPanel.css
index 13a3b2e..f250dba 100644
--- a/src/AnnotationControl/annotationPanel.css
+++ b/src/AnnotationControl/annotationPanel.css
@@ -27,8 +27,8 @@ img.button-icon[src$='/annotation.svg'] {
padding: 8px;
border-radius: 4px;
border: 1px solid #404a50;
- background: #2f383d;
- color: #cfd5d8;
+ background: #636262;
+ color: #636262;
font-family: inherit;
font-size: 12px;
line-height: 1.3;
@@ -44,10 +44,6 @@ img.button-icon[src$='/annotation.svg'] {
margin-top: 6px;
}
-.annotation-add-button {
- margin: 10px 0;
-}
-
.annotation-empty {
opacity: 0.6;
padding: 10px;
@@ -350,37 +346,68 @@ img.button-icon[src$='/annotation.svg'] {
flex: 0 0 18px;
}
+.pv-menu-list_annotations-panel {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow: hidden;
+}
+
/* Add button */
.annotation-add-button {
- background: linear-gradient(180deg, #f6f6f6 0%, #e9e9e9 100%);
- color: #222;
- padding: 8px 16px;
- min-width: 140px;
- height: 38px;
display: block;
- margin: 12px auto;
- border-radius: 6px;
+ width: 80%;
+ margin: 20px 0 10px;
+ padding: 10px 10px;
font-size: 13px;
- font-weight: 700;
- box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
- border: 1px solid #cfcfcf;
+ font-weight: 500;
+ background-color: #636262;
+ color: #ffffff;
+ border: 1px solid #555;
+ border-radius: 4px;
cursor: pointer;
- text-align: center;
-}
-.annotation-add-button .add-label {
- color: #222;
- font-weight: 700;
+ transition:
+ background-color 0.2s ease,
+ transform 0.1s ease;
}
+
.annotation-add-button:hover {
- background: linear-gradient(180deg, #f3f3f3 0%, #e2e2e2 100%);
- border-color: #bfbfbf;
+ background-color: #8f8f8f;
}
-.annotation-add-button:active {
- transform: translateY(1px);
- background: linear-gradient(180deg, #e9e9e9 0%, #dbdbdb 100%);
- box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
+
+#labelToggleContainer {
+ margin: 8px 0 6px;
+ padding-left: 4px;
}
-.annotation-add-button:focus {
- outline: 2px solid rgba(100, 100, 100, 0.12);
- outline-offset: 2px;
+#labelToggleContainer .labels-legend {
+ font-size: 13px;
+ color: #ddd;
+ margin-bottom: 4px;
+}
+
+.toggle-group {
+ display: flex;
+ width: 265px;
+ border: 1px solid black;
+ border-radius: 4px;
+ overflow: hidden;
+}
+.toggle-group button {
+ flex: 1;
+ padding: 6px 15px;
+ background: #a7a9aa;
+ color: #3d3c3c;
+ border: 0;
+ cursor: pointer;
+ font-weight: 300;
+ transition: background 0.2s;
+}
+
+.toggle-group button:not(:last-child) {
+ border-right: 1px solid #555;
+}
+
+.toggle-group button.active {
+ background: #c7c9ca;
+ color: #000;
}
diff --git a/src/AnnotationControl/annotationPanel.js b/src/AnnotationControl/annotationPanel.js
index cffe313..684094d 100644
--- a/src/AnnotationControl/annotationPanel.js
+++ b/src/AnnotationControl/annotationPanel.js
@@ -31,7 +31,7 @@ export function initAnnotationsPanel(viewer) {
header.appendChild(headerSpan)
const panel = document.createElement('div')
- panel.className = 'pv-menu-list annotations-panel'
+ panel.className = 'pv-menu-list_annotations-panel'
const listContainerDiv = document.createElement('div')
listContainerDiv.id = 'annotations_list'
@@ -68,6 +68,47 @@ export function initAnnotationsPanel(viewer) {
targetContainer = panel.querySelector('#annotations_list')
}
}
+
+ // --- Add Show/Hide labels toggle group ---
+ const panelEl =
+ targetContainer.closest('.pv-menu-list_annotations-panel') ||
+ targetContainer.parentElement
+
+ if (!panelEl.querySelector('#labelToggleContainer')) {
+ const controls = document.createElement('div')
+ controls.id = 'labelToggleContainer'
+ controls.innerHTML = `
+ Show/Hide saved locations
+