Home Explore Help
Register Sign In
zhangyupeng
/
Babylon.js
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Adding a sandbox view on WinJSApplication.
Adding a link on the main page for the sandbox, with a different color.

Nicolas Obré 11 years ago
parent
6e56bb6c2a
commit
c897f04ce4
9 changed files with 105 additions and 6 deletions
Split View Show Diff Stats
  1. 3 0
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj
  2. 5 1
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.html
  3. 1 1
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.js
  4. 6 1
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.css
  5. 4 2
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.html
  6. 16 1
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.js
  7. 5 0
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.css
  8. 29 0
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.html
  9. 36 0
      Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.js

+ 3 - 0
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj
View File 

@@ -77,6 +77,9 @@
 
       <Link>BabylonJS-Demos\%(RecursiveDir)%(Filename)%(Extension)</Link>
 
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
 
     </Content>
 
+    <Content Include="pages\sandbox\sandbox.css" />
 
+    <Content Include="pages\sandbox\sandbox.html" />
 
+    <Content Include="pages\sandbox\sandbox.js" />
 
     <None Include="BuildOurOwnBabylonJSWinJSApp_TemporaryKey.pfx" />
 
   </ItemGroup>
 
   <ItemGroup>

+ 5 - 1
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.html
View File 

@@ -13,7 +13,11 @@
 
 </head>
 
 <body>
 
     <div data-win-control="WinJS.UI.NavBar">
 
-        <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
 
+        <div data-win-control="WinJS.UI.NavBarContainer">
 
+            <div>
 
+                <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
 
+            </div>
 
+        </div>
 
     </div>
 
     <div id="babylonScene">
 
         <canvas id="babylonCanvas"></canvas>

+ 1 - 1
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.js
View File 

@@ -24,7 +24,7 @@
 
                         scene.render();
 
                     });
 
                 });
 
-            })
 
+            });
 
         },
 
         unload: function () {
 
             engine.stopRenderLoop();

+ 6 - 1
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.css
View File 

@@ -6,7 +6,7 @@
 
 .ListItem {
 
     width: 150px;
 
     height: 100px;
 
-    background-image: radial-gradient(#606060, #808080);
 
+    background-color: #808080;
 
     text-shadow: black 0.1em 0.1em 0.2em;
 
     padding: 5px 10px;
 
 }
 
@@ -14,4 +14,9 @@
 
 #babylonScenesListView {
 
     height: 100%;
 
     margin: 0px 10px;
 
+}
 
+
 
+.sandbox {
 
+    background-image: none;
 
+    background-color: #330066;
 
 }

+ 4 - 2
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.html
View File 

@@ -22,7 +22,7 @@
 
         </div>
 
     </div>
 
     <div id="ListItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
 
-        <div class="ListItem">
 
+        <div data-win-bind="className: className">
 
             <h4 data-win-bind="textContent: title"></h4>
 
             <h6 data-win-bind="textContent: text"></h6>
 
         </div>
 
@@ -36,7 +36,9 @@
 
             itemTemplate: select('#ListItemTemplate'),
 
             groupDataSource: home.babylonScenes.groupedItemsList.groups.dataSource,
 
             groupHeaderTemplate: select('#ListHeaderTemplate'),
 
-            layout: { type: WinJS.UI.GridLayout }
 
+            layout: { type: WinJS.UI.GridLayout },
 
+            selectionMode: 'single',
 
+            swipeBehavior: 'none'
 
          }">
 
     </div>
 
 </body>

+ 16 - 1
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.js
View File 

@@ -28,10 +28,16 @@
 
         ready: function (element, options) {
 
             element.querySelector("#babylonScenesListView").addEventListener("iteminvoked", function (event) {
 
                 event.detail.itemPromise.done(function (item) {
 
+                    if (!item.data.file) {
 
+                        WinJS.Navigation.navigate('/pages/sandbox/sandbox.html');
 
+                        return;
 
+                    }
 
                     WinJS.Navigation.navigate('/pages/babylonScene/babylonScene.html', { babylonFolder: item.data.folder, babylonFile: item.data.file });
 
                 });
 
             });
 
 
+            var className = "ListItem";
 
+
 
             var onSceneFolderOpenCallback = function (rootFolder) {
 
                 rootFolder.getFoldersAsync().then(function (folders) {
 
                     var list = itemsList;
 
@@ -52,7 +58,8 @@
 
                                     text: file.name,
 
                                     group: group,
 
                                     folder: rootFolder.name + "/" + folder.name,
 
-                                    file: file.name
 
+                                    file: file.name,
 
+                                    className: className
 
                                 });
 
                             }
 
                         });
 
@@ -61,6 +68,14 @@
 
             };
 
 
             if (itemsList.length == 0) {
 
+                itemsList.push({
 
+                    title: "Sandbox",
 
+                    text: "BabylonJS Sandbox",
 
+                    group: "Sandbox",
 
+                    folder: null,
 
+                    file: null,
 
+                    className: className + " sandbox"
 
+                });
 
                 Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("BabylonJS-Demos").then(onSceneFolderOpenCallback);
 
                 Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("addToPackage").then(onSceneFolderOpenCallback);
 
             }

+ 5 - 0
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.css
View File 

@@ -0,0 +1,5 @@
 
+#babylonScene,
 
+#babylonCanvas {
 
+    width: 100%;
 
+    height: 100%;
 
+}

+ 29 - 0
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <!-- WinJS references -->
 
+    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
 
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
 
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
 
+
 
+    <title>Sandbox</title>
 
+    <script src="sandbox.js"></script>
 
+
 
+    <script src="/js/hand-1.3.6.js"></script>
 
+    <script src="/js/ourOwnBabylon.js"></script>
 
+    <link href="sandbox.css" rel="stylesheet" />
 
+</head>
 
+<body>
 
+    <div id="navbar" data-win-control="WinJS.UI.NavBar">
 
+        <div data-win-control="WinJS.UI.NavBarContainer">
 
+            <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
 
+            <div>
 
+                <input type="file" id="fileInput" multiple />
 
+            </div>            
+        </div>
 
+    </div>
 
+    <div id="babylonScene">
 
+        <canvas id="babylonCanvas"></canvas>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.js
View File 

@@ -0,0 +1,36 @@
 
+var engine;
 
+ (function () {
 
+    "use strict";
 
+
 
+    WinJS.UI.Pages.define("/pages/sandbox/sandbox.html", {
 
+        // This function is called whenever a user navigates to this page. It
 
+        // populates the page elements with the app's data.
 
+        ready: function (element, options) {
 
+            var canvas = element.querySelector("#babylonCanvas");
 
+            engine = new BABYLON.Engine(canvas);
 
+            var htmlInput = element.querySelector("#fileInput");
 
+
 
+
 
+            var filesInput = new BABYLON.FilesInput(engine, null, canvas, function (sceneFile, scene) {
 
+                if (!scene.activeCamera) {
 
+                    scene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", -Math.PI / 2, Math.PI / 2, 10, new BABYLON.Vector3.Zero(), scene);
 
+                    scene.activeCamera.zoomOn();
 
+                    scene.activeCamera.attachControl(canvas);
 
+                }
 
+                if (scene.lights.length == 0) {
 
+                    var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), scene);
 
+                }
 
+            });
 
+
 
+            htmlInput.addEventListener("change", filesInput.loadFiles, false);
 
+
 
+            var navBar = document.body.querySelector("#navbar").winControl;
 
+            navBar.show();
 
+        },
 
+        unload: function () {
 
+            engine.stopRenderLoop();
 
+            engine.dispose();
 
+            engine = null;
 
+        }
 
+    });
 
+})();