Add error message to sandbox

sandbox/index-local.html

@@ -48,6 +48,7 @@
         </div>
     </div>
     <div id="loadingText" class="loadingText"></div>
+    <div id="errorZone"></div>
     <script>
         BABYLONDEVTOOLS.Loader.require('index.js')
             .load();

sandbox/index.css

@@ -261,4 +261,31 @@ li {
 #btnFullscreen:hover, #btnPerf:hover, #btnFiles:hover {
     -webkit-transform: scale(0.9);
     transform: scale(0.9);
-}
+}
+
+#errorZone {
+    display:none;
+    position: absolute;
+    width: 50%;
+    left: 25%;
+    bottom: 80px;
+    background-color: #C73228;
+    padding:20px;
+    border-radius: 5px;
+    color:white;
+    font-family: 'Inconsolata';
+}
+#errorZone button {
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: .4;
+    font-size: 1.8em;
+}

sandbox/index.html

@@ -67,6 +67,7 @@
         </div>
     </div>
     <div id="loadingText" class="loadingText"></div>
+    <div id="errorZone"></div>
     <script src="index.js"></script>
 </body>
 </html>

sandbox/index.js

@@ -1,4 +1,6 @@
-if (BABYLON.Engine.isSupported()) {
+/// <reference path="../dist/preview release/babylon.d.ts" />
+
+if (BABYLON.Engine.isSupported()) {
     var canvas = document.getElementById("renderCanvas");
     var engine = new BABYLON.Engine(canvas, true);
     var divFps = document.getElementById("fps");
@@ -60,16 +62,21 @@
             enableDebugLayer = false;
             currentScene.debugLayer.hide();
         };
+
         if (enableDebugLayer) {
             hideDebugLayerAndLogs();
         }
+
+        // Clear the error
+        document.getElementById("errorZone").style.display = 'none';
+
         currentScene = babylonScene;
         document.title = "BabylonJS - " + sceneFile.name;
         // Fix for IE, otherwise it will change the default filter for files selection after first use
         htmlInput.value = "";
 
         // Attach camera to canvas inputs
-        if (!currentScene.activeCamera || currentScene.lights.length === 0) {     
+        if (!currentScene.activeCamera || currentScene.lights.length === 0) {
             currentScene.createDefaultCameraOrLight(true);
             // Enable camera's behaviors
             currentScene.activeCamera.useBouncingBehavior = true;
@@ -80,7 +87,7 @@
             framingBehavior.elevationReturnTime = -1;
 
             var bouncingBehavior = currentScene.activeCamera.getBehaviorByName("Bouncing");
-            bouncingBehavior.autoTransitionRange = true;        
+            bouncingBehavior.autoTransitionRange = true;
 
             if (currentScene.meshes.length) {
                 var worldExtends = currentScene.getWorldExtends();
@@ -120,7 +127,23 @@
         }
     };
 
-    filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded);
+    var sceneError = function (sceneFile, babylonScene, message) {
+        document.title = "BabylonJS - " + sceneFile.name;
+        document.getElementById("logo").className = "";
+        canvas.style.opacity = 0;
+
+        var errorContent = '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>' + message.replace("file:[object File]", "'" + sceneFile.name + "'") + '</div>';
+
+        document.getElementById("errorZone").style.display = 'block';
+        document.getElementById("errorZone").innerHTML = errorContent;
+
+        // Close button error
+        document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
+            document.getElementById("errorZone").style.display = 'none';
+        });
+    };
+
+    filesInput = new BABYLON.FilesInput(engine, null, sceneLoaded, null, null, null, function () { BABYLON.Tools.ClearLogCache() }, null, sceneError);
     filesInput.onProcessFileCallback = (function (file, name, extension) {
         if (extension === "dds") {
             BABYLON.FilesInput.FilesToLoad[name] = file;

src/Tools/babylon.filesInput.ts

@@ -12,13 +12,14 @@
         private _textureLoadingCallback: (remaining: number) => void;
         private _startingProcessingFilesCallback: () => void;
         private _onReloadCallback: (sceneFile: File) => void;
+        private _errorCallback: (sceneFile: File, scene: Scene, message: string) => void;
         private _elementToMonitor: HTMLElement;
 
         private _sceneFileToLoad: File;
         private _filesToLoad: File[];
 
         constructor(engine: Engine, scene: Scene, sceneLoadedCallback: (sceneFile: File, scene: Scene) => void, progressCallback: (progress: ProgressEvent) => void, additionalRenderLoopLogicCallback: () => void, 
-                    textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: () => void, onReloadCallback: (sceneFile: File) => void) {
+                    textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: () => void, onReloadCallback: (sceneFile: File) => void, errorCallback: (sceneFile: File, scene: Scene, message: string) => void) {
             this._engine = engine;
             this._currentScene = scene;
 
@@ -28,6 +29,7 @@
             this._textureLoadingCallback = textureLoadingCallback;
             this._startingProcessingFilesCallback = startingProcessingFilesCallback;
             this._onReloadCallback = onReloadCallback;
+            this._errorCallback = errorCallback;
         }
 
         private _dragEnterHandler: (any) => void;
@@ -229,15 +231,22 @@
                     }
 
                     // Wait for textures and shaders to be ready
-                    this._currentScene.executeWhenReady(() => {                       
-                        this._engine.runRenderLoop(() => { 
-                            this.renderFunction(); });
+                    this._currentScene.executeWhenReady(() => {
+                        this._engine.runRenderLoop(() => {
+                            this.renderFunction();
                         });
-                }, progress => {
-                        if (this._progressCallback) {
-                            this._progressCallback(progress);
-                        }
                     });
+                }, progress => {
+                    if (this._progressCallback) {
+                        this._progressCallback(progress);
+                    }
+                }, (scene, message) => {
+                    this._currentScene = scene;
+
+                    if (this._errorCallback) {
+                        this._errorCallback(this._sceneFileToLoad, this._currentScene, message);
+                    }
+                });
             }
             else {
                 Tools.Error("Please provide a valid .babylon file.");