cesium 0.13.2 → 0.14.0

data/app/assets/javascripts/Widgets/Fullscreen/FullscreenViewModel.js

@@ -0,0 +1,88 @@
+/*global define*/
+define(['../createCommand',
+        '../../Core/defaultValue',
+        '../../Core/Fullscreen',
+        '../../ThirdParty/knockout'
+        ], function(
+            createCommand,
+            defaultValue,
+            Fullscreen,
+            knockout) {
+    "use strict";
+
+    /**
+     * The ViewModel for {@link FullscreenWidget}.
+     * @alias FullscreenViewModel
+     * @constructor
+     *
+     * @param {Element} [fullscreenElement=document.body] The element to be placed into fullscreen mode.
+     *
+     * @see FullscreenWidget
+     */
+    var FullscreenViewModel = function(fullscreenElement) {
+        var that = this;
+        var isFullscreen = knockout.observable(Fullscreen.isFullscreen());
+        var tmp = knockout.observable(Fullscreen.isFullscreenEnabled());
+        var isFullscreenEnabled = knockout.computed({
+            read : function() {
+                return tmp();
+            },
+            write : function(value) {
+                tmp(value && Fullscreen.isFullscreenEnabled());
+            }
+        });
+
+        /**
+         * Indicates if fullscreen functionality is possible.
+         * @type Observable
+         *
+         * @see Fullscreen.isFullscreenEnabled
+         */
+        this.isFullscreenEnabled = isFullscreenEnabled;
+
+        /**
+         * Indicates if fullscreen functionality is currently toggled.
+         * @type Observable
+         */
+        this.toggled = isFullscreen;
+
+        /**
+         * The command for toggling fullscreen mode.
+         * @type Command
+         */
+        this.command = createCommand(function() {
+            if (Fullscreen.isFullscreen()) {
+                Fullscreen.exitFullscreen();
+            } else {
+                Fullscreen.requestFullscreen(that.fullscreenElement());
+            }
+        }, isFullscreenEnabled);
+
+        /**
+         * The current button tooltip.
+         * @type Observable
+         */
+        this.tooltip = knockout.computed(function() {
+            if (!isFullscreenEnabled()) {
+                return 'Full screen unavailable';
+            }
+            return isFullscreen() ? 'Exit full screen' : 'Full screen';
+        });
+
+        /**
+         * The HTML element to place into fullscreen mode when the
+         * corresponding button is pressed.  By default, the entire page will
+         * enter fullscreen. By specifying another container, only that
+         * container will be in fullscreen.
+         *
+         * @type {Observable}
+         */
+        this.fullscreenElement = knockout.observable(defaultValue(fullscreenElement, document.body));
+
+        document.addEventListener(Fullscreen.getFullscreenChangeEventName(), function() {
+            isFullscreen(Fullscreen.isFullscreen());
+        });
+    };
+
+    return FullscreenViewModel;
+});

data/app/assets/javascripts/Widgets/Fullscreen/FullscreenWidget.css

@@ -0,0 +1,16 @@
+.fullscreen {
+    border: solid 1px #9BBFDF;
+    background-color: #DFEFFF;
+    background-image: url(../Images/enterFullscreen.svg);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+}
+
+.fullscreen:hover {
+    background-color: #A9D5FF;
+}
+
+.fullscreen-exit {
+    background-image: url(../Images/exitFullscreen.svg);
+}

data/app/assets/javascripts/Widgets/Fullscreen/FullscreenWidget.js

@@ -0,0 +1,50 @@
+/*global define*/
+define(['./FullscreenViewModel',
+        '../../Core/DeveloperError',
+        '../../ThirdParty/knockout'
+        ], function(
+         FullscreenViewModel,
+         DeveloperError,
+         knockout) {
+    "use strict";
+
+    /**
+     * A single button widget for toggling fullscreen mode.
+     *
+     * @alias FullscreenWidget
+     * @constructor
+     *
+     * @param {Element} container The parent HTML container node for this widget.
+     * @param {Element} [fullscreenElement=document.body] The element to be placed into fullscreen mode.
+     *
+     * @exception {DeveloperError} container is required.
+     *
+     * @see Fullscreen
+     */
+    var FullscreenWidget = function(container, fullscreenElement) {
+        if (typeof container === 'undefined') {
+            throw new DeveloperError('container is required');
+        }
+
+        /**
+         * Gets the viewModel being used by the widget.
+         * @memberof FullscreenWidget
+         * @type {FullscreenViewModel}
+         */
+        this.viewModel = new FullscreenViewModel(fullscreenElement);
+
+        /**
+         * Gets the actual button created by this widget.
+         * @memberof FullscreenWidget
+         * @type {Element}
+         */
+        this.button = document.createElement('button');
+        this.button.className = 'fullscreen';
+        this.button.setAttribute('data-bind', 'attr: { title: tooltip }, css: { "fullscreen-exit": toggled }, click: command, enable: isFullscreenEnabled');
+        container.appendChild(this.button);
+
+        knockout.applyBindings(this.viewModel, this.button);
+    };
+
+    return FullscreenWidget;
+});

data/app/assets/javascripts/Widgets/Fullscreen/darker.css

@@ -0,0 +1,14 @@
+.cesium-darker .fullscreen {
+    border: solid 1px #888;
+    background-color: #222;
+    background-image: url(../Images/enterFullscreen-darker.svg);
+}
+
+.cesium-darker .fullscreen:hover {
+    border: solid 1px #95CEE6;
+    background-color: #4C8EB8;
+}
+
+.cesium-darker .fullscreen-exit {
+    background-image: url(../Images/exitFullscreen-darker.svg);
+}

data/app/assets/javascripts/Widgets/Images/enterFullscreen-darker.svg

@@ -0,0 +1,18 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="128" width="128" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g stroke="#000" fill-rule="evenodd" transform="translate(0,96)" fill="#FFF">
+  <path d="m84.026,14.373,26.213-0.02988-0.0178-26.266-7.2844-7.2784-0.0883,20.21-20.863-20.855-5.8306,5.8435,20.989,20.991-20.42,0.0811,7.3031,7.3031z" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="0.07400000000000000"/>
+  <path d="m44.014,14.24-26.213-0.02988,0.01775-26.266,7.2844-7.2784,0.08822,20.21,20.863-20.855,5.8306,5.8435-20.989,20.991,20.42,0.08111-7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m44.128-78.398-26.213,0.02988,0.01775,26.266,7.2844,7.2784,0.08822-20.21,20.863,20.855,5.8306-5.8435-20.989-20.991,20.42-0.08111-7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m83.969-78.422,26.213,0.02988-0.0178,26.266-7.2844,7.2784-0.0883-20.21-20.863,20.855-5.8306-5.8435,20.989-20.991-20.42-0.0811,7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+ </g>
+</svg>

data/app/assets/javascripts/Widgets/Images/enterFullscreen.svg

@@ -0,0 +1,18 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="128" width="128" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g stroke="#000" fill-rule="evenodd" transform="translate(0,96)" fill="#000">
+  <path d="m84.026,14.373,26.213-0.02988-0.0178-26.266-7.2844-7.2784-0.0883,20.21-20.863-20.855-5.8306,5.8435,20.989,20.991-20.42,0.0811,7.3031,7.3031z" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="0.07400000000000000"/>
+  <path d="m44.014,14.24-26.213-0.02988,0.01775-26.266,7.2844-7.2784,0.08822,20.21,20.863-20.855,5.8306,5.8435-20.989,20.991,20.42,0.08111-7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m44.128-78.398-26.213,0.02988,0.01775,26.266,7.2844,7.2784,0.08822-20.21,20.863,20.855,5.8306-5.8435-20.989-20.991,20.42-0.08111-7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m83.969-78.422,26.213,0.02988-0.0178,26.266-7.2844,7.2784-0.0883-20.21-20.863,20.855-5.8306-5.8435,20.989-20.991-20.42-0.0811,7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+ </g>
+</svg>

data/app/assets/javascripts/Widgets/Images/exitFullscreen-darker.svg

@@ -0,0 +1,18 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="128" width="128" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g stroke="#000" fill-rule="evenodd" transform="translate(0,96)" fill="#FFF">
+  <path d="m102.37-19.845-26.213,0.02988,0.0178,26.266,7.2844,7.2784,0.0883-20.21,20.863,20.855,5.8306-5.8435-20.989-20.991,20.42-0.0811-7.3031-7.3031z" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="0.07400000000000000"/>
+  <path d="m25.672-19.978,26.213,0.02988-0.01775,26.266-7.2844,7.2784-0.08822-20.21-20.863,20.855-5.8306-5.8435,20.989-20.991-20.42-0.08111,7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m25.787-44.179,26.213-0.02988-0.01775-26.266-7.2844-7.2784-0.08822,20.21-20.863-20.855-5.8306,5.8435,20.989,20.991-20.42,0.08111,7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m102.31-44.203-26.213-0.02988,0.0178-26.266,7.2844-7.2784,0.0883,20.21,20.863-20.855,5.8306,5.8435-20.989,20.991,20.42,0.0811-7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+ </g>
+</svg>

data/app/assets/javascripts/Widgets/Images/exitFullscreen.svg

@@ -0,0 +1,18 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="128" width="128" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g stroke="#000" fill-rule="evenodd" transform="translate(0,96)" fill="#000">
+  <path d="m102.37-19.845-26.213,0.02988,0.0178,26.266,7.2844,7.2784,0.0883-20.21,20.863,20.855,5.8306-5.8435-20.989-20.991,20.42-0.0811-7.3031-7.3031z" stroke-miterlimit="4" stroke-dasharray="none" stroke-width="0.07400000000000000"/>
+  <path d="m25.672-19.978,26.213,0.02988-0.01775,26.266-7.2844,7.2784-0.08822-20.21-20.863,20.855-5.8306-5.8435,20.989-20.991-20.42-0.08111,7.3031-7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m25.787-44.179,26.213-0.02988-0.01775-26.266-7.2844-7.2784-0.08822,20.21-20.863-20.855-5.8306,5.8435,20.989,20.991-20.42,0.08111,7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+  <path d="m102.31-44.203-26.213-0.02988,0.0178-26.266,7.2844-7.2784,0.0883,20.21,20.863-20.855,5.8306,5.8435-20.989,20.991,20.42,0.0811-7.3031,7.3031z" stroke-width="0.07437467000000000"/>
+ </g>
+</svg>

data/app/assets/javascripts/Widgets/Observable.js

@@ -0,0 +1,29 @@
+/*global define*/
+define(['../Core/DeveloperError'], function(DeveloperError) {
+    "use strict";
+
+    /**
+     * Observable properties are used to implement two-way data binding in
+     * Cesium's Model-View-View-Model (MVVM) based widget architecture.
+     *
+     * To retrieve an Observable's value, call it as a function with no
+     * parameters.
+     *
+     * To set an Observable's value, call it as a function with a single
+     * parameter.
+     *
+     * This type describes an interface and is not intended to be instantiated
+     * directly.
+     *
+     * @alias Observable
+     * @constructor
+     *
+     * @see <a href='http://knockoutjs.com/'>Knockout homepage</a>.
+     * @see <a href='https://github.com/AnalyticalGraphicsInc/cesium/wiki/Architecture'>Widget Architecture</a>.
+     */
+    var Observable = function Observable() {
+        throw new DeveloperError('This type should not be instantiated directly.');
+    };
+
+    return Observable;
+});

data/app/assets/javascripts/Widgets/{Timeline.css → Timeline/Timeline.css}

@@ -1,7 +1,7 @@
 .timelineMain {
 	position: relative;
 	left: 0;
-	top: 0;
+	bottom: 0;
 	overflow: hidden;
 	border: solid 1px #888;
 }
@@ -25,29 +25,26 @@
 .timelineNeedle {
 	position: absolute;
 	left: 0;
-	top: 0;
+	top: 1.7em;
+	bottom: 0;
 	width: 1px;
-	height: 100%;
-	z-index: 50;
 	background: #F00;
 }
 
 .timelineBar {
-	position: relative;
-	left: 0;
-	top: 0;
-	overflow: hidden;
-	/*border: solid 1px #888;*/
-	width: 100%;
-	height: 1.7em;
-	z-index: 100;
-	background-color: #fafafa;
-	background-repeat: repeat-x;
-	background: -webkit-linear-gradient(top, #eee, #fff, #fafafa);
-	background: -moz-linear-gradient(top, #eee, #fff, #fafafa);
-	background: -ms-linear-gradient(top, #eee, #fff, #fafafa);
-	background: -o-linear-gradient(top, #eee, #fff, #fafafa);
-	background: linear-gradient(top, #eee, #fff, #fafafa);
+    position: relative;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    /*border: solid 1px #888;*/
+    width: 100%;
+    height: 1.7em;
+    background-color: #fafafa;
+    background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 50%, #fafafa 100%); /* FF3.6+ */
+    background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 50%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%,#fafafa 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%,#fafafa 100%); /* IE10+ */
+    background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 50%,#fafafa 100%); /* W3C */
 }
 
 .timelineRuler {
@@ -107,7 +104,7 @@
 	position: absolute;
 	width: 16px;
 	height: 16px;
-	background-image: url("Images/TimelineIcons.png");
+	background-image: url("../Images/TimelineIcons.png");
 	background-repeat: no-repeat;
-	z-index: 10;
+	z-index: 1;
 }

data/app/assets/javascripts/Widgets/{Timeline.js → Timeline/Timeline.js}

@@ -2,10 +2,10 @@
 define([
         './TimelineTrack',
         './TimelineHighlightRange',
-        '../Core/DeveloperError',
-        '../Core/Clock',
-        '../Core/ClockRange',
-        '../Core/JulianDate'
+        '../../Core/DeveloperError',
+        '../../Core/Clock',
+        '../../Core/ClockRange',
+        '../../Core/JulianDate'
     ], function (
          TimelineTrack,
          TimelineHighlightRange,
@@ -75,6 +75,7 @@ define([
         } else {
             this._topElement = id;
         }
+
         this._clock = clock;
         this._scrubJulian = clock.currentTime;
         this._mainTicSpan = -1;
@@ -138,6 +139,9 @@ define([
         this.addEventListener = function(type, listener, useCapture) {
             widget._topElement.addEventListener(type, listener, useCapture);
         };
+
+        clock.onTick.addEventListener(this.updateFromClock, this);
+        this.updateFromClock();
     }
 
     Timeline.prototype.addHighlightRange = function(color, heightInPx) {
@@ -243,7 +247,7 @@ define([
         var timeBar = this._timeBarEle;
 
         var seconds = this._startJulian.getSecondsDifference(this._scrubJulian);
-        var xPos = seconds * this._topElement.clientWidth / this._timeBarSecondsSpan;
+        var xPos = Math.round(seconds * this._topElement.clientWidth / this._timeBarSecondsSpan);
         var scrubX = xPos - 8, tic;
         var widget = this;
 
@@ -446,7 +450,7 @@ define([
         this._scrubJulian = this._clock.currentTime;
 
         var seconds = this._startJulian.getSecondsDifference(this._scrubJulian);
-        var xPos = seconds * this._topElement.clientWidth / this._timeBarSecondsSpan;
+        var xPos = Math.round(seconds * this._topElement.clientWidth / this._timeBarSecondsSpan);
 
         if (this._scrubElement) {
             var scrubX = xPos - 8;
@@ -456,6 +460,7 @@ define([
     };
 
     Timeline.prototype._setTimeBarTime = function(xPos, seconds) {
+        xPos = Math.round(xPos);
         this._scrubJulian = this._startJulian.addSeconds(seconds);
         if (this._scrubElement) {
             var scrubX = xPos - 8;
@@ -532,7 +537,7 @@ define([
         this._mouseMode = timelineMouseMode.touchOnly;
         if (len === 1) {
             seconds = this._startJulian.getSecondsDifference(this._scrubJulian);
-            xPos = seconds * this._topElement.clientWidth / this._timeBarSecondsSpan + leftX;
+            xPos = Math.round(seconds * this._topElement.clientWidth / this._timeBarSecondsSpan + leftX);
             if (Math.abs(e.touches[0].clientX - xPos) < 50) {
                 this._touchMode = timelineTouchMode.scrub;
                 if (this._scrubElement) {

data/app/assets/javascripts/Widgets/{TimelineTrack.js → Timeline/TimelineTrack.js}

@@ -1,6 +1,6 @@
 /*global define*/
 define([
-        '../Core/Color'
+        '../../Core/Color'
        ],
         function(
          Color) {

data/app/assets/javascripts/Widgets/Timeline/darker.css

@@ -0,0 +1,20 @@
+.cesium-darker .timelineBar {
+    background: rgba(32, 32, 32, 0.8);
+    background: -moz-linear-gradient(top, rgba(116,117,119,0.8) 0%, rgba(58,68,82,0.8) 11%, rgba(46,50,56,0.8) 46%, rgba(53,53,53,0.8) 81%, rgba(53,53,53,0.8) 100%); /* FF3.6+ */
+    background: -webkit-linear-gradient(top, rgba(116,117,119,0.8) 0%,rgba(58,68,82,0.8) 11%,rgba(46,50,56,0.8) 46%,rgba(53,53,53,0.8) 81%,rgba(53,53,53,0.8) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(116,117,119,0.8) 0%,rgba(58,68,82,0.8) 11%,rgba(46,50,56,0.8) 46%,rgba(53,53,53,0.8) 81%,rgba(53,53,53,0.8) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(116,117,119,0.8) 0%,rgba(58,68,82,0.8) 11%,rgba(46,50,56,0.8) 46%,rgba(53,53,53,0.8) 81%,rgba(53,53,53,0.8) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(116,117,119,0.8) 0%,rgba(58,68,82,0.8) 11%,rgba(46,50,56,0.8) 46%,rgba(53,53,53,0.8) 81%,rgba(53,53,53,0.8) 100%); /* W3C */
+}
+
+.cesium-darker .timelineTicLabel {
+    color: #eee;
+}
+
+.cesium-darker .timelineTicMain {
+    background: #eee;
+}
+
+.cesium-darker .timelineTicSub {
+    background: #aaa;
+}