Sandcastle - Added demo of two widgets that share an animationControl…

…ler.
emreesirik · Sep 7, 2012 · 685951b · 685951b
1 parent a71690e
commit 685951b
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 0 deletions.
diff --git a/Apps/Sandcastle/gallery/Two Viewer Widgets.html b/Apps/Sandcastle/gallery/Two Viewer Widgets.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <title>Cesium Demo</title>
+    <script>
+    var Sandcastle = {};
+    Sandcastle.declare = function () {};
+    Sandcastle.highlight = function () {};
+    Sandcastle.registered = [];
+    if (window.location.protocol === 'file:') {
+        if (confirm("You must host this app on a web server.\nSee contributor's guide for more info?")) {
+            window.location = 'https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide';
+        }
+    }
+    </script>
+    <script data-dojo-config="async: 1, tlmSiblingOfDojo: 0" src="../../../ThirdParty/dojo-release-1.7.2-src/dojo/dojo.js"></script>
+    <script type="text/javascript">
+    require({
+        baseUrl : '../../..',
+        packages: [
+            { name: 'dojo', location: 'ThirdParty/dojo-release-1.7.2-src/dojo' },
+            { name: 'dijit', location: 'ThirdParty/dojo-release-1.7.2-src/dijit' },
+            { name: 'dojox', location: 'ThirdParty/dojo-release-1.7.2-src/dojox' },
+            { name: 'Source', location: 'Source' },
+            { 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' }
+        ]
+    });
+    </script>
+    <link rel="Stylesheet" href="../../../ThirdParty/dojo-release-1.7.2-src/dijit/themes/claro/claro.css" type="text/css">
+    <link rel="Stylesheet" href="../../../Source/Widgets/Dojo/CesiumViewerWidget.css" type="text/css">
+</head>
+<body class="claro">
+
+<style>
+body {
+    background: #000;
+    color: #eee;
+    font-family: sans-serif;
+    font-size: 9pt;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.top {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: none;
+    border-bottom: solid 2px #888;
+    width: 100%;
+    height: 50%;
+    z-index: -1;
+}
+.bottom {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border: none;
+    border-top: solid 2px #888;
+    width: 100%;
+    height: 50%;
+    z-index: -1;
+}
+#topbar {
+    margin: 5px;
+    padding: 2px 5px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+#bottombar {
+    margin: 5px;
+    padding: 2px 5px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+}
+</style>
+
+<div id="cesiumContainerTop" class="top"></div>
+<div id="cesiumContainerBottom" class="bottom"></div>
+<div id="topbar">Loading...</div>
+<div id="bottombar"></div>
+
+<script id="cesium_sandcastle_script">
+require([
+    'Source/Cesium', 'Widgets/Dojo/CesiumViewerWidget',
+    'dojo/on', 'dojo/dom', 'Core/requestAnimationFrame'
+], function(
+    Cesium, CesiumViewerWidget,
+    on, dom, requestAnimationFrame)
+{
+    "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
+    // different times.
+
+    var widget1, widget2, animationController;
+
+    function updateAndRender() {
+        // Get the time from the shared controller, then
+        // update and render both widgets.
+        var currentTime = animationController.update();
+        widget1.update(currentTime);
+        widget2.update(currentTime);
+        widget1.render();
+        widget2.render();
+        requestAnimationFrame(updateAndRender);
+    }
+
+    function createWidget2() {
+        // Save off a copy of widget1's animationController
+        animationController = widget1.animationController;
+
+        // Now create widget2, passing in the
+        // existing animationController to be shared.
+        widget2 = new CesiumViewerWidget({
+            animationController : animationController,
+            postSetup : function(widget) {
+                // Switch to columbus view
+                widget2.viewColumbus.onClick();
+
+                // Once 2nd widget created, start loop.
+                updateAndRender();
+            }
+        }).placeAt(dom.byId("cesiumContainerBottom"));
+    }
+
+    // First thing: Create widget1 (the top widget).
+    widget1 = new CesiumViewerWidget({
+        postSetup : function(widget) {
+            createWidget2();
+        }
+    }).placeAt(dom.byId("cesiumContainerTop"));
+
+    dom.byId('topbar').innerHTML = '';
+});
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Two Viewer Widgets.jpg b/Apps/Sandcastle/gallery/Two Viewer Widgets.jpg