From d8d838ac3d6aa56a669f0cca911516704d3f675d Mon Sep 17 00:00:00 2001
From: Thomas FORGIONE <thomas.forgione@gmail.com>
Date: Fri, 2 Oct 2015 16:29:20 +0200
Subject: [PATCH] Added loading canvas at begining...

---
 js/Makefile                               |  1 +
 js/l3d/apps/prototype/interactive/main.js |  9 ++-
 js/l3d/src/canvases/LoadingCanvas.js      | 97 +++++++++++++++++++++++
 3 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 js/l3d/src/canvases/LoadingCanvas.js

diff --git a/js/Makefile b/js/Makefile
index 0c0552c..814b912 100644
--- a/js/Makefile
+++ b/js/Makefile
@@ -22,6 +22,7 @@ L3D:
 		--js l3d/src/utils/Objects.js \
 		--js l3d/src/utils/History.js \
 		--js l3d/src/canvases/StartCanvas.js \
+		--js l3d/src/canvases/LoadingCanvas.js \
 		--js l3d/src/canvases/MousePointer.js \
 		--js l3d/src/canvases/Previewer.js \
 		--js l3d/src/loaders/ProgressiveLoader.js \
diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js
index d4e0383..a5a46c4 100644
--- a/js/l3d/apps/prototype/interactive/main.js
+++ b/js/l3d/apps/prototype/interactive/main.js
@@ -11,6 +11,8 @@ L3D.ProgressiveLoader.onFinished = function() {
     for (var i = 0; i < coins.length; i++) {
         coins[i].mesh.visible = true;
     }
+
+    loadingCanvas.clear();
 }
 
 // Disable scrolling
@@ -60,7 +62,7 @@ function main() {
     initModels();
     initListeners();
 
-    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
+    appendTo(container)(stats, Coin, startCanvas, pointer, previewer, loadingCanvas, renderer);
     // appendTo(container)(startCanvas, pointer, previewer, renderer);
 
     // Set the good size of cameras
@@ -68,6 +70,8 @@ function main() {
 
     Coin.update(true);
 
+    loadingCanvas.render();
+
     if (locked !== undefined && locked)
         startCanvas.render();
 
@@ -138,6 +142,7 @@ function initCanvases() {
     // Init start canvas
     startCanvas = new L3D.StartCanvas(camera1);
 
+    loadingCanvas = new L3D.LoadingCanvas();
 }
 
 function initModels() {
@@ -232,7 +237,7 @@ function render() {
 
 function onWindowResize() {
 
-    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
+    resizeElements(renderer, container, previewer, Coin, pointer, startCanvas, loadingCanvas);
 
     recommendations.forEach(function(reco) {
         resetCameraAspect(reco.camera, containerSize.width(), containerSize.height());
diff --git a/js/l3d/src/canvases/LoadingCanvas.js b/js/l3d/src/canvases/LoadingCanvas.js
new file mode 100644
index 0000000..024272a
--- /dev/null
+++ b/js/l3d/src/canvases/LoadingCanvas.js
@@ -0,0 +1,97 @@
+/**
+ * @memberof L3D
+ * @constructor
+ * @description Displays a translucid canvas over the renderer to tell to wait for loading
+ */
+L3D.LoadingCanvas = function() {
+
+    /**
+     * @type {elemnt}
+     * @description The document element to add on top of the renderer
+     */
+    this.domElement = document.createElement('canvas');
+    this.domElement.style.position = 'absolute';
+    this.domElement.style.cssFloat = 'top-left';
+
+    /**
+     * @type {CanvasRenderingContext2D}
+     * @description The context of the canvas
+     */
+    this.ctx = this.domElement.getContext('2d');
+
+    /**
+     * @type {Boolean}
+     * @description true if the canvas is displayed
+     */
+    this.shown = false;
+
+    this.dots = '.';
+
+};
+
+/**
+ * Shows the canvas with a string in the middle of it (not done if already shown)
+ * @param {Boolean} force force the rendering
+ */
+L3D.LoadingCanvas.prototype.render = function(force) {
+
+    if (!this.shown || force) {
+
+        this.ctx.fillStyle = 'white';
+        this.ctx.globalAlpha = 1;
+        this.ctx.fillRect(0,0,this.domElement.width, this.domElement.height);
+
+        this.ctx.font = '30px Verdana';
+        this.ctx.globalAlpha = 1;
+        this.ctx.fillStyle = 'black';
+        this.ctx.fillText('Loading ' + this.dots, containerSize.width()/2.75, containerSize.height()/2-10);
+
+
+        this.shown = true;
+
+        var self = this;
+        setTimeout(function() {
+            if (self.shown) {
+                self.dots += '.';
+                if (self.dots === '....') {
+                    self.dots = '.';
+                }
+                self.render(true);
+            }
+        }, 750);
+
+    }
+
+};
+
+/**
+ * Hide canvas
+ */
+L3D.LoadingCanvas.prototype.clear = function() {
+
+    if (this.shown) {
+
+        // Clear canvas
+        this.domElement.width = this.domElement.width;
+
+        this.shown = false;
+
+    }
+
+};
+
+/**
+ * Sets the size of the canvas
+ * @param {Number} width new width of the canvas
+ * @param {Number} height new height of the canvas
+ */
+L3D.LoadingCanvas.prototype.setSize = function(width, height) {
+
+    this.domElement.width = width;
+    this.domElement.height = height;
+
+    // If the canvas was shown, redraw it
+    if (this.shown)
+        this.render(true);
+
+};