Skip to content

Commit

Permalink
refactor(PointCloudExamples): move to lil gui
Browse files Browse the repository at this point in the history
  • Loading branch information
@ftoromanoff
ftoromanoff committed Jul 31, 2024
1 parent d091207 commit 641ed6d
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 54 deletions.
6 changes: 3 additions & 3 deletions examples/copc_simple_loader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
</head>
<body>
<div id="description">Specify the URL of a COPC file to load:
Expand All @@ -38,7 +38,7 @@

const uri = new URL(location);

const gui = new dat.GUI();
const gui = new lil.GUI();

const viewerDiv = document.getElementById('viewerDiv');
const view = new itowns.View('EPSG:4326', viewerDiv);
Expand Down Expand Up @@ -96,7 +96,7 @@
const source = new itowns.CopcSource({ url });

if (layer) {
gui.removeFolder(layer.debugUI);
layer.debugUI.destroy()
view.removeLayer('COPC');
view.notifyChange();
layer.delete();
Expand Down
4 changes: 2 additions & 2 deletions examples/entwine_3d_loader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
</head>
<body>
<div id="description">Specify the URL of a Entwine Point Tree to load:
Expand All @@ -31,7 +31,7 @@
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script type="text/javascript">
var debugGui = new dat.GUI();
var debugGui = new lil.GUI();
var viewerDiv = document.getElementById('viewerDiv');

var view = new itowns.GlobeView(viewerDiv);
Expand Down
16 changes: 10 additions & 6 deletions examples/entwine_simple_loader.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
</head>
<body>
<div id="description">Specify the URL of a Entwine Point Tree to load:
Expand All @@ -33,7 +33,7 @@
<script type="text/javascript">
itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');

var debugGui = new dat.GUI();
var debugGui = new lil.GUI();
var viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';
var view = new itowns.View('EPSG:3946', viewerDiv);
Expand Down Expand Up @@ -84,12 +84,13 @@
}
}

let eptName;
function loadEPT(url, options) {
eptSource = new itowns.EntwinePointTileSource({ url });

if (eptLayer) {
debugGUI.removeFolder(eptLayer.debugUI);
view.removeLayer('Entwine Point Tile');
eptLayer.debugUI.destroy();
view.removeLayer(eptName);
view.notifyChange();
eptLayer.delete();
}
Expand All @@ -99,7 +100,10 @@
crs: view.referenceCrs,
...options,
}
eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', config);

eptName = url.split('/').pop()
eptName = eptName[0].toUpperCase() + eptName.slice(1);
eptLayer = new itowns.EntwinePointTileLayer(eptName, config);

view.addLayer(eptLayer).then(onLayerReady);

Expand All @@ -121,7 +125,7 @@
}

function loadGrandLyon() {
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept';
readEPTURL();
}

Expand Down
68 changes: 25 additions & 43 deletions utils/debug/PointCloudDebug.js
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,55 @@
import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'Renderer/PointsMaterial';

const folderName = 'Styling';

function getController(gui, name) {
let controller = null;
const controllers = gui.__folders.Styling.__controllers;
for (let i = 0; i < controllers.length; i += 1) {
const c = controllers[i];
if (c.property === name || c.name === name) {
controller = c;
break;
}
}
const controllers = gui.folders.filter(f => f._title === folderName)[0].controllers;
const controller = controllers.filter(c => (c.property === name || c.name === name))[0];
return controller;
}

function hideController(gui, name) {
const controller = getController(gui, name);
if (controller) {
controller.__li.style.display = 'none';
}
}

function showController(gui, name) {
const controller = getController(gui, name);
if (controller) {
controller.__li.style.display = '';
}
}

function setupControllerVisibily(gui, displayMode, sizeMode) {
displayMode = parseInt(displayMode, 10);
if ([PNTS_MODE.INTENSITY, PNTS_MODE.ELEVATION, PNTS_MODE.SCAN_ANGLE].includes(displayMode)) {
showController(gui, 'gradient');
getController(gui, 'gradient').show();
} else {
hideController(gui, 'gradient');
getController(gui, 'gradient').hide();
}
if (PNTS_MODE.INTENSITY === displayMode) {
showController(gui, 'minIntensityRange');
showController(gui, 'maxIntensityRange');
getController(gui, 'minIntensityRange').show();
getController(gui, 'maxIntensityRange').show();
} else {
hideController(gui, 'minIntensityRange');
hideController(gui, 'maxIntensityRange');
getController(gui, 'minIntensityRange').hide();
getController(gui, 'maxIntensityRange').hide();
}
if (PNTS_MODE.ELEVATION === displayMode) {
showController(gui, 'minElevationRange');
showController(gui, 'maxElevationRange');
getController(gui, 'minElevationRange').show();
getController(gui, 'maxElevationRange').show();
} else {
hideController(gui, 'minElevationRange');
hideController(gui, 'maxElevationRange');
getController(gui, 'minElevationRange').hide();
getController(gui, 'maxElevationRange').hide();
}
if (PNTS_MODE.SCAN_ANGLE === displayMode) {
showController(gui, 'minAngleRange');
showController(gui, 'maxAngleRange');
getController(gui, 'minAngleRange').show();
getController(gui, 'maxAngleRange').show();
} else {
hideController(gui, 'minAngleRange');
hideController(gui, 'maxAngleRange');
getController(gui, 'minAngleRange').hide();
getController(gui, 'maxAngleRange').hide();
}

sizeMode = parseInt(sizeMode, 10);
if (sizeMode === PNTS_SIZE_MODE.VALUE) {
hideController(gui, 'minAttenuatedSize');
hideController(gui, 'maxAttenuatedSize');
getController(gui, 'minAttenuatedSize').hide();
getController(gui, 'maxAttenuatedSize').hide();
} else {
showController(gui, 'minAttenuatedSize');
showController(gui, 'maxAttenuatedSize');
getController(gui, 'minAttenuatedSize').show();
getController(gui, 'maxAttenuatedSize').show();
}
}

export default {
initTools(view, layer, datUi) {
datUi.title('Layer Controls');
layer.debugUI = datUi.addFolder(`${layer.id}`);

const update = () => {
Expand All @@ -89,7 +71,7 @@ export default {
layer.dbgDisplayChildren = true;
layer.dbgDisplayParents = true;

const styleUI = layer.debugUI.addFolder('Styling');
const styleUI = layer.debugUI.addFolder(folderName).close();
if (layer.material.mode != undefined) {
const modeNames = Object.keys(PNTS_MODE);
const mode = modeNames.filter(v => PNTS_MODE[v] === layer.material.mode)[0];
Expand Down Expand Up @@ -184,7 +166,7 @@ export default {
}

// UI
const debugUI = layer.debugUI.addFolder('Debug');
const debugUI = layer.debugUI.addFolder('Debug').close();
debugUI.add(layer.bboxes, 'visible').name('Display Bounding Boxes').onChange(update);
debugUI.add(layer, 'dbgStickyNode').name('Sticky node name').onChange(update);
debugUI.add(layer, 'dbgDisplaySticky').name('Display sticky node').onChange(update);
Expand Down

0 comments on commit 641ed6d

Please sign in to comment.