Merge pull request CesiumGS#1017 from AnalyticalGraphicsInc/terrainIn…

…spector

Add TerrainInspector app.

Apps/TerrainInspector/TerrainInspector.css

@@ -0,0 +1,126 @@
+@import url(../../Source/Widgets/widgets.css);
+
+body {
+    background: #000;
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 9pt;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.fullSize {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
+#loadingOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.9;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
+.sandcastle-loading #loadingOverlay {
+    display: block;
+}
+
+#loadingOverlay h1 {
+    text-align: center;
+    position: relative;
+    top: 50%;
+    margin-top: -0.5em;
+}
+
+#toolbar {
+    margin: 5px;
+    padding: 2px 5px;
+    position: absolute;
+}
+
+.top,.bottom {
+    display: block;
+    position: absolute;
+    border: none;
+    width: 100%;
+    height: 50%;
+    box-sizing: border-box;
+}
+
+.top {
+    top: 0;
+    left: 0;
+    border-bottom: solid 2px #888;
+}
+
+.bottom {
+    bottom: 0;
+    left: 0;
+}
+
+#topToolbar,#bottomToolbar {
+    margin: 5px;
+    padding: 2px 5px;
+    position: absolute;
+    left: 0;
+}
+
+#topToolbar {
+    top: 0;
+}
+
+#bottomToolbar {
+    top: 50%;
+}
+
+.button {
+    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
+    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
+    box-shadow:inset 0px 1px 0px 0px #ffffff;
+
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #dedede));
+    background:-moz-linear-gradient(top, #f9f9f9 5%, #dedede 100%);
+    background:-webkit-linear-gradient(top, #f9f9f9 5%, #dedede 100%);
+    background:-o-linear-gradient(top, #f9f9f9 5%, #dedede 100%);
+    background:-ms-linear-gradient(top, #f9f9f9 5%, #dedede 100%);
+    background:linear-gradient(to bottom, #f9f9f9 5%, #dedede 100%);
+
+    border-radius:3px;
+    border:1px solid #dcdcdc;
+    display:inline-block;
+    padding:5px 10px;
+    margin:3px;
+    text-decoration:none;
+    text-shadow:0px 1px 0px #ffffff;   
+}
+
+.button:hover {
+    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dedede), color-stop(1, #f9f9f9));
+    background:-moz-linear-gradient(top, #dedede 5%, #f9f9f9 100%);
+    background:-webkit-linear-gradient(top, #dedede 5%, #f9f9f9 100%);
+    background:-o-linear-gradient(top, #dedede 5%, #f9f9f9 100%);
+    background:-ms-linear-gradient(top, #dedede 5%, #f9f9f9 100%);
+    background:linear-gradient(to bottom, #dedede 5%, #f9f9f9 100%);
+}
+
+.button:active {
+    position:relative;
+    top:1px;
+}
+
+.claro .dijitTitlePaneContentOuter {
+    background-color: rgba(255, 255, 255, 0.7);
+    color: black;
+    text-shadow: 0 0 5px #fff;
+}

Apps/TerrainInspector/TerrainInspector.js

@@ -0,0 +1,188 @@
+/*global require,document*/
+require([
+    'Cesium',
+    'dojo/dom-construct',
+    'dijit/TitlePane',
+    'dijit/form/Button',
+    'dijit/form/CheckBox'
+], function(
+    Cesium,
+    domConstruct,
+    TitlePane,
+    Button,
+    CheckBox) {
+    "use strict";
+
+    var viewer = new Cesium.Viewer('cesiumContainer');
+
+    var scene = viewer.scene;
+    var centralBody = scene.getPrimitives().getCentralBody();
+    centralBody.depthTestAgainstTerrain = true;
+
+    centralBody.terrainProvider = new Cesium.CesiumTerrainProvider({
+        url : 'http://cesium.agi.com/smallterrain'
+    });
+
+    var tp = new TitlePane({
+        title: 'Terrain Debugging',
+        id:'title-pane',
+        content: '<table id="debuggingTable"></table>',
+        open: true
+    });
+    document.getElementById("toolbar").appendChild(tp.domNode);
+
+    domConstruct.place('<tr><td id="wireFrameToggle"></td><td>Wireframe</td></tr>\
+                        <tr><td id="updateLodToggle"></td><td>Suspend LOD update</td></tr>\
+                        <tr><td id="showTileCoordinatesToggle"></td><td>Show tile coordinates</td></tr>\
+                        <tr><td id="selectTileButton" colspan="2"></td></tr>\
+                        <tr><td id="selectedTileLabel" colspan="2">None</td></tr>\
+                        <tr><td id="selectedTileExtentSWLabel" colspan="2">&nbsp;</td></tr>\
+                        <tr><td id="selectedTileExtentNELabel" colspan="2">&nbsp;</td></tr>\
+                        <tr><td id="boundingSphereToggle"></td><td>Show bounding sphere of selected tile</td></tr>\
+                        <tr><td id="renderSelectedTileOnlyToggle"></td><td>Render selected tile only</td></tr>', 'debuggingTable');
+
+    new CheckBox({
+        checked: centralBody._surface.wireframe,
+        onChange: function(b) {
+            centralBody._surface._debug.wireframe = b;
+
+        }
+    }).placeAt('wireFrameToggle');
+
+    var suspendLodCheckbox = new CheckBox({
+        checked: centralBody._surface._debug.suspendLodUpdate,
+        onChange: function(b) {
+            centralBody._surface._debug.suspendLodUpdate = b;
+            if (!b) {
+                renderSelectedTileOnlyCheckbox.set("checked", false);
+            }
+        }
+    });
+    suspendLodCheckbox.placeAt('updateLodToggle');
+
+    var tileBoundariesLayer;
+
+    new CheckBox({
+        checked: Cesium.defined(tileBoundariesLayer),
+        onChange: function(b) {
+            if (b && !Cesium.defined(tileBoundariesLayer)) {
+                tileBoundariesLayer = centralBody.getImageryLayers().addImageryProvider(new Cesium.TileCoordinatesImageryProvider({
+                    tilingScheme : centralBody.terrainProvider.getTilingScheme()
+                }));
+            } else if (!b && Cesium.defined(tileBoundariesLayer)) {
+                centralBody.getImageryLayers().remove(tileBoundariesLayer);
+                tileBoundariesLayer = undefined;
+            }
+
+        }
+    }).placeAt('showTileCoordinatesToggle');
+
+    var selectingTile = false;
+    var showBoundingSphere = true;
+    var selectedTile;
+    var renderSelectedTileOnly = false;
+
+    function selectTile(event) {
+        selectedTile = undefined;
+
+        var ellipsoid = centralBody.getEllipsoid();
+        var cartesian = scene.getCamera().controller.pickEllipsoid({x: event.clientX, y: event.clientY}, ellipsoid);
+
+        if (Cesium.defined(cartesian)) {
+            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
+
+            // Find a tile containing this position.
+
+            var tilesRendered = centralBody._surface._tilesToRenderByTextureCount;
+            for (var textureCount = 0; !selectedTile && textureCount < tilesRendered.length; ++textureCount) {
+                var tilesRenderedByTextureCount = tilesRendered[textureCount];
+                if (!Cesium.defined(tilesRenderedByTextureCount)) {
+                    continue;
+                }
+
+                for (var tileIndex = 0; !selectedTile && tileIndex < tilesRenderedByTextureCount.length; ++tileIndex) {
+                    var tile = tilesRenderedByTextureCount[tileIndex];
+                    if (tile.extent.contains(cartographic)) {
+                        selectedTile = tile;
+                    }
+                }
+            }
+        }
+
+        var text;
+        var sw;
+        var ne;
+        if (selectedTile) {
+            text = 'L: ' + selectedTile.level + ' X: ' + selectedTile.x + ' Y: ' + selectedTile.y;
+            sw = 'SW corner: ' + selectedTile.extent.west + ', ' + selectedTile.extent.south;
+            ne = 'NE corner: ' + selectedTile.extent.east + ', ' + selectedTile.extent.north;
+        } else {
+            text = 'None';
+            sw = '&nbsp;';
+            ne = '&nbsp;';
+        }
+
+        if (showBoundingSphere) {
+            centralBody._surface._debug.boundingSphereTile = selectedTile;
+        }
+
+        document.getElementById('selectedTileLabel').innerHTML = text;
+        document.getElementById('selectedTileExtentSWLabel').innerHTML = sw;
+        document.getElementById('selectedTileExtentNELabel').innerHTML = ne;
+
+        viewer.cesiumWidget.canvas.removeEventListener('mousedown', selectTile, false);
+        selectingTile = false;
+    }
+
+    new Button({
+        label: "Select tile...",
+        showLabel: true,
+        onClick: function() {
+            selectingTile = !selectingTile;
+            if (selectingTile) {
+                document.getElementById("selectedTileLabel").innerHTML = 'Click a tile!';
+                viewer.cesiumWidget.canvas.addEventListener('mousedown', selectTile, false);
+            } else {
+                viewer.cesiumWidget.canvas.removeEventListener('mousedown', selectTile, false);
+            }
+        }
+    }).placeAt('selectTileButton');
+
+    new CheckBox({
+        checked: showBoundingSphere,
+        onChange: function(b) {
+            showBoundingSphere = b;
+            if (!showBoundingSphere) {
+                centralBody._surface._debug.boundingSphereTile = undefined;
+            } else {
+                centralBody._surface._debug.boundingSphereTile = selectedTile;
+            }
+        }
+    }).placeAt('boundingSphereToggle');
+
+    var renderSelectedTileOnlyCheckbox = new CheckBox({
+        checked: renderSelectedTileOnly,
+        onChange: function(b) {
+            if (!b) {
+                suspendLodCheckbox.set("checked", false);
+            } else {
+                suspendLodCheckbox.set("checked", true);
+                centralBody._surface._tilesToRenderByTextureCount = [];
+
+                if (Cesium.defined(selectedTile)) {
+                    var readyTextureCount = 0;
+                    var tileImageryCollection = selectedTile.imagery;
+                    for (var i = 0, len = tileImageryCollection.length; i < len; ++i) {
+                        var tileImagery = tileImageryCollection[i];
+                        if (Cesium.defined(tileImagery.readyImagery) && tileImagery.readyImagery.imageryLayer.alpha !== 0.0) {
+                            ++readyTextureCount;
+                        }
+                    }
+
+                    centralBody._surface._tilesToRenderByTextureCount[readyTextureCount] = [selectedTile];
+                }
+            }
+        }
+    });
+    renderSelectedTileOnlyCheckbox.placeAt('renderSelectedTileOnlyToggle');
+});

Apps/TerrainInspector/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <title>Terrain Inspector</title>
+    <script type="text/javascript">
+    var dojoConfig = {
+        baseUrl : '../../Source',
+        packages: [
+            { name: 'dojo', location: '../ThirdParty/dojo-release-1.9.1/dojo' },
+            { name: 'dijit', location: '../ThirdParty/dojo-release-1.9.1/dijit' }
+        ]
+    };
+	</script>
+    <script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../ThirdParty/dojo-release-1.9.1/dojo/dojo.js"></script>
+    <script src="TerrainInspector.js"></script>
+    <link rel="stylesheet" href="../../ThirdParty/dojo-release-1.9.1/dijit/themes/claro/claro.css" type="text/css">
+    <link rel="stylesheet" href="TerrainInspector.css" type="text/css">
+</head>
+<body class="claro">
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="toolbar">
+</div>
+</body>
+</html>