Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit cfae5dc

Browse files
ftoromanoffftoromanoff
committed
refactor(PointCloudExamples): move to lil gui
1 parent 182cb7d commit cfae5dc

File tree

4 files changed

+40
-54
lines changed

4 files changed

+40
-54
lines changed

‎examples/copc_simple_loader.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</style>
1616

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

3939
const uri = new URL(location);
4040

41-
const gui = new dat.GUI();
41+
const gui = new lil.GUI();
4242

4343
const viewerDiv = document.getElementById('viewerDiv');
4444
const view = new itowns.View('EPSG:4326', viewerDiv);
@@ -103,7 +103,7 @@
103103
const source = new itowns.CopcSource({ url });
104104

105105
if (layer) {
106-
gui.removeFolder(layer.debugUI);
106+
layer.debugUI.destroy()
107107
view.removeLayer('COPC');
108108
view.notifyChange();
109109
layer.delete();

‎examples/entwine_3d_loader.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</style>
1515

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

3737
var view = new itowns.GlobeView(viewerDiv);

‎examples/entwine_simple_loader.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</style>
1515

1616
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
17+
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
1818
</head>
1919
<body>
2020
<div id="description">Specify the URL of a Entwine Point Tree to load:
@@ -33,7 +33,7 @@
3333
<script type="text/javascript">
3434
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');
3535

36-
var debugGui = new dat.GUI();
36+
var debugGui = new lil.GUI();
3737
var viewerDiv = document.getElementById('viewerDiv');
3838
viewerDiv.style.display = 'block';
3939
var view = new itowns.View('EPSG:3946', viewerDiv);
@@ -84,12 +84,13 @@
8484
}
8585
}
8686

87+
let eptName;
8788
function loadEPT(url, options) {
8889
eptSource = new itowns.EntwinePointTileSource({ url });
8990

9091
if (eptLayer) {
91-
debugGui.removeFolder(eptLayer.debugUI);
92-
view.removeLayer('Entwine Point Tile');
92+
eptLayer.debugUI.destroy();
93+
view.removeLayer(eptName);
9394
view.notifyChange();
9495
eptLayer.delete();
9596
}
@@ -99,7 +100,10 @@
99100
crs: view.referenceCrs,
100101
...options,
101102
}
102-
eptLayer = new itowns.EntwinePointTileLayer('Entwine Point Tile', config);
103+
104+
eptName = url.split('/').pop()
105+
eptName = eptName[0].toUpperCase() + eptName.slice(1);
106+
eptLayer = new itowns.EntwinePointTileLayer(eptName, config);
103107

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

@@ -121,7 +125,7 @@
121125
}
122126

123127
function loadGrandLyon() {
124-
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/';
128+
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept';
125129
readEPTURL();
126130
}
127131

‎packages/Debug/src/PointCloudDebug.js‎

Lines changed: 25 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,55 @@
11
import { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE } from 'itowns';
22

3+
const folderName = 'Styling';
4+
35
function getController(gui, name) {
4-
let controller = null;
5-
const controllers = gui.__folders.Styling.__controllers;
6-
for (let i = 0; i < controllers.length; i += 1) {
7-
const c = controllers[i];
8-
if (c.property === name || c.name === name) {
9-
controller = c;
10-
break;
11-
}
12-
}
6+
const controllers = gui.folders.filter(f => f._title === folderName)[0].controllers;
7+
const controller = controllers.filter(c => (c.property === name || c.name === name))[0];
138
return controller;
149
}
1510

16-
function hideController(gui, name) {
17-
const controller = getController(gui, name);
18-
if (controller) {
19-
controller.__li.style.display = 'none';
20-
}
21-
}
22-
23-
function showController(gui, name) {
24-
const controller = getController(gui, name);
25-
if (controller) {
26-
controller.__li.style.display = '';
27-
}
28-
}
29-
3011
function setupControllerVisibily(gui, displayMode, sizeMode) {
3112
displayMode = parseInt(displayMode, 10);
3213
if ([PNTS_MODE.INTENSITY, PNTS_MODE.ELEVATION, PNTS_MODE.SCAN_ANGLE].includes(displayMode)) {
33-
showController(gui, 'gradient');
14+
getController(gui, 'gradient').show();
3415
} else {
35-
hideController(gui, 'gradient');
16+
getController(gui, 'gradient').hide();
3617
}
3718
if (PNTS_MODE.INTENSITY === displayMode) {
38-
showController(gui, 'minIntensityRange');
39-
showController(gui, 'maxIntensityRange');
19+
getController(gui, 'minIntensityRange').show();
20+
getController(gui, 'maxIntensityRange').show();
4021
} else {
41-
hideController(gui, 'minIntensityRange');
42-
hideController(gui, 'maxIntensityRange');
22+
getController(gui, 'minIntensityRange').hide();
23+
getController(gui, 'maxIntensityRange').hide();
4324
}
4425
if (PNTS_MODE.ELEVATION === displayMode) {
45-
showController(gui, 'minElevationRange');
46-
showController(gui, 'maxElevationRange');
26+
getController(gui, 'minElevationRange').show();
27+
getController(gui, 'maxElevationRange').show();
4728
} else {
48-
hideController(gui, 'minElevationRange');
49-
hideController(gui, 'maxElevationRange');
29+
getController(gui, 'minElevationRange').hide();
30+
getController(gui, 'maxElevationRange').hide();
5031
}
5132
if (PNTS_MODE.SCAN_ANGLE === displayMode) {
52-
showController(gui, 'minAngleRange');
53-
showController(gui, 'maxAngleRange');
33+
getController(gui, 'minAngleRange').show();
34+
getController(gui, 'maxAngleRange').show();
5435
} else {
55-
hideController(gui, 'minAngleRange');
56-
hideController(gui, 'maxAngleRange');
36+
getController(gui, 'minAngleRange').hide();
37+
getController(gui, 'maxAngleRange').hide();
5738
}
5839

5940
sizeMode = parseInt(sizeMode, 10);
6041
if (sizeMode === PNTS_SIZE_MODE.VALUE) {
61-
hideController(gui, 'minAttenuatedSize');
62-
hideController(gui, 'maxAttenuatedSize');
42+
getController(gui, 'minAttenuatedSize').hide();
43+
getController(gui, 'maxAttenuatedSize').hide();
6344
} else {
64-
showController(gui, 'minAttenuatedSize');
65-
showController(gui, 'maxAttenuatedSize');
45+
getController(gui, 'minAttenuatedSize').show();
46+
getController(gui, 'maxAttenuatedSize').show();
6647
}
6748
}
6849

6950
export default {
7051
initTools(view, layer, datUi) {
52+
datUi.title('Layer Controls');
7153
layer.debugUI = datUi.addFolder(`${layer.id}`);
7254

7355
const update = () => {
@@ -89,7 +71,7 @@ export default {
8971
layer.dbgDisplayChildren = true;
9072
layer.dbgDisplayParents = true;
9173

92-
const styleUI = layer.debugUI.addFolder('Styling');
74+
const styleUI = layer.debugUI.addFolder(folderName).close();
9375
if (layer.material.mode != undefined) {
9476
const modeNames = Object.keys(PNTS_MODE);
9577
const mode = modeNames.filter(v => PNTS_MODE[v] === layer.material.mode)[0];
@@ -201,7 +183,7 @@ export default {
201183
}
202184

203185
// UI
204-
const debugUI = layer.debugUI.addFolder('Debug');
186+
const debugUI = layer.debugUI.addFolder('Debug').close();
205187
debugUI.add(layer.bboxes, 'visible').name('Display Bounding Boxes').onChange(update);
206188
debugUI.add(layer, 'dbgStickyNode').name('Sticky node name').onChange(update);
207189
debugUI.add(layer, 'dbgDisplaySticky').name('Display sticky node').onChange(update);

0 commit comments

Comments
 (0)