Animation widget

.settings/.jsdtscope

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <classpath>
-	<classpathentry excluding="Source/ThirdParty/Tween.js|Source/ThirdParty/Uri.js|Source/ThirdParty/sprintf.js|Source/ThirdParty/when.js|Source/Workers/cesiumWorkerBootstrapper.js|ThirdParty/" kind="src" path=""/>
+	<classpathentry excluding="Source/ThirdParty/|Source/Workers/cesiumWorkerBootstrapper.js|ThirdParty/" kind="src" path=""/>
 	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
 	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.baseBrowserLibrary/StandardBrowser/html5"/>
 	<classpathentry kind="output" path=""/>

.settings/com.eclipsesource.jshint.ui.prefs

@@ -1,5 +1,5 @@
 eclipse.preferences.version=1
-excluded=Apps/Sandcastle/Cesium-hint.js\:Source/ThirdParty/Chain.js\:Source/ThirdParty/Tween.js\:Source/ThirdParty/Uri.js\:Source/ThirdParty/sprintf.js\:Source/ThirdParty/when.js\:Source/Workers/cesiumWorkerBootstrapper.js\:ThirdParty//*
+excluded=Apps/Sandcastle/Cesium-hint.js\:Source/ThirdParty//*\:Source/Workers/cesiumWorkerBootstrapper.js\:ThirdParty//*
 included=//*.js
 options=bitwise \: false,\r\ncamelcase \: false,\r\ncurly \: true,\r\neqeqeq \: true,\r\nforin \: true,\r\nimmed \: false,\r\nlatedef \: true,\r\nnewcap \: true,\r\nnoarg \: true,\r\nnoempty \: false,\r\nnonew \: true,\r\nplusplus \: false,\r\nquotmark \: false,\r\nregexp \: false,\r\nundef \: true,\r\nunused \: false,\r\nstrict \: true,\r\ntrailing \: true,\r\nasi \: false,\r\nboss \: false,\r\ndebug \: false,\r\neqnull \: false,\r\nes5 \: false,\r\nesnext \: false,\r\nevil \: false,\r\nexpr \: false,\r\nfuncscope \: false,\r\nglobalstrict \: false,\r\niterator \: false,\r\nlastsemic \: false,\r\nlaxbreak \: false,\r\nlaxcomma \: false,\r\nloopfunc \: false,\r\nmultistr \: false,\r\nonecase \: false,\r\nproto \: false,\r\nregexdash \: false,\r\nscripturl \: false,\r\nsmarttabs \: false,\r\nshadow \: false,\r\nsub \: false,\r\nsupernew \: false,\r\nvalidthis \: false,\r\nbrowser \: true
 projectSpecificOptions=true

Apps/Sandcastle/gallery/Client CZML.html

@@ -125,7 +125,7 @@
         clock.startTime = availability.start.clone();
         clock.currentTime = availability.start.clone();
         clock.stopTime = availability.stop.clone();
-        clock.clockRange = Cesium.ClockRange.LOOP;
+        clock.clockRange = Cesium.ClockRange.LOOP_STOP;
 
         return visualizers;
     }
@@ -137,18 +137,15 @@
     widget.startup();
 
     var visualizers = addCZML(czml, widget.scene, widget.clock);
-    widget.timelineControl.zoomTo(widget.clock.startTime, widget.clock.stopTime);
+    widget.timeline.zoomTo(widget.clock.startTime, widget.clock.stopTime);
 
     // Let's make the playback speed faster
     widget.clock.multiplier = 300.0;
 
     // Custom render loop adapted from CesiumViewerWidget.startRenderLoop()
-    var animationController = widget.animationController;
-
     function updateAndRender() {
-        var currentTime = animationController.update();
         widget.initializeFrame();
-        widget.update(currentTime);
+        var currentTime = widget.update();
 
         // Update the visualizers...
         visualizers.update(currentTime);

Apps/Sandcastle/gallery/Two Viewer Widgets.html

@@ -40,8 +40,8 @@
     "use strict";
 
     // This example shows two widgets that share a single
-    // animationController.  It is also possible to use
-    // separate animationControllers to show a scene at
+    // animation view model.  It is also possible to use
+    // separate view models  to show a scene at
     // different times.
 
     var endUserOptions = {
@@ -53,20 +53,16 @@
         endUserOptions : endUserOptions,
         autoStartRenderLoop : false
     });
-    widget1.placeAt("cesiumContainerTop");
+    widget1.placeAt('cesiumContainerTop');
     widget1.startup();
 
-    // Save off a copy of widget1's animationController
-    var animationController = widget1.animationController;
-
-    // Now create widget2, passing in the
-    // existing animationController to be shared.
+    // Use widget1's animationViewModel in widget2
     var widget2 = new CesiumViewerWidget({
-        animationController : animationController,
+        animationViewModel : widget1.animation.viewModel,
         endUserOptions : endUserOptions,
         autoStartRenderLoop : false
     });
-    widget2.placeAt("cesiumContainerBottom");
+    widget2.placeAt('cesiumContainerBottom');
     widget2.startup();
 
     // Switch widget2 to Columbus View.
@@ -75,15 +71,8 @@
     // Now both widgets are created.  A custom render loop is
     // needed to drive them both from requestAnimationFrame.
     function updateAndRender() {
-        // Get the time from the shared controller, then
-        // update and render both widgets.
-        var currentTime = animationController.update();
-        widget1.initializeFrame();
-        widget2.initializeFrame();
-        widget1.update(currentTime);
-        widget2.update(currentTime);
-        widget1.render(currentTime);
-        widget2.render(currentTime);
+        widget1.updateAndRender();
+        widget2.updateAndRender();
         requestAnimationFrame(updateAndRender);
     }
 

Apps/TimelineDemo/TimelineDemo.js

@@ -2,22 +2,32 @@
 define(['dojo',
         'dijit/dijit',
         'Core/Clock',
+        'Core/ClockRange',
         'Core/Color',
         'Core/JulianDate',
         'Core/TimeInterval',
-        'Widgets/Timeline'
+        'Core/requestAnimationFrame',
+        'Widgets/Animation/Animation',
+        'Widgets/ClockViewModel',
+        'Widgets/Animation/AnimationViewModel',
+        'Widgets/Timeline/Timeline'
     ], function(
          dojo,
          dijit,
          Clock,
+         ClockRange,
          Color,
          JulianDate,
          TimeInterval,
+         requestAnimationFrame,
+         Animation,
+         ClockViewModel,
+         AnimationViewModel,
          Timeline) {
     "use strict";
 
     var startDatePart, endDatePart, startTimePart, endTimePart;
-    var timeline, clock, endBeforeStart, timeElement;
+    var timeline, clock, endBeforeStart, containerElement, animationViewModel, animation;
 
     function updateScrubTime(julianDate) {
         document.getElementById('mousePos').innerHTML = timeline.makeLabel(julianDate) + ' UTC';
@@ -26,6 +36,7 @@ define(['dojo',
     function handleSetTime(e) {
         if (typeof timeline !== 'undefined') {
             var scrubJulian = e.timeJulian;
+            clock.shouldAnimate = false;
             clock.currentTime = scrubJulian;
             updateScrubTime(scrubJulian);
         }
@@ -60,26 +71,41 @@ define(['dojo',
             //'<br/>Epoch: ' + timeline.makeLabel(e.epochJulian) + ' UTC' +
             '<br/>Start: ' + timeline.makeLabel(e.startJulian) + ' UTC' +
             '<br/>&nbsp;Stop: ' + timeline.makeLabel(e.endJulian) + ' UTC' +
-            '<br/>Span: ' + spanToString(e.totalSpan) +
-            '<br/>Tic: ' + spanToString(e.mainTicSpan);
+            '<br/>&nbsp;Span: ' + spanToString(e.totalSpan) +
+            '<br/>&nbsp;&nbsp;Tic: ' + spanToString(e.mainTicSpan);
         updateScrubTime(clock.currentTime);
     }
 
     function makeTimeline(startJulian, scrubJulian, endJulian) {
         clock = new Clock({
             startTime : startJulian,
             currentTime : scrubJulian,
-            stopTime : endJulian
+            stopTime : endJulian,
+            clockRange : ClockRange.LOOP_STOP,
+            multiplier : 60,
+            shouldAnimate : true
         });
 
         timeline = new Timeline('time1', clock);
         timeline.addEventListener('settime', handleSetTime, false);
         timeline.addEventListener('setzoom', handleSetZoom, false);
 
-        timeline.addTrack(new TimeInterval(startJulian, startJulian.addSeconds(60*60)), 8, Color.RED, new Color(0.75, 0.75, 0.75, 0.5));
-        timeline.addTrack(new TimeInterval(endJulian.addSeconds(-60*60), endJulian), 8, Color.GREEN);
+        timeline.addTrack(new TimeInterval(startJulian, startJulian.addSeconds(60 * 60)), 8, Color.RED, new Color(0.55, 0.55, 0.55, 0.25));
+        timeline.addTrack(new TimeInterval(endJulian.addSeconds(-60 * 60), endJulian), 8, Color.LIME);
         var middle = startJulian.getSecondsDifference(endJulian) / 4;
-        timeline.addTrack(new TimeInterval(startJulian.addSeconds(middle), startJulian.addSeconds(middle * 3)), 8, Color.BLUE, new Color(0.75, 0.75, 0.75, 0.5));
+        timeline.addTrack(new TimeInterval(startJulian.addSeconds(middle), startJulian.addSeconds(middle * 3)), 8, Color.DEEPSKYBLUE, new Color(0.55, 0.55, 0.55, 0.25));
+
+        var clockViewModel = new ClockViewModel(clock);
+        animationViewModel = new AnimationViewModel(clockViewModel);
+        animation = new Animation(dojo.byId('animationWidget'), animationViewModel);
+
+        function tick() {
+            var time = clock.tick();
+            timeline.updateFromClock();
+            updateScrubTime(time);
+            requestAnimationFrame(tick);
+        }
+        tick();
     }
 
     // Adjust start/end dates in reaction to any calendar/time clicks
@@ -97,10 +123,10 @@ define(['dojo',
         if (startJulian && endJulian) {
             if (startJulian.getSecondsDifference(endJulian) < 0.1) {
                 endBeforeStart.style.display = 'block';
-                timeElement.style.visibility = 'hidden';
+                containerElement.style.visibility = 'hidden';
             } else {
                 endBeforeStart.style.display = 'none';
-                timeElement.style.visibility = 'visible';
+                containerElement.style.visibility = 'visible';
                 if (!timeline) {
                     makeTimeline(startJulian, startJulian, endJulian);
                 }
@@ -146,14 +172,38 @@ define(['dojo',
         newDatesSelected();
     }
 
+    // React to theme changes
+    //
+    function setThemeLight() {
+        document.body.className = 'claro';
+        dijit.byId('themeSelector').set('label', 'Theme: Light');
+        animation.applyThemeChanges();
+    }
+    function setThemeDark() {
+        document.body.className = 'claro cesium-darker';
+        dijit.byId('themeSelector').set('label', 'Theme: Dark');
+        animation.applyThemeChanges();
+    }
+    function cycleTheme() {
+        if (document.body.className === 'claro') {
+            setThemeDark();
+        } else {
+            setThemeLight();
+        }
+    }
+
     dojo.ready(function() {
         endBeforeStart = document.getElementById('endBeforeStart');
-        timeElement = document.getElementById('time1');
+        containerElement = document.getElementById('timelineAndAnimation');
         dojo.connect(dijit.byId('startCal'), 'onChange', newStartDateSelected);
         dojo.connect(dijit.byId('endCal'), 'onChange', newEndDateSelected);
         dojo.connect(dijit.byId('startTimeSel'), 'onChange', newStartTimeSelected);
         dojo.connect(dijit.byId('endTimeSel'), 'onChange', newEndTimeSelected);
 
+        dojo.connect(dijit.byId('themeSelector'), 'onClick', cycleTheme);
+        dojo.connect(dijit.byId('themeLight'), 'onClick', setThemeLight);
+        dojo.connect(dijit.byId('themeDark'), 'onClick', setThemeDark);
+
         dijit.byId('startTimeSel').set('value', 'T00:00:00');
         dijit.byId('endTimeSel').set('value', 'T24:00:00');
 

Apps/TimelineDemo/boot.js

@@ -28,6 +28,9 @@ require({
     'dijit/form/Button',
     'dijit/Calendar',
     'dijit/form/TimeTextBox',
+    'dijit/form/ComboButton',
+    'dijit/Menu',
+    'dijit/MenuItem',
     'TimelineDemo/TimelineDemo',
     'dojo/domReady!'
 ], function(