root
/
cesium
mirror of https://github.com/CesiumGS/cesium.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Start work on a Cesium Viewer Widget.

This commit is contained in:
Ed Mackey 2012-07-19 17:22:12 -04:00
parent c22d90d8f0
commit 98634488d3
7 changed files with 89 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Apps/CesiumViewer/CesiumViewer.css
View File

@ -1,5 +1,5 @@
@import url('../../ThirdParty/dojo-release-1.7.2-src/dijit/themes/claro/claro.css');
@import url('../../Source/DojoWidgets/TimelineWidget.css');
@import url('../../Source/DojoWidgets/CesiumWidget.css');
html,body {
height: 100%;
@ -82,7 +82,7 @@ html,body {
left: 6px;
}
#speedIndicator {
.speedIndicator {
opacity: 0;
background: rgba(42, 42, 42, 0.8);
color: #eee;
@ -98,7 +98,7 @@ html,body {
transition-duration: 0.2s;
}
.animButtons:hover #speedIndicator {
.animButtons:hover .speedIndicator {
opacity: 1;
}

51
Apps/CesiumViewer/CesiumViewer.js
View File

@ -73,6 +73,10 @@ define([
var cameraCenteredObjectIDPosition;
var lastCameraCenteredObjectID;
var animReverse;
var animPause;
var animPlay;
function updateSpeedIndicator() {
if (animationController.isAnimating()) {
speedIndicatorElement.innerHTML = clock.multiplier + 'x realtime';
@ -82,9 +86,6 @@ define([
}
function setTimeFromBuffer() {
var animReverse = registry.byId('animReverse');
var animPause = registry.byId('animPause');
var animPlay = registry.byId('animPlay');
animReverse.set('checked', false);
animPause.set('checked', true);
animPlay.set('checked', false);
@ -214,17 +215,17 @@ define([
});
lastTimeLabelUpdate = clock.currentTime;
timeLabel = dom.byId('timeLabel_label');
timeLabel = dom.byId('dijit_form_Button_0_label'); // TODO: FIX THIS
timeLabel.innerHTML = clock.currentTime.toDate().toUTCString();
speedIndicatorElement = dom.byId('speedIndicator');
speedIndicatorElement = cesium.speedIndicator;
updateSpeedIndicator();
var animReverse = registry.byId('animReverse');
var animPause = registry.byId('animPause');
var animPlay = registry.byId('animPlay');
animReverse = cesium.animReverse;
animPause = cesium.animPause;
animPlay = cesium.animPlay;
on(registry.byId('animReset'), 'Click', function() {
on(cesium.animReset, 'Click', function() {
animationController.reset();
animReverse.set('checked', false);
animPause.set('checked', true);
@ -258,12 +259,12 @@ define([
updateSpeedIndicator();
});
on(registry.byId('animSlow'), 'Click', function() {
on(cesium.animSlow, 'Click', function() {
animationController.slower();
updateSpeedIndicator();
});
on(registry.byId('animFast'), 'Click', function() {
on(cesium.animFast, 'Click', function() {
animationController.faster();
updateSpeedIndicator();
});
@ -273,19 +274,20 @@ define([
onAnimPause();
}
var timelineWidget = registry.byId('mainTimeline');
var timelineWidget = cesium.mainTimeline;
timelineWidget.clock = clock;
timelineWidget.setupCallback = function(t) {
timeline = t;
timeline.addEventListener('settime', onTimelineScrub, false);
timeline.zoomTo(clock.startTime, clock.stopTime);
};
timelineWidget.setupTimeline();
var viewHome = registry.byId('viewHome');
var view2D = registry.byId('view2D');
var view3D = registry.byId('view3D');
var viewColumbus = registry.byId('viewColumbus');
var viewFullScreen = registry.byId('viewFullScreen');
var viewHomeButton = cesium.viewHomeButton;
var view2D = cesium.view2D;
var view3D = cesium.view3D;
var viewColumbus = cesium.viewColumbus;
var viewFullScreen = cesium.viewFullScreen;
view2D.set('checked', false);
view3D.set('checked', true);
@ -299,7 +301,7 @@ define([
}
});
on(viewHome, 'Click', function() {
on(viewHomeButton, 'Click', function() {
view2D.set('checked', false);
view3D.set('checked', true);
viewColumbus.set('checked', false);
@ -336,16 +338,16 @@ define([
transitioner.morphToColumbusView();
});
var cbLighting = registry.byId('cbLighting');
var cbLighting = cesium.cbLighting;
on(cbLighting, 'Change', function(value) {
cesium.centralBody.affectedByLighting = !value;
});
var imagery = registry.byId('imagery');
var imageryAerial = registry.byId('imageryAerial');
var imageryAerialWithLabels = registry.byId('imageryAerialWithLabels');
var imageryRoad = registry.byId('imageryRoad');
var imagerySingleTile = registry.byId('imagerySingleTile');
var imagery = cesium.imagery;
var imageryAerial = cesium.imageryAerial;
var imageryAerialWithLabels = cesium.imageryAerialWithLabels;
var imageryRoad = cesium.imageryRoad;
var imagerySingleTile = cesium.imagerySingleTile;
var imageryOptions = [imageryAerial, imageryAerialWithLabels, imageryRoad, imagerySingleTile];
var bingHtml = imagery.containerNode.innerHTML;
@ -379,4 +381,5 @@ define([
});
cesium.placeAt(dom.byId('cesiumContainer'));
window.testing = cesium; // TODO: Remove this
});

48
Apps/CesiumViewer/index.html
View File

@ -18,53 +18,5 @@
</head>
<body class="claro" style="background: #000;">
<div id="cesiumContainer"></div>
<div data-dojo-type="dijit.form.Button" id="timeLabel"
data-dojo-props="class: 'timeLabel', showLabel: true, label:''"></div>
<div class="viewButtons">
<div id="viewHome" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'viewIcon', showLabel: false, label:'Home View'"></div>
<div id="view2D" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon view2D', showLabel: false, label:'2D View'"></div>
<div id="view3D" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon view3D', showLabel: false, checked: true, label:'3D View'"></div>
<div id="viewColumbus" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon viewColumbus', showLabel: false, label:'Columbus View'"></div>
<div id="cbLighting" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon toggleCbLighting', showLabel: false, checked: false, label:'Toggle Lighting'"></div>
<div id="viewFullScreen" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'viewIcon viewFullScreen', showLabel: false, label:'Toggle Full Screen'"></div>
<div id="imagery" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass: 'bingIcon', showLabel: false, label:'Bing'">
<div data-dojo-type="dijit.TooltipDialog">
<span data-dojo-type="dijit.form.ToggleButton" id="imageryAerial"
data-dojo-props="class: 'imagerySelector', showLabel: true, checked: true, label:'Bing Maps Aerial'">
</span> <span data-dojo-type="dijit.form.ToggleButton" id="imageryAerialWithLabels"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'Bing Maps Aerial with Labels'"></span>
<span data-dojo-type="dijit.form.ToggleButton" id="imageryRoad"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'Bing Maps Road'"></span> <span
data-dojo-type="dijit.form.ToggleButton" id="imagerySingleTile"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'No Streaming Imagery'"></span>
</div>
</div>
</div>
<div class="timelineContainer">
<div id="mainTimeline" data-dojo-type="Cesium.TimelineWidget"></div>
</div>
<div class="animButtons">
<div id="animReset" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon', showLabel: false, label:'Reset'"></div>
<div id="animReverse" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animReverse', showLabel: false, label:'Play Reverse'"></div>
<div id="animPause" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animPause', showLabel: false, label:'Pause'"></div>
<div id="animPlay" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animPlay', showLabel: false, checked: true, label:'Play'"></div>
<div id="animSlow" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon animSlow', showLabel: false, label:'Play Slower'"></div>
<div id="animFast" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon animFast', showLabel: false, label:'Play Faster'"></div>
<span id="speedIndicator"></span>
</div>
<a class="cesiumLogo" href="http://cesium.agi.com/" target="_blank"><img
src="../../Images/Cesium_Logo_overlay.png" alt="Cesium" width="118" height="26" /></a>
</body>
</html>

1
Source/DojoWidgets/CesiumWidget.css Normal file
View File

@ -0,0 +1 @@
@import url('../../Source/DojoWidgets/TimelineWidget.css');

53
Source/DojoWidgets/CesiumWidget.html
View File

@ -1,3 +1,52 @@
<div data-dojo-attach-point="containerNode" style="width: 100%; height: 100%;">
<div data-dojo-attach-point="cesiumNode" style="width: 100%; height: 100%;">
<canvas data-dojo-attach-point="canvas" style="width: 100%; height: 100%;"></canvas>
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-attach-point="timeLabel"
data-dojo-props="class: 'timeLabel', showLabel: true, label:''"></div>
<div class="viewButtons">
<div data-dojo-attach-point="viewHomeButton" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'viewIcon', showLabel: false, label:'Home View'"></div>
<div data-dojo-attach-point="view2D" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon view2D', showLabel: false, label:'2D View'"></div>
<div data-dojo-attach-point="view3D" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon 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: 'viewIcon viewColumbus', showLabel: false, label:'Columbus View'"></div>
<div data-dojo-attach-point="cbLighting" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'viewIcon toggleCbLighting', showLabel: false, checked: false, label:'Toggle Lighting'"></div>
<div data-dojo-attach-point="viewFullScreen" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'viewIcon viewFullScreen', showLabel: false, label:'Toggle Full Screen'"></div>
<div data-dojo-attach-point="imagery" data-dojo-type="dijit.form.DropDownButton" data-dojo-props="iconClass: 'bingIcon', showLabel: false, label:'Bing'">
<div data-dojo-type="dijit.TooltipDialog">
<span data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imageryAerial"
data-dojo-props="class: 'imagerySelector', showLabel: true, checked: true, label:'Bing Maps Aerial'">
</span> <span data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imageryAerialWithLabels"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'Bing Maps Aerial with Labels'"></span>
<span data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imageryRoad"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'Bing Maps Road'"></span> <span
data-dojo-type="dijit.form.ToggleButton" data-dojo-attach-point="imagerySingleTile"
data-dojo-props="class: 'imagerySelector', showLabel: true, label:'No Streaming Imagery'"></span>
</div>
</div>
</div>
<div class="timelineContainer">
<div data-dojo-attach-point="mainTimeline" data-dojo-type="Cesium.TimelineWidget"></div>
</div>
<div class="animButtons">
<div data-dojo-attach-point="animReset" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon', showLabel: false, label:'Reset'"></div>
<div data-dojo-attach-point="animReverse" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animReverse', showLabel: false, label:'Play Reverse'"></div>
<div data-dojo-attach-point="animPause" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animPause', showLabel: false, label:'Pause'"></div>
<div data-dojo-attach-point="animPlay" data-dojo-type="dijit.form.ToggleButton"
data-dojo-props="iconClass: 'animationIcon animPlay', showLabel: false, checked: true, label:'Play'"></div>
<div data-dojo-attach-point="animSlow" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon animSlow', showLabel: false, label:'Play Slower'"></div>
<div data-dojo-attach-point="animFast" data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass: 'animationIcon animFast', showLabel: false, label:'Play Faster'"></div>
<span data-dojo-attach-point="speedIndicator" class="speedIndicator"></span>
</div>
<a class="cesiumLogo" data-dojo-attach-point="cesiumLogo" href="http://cesium.agi.com/" target="_blank"><img
src="../../Images/Cesium_Logo_overlay.png" alt="Cesium" width="118" height="26" /></a>
<span data-dojo-attach-point="containerNode"></span>
</div>

6
Source/DojoWidgets/CesiumWidget.js
View File

@ -8,6 +8,8 @@ define([
'dojo/on',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
//'dijit/form/Button','dijit/form/ToggleButton', 'dijit/form/DropDownButton', 'dijit/TooltipDialog',
'../Core/Ellipsoid',
'../Core/SunPosition',
'../Core/EventHandler',
@ -32,6 +34,8 @@ define([
on,
_WidgetBase,
_TemplatedMixin,
_WidgetsInTemplateMixin,
//Button, ToggleButton, DropDownButton, TooltipDialog,
Ellipsoid,
SunPosition,
EventHandler,
@ -49,7 +53,7 @@ define([
template) {
"use strict";
return declare('Cesium.CesiumWidget', [_WidgetBase, _TemplatedMixin], {
return declare('Cesium.CesiumWidget', [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString : template,
preRender : undefined,
postSetup : undefined,

4
Source/DojoWidgets/TimelineWidget.js
View File

@ -17,7 +17,7 @@ define(['dojo/_base/declare',
},
postCreate : function() {
ready(this, '_setupTimeline');
ready(this, 'setupTimeline');
},
resize : function(size) {
@ -28,7 +28,7 @@ define(['dojo/_base/declare',
this._resizeTimeline();
},
_setupTimeline : function() {
setupTimeline : function() {
if (this.clock && (!this.timeline)) {
this.timeline = new Timeline(this.domNode, this.clock);
if (this.setupCallback) {