cesium 0.13.2 → 0.14.0

data/app/assets/javascripts/Widgets/Dojo/CesiumViewerWidget.html

@@ -1,7 +1,5 @@
 <div data-dojo-attach-point="cesiumNode" class="cw-node">
     <canvas data-dojo-attach-point="canvas" class="cw-canvas"></canvas>
-    <div data-dojo-type="dijit.form.Button" data-dojo-attach-point="timeLabel"
-        data-dojo-props="'class':'cw-timeLabel', showLabel: true, label:''"></div>
     <div class="cw-viewButtons">
         <div data-dojo-attach-point="viewHomeButton" data-dojo-type="dijit.form.Button"
             data-dojo-props="iconClass: 'cw-viewIcon', showLabel: false, label:'Home View'"></div>
@@ -11,10 +9,8 @@
             data-dojo-props="iconClass: 'cw-viewIcon cw-view3D', showLabel: false, checked: true, label:'3D View'"></div>
         <div data-dojo-attach-point="viewColumbus" data-dojo-type="dijit.form.ToggleButton"
             data-dojo-props="iconClass: 'cw-viewIcon cw-viewColumbus', showLabel: false, label:'Columbus View'"></div>
-        <div data-dojo-attach-point="viewFullscreen" data-dojo-type="dijit.form.Button"
-            data-dojo-props="iconClass: 'cw-viewIcon cw-viewFullscreen', showLabel: false, label:'Toggle Full Screen'"></div>
         <div data-dojo-attach-point="imagery" data-dojo-type="dijit.form.DropDownButton"
-            data-dojo-props="iconClass: 'cw-bingIcon', showLabel: false, label:'Bing'">
+            data-dojo-props="showLabel: true, label:'Imagery'">
             <div data-dojo-type="dijit.TooltipDialog">
                 <span data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imageryAerial"
                     data-dojo-props="'class':'cw-imagerySelector', showLabel: true, checked: true, label:'Bing Maps Aerial'">
@@ -23,30 +19,13 @@
                 <span data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imageryRoad"
                     data-dojo-props="'class':'cw-imagerySelector', showLabel: true, label:'Bing Maps Road'"></span> <span
                     data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imagerySingleTile"
-                    data-dojo-props="'class':'cw-imagerySelector', showLabel: true, label:'No Streaming Imagery'"></span>
+                    data-dojo-props="'class':'cw-imagerySelector', showLabel: true, label:'Single Tile'"></span>
             </div>
         </div>
     </div>
-    <div class="cw-timelineContainer">
-        <div data-dojo-attach-point="timelineWidget" data-dojo-type="Cesium.TimelineWidget"
-            data-dojo-props="'class':'cw-timeline'"></div>
-    </div>
-    <div class="cw-animButtons">
-        <div data-dojo-attach-point="animReset" data-dojo-type="dijit.form.Button"
-            data-dojo-props="iconClass: 'cw-animationIcon', showLabel: false, label:'Reset'"></div>
-        <div data-dojo-attach-point="animReverse" data-dojo-type="dijit.form.ToggleButton"
-            data-dojo-props="iconClass: 'cw-animationIcon cw-animReverse', showLabel: false, label:'Play Reverse'"></div>
-        <div data-dojo-attach-point="animPause" data-dojo-type="dijit.form.ToggleButton"
-            data-dojo-props="iconClass: 'cw-animationIcon cw-animPause', showLabel: false, label:'Pause'"></div>
-        <div data-dojo-attach-point="animPlay" data-dojo-type="dijit.form.ToggleButton"
-            data-dojo-props="iconClass: 'cw-animationIcon cw-animPlay', showLabel: false, checked: true, label:'Play'"></div>
-        <div data-dojo-attach-point="animSlow" data-dojo-type="dijit.form.Button"
-            data-dojo-props="iconClass: 'cw-animationIcon cw-animSlow', showLabel: false, label:'Play Slower'"></div>
-        <div data-dojo-attach-point="animFast" data-dojo-type="dijit.form.Button"
-            data-dojo-props="iconClass: 'cw-animationIcon cw-animFast', showLabel: false, label:'Play Faster'"></div>
-        <span data-dojo-attach-point="speedIndicator" class="cw-speedIndicator"></span>
-    </div>
-    <a class="cw-cesiumLogo" data-dojo-attach-point="cesiumLogo" href="http://cesium.agi.com/" target="_blank"></a> <span
-        data-dojo-attach-point="containerNode"></span>
+    <div data-dojo-attach-point="timelineContainer" class="cw-timelineContainer"></div>
+    <div data-dojo-attach-point="animationContainer" class="cw-animationContainer"></div>
+    <div data-dojo-attach-point="fullscreenContainer" class="cw-fullscreenContainer"></div>
+    <a class="cw-cesiumLogo" data-dojo-attach-point="cesiumLogo" href="http://cesium.agi.com/" target="_blank"></a>
     <div class="cw-loading" data-dojo-attach-point="loading"></div>
 </div>

data/app/assets/javascripts/Widgets/Dojo/CesiumViewerWidget.js

@@ -14,18 +14,21 @@ define([
         'dijit/form/ToggleButton',
         'dijit/form/DropDownButton',
         'dijit/TooltipDialog',
-        './TimelineWidget',
+        '../Timeline/Timeline',
+        '../Animation/Animation',
+        '../Animation/AnimationViewModel',
+        '../Fullscreen/FullscreenWidget',
+        '../ClockViewModel',
         '../../Core/defaultValue',
         '../../Core/loadJson',
+        '../../Core/binarySearch',
         '../../Core/BoundingRectangle',
         '../../Core/Clock',
         '../../Core/ClockStep',
         '../../Core/ClockRange',
         '../../Core/Extent',
-        '../../Core/AnimationController',
         '../../Core/Ellipsoid',
         '../../Core/Iso8601',
-        '../../Core/Fullscreen',
         '../../Core/computeSunPosition',
         '../../Core/ScreenSpaceEventHandler',
         '../../Core/FeatureDetection',
@@ -72,18 +75,21 @@ define([
         ToggleButton,
         DropDownButton,
         TooltipDialog,
-        TimelineWidget,
+        Timeline,
+        Animation,
+        AnimationViewModel,
+        FullscreenWidget,
+        ClockViewModel,
         defaultValue,
         loadJson,
+        binarySearch,
         BoundingRectangle,
         Clock,
         ClockStep,
         ClockRange,
         Extent,
-        AnimationController,
         Ellipsoid,
         Iso8601,
-        Fullscreen,
         computeSunPosition,
         ScreenSpaceEventHandler,
         FeatureDetection,
@@ -187,6 +193,8 @@ define([
          * var endUserOptions = {
          *     'source' : 'file.czml', // The relative URL of the CZML file to load at startup.
          *     'lookAt' : '123abc',    // The CZML ID of the object to track at startup.
+         *     'theme'  : 'light',     // Use the dark-text-on-light-background theme.
+         *     'loop'   : 0,           // Disable looping at end time, pause there instead.
          *     'stats'  : 1,           // Enable the FPS performance display.
          *     'debug'  : 1,           // Full WebGL error reporting at substantial performance cost.
          * };
@@ -232,18 +240,31 @@ define([
          * @see CesiumViewerWidget#resize
          */
         resizeWidgetOnWindowResize: true,
+
         /**
-         * The HTML element to place into fullscreen mode when the corresponding
-         * button is pressed.  If undefined, only the widget itself will
-         * go into fullscreen mode.  By specifying another container, such
-         * as document.body, this property allows an application to retain
-         * any overlaid or surrounding elements when in fullscreen.
+         * The fullscreen widget, configured to put only the viewer widget
+         * into fullscreen mode by default.
          *
-         * @type {Object}
+         * @type {FullscreenWidget}
+         * @memberof CesiumViewerWidget.prototype
+         */
+        fullscreen: undefined,
+
+        /**
+         * The animation widget.
+         *
+         * @type {Animation}
+         * @memberof CesiumViewerWidget.prototype
+         */
+        animation: undefined,
+
+        /**
+         * The timeline widget.
+         *
+         * @type {Timeline}
          * @memberof CesiumViewerWidget.prototype
-         * @default undefined
          */
-        fullscreenElement : undefined,
+        timeline: undefined,
 
         // for Dojo use only
         constructor : function() {
@@ -288,6 +309,8 @@ define([
                 frustum.top = frustum.right * (height / width);
                 frustum.bottom = -frustum.top;
             }
+
+            this.setLogoOffset(this.cesiumLogo.offsetWidth + this.cesiumLogo.offsetLeft + 10, 28);
         },
 
         /**
@@ -483,14 +506,6 @@ define([
             }
         },
 
-        _updateSpeedIndicator : function() {
-            if (this.animationController.isAnimating()) {
-                this.speedIndicator.innerHTML = this.clock.multiplier + 'x realtime';
-            } else {
-                this.speedIndicator.innerHTML = this.clock.multiplier + 'x realtime (paused)';
-            }
-        },
-
         /**
          * Apply the animation settings from a CZML buffer.
          * @function
@@ -498,25 +513,52 @@ define([
          */
         setTimeFromBuffer : function() {
             var clock = this.clock;
-
-            this.animReverse.set('checked', false);
-            this.animPause.set('checked', true);
-            this.animPlay.set('checked', false);
+            var shuttleRingTicks = AnimationViewModel.defaultTicks.slice(0);
 
             var availability = this.dynamicObjectCollection.computeAvailability();
             if (availability.start.equals(Iso8601.MINIMUM_VALUE)) {
                 clock.startTime = new JulianDate();
                 clock.stopTime = clock.startTime.addDays(1);
                 clock.clockRange = ClockRange.UNBOUNDED;
+                clock.multiplier = 60.0;
             } else {
                 clock.startTime = availability.start;
                 clock.stopTime = availability.stop;
-                clock.clockRange = ClockRange.LOOP;
+                if (typeof this.endUserOptions.loop === 'undefined' || this.endUserOptions.loop === '1') {
+                    clock.clockRange = ClockRange.LOOP_STOP;
+                } else {
+                    clock.clockRange = ClockRange.CLAMPED;
+                }
+                var totalSeconds = clock.startTime.getSecondsDifference(clock.stopTime);
+                var multiplier = Math.round(totalSeconds / 120.0);
+                if (multiplier < 1) {
+                    multiplier = 1;
+                }
+
+                var index = binarySearch(shuttleRingTicks, multiplier, function(left, right) {
+                    return left - right;
+                });
+                if (index < 0) {
+                    index = ~index;
+                }
+                if (index !== shuttleRingTicks.length) {
+                    clock.multiplier = shuttleRingTicks[index];
+                } else {
+                    shuttleRingTicks.push(multiplier);
+                    clock.multiplier = multiplier;
+                }
+
+                var fastestSpeed = Math.round(totalSeconds / 10.0);
+                if (fastestSpeed > shuttleRingTicks[shuttleRingTicks.length - 1]) {
+                    shuttleRingTicks.push(fastestSpeed);
+                }
             }
 
-            clock.multiplier = 60;
+            this.animationViewModel.setShuttleRingTicks(shuttleRingTicks);
+
             clock.currentTime = clock.startTime;
-            this.timelineControl.zoomTo(clock.startTime, clock.stopTime);
+            clock.clockStep = ClockStep.SYSTEM_CLOCK_MULTIPLIER;
+            this.timeline.zoomTo(clock.startTime, clock.stopTime);
         },
 
         /**
@@ -628,11 +670,13 @@ define([
             }
             this._started = true;
 
-            this.resize();
-
             on(canvas, 'contextmenu', event.stop);
             on(canvas, 'selectstart', event.stop);
 
+            if (typeof widget.endUserOptions.theme === 'undefined' || widget.endUserOptions.theme !== 'light') {
+                widget.cesiumNode.className += ' cesium-darker';
+            }
+
             if (typeof widget.endUserOptions.debug !== 'undefined' && widget.endUserOptions.debug) {
                 this.enableWebGLDebugging = true;
             }
@@ -651,9 +695,6 @@ define([
 
             var centralBody = this.centralBody = new CentralBody(ellipsoid);
 
-            // This logo is replicated by the imagery selector button, so it's hidden here.
-            centralBody.logoOffset = new Cartesian2(-100, -100);
-
             this._configureCentralBodyImagery();
 
             scene.getPrimitives().setCentralBody(centralBody);
@@ -712,25 +753,24 @@ define([
                 on(dropBox, 'dragexit', event.stop);
             }
 
-            var currentTime = new JulianDate();
-            if (typeof this.animationController === 'undefined') {
-                if (typeof this.clock === 'undefined') {
-                    this.clock = new Clock({
-                        startTime : currentTime.addDays(-0.5),
-                        stopTime : currentTime.addDays(0.5),
-                        currentTime : currentTime,
-                        clockStep : ClockStep.SYSTEM_CLOCK_DEPENDENT,
-                        multiplier : 1
-                    });
-                }
-                this.animationController = new AnimationController(this.clock);
-            } else {
-                this.clock = this.animationController.clock;
+            this.fullscreen = new FullscreenWidget(this.fullscreenContainer, this.cesiumNode);
+
+            var animationViewModel = this.animationViewModel;
+            if (typeof animationViewModel === 'undefined') {
+                var clockViewModel = new ClockViewModel();
+                clockViewModel.owner = this;
+                clockViewModel.shouldAnimate(true);
+                animationViewModel = new AnimationViewModel(clockViewModel);
             }
+            this.animationViewModel = animationViewModel;
+            this.clockViewModel = animationViewModel.clockViewModel;
 
-            var animationController = this.animationController;
-            var dynamicObjectCollection = this.dynamicObjectCollection = new DynamicObjectCollection();
+            this.clock = this.clockViewModel.clock;
             var clock = this.clock;
+
+            this.animation = new Animation(this.animationContainer, animationViewModel);
+
+            var dynamicObjectCollection = this.dynamicObjectCollection = new DynamicObjectCollection();
             var transitioner = this.sceneTransitioner = new SceneTransitioner(scene);
             this.visualizers = VisualizerCollection.createCzmlStandardCollection(scene, dynamicObjectCollection);
 
@@ -742,93 +782,25 @@ define([
                 widget.enableStatistics(true);
             }
 
-            this._lastTimeLabelClock = clock.currentTime;
-            this._lastTimeLabelDate = Date.now();
-            this.timeLabelElement = this.timeLabel.containerNode;
-            this.timeLabelElement.innerHTML = clock.currentTime.toDate().toUTCString();
-
-            var animReverse = this.animReverse;
-            var animPause = this.animPause;
-            var animPlay = this.animPlay;
-
-            on(this.animReset, 'Click', function() {
-                animationController.reset();
-                animReverse.set('checked', false);
-                animPause.set('checked', true);
-                animPlay.set('checked', false);
-            });
-
-            function onAnimPause() {
-                animationController.pause();
-                animReverse.set('checked', false);
-                animPause.set('checked', true);
-                animPlay.set('checked', false);
-            }
-
-            on(animPause, 'Click', onAnimPause);
-
-            on(animReverse, 'Click', function() {
-                animationController.playReverse();
-                animReverse.set('checked', true);
-                animPause.set('checked', false);
-                animPlay.set('checked', false);
-            });
-
-            on(animPlay, 'Click', function() {
-                animationController.play();
-                animReverse.set('checked', false);
-                animPause.set('checked', false);
-                animPlay.set('checked', true);
-            });
-
-            on(widget.animSlow, 'Click', function() {
-                animationController.slower();
-            });
-
-            on(widget.animFast, 'Click', function() {
-                animationController.faster();
-            });
-
             function onTimelineScrub(e) {
                 widget.clock.currentTime = e.timeJulian;
-                onAnimPause();
+                widget.clock.shouldAnimate = false;
             }
 
-            var timelineWidget = widget.timelineWidget;
-            timelineWidget.clock = widget.clock;
-            timelineWidget.setupCallback = function(t) {
-                widget.timelineControl = t;
-                t.addEventListener('settime', onTimelineScrub, false);
-                t.zoomTo(clock.startTime, clock.stopTime);
-            };
-            timelineWidget.setupTimeline();
+            var timeline = new Timeline(this.timelineContainer, widget.clock);
+            widget.timeline = timeline;
+            timeline.addEventListener('settime', onTimelineScrub, false);
+            timeline.zoomTo(clock.startTime, clock.stopTime);
 
             var viewHomeButton = widget.viewHomeButton;
             var view2D = widget.view2D;
             var view3D = widget.view3D;
             var viewColumbus = widget.viewColumbus;
-            var viewFullscreen = widget.viewFullscreen;
 
             view2D.set('checked', false);
             view3D.set('checked', true);
             viewColumbus.set('checked', false);
 
-            if (Fullscreen.isFullscreenEnabled()) {
-                on(document, Fullscreen.getFullscreenChangeEventName(), function() {
-                    widget.resize();
-                });
-
-                on(viewFullscreen, 'Click', function() {
-                    if (Fullscreen.isFullscreen()) {
-                        Fullscreen.exitFullscreen();
-                    } else {
-                        Fullscreen.requestFullscreen(defaultValue(widget.fullscreenElement, widget.cesiumNode));
-                    }
-                });
-            } else {
-                domStyle.set(viewFullscreen.domNode, 'display', 'none');
-            }
-
             on(viewHomeButton, 'Click', function() {
                 widget.viewHome();
             });
@@ -857,7 +829,6 @@ define([
             var imageryRoad = widget.imageryRoad;
             var imagerySingleTile = widget.imagerySingleTile;
             var imageryOptions = [imageryAerial, imageryAerialWithLabels, imageryRoad, imagerySingleTile];
-            var bingHtml = imagery.containerNode.innerHTML;
 
             imagery.startup();
 
@@ -865,10 +836,8 @@ define([
                 return function() {
                     if (style) {
                         widget.setStreamingImageryMapStyle(style);
-                        imagery.containerNode.innerHTML = bingHtml;
                     } else {
                         widget.enableStreamingImagery(false);
-                        imagery.containerNode.innerHTML = 'Imagery';
                     }
 
                     imageryOptions.forEach(function(o) {
@@ -892,6 +861,8 @@ define([
 
             this._camera3D = this.scene.getCamera().clone();
 
+            this.resize();
+
             if (this.autoStartRenderLoop) {
                 this.startRenderLoop();
             }
@@ -1079,24 +1050,21 @@ define([
          * @memberof CesiumViewerWidget.prototype
          * @param {JulianDate} currentTime - The date and time in the scene of the frame to be rendered
          */
-        update : function(currentTime) {
-
-            this._updateSpeedIndicator();
-            this.timelineControl.updateFromClock();
-            this.visualizers.update(currentTime);
-
-            if ((Math.abs(currentTime.getSecondsDifference(this._lastTimeLabelClock)) >= 1.0) ||
-                    ((Date.now() - this._lastTimeLabelDate) > 200)) {
-                this.timeLabelElement.innerHTML = currentTime.toDate().toUTCString();
-                this._lastTimeLabelClock = currentTime;
-                this._lastTimeLabelDate = Date.now();
+        update : function() {
+            var currentTime;
+            if (this.clockViewModel.owner === this) {
+                currentTime = this.clock.tick();
+            } else {
+                currentTime = this.clock.currentTime;
             }
+            this.visualizers.update(currentTime);
 
             // Update the camera to stay centered on the selected object, if any.
             var viewFromTo = this._viewFromTo;
             if (typeof viewFromTo !== 'undefined') {
                 viewFromTo.update(currentTime);
             }
+            return currentTime;
         },
 
         /**
@@ -1164,10 +1132,21 @@ define([
          */
         autoStartRenderLoop : true,
 
+        /**
+         * Updates and renders the scene to reflect the current time.
+         *
+         * @function
+         * @memberof CesiumViewerWidget.prototype
+         */
+        updateAndRender : function() {
+            this.initializeFrame();
+            this.render(this.update());
+        },
+
         /**
          * This is a simple render loop that can be started if there is only one <code>CesiumViewerWidget</code>
          * on your page.  If you wish to customize your render loop, avoid this function and instead
-         * use code similar to one of the following examples.
+         * use code similar to the following example.
          *
          * @function
          * @memberof CesiumViewerWidget.prototype
@@ -1175,61 +1154,19 @@ define([
          * @see CesiumViewerWidget#autoStartRenderLoop
          * @example
          * // This takes the place of startRenderLoop for a single widget.
-         *
-         * var animationController = widget.animationController;
-         * function updateAndRender() {
-         *     var currentTime = animationController.update();
-         *     widget.initializeFrame();
-         *     widget.update(currentTime);
-         *     widget.render(currentTime);
-         *     requestAnimationFrame(updateAndRender);
-         * }
-         * requestAnimationFrame(updateAndRender);
-         * @example
-         * // This example requires widget1 and widget2 to share an animationController
-         * // (for example, widget2's constructor was called with a copy of widget1's
-         * // animationController).
-         *
-         * function updateAndRender() {
-         *     var currentTime = animationController.update();
-         *     widget1.initializeFrame();
-         *     widget2.initializeFrame();
-         *     widget1.update(currentTime);
-         *     widget2.update(currentTime);
-         *     widget1.render(currentTime);
-         *     widget2.render(currentTime);
-         *     requestAnimationFrame(updateAndRender);
-         * }
-         * requestAnimationFrame(updateAndRender);
-         * @example
-         * // This example uses separate animationControllers for widget1 and widget2.
-         * // These widgets can animate at different rates and pause individually.
-         *
-         * function updateAndRender() {
-         *     var time1 = widget1.animationController.update();
-         *     var time2 = widget2.animationController.update();
-         *     widget1.initializeFrame();
-         *     widget2.initializeFrame();
-         *     widget1.update(time1);
-         *     widget2.update(time2);
-         *     widget1.render(time1);
-         *     widget2.render(time2);
-         *     requestAnimationFrame(updateAndRender);
-         * }
-         * requestAnimationFrame(updateAndRender);
+         *  var widget = this;
+         *  function updateAndRender() {
+         *      widget.updateAndRender();
+         *      requestAnimationFrame(updateAndRender);
+         *  }
+         *  requestAnimationFrame(updateAndRender);
          */
         startRenderLoop : function() {
             var widget = this;
-            var animationController = widget.animationController;
-
             function updateAndRender() {
-                var currentTime = animationController.update();
-                widget.initializeFrame();
-                widget.update(currentTime);
-                widget.render(currentTime);
+                widget.updateAndRender();
                 requestAnimationFrame(updateAndRender);
             }
-
             requestAnimationFrame(updateAndRender);
         }
     });