Fixing an issue while trying to load babylon.*.*.js to BabylonJS project (wrong wildcard)

Generating last version of ourOwnBabylon.js
Adding a loading message when loading a scene on website and WinJS App (same as babylonjs website)
Adding a indication to highlight the sandbox when empty and locate the dropping zone.

Tools/BuildOurOwnBabylonJS/BabylonJS/BabylonJS.csproj

@@ -39,7 +39,7 @@
     <Resource Include="..\..\..\cannon.js">
       <Link>cannon.js</Link>
     </Resource>
-    <Resource Include="..\..\..\babylon.*.*.*.js">
+    <Resource Include="..\..\..\babylon.*.*.js">
       <Link>%(Filename)%(Extension)</Link>
     </Resource>
     <Resource Include="..\..\..\Babylon\**\*.*">

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/BuildOurOwnBabylonJSServer.csproj

@@ -93,6 +93,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Content\Loading.css" />
     <Content Include="Content\Logo.png" />
     <Content Include="Content\themes\base\images\ui-bg_flat_0_aaaaaa_40x100.png" />
     <Content Include="Content\themes\base\images\ui-bg_flat_75_ffffff_40x100.png" />

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Content/Loading.css

@@ -0,0 +1,66 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+    -webkit-transform: translate(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}
+
+#loadingInfos {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    bottom: 0;
+    transition: transform 0.25s ease-in-out 0s;
+    width: calc(100% - 10px);
+    z-index: 3;
+    border: 5px dotted gray;
+    pointer-events: none;
+}
+
+#loadingInfos .content {
+    position: relative;
+    top: 50%;
+}
+
+.loadingInfos {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/BabylonJSDemo/Index.cshtml

@@ -4,8 +4,18 @@
     ViewBag.BabylonJSFolder = "..\\..\\..\\";
 }
 
+<div id="loadingBack" class="loadingBack"></div>
+<div id="loadingText" class="loadingText"></div>
+
 <script type="text/javascript">
     $(document).ready(function () {
+        var loadingBack = document.getElementById("loadingBack");
+        var loadingText = document.getElementById("loadingText");
+
+        loadingBack.className = "";
+        loadingText.className = "";
+        loadingText.innerHTML = "Loading, please wait...";
+
         BABYLON.SceneLoader.Load("@Html.Raw(this.BabylonJSSamplesFile("Scenes/" + (string)ViewBag.DemoFolderName))" + "@Url.Encode("/")", "@ViewBag.DemoFile", OURBABYLON.engine, function (scene) {
             OURBABYLON.sceneInitialization(scene);
             scene.activeCamera.attachControl(OURBABYLON.canvas);
@@ -17,6 +27,17 @@
 
             // Launch render loop
             scene.getEngine().runRenderLoop(renderLoop);
+
+            loadingBack.className = "loadingBack";
+            loadingText.className = "loadingText";
+
+        }, function (evt) {
+            if (evt.lengthComputable) {
+                loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
+            } else {
+                dlCount = evt.loaded / (1024 * 1024);
+                loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
+            }
         });
     });
 </script>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/SandBox/Index.cshtml

@@ -1,12 +1,39 @@
 @{
-    ViewBag.Title = "Our Own Sandbox";
+    ViewBag.Title = "Our Own BabylonJS";
     ViewBag.BabylonJSFolder = "..\\..\\..\\";
 }
-
+<div id="loadingInfos"><div class="content">Drag and drop your .babylon files inside, with associated assets</div></div>
+<div id="loadingBack" class="loadingBack"></div>
+<div id="loadingText" class="loadingText"></div>
 <script type="text/javascript">
     $(document).ready(function () {
+
+        var loadingBack = document.getElementById("loadingBack");
+        var loadingText = document.getElementById("loadingText");
+
+
+        var loadingInfos = document.getElementById("loadingInfos");
+        loadingInfos.style.height = (OURBABYLON.canvas.height-20)+"px";
+        window.addEventListener('resize', function () {
+            loadingInfos.style.height = (OURBABYLON.canvas.height - 20) + "px";
+        });
+
         var filesInput = new BABYLON.FilesInput(OURBABYLON.engine, OURBABYLON.currentScene, OURBABYLON.canvas, function (sceneFile, babylonScene) {
             OURBABYLON.sceneInitialization(babylonScene, true);
+            loadingBack.className = "loadingBack";
+            loadingText.className = "loadingText";
+        }, function (evt) {
+            if (evt.lengthComputable) {
+                loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
+            } else {
+                dlCount = evt.loaded / (1024 * 1024);
+                loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
+            }
+        }, null, null, function () {
+            loadingInfos.className = "loadingInfos";
+            loadingBack.className = "";
+            loadingText.className = "";
+            loadingText.innerHTML = "Loading, please wait...";
         });
         filesInput.monitorElementForDragNDrop(OURBABYLON.canvas);
     });

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/Shared/_Layout.cshtml

@@ -5,6 +5,7 @@
     <meta charset="utf-8" />
     <title>@ViewBag.Title</title>
     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
+    <link href="@Url.Content("~/Content/Loading.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
     @if (ViewBag.DoNotUseBabylonJS == null)
@@ -50,7 +51,7 @@
         <div id="title">
             <h1>@ViewBag.Title</h1>
             <div id="menu">
-                <a href="@Url.Action("Index", "SandBox")">Our own sandbox</a>
+                <a href="@Url.Action("Index", "SandBox")">Sandbox</a>
             </div>
         </div>
         @if (ViewBag.DoNotUseBabylonJS == null)

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj

@@ -56,6 +56,7 @@
       <SubType>Designer</SubType>
     </AppxManifest>
     <Content Include="css\default.css" />
+    <Content Include="css\Loading.css" />
     <Content Include="images\logo.scale-100.png" />
     <Content Include="images\smalllogo.scale-100.png" />
     <Content Include="images\splashscreen.scale-100.png" />

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/css/Loading.css

@@ -0,0 +1,36 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingText {
+    transform: translateX(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/css/default.css

@@ -40,3 +40,44 @@
         height: 100%;
         width: 100%;
     }
+
+
+/*
+    Custom css to be applied on all pages
+*/
+#loadingText {
+    /*color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;*/
+    /*padding-top: 10px;*/
+    /*position: absolute;
+    text-align: center/
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;*/
+}
+
+.loadingText {
+    transform: translateX(120%);
+}
+
+#loadingBack {
+    /*background-color: #FFFFFF;
+    border: 1px solid #888888;*/
+    /*cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;*/
+    /*position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;*/
+}
+.loadingBack {
+    transform: translateX(-120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/default.html

@@ -11,6 +11,7 @@
 
     <!-- BuildOurOwnBabylonJSWinJSApp references -->
     <link href="/css/default.css" rel="stylesheet" />
+    <link href="/css/Loading.css" rel="stylesheet" />
     <script src="/js/default.js"></script>
     <script src="/js/navigator.js"></script>
 </head>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.html

@@ -9,17 +9,18 @@
     <title>BabylonScene</title>
     <script src="babylonScene.js"></script>
     <script src="/js/ourOwnBabylon.js"></script>
+    <script src="/js/babylonLoadingMessage.js"></script>
     <link href="babylonScene.css" rel="stylesheet" />
 </head>
 <body>
     <div data-win-control="WinJS.UI.NavBar">
         <div data-win-control="WinJS.UI.NavBarContainer">
-            <div>
-                <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
-            </div>
+            <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
         </div>
     </div>
     <div id="babylonScene">
+        <div id="loadingBack" class="loadingBack"></div>
+        <div id="loadingText" class="loadingText"></div>
         <canvas id="babylonCanvas"></canvas>
     </div>
 </body>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.js

@@ -8,6 +8,14 @@
         ready: function (element, options) {
             var canvas = element.querySelector("#babylonCanvas");
             engine = new BABYLON.Engine(canvas, true);
+            var container = canvas.parentElement;
+
+            var loadingBack = element.querySelector("#loadingBack");
+            var loadingText = element.querySelector("#loadingText");
+
+            loadingBack.className = "";
+            loadingText.className = "";
+            loadingText.innerHTML = "Loading, please wait...";
 
             BABYLON.SceneLoader.Load(options.babylonFolder + "/", options.babylonFile, engine, function (scene) {
                 scene.executeWhenReady(function () { 
@@ -23,8 +31,19 @@
                     engine.runRenderLoop(function () {
                         scene.render();
                     });
+
+                    loadingBack.className = "loadingBack";
+                    loadingText.className = "loadingText";
                 });
+            }, function (evt) {
+                if (evt.lengthComputable) {
+                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
+                } else {
+                    dlCount = evt.loaded / (1024 * 1024);
+                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
+                }
             });
+
         },
         unload: function () {
             engine.stopRenderLoop();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.html

@@ -11,6 +11,7 @@
 
     <script src="/js/hand-1.3.6.js"></script>
     <script src="/js/ourOwnBabylon.js"></script>
+    <script src="/js/babylonLoadingMessage.js"></script>
     <link href="sandbox.css" rel="stylesheet" />
 </head>
 <body>
@@ -23,6 +24,8 @@
         </div>
     </div>
     <div id="babylonScene">
+        <div id="loadingBack" class="loadingBack"></div>
+        <div id="loadingText" class="loadingText"></div>
         <canvas id="babylonCanvas"></canvas>
     </div>
 </body>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.js

@@ -8,8 +8,13 @@
         ready: function (element, options) {
             var canvas = element.querySelector("#babylonCanvas");
             engine = new BABYLON.Engine(canvas);
+            var container = canvas.parentElement;
+
             var htmlInput = element.querySelector("#fileInput");
 
+            var sandboxInfos = element.querySelector("#sandboxInfos");
+            var loadingBack = element.querySelector("#loadingBack");
+            var loadingText = element.querySelector("#loadingText");
 
             var filesInput = new BABYLON.FilesInput(engine, null, canvas, function (sceneFile, scene) {
                 if (!scene.activeCamera) {
@@ -20,6 +25,21 @@
                 if (scene.lights.length == 0) {
                     var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), scene);
                 }
+
+                loadingBack.className = "loadingBack";
+                loadingText.className = "loadingText";
+
+            }, function (evt) {
+                if (evt.lengthComputable) {
+                    loadingText.innerHTML = "Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%";
+                } else {
+                    dlCount = evt.loaded / (1024 * 1024);
+                    loadingText.innerHTML = "Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.";
+                }
+            }, null, null, function () {
+                loadingBack.className = "";
+                loadingText.className = "";
+                loadingText.innerHTML = "Loading, please wait...";
             });
 
             htmlInput.addEventListener("change", filesInput.loadFiles, false);