Skip to content

5 click point to view attribute us6 #21

Merged
merged 20 commits into from
Oct 6, 2025
+962 −7
Merged

5 click point to view attribute us6 #21

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f5ce5f5
feat(#5): :sparkles: Add menu sections for measurements
gautegf Sep 24, 2025
6f4ed05
fix(#5): :bug: better display of distance measurement
gautegf Sep 24, 2025
acd5f4b
refactor(#5): :recycle: move styling from index file to measurements …
gautegf Sep 24, 2025
75c5b43
feat(#5): :sparkles: Display measurements in a sorted list, and move …
gautegf Oct 1, 2025
03e8495
style(#5): :art: ran format
gautegf Oct 1, 2025
37c660f
Merge branch 'dev' into 5-click-point-to-view-attribute-us6
gautegf Oct 1, 2025
d028b7e
refactor(#5): :recycle: Small cleanup
gautegf Oct 1, 2025
6644426
feat(#5): :sparkles: Moved some files, added some styling and features
gautegf Oct 1, 2025
4f44bf3
style(#5): :lipstick: Move inline styling to the linked css file, and…
gautegf Oct 4, 2025
e1175ca
refactor(#5): :recycle: Made a helper function to reduce redundancy
gautegf Oct 4, 2025
e575fbf
fix(#5): :bug: fixed issues where the title for displayed data was no…
gautegf Oct 4, 2025
22e2c24
fix(#5): :bug: Fix UI title displays and some style changes
gautegf Oct 5, 2025
3fd1d98
style(#5): :lipstick: Added a title above the tools
gautegf Oct 5, 2025
33c96be
ran format
gautegf Oct 5, 2025
7bc12dd
fix(#5): :bug: Rounded coordinates to one decimal so that they are di…
gautegf Oct 6, 2025
7f6d2a8
ran format
gautegf Oct 6, 2025
985abe1
Merge branch 'dev' into 5-click-point-to-view-attribute-us6
gautegf Oct 6, 2025
5fb1a1f
refactor(#5): :recycle: fix some confilcts with dev
gautegf Oct 6, 2025
f04fabb
ran format
gautegf Oct 6, 2025
7af1807
refactor(#5): :recycle: Small cleanup
gautegf Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
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>
Expand Down Expand Up @@ -55,6 +56,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')
Expand All @@ -77,10 +80,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
Expand Down
243 changes: 243 additions & 0 deletions src/MeasurementControl/measurementsPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
#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;
}

.m-list-title, .m-data-title {
font-size: 12px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
padding: 6px 8px 4px 14px;
margin-left: 2px;
color: #c7d4d9;
display: flex;
align-items: center;
gap: 6px;
}
.m-list-title { margin: 6px 0 4px; }
.m-data-title { margin: 10px 0 8px; border-top:1px solid #303a3f; padding-top:10px; }
Loading