feature(debug): enhancement debug gui.

iTowns · Sep 16, 2019 · 0aa6e42 · 0aa6e42
1 parent ab20f4c
commit 0aa6e42
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 16 deletions.
diff --git a/examples/js/GUI/GuiTools.js b/examples/js/GUI/GuiTools.js
@@ -41,7 +41,8 @@ function GuiTools(domId, view, w) {
     viewerDiv.appendChild(this.gui.domElement);
     this.colorGui = this.gui.addFolder('Color Layers');
     this.elevationGui = this.gui.addFolder('Elevation Layers');
-
+    this.elevationGui.hide();
+    this.colorGui.hide();
     if (view) {
         this.view = view;
         view.addEventListener('layers-order-changed', (function refreshColorGui() {
@@ -75,6 +76,7 @@ GuiTools.prototype.addLayersGUI = function fnAddLayersGUI() {
 
 GuiTools.prototype.addImageryLayerGUI = function addImageryLayerGUI(layer) {
     if (this.colorGui.hasFolder(layer.id)) { return; }
+    this.colorGui.show();
     var folder = this.colorGui.addFolder(layer.id);
     folder.add({ visible: layer.visible }, 'visible').onChange((function updateVisibility(value) {
         layer.visible = value;
@@ -92,6 +94,7 @@ GuiTools.prototype.addImageryLayerGUI = function addImageryLayerGUI(layer) {
 
 GuiTools.prototype.addElevationLayerGUI = function addElevationLayerGUI(layer) {
     if (this.elevationGui.hasFolder(layer.id)) { return; }
+    this.elevationGui.show();
     var folder = this.elevationGui.addFolder(layer.id);
     folder.add({ frozen: layer.frozen }, 'frozen').onChange(function refreshFrozenGui(value) {
         layer.frozen = value;

diff --git a/examples/source_file_geojson_raster.html b/examples/source_file_geojson_raster.html
@@ -12,6 +12,7 @@
         <div id="viewerDiv" class="viewer"></div>
         <script src="js/GUI/GuiTools.js"></script>
         <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="js/plugins/FeatureToolTip.js"></script>
         <script type="text/javascript">
@@ -85,7 +86,7 @@
                         source: ariegeSource,
                     });
 
-                    return view.addLayer(ariegeLayer);
+                    return view.addLayer(ariegeLayer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
                 }));
 
             promises.push(itowns.Fetcher.json('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson')
@@ -112,14 +113,16 @@
                             source: pyoSource,
                         });
 
-                        return view.addLayer(pyoLayer);
+                        return view.addLayer(pyoLayer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
                     });
                 }));
 
             // Listen for globe full initialisation event
             view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                 Promise.all(promises).then(new FeatureToolTip(view));
             });
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/examples/source_file_gpx_raster.html b/examples/source_file_gpx_raster.html
@@ -12,6 +12,7 @@
         <div id="viewerDiv" class="viewer"></div>
         <script src="js/GUI/GuiTools.js"></script>
         <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="js/plugins/FeatureToolTip.js"></script>
         <script type="text/javascript">
@@ -77,13 +78,15 @@
                         },
                     });
 
-                    return view.addLayer(gpxLayer);
+                    return view.addLayer(gpxLayer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
                 }));
 
             // Listen for globe full initialisation event
             view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                 Promise.all(promises).then(new FeatureToolTip(view));
             });
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/examples/source_file_kml_raster.html b/examples/source_file_kml_raster.html
@@ -12,6 +12,7 @@
         <div id="viewerDiv" class="viewer"></div>
         <script src="js/GUI/GuiTools.js"></script>
         <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script src="js/plugins/FeatureToolTip.js"></script>
         <script type="text/javascript">
@@ -73,6 +74,8 @@
             view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                 Promise.all(promises).then(new FeatureToolTip(view));
             });
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/examples/source_file_shapefile.html b/examples/source_file_shapefile.html
@@ -59,9 +59,10 @@
                         }
                     }});
 
-                view.addLayer(velibLayer);
+                view.addLayer(velibLayer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
 
                 new FeatureToolTip(view, { filterAll: false });
+                debug.createTileDebugUI(menuGlobe.gui, view);
             });
         </script>
     </body>

diff --git a/examples/source_stream_wfs_3d.html b/examples/source_stream_wfs_3d.html
@@ -199,8 +199,8 @@
                 console.info('Globe initialized');
                 view.controls.setTilt(45);
             });
-            var d = new debug.Debug(view, menuGlobe.gui);
-            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
 
             function picking(event) {
                 if(view.controls.isPaused()) {

diff --git a/examples/vector_tile_raster_2d.html b/examples/vector_tile_raster_2d.html
@@ -7,10 +7,14 @@
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
         <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>
     </head>
     <body>
         <div id="viewerDiv"></div>
+        <div id="debug" width="400" height="300"></div>
+        <script src="js/GUI/GuiTools.js"></script>
         <script src="../dist/itowns.js"></script>
+        <script src="../dist/debug.js"></script>
         <script src="js/GUI/LoadingScreen.js"></script>
         <script>
             // # Planar view with one single layer of vector tile
@@ -26,6 +30,7 @@
 
             // Instanciate PlanarView
             var view = new itowns.PlanarView(viewerDiv, extent, { maxSubdivisionLevel: 20 });
+            var menuGlobe = new GuiTools('menuDiv', view, 300);
 
             // eslint-disable-next-line no-new
             new itowns.PlanarControls(view, {
@@ -68,7 +73,7 @@
                     var z = extentDestination.zoom - 2;
                     return extentDestination.zoom, z - z % 4 == data.extent.zoom - 2;
                 }
-                
+
                 var mvtSource = new itowns.TMSSource({
                     // eslint-disable-next-line no-template-curly-in-string
                     url: 'https://osm.oslandia.io/data/v3/${z}/${x}/${y}.pbf',
@@ -94,11 +99,12 @@
                     projection: 'EPSG:3857',
                 });
 
-                view.addLayer(mvtLayer);
+                view.addLayer(mvtLayer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
             });
 
             // Request redraw
             view.notifyChange(true);
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/examples/vector_tile_raster_3d.html b/examples/vector_tile_raster_3d.html
@@ -106,10 +106,7 @@
                 }).catch(console.error);
             });
 
-            if (view.isDebugMode) {
-                const d = new debug.Debug(view, menuGlobe.gui);
-                debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
-            }
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/examples/view_25d_map.html b/examples/view_25d_map.html
@@ -108,8 +108,7 @@
                 menuGlobe = new GuiTools('menuDiv', view);
                 menuGlobe.addImageryLayersGUI(view.getLayers(function gui(l) { return l.isColorLayer; }));
                 menuGlobe.addElevationLayerGUI(wmsElevationLayer);
-                d = new debug.Debug(view, menuGlobe.gui);
-                debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
+                debug.createTileDebugUI(menuGlobe.gui, view);
             }
         </script>
     </body>

diff --git a/examples/view_3d_map.html b/examples/view_3d_map.html
@@ -113,6 +113,8 @@
             view.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
                 updateScaleWidget();
             });
+
+            debug.createTileDebugUI(menuGlobe.gui, view);
         </script>
     </body>
 </html>
diff --git a/utils/debug/TileDebug.js b/utils/debug/TileDebug.js
@@ -7,6 +7,7 @@ import ObjectRemovalHelper from 'Process/ObjectRemovalHelper';
 import TileObjectChart from './charts/TileObjectChart';
 import TileVisibilityChart from './charts/TileVisibilityChart';
 import GeometryDebug from './GeometryDebug';
+import Debug from './Debug';
 import OBBHelper from './OBBHelper';
 
 function applyToNodeFirstMaterial(view, root, layer, cb) {
@@ -50,7 +51,12 @@ function selectTileAt(view, mouseOrEvt, showInfo = true) {
     return selectedNode;
 }
 
-export default function createTileDebugUI(datDebugTool, view, layer, debugInstance) {
+export default function createTileDebugUI(datDebugTool, view, layer, debugInstance, force = false) {
+    if (!view.isDebugMode && !force) {
+        return;
+    }
+    debugInstance = debugInstance || new Debug(view, datDebugTool);
+    layer = layer || view.tileLayer;
     const gui = GeometryDebug.createGeometryDebugUI(datDebugTool, view, layer);
 
     const objectChardId = `${layer.id}-nb-objects`;