Skip to content

Commit

Permalink
Merge pull request #27 from TDT4290-group-4/dev
Browse files Browse the repository at this point in the history
Merge Dev to Main after Sprint 1
  • Loading branch information
mariewah authored Oct 8, 2025
2 parents 7ee1333 + 8d36734 commit 4e42db5
Show file tree
Hide file tree
Showing 13 changed files with 1,515 additions and 45 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Molloy Explorer is a 3D seabed visualization tool built with **Potree**. It allo

### Add point cloud data

Place the point cloud data (in Potree format) in `public/pointclouds/data_converted`.
Place the point cloud data (in Potree format with EPSG:4978 coordinates) in `public/pointclouds/data_converted`.

**Note:** Point cloud files should not be committed to Git.

Expand Down
75 changes: 33 additions & 42 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,21 @@
type="text/css"
href="/libs/jstree/themes/mixed/style.css"
/>
<link rel="stylesheet" type="text/css" href="src/style.css" />
<link
rel="stylesheet"
type="text/css"
href="src/coordinateShowing/coordinateShowing.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/libs/Cesium/Widgets/CesiumWidget/CesiumWidget.css"
/>
<link
rel="stylesheet"
href="/src/MeasurementControl/measurementsPanel.css"
/>
</head>

<body>
Expand All @@ -39,54 +54,30 @@
<script src="/build/potree/potree.js"></script>
<script src="/libs/plasio/js/laslaz.js"></script>
<script src="/libs/three.js/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
<script src="/libs/Cesium/Cesium.js"></script>

<div
class="potree_container"
style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px"
style="
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: black;
"
>
<div
id="potree_render_area"
style="
background-image: url('/build/potree/resources/images/background.jpg');
"
></div>
<div id="potree_render_area">
<div id="cesiumContainer"></div>
<div id="canvasContainer">
<canvas id="elevationCanvas" width="200" height="30"></canvas>
<canvas id="posCanvas" width="200" height="30"></canvas>
</div>
</div>
<div id="potree_sidebar_container"></div>
</div>

<script type="module">
window.viewer = new Potree.Viewer(
document.getElementById('potree_render_area')
)

viewer.setEDLEnabled(true)
viewer.setFOV(60)
viewer.setPointBudget(5_000_000)
viewer.loadSettingsFromURL()

viewer.setDescription('Molloy Explorer')

viewer.loadGUI(() => {
viewer.setLanguage('en')
$('#menu_appearance').next().show()
$('#menu_tools').next().show()
$('#menu_scene').next().show()
$('#menu_filters').next().show()
viewer.toggleSidebar()
})

let url = './pointclouds/data_converted/metadata.json'
Potree.loadPointCloud(url).then((e) => {
let pointcloud = e.pointcloud
let material = pointcloud.material

material.pointSizeType = Potree.PointSizeType.ADAPTIVE
material.shape = Potree.PointShape.CIRCLE
material.activeAttributeName = 'elevation'
material.gradient = Potree.Gradients['RAINBOW']

viewer.scene.addPointCloud(pointcloud)
viewer.fitToScreen()
})
</script>
<script type="module" src="src/main.js"></script>
</body>
</html>
113 changes: 113 additions & 0 deletions src/ElevationControl/elevationControl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
//Cerating a customized section "Elevation Control"
window.createElevationPanel = function createElevationPanel(viewer) {
const container = document.getElementById('elevation_list')
let targetContainer = container
if (!targetContainer) {
// Create a new accordion section for Elevation Control
const menu = document.getElementById('potree_menu')
if (menu) {
const header = document.createElement('h3')
header.id = 'menu_elevation'
header.innerHTML = '<span>Elevation Control</span>'
const panel = document.createElement('div')
panel.className = 'pv-menu-list'
panel.innerHTML = '<div id="elevation_list" class="auto"></div>'
const about = document.getElementById('menu_appearance')
if (about) {
menu.insertBefore(panel, about)
menu.insertBefore(header, panel)
} else {
menu.appendChild(header)
menu.appendChild(panel)
}
// Activate accordion behavior if jQuery UI accordion already initialized
if ($(menu).accordion) {
try {
$(menu).accordion('refresh')
} catch (e) {}
}
// Toggle on header click if not managed by accordion refresh
header.addEventListener(
'click',
() =>
(panel.style.display = panel.style.display === 'none' ? '' : 'none')
)
targetContainer = panel.querySelector('#elevation_list')
}
}
}

//Select the fist pointcloud in the sidebar so that the Elevation section is built
function autoSelectFirstPointCloud() {
const cloudIcon = document.querySelector(
'#scene_objects i.jstree-themeicon-custom'
)
if (cloudIcon) {
cloudIcon.dispatchEvent(new MouseEvent('click', { bubbles: true }))
return true
}
return false
}

//(re)connect the elevation labels to the slider after the container is moved (was not handled by default)
function rebindElevationLabel() {
const slider = window.jQuery ? window.jQuery('#sldHeightRange') : null
const label = document.getElementById('lblHeightRange')
if (!slider || !slider.length || !label) return

const update = () => {
const low = slider.slider('values', 0)
const high = slider.slider('values', 1)
label.textContent = `${low.toFixed(2)} to ${high.toFixed(2)}`
}

// Adjust slider limits
slider.slider({
min: -10000,
max: 0,
values: [-10000, 0]
})

//clear any old namespaced handlers and attach fresh ones
slider.off('slide.custom slidestop.custom change.custom')
slider.on('slide.custom', update)
slider.on('slidestop.custom change.custom', update)
update()
}

//Move the elevation range section to the customised "Elevation Control" section
function moveElevationContainer() {
const target = document.getElementById('elevation_list')
const elevationContainer = document.querySelector(
'#materials\\.elevation_container'
)
if (!elevationContainer) return false
target.appendChild(elevationContainer)
rebindElevationLabel()
return true
}

//initiate and orchestrate all funcitons to render the Evelation control section of the sidebar propperly
export function initElevationControls(viewer) {
//Creates the section
createElevationPanel(viewer)

//Only move the ElevationContainer if the source container to exist
const menu =
document.getElementById('potree_menu') ||
document.getElementById('menu') ||
document.body
const observer = new MutationObserver(() => {
const found = document.querySelector('#materials\\.elevation_container')
if (found) {
observer.disconnect()
//Move and rebind once it exists
const ok = moveElevationContainer()
if (!ok) console.warn('[Elevation] moveElevationContainer failed')
}
})
observer.observe(menu, { childList: true, subtree: true })

//Trigger Potree to build Materials UI by selecting the first point cloud (if nothing selected yet)
autoSelectFirstPointCloud()
}
Loading

0 comments on commit 4e42db5

Please sign in to comment.