Replace CesiumViewerWidget

Apps/CesiumViewer/CesiumViewer.css

@@ -1,5 +1,15 @@
-@import	url('../../ThirdParty/dojo-release-1.8.3-src/dijit/themes/claro/claro.css');
-@import url('../../Source/Widgets/Dojo/CesiumViewerWidget.css');
+@import url(../../Source/Widgets/Viewer/Viewer.css);
+@import url(../../Source/Widgets/Viewer/lighter.css);
+@import url(../../Source/Widgets/checkForChromeFrame.css);
+
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    background: #000;
+}
 
 .fullWindow {
     position: absolute;
@@ -12,3 +22,17 @@
     padding: 0;
     font-family: sans-serif;
 }
+
+.loadingIndicator {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -33px;
+    margin-left: -33px;
+    width: 66px;
+    height: 66px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(Images/ajax-loader.gif);
+}

Apps/CesiumViewer/CesiumViewer.js

@@ -1,41 +1,112 @@
 /*global define*/
 define([
-        'dojo/_base/window',
-        'dojo/dom-class',
-        'dojo/io-query',
-        'dojo/parser',
-        'dojo/ready',
-        'Widgets/Dojo/checkForChromeFrame',
-        'Widgets/Dojo/CesiumViewerWidget'
+        'DynamicScene/CzmlDataSource',
+        'Scene/PerformanceDisplay',
+        'Widgets/checkForChromeFrame',
+        'Widgets/Viewer/Viewer',
+        'Widgets/Viewer/viewerDragDropMixin',
+        'Widgets/Viewer/viewerDynamicObjectMixin',
+        'domReady!'
     ], function(
-        win,
-        domClass,
-        ioQuery,
-        parser,
-        ready,
+        CzmlDataSource,
+        PerformanceDisplay,
         checkForChromeFrame,
-        CesiumViewerWidget) {
+        Viewer,
+        viewerDragDropMixin,
+        viewerDynamicObjectMixin) {
     "use strict";
     /*global console*/
 
-    ready(function() {
-        parser.parse();
+    /*
+     * 'debug'  : true/false,   // Full WebGL error reporting at substantial performance cost.
+     * 'lookAt' : CZML id,      // The CZML ID of the object to track at startup.
+     * 'source' : 'file.czml',  // The relative URL of the CZML file to load at startup.
+     * 'stats'  : true,         // Enable the FPS performance display.
+     * 'theme'  : 'lighter',    // Use the dark-text-on-light-background theme.
+     */
+    var endUserOptions = {};
+    var queryString = window.location.search.substring(1);
+    if (queryString !== '') {
+        var params = queryString.split('&');
+        for ( var i = 0, len = params.length; i < len; ++i) {
+            var param = params[i];
+            var keyValuePair = param.split('=');
+            if (keyValuePair.length > 1) {
+                endUserOptions[keyValuePair[0]] = decodeURIComponent(keyValuePair[1].replace(/\+/g, ' '));
+            }
+        }
+    }
 
-        checkForChromeFrame();
+    var loadingIndicator = document.getElementById('loadingIndicator');
 
-        var endUserOptions = {};
-        if (window.location.search) {
-            endUserOptions = ioQuery.queryToObject(window.location.search.substring(1));
+    checkForChromeFrame('cesiumContainer').then(function(prompting) {
+        if (!prompting) {
+            startup();
+        } else {
+            loadingIndicator.style.display = 'none';
         }
+    });
 
-        var widget = new CesiumViewerWidget({
-            endUserOptions : endUserOptions,
-            enableDragDrop : true
+    function startup() {
+        var viewer = new Viewer('cesiumContainer');
+        viewer.extend(viewerDragDropMixin);
+        viewer.extend(viewerDynamicObjectMixin);
+
+        viewer.onDropError.addEventListener(function(dropHandler, name, error) {
+            console.log(error);
+            window.alert(error);
         });
-        widget.placeAt('cesiumContainer');
-        widget.startup();
-        widget.fullscreen.viewModel.fullscreenElement = document.body;
 
-        domClass.remove(win.body(), 'loading');
-    });
+        var scene = viewer.scene;
+        var context = scene.getContext();
+        if (endUserOptions.debug) {
+            context.setValidateShaderProgram(true);
+            context.setValidateFramebuffer(true);
+            context.setLogShaderCompilation(true);
+            context.setThrowOnWebGLError(true);
+        }
+
+        if (typeof endUserOptions.source !== 'undefined') {
+            var source = new CzmlDataSource();
+            source.loadUrl(endUserOptions.source).then(function() {
+                viewer.dataSources.add(source);
+
+                var dataClock = source.getClock();
+                if (typeof dataClock !== 'undefined') {
+                    dataClock.clone(viewer.clock);
+                    viewer.timeline.updateFromClock();
+                    viewer.timeline.zoomTo(dataClock.startTime, dataClock.stopTime);
+                }
+
+                if (typeof endUserOptions.lookAt !== 'undefined') {
+                    var dynamicObject = source.getDynamicObjectCollection().getObject(endUserOptions.lookAt);
+                    if (typeof dynamicObject !== 'undefined') {
+                        viewer.trackedObject = dynamicObject;
+                    } else {
+                        window.alert('No object with id ' + endUserOptions.lookAt + ' exists in the provided source.');
+                    }
+                }
+            }, function(e) {
+                window.alert(e);
+            }).always(function() {
+                loadingIndicator.style.display = 'none';
+            });
+        } else {
+            loadingIndicator.style.display = 'none';
+        }
+
+        if (endUserOptions.stats) {
+            scene.getPrimitives().add(new PerformanceDisplay());
+        }
+
+        var theme = endUserOptions.theme;
+        if (typeof theme !== 'undefined') {
+            if (endUserOptions.theme === 'lighter') {
+                document.body.classList.add('cesium-lighter');
+                viewer.animation.applyThemeChanges();
+            } else {
+                window.alert('Unknown theme: ' + theme);
+            }
+        }
+    }
 });

Apps/CesiumViewer/CesiumViewerStartup.js

@@ -1,44 +1,9 @@
 /*global require*/
 require({
-    baseUrl : '../..',
-    packages : [{
-        name : 'dojo',
-        location : 'ThirdParty/dojo-release-1.8.3-src/dojo'
-    }, {
-        name : 'dijit',
-        location : 'ThirdParty/dojo-release-1.8.3-src/dijit'
-    }, {
-        name : 'Assets',
-        location : 'Source/Assets'
-    }, {
-        name : 'Core',
-        location : 'Source/Core'
-    }, {
-        name : 'DynamicScene',
-        location : 'Source/DynamicScene'
-    }, {
-        name : 'Renderer',
-        location : 'Source/Renderer'
-    }, {
-        name : 'Scene',
-        location : 'Source/Scene'
-    }, {
-        name : 'Shaders',
-        location : 'Source/Shaders'
-    }, {
-        name : 'ThirdParty',
-        location : 'Source/ThirdParty'
-    }, {
-        name : 'Widgets',
-        location : 'Source/Widgets'
-    }, {
-        name : 'Workers',
-        location : 'Source/Workers'
-    }, {
-        name : 'CesiumViewer',
-        location : 'Apps/CesiumViewer'
-    }]
-}, [
-    'CesiumViewer/CesiumViewer'
-], function() {
+    baseUrl : '../../Source',
+    paths : {
+        CesiumViewer : '../Apps/CesiumViewer',
+        domReady : '../ThirdParty/requirejs-2.1.6/domReady'
+    }
+}, ['CesiumViewer/CesiumViewer'], function() {
 });

Apps/CesiumViewer/index.html

@@ -12,11 +12,10 @@
 <title>Cesium Viewer</title>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 <link rel="stylesheet" href="CesiumViewer.css" media="screen">
-
-<script data-dojo-config="async:1,tlmSiblingOfDojo:0" src="../../ThirdParty/dojo-release-1.8.3-src/dojo/dojo.js"></script>
-<script src="CesiumViewerStartup.js"></script>
+<script data-main="CesiumViewerStartup" src="../../ThirdParty/requirejs-2.1.6/require.js"></script>
 </head>
-<body class="claro" style="background: #000;">
+<body style="background: #000;">
     <div id="cesiumContainer" class="fullWindow"></div>
+    <div id="loadingIndicator" class="loadingIndicator"></div>
 </body>
 </html>

Apps/Sandcastle/CesiumSandcastle.js

@@ -18,7 +18,6 @@ require({
     }]
 }, [
     'Sandcastle/LinkButton',
-    'Widgets/Dojo/CesiumViewerWidget',
     'dojo/mouse',
     'dojo/on',
     'dojo/parser',
@@ -50,7 +49,6 @@ require({
     'dojo/domReady!'
 ], function(
     LinkButton,
-    CesiumViewerWidget,
     mouse,
     on,
     parser,
@@ -69,7 +67,6 @@ require({
 
     parser.parse();
 
-    window.CesiumViewerWidget = CesiumViewerWidget; // for autocomplete.
     fx.fadeOut({
         node : 'loading',
         onEnd : function() {

Apps/Sandcastle/ThirdParty/Cesium-hint.js

@@ -62,7 +62,7 @@
   var funcProps = "prototype apply call bind".split(" ");
   var javascriptKeywords = ("break case catch continue debugger default delete do else false finally for function " +
                   "if in instanceof new null return switch throw true try typeof var void while with").split(" ");
-  var knownGlobals = "Cesium CesiumViewerWidget dojo dijit dojox".split(" ");
+  var knownGlobals = "Cesium dojo dijit dojox".split(" ");
 
   CodeMirror.cesiumHint = function(editor) {
     return scriptHint(editor, javascriptKeywords,