Added loading canvas at begining...

2015-10-02 16:29:20 +02:00
parent 838871b3c2
commit d8d838ac3d
3 changed files with 105 additions and 2 deletions
--- a/js/l3d/src/canvases/LoadingCanvas.js
+++ 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);
+
+};