Use dedicated service to display progress information

src/css/notifications.css

@@ -0,0 +1,74 @@
+.user-message {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 10px 47px;
+  max-width: 300px;
+
+  border-top-left-radius: 7px;
+  border: #F0C36D 1px solid;
+  border-right: 0;
+  border-bottom: 0;
+
+  color: #222;
+  background-color: #F9EDBE;
+
+  font-weight: bold;
+  font-size: 13px;
+
+  z-index: 30000;
+}
+
+.user-message .close {
+  position: absolute;
+  top: 6px;
+  right: 17px;
+
+  color: gray;
+
+  font-size: 18px;
+  font-weight: bold;
+
+  cursor: pointer;
+}
+
+.user-message .close:hover {
+  color: black;
+}
+
+.progress-bar-container {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 10px;
+  width: 360px;
+  border-top-right-radius: 2px;
+  border: gold 2px solid;
+  border-left: 0;
+  border-bottom: 0;
+  background-color: #444;
+  font-size: 14px;
+  z-index: 30000;
+  color: #eee;
+}
+
+.progress-bar-item {
+  float: left;
+  height:20px;
+}
+
+.progress-bar-status {
+  line-height: 20px;
+  width : 40px;
+  overflow : hidden;
+  margin: 0 0 0 10px;
+}
+
+.progress-bar {
+  border : 1px solid grey;
+  margin-top: 8px;
+  height : 4px;
+  width : 300px;
+  background : linear-gradient(to left, gold, gold) no-repeat -300px 0;
+  background-color : black;
+}

src/css/settings-export.css

@@ -51,15 +51,4 @@
   -moz-box-sizing:border-box;
   background: rgba(0,0,0,0.5);
   color: white;
-}
-
-.gif-export-progress-status {
-  margin-left: 5px;
-}
-
-.gif-export-progress-bar {
-  margin-top:5px;
-  height:3px;
-  width: 0;
-  background:gold;
-}
+}

src/css/style.css

@@ -162,42 +162,6 @@ body {
 .canvas.onion-skin-canvas    {z-index:  10;}
 .canvas.layers-above-canvas  {z-index:  11;}
 
-
-
-/**
- * User messages
- */
-.user-message {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background-color: #F9EDBE;
-  padding: 10px 47px;
-  border-top-left-radius: 7px;
-  color: #222;
-  border: #F0C36D 1px solid;
-  border-right: 0;
-  border-bottom: 0;
-  font-weight: bold;
-  font-size: 13px;
-  z-index: 30000;
-  max-width: 300px;
-}
-
-.user-message .close {
-  position: absolute;
-  top: 6px;
-  right: 17px;
-  color: gray;
-  font-weight: bold;
-  cursor: pointer;
-  font-size: 18px;
-}
-
-.user-message .close:hover {
-  color: black;
-}
-
 .image-link {
   color : gold;
 }

src/index.html

@@ -74,6 +74,7 @@
   </div>
 
   <iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+  <iframe src="templates/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
   <!--body-main-end-->
   <!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
   <!-- do not delete, do not move :) -->

src/js/Events.js

@@ -47,6 +47,10 @@ var Events = {
   SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
   HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
 
+  SHOW_PROGRESS: "SHOW_PROGRESS",
+  UPDATE_PROGRESS: "UPDATE_PROGRESS",
+  HIDE_PROGRESS: "HIDE_PROGRESS",
+
   ZOOM_CHANGED : "ZOOM_CHANGED",
 
   CURRENT_COLORS_UPDATED : "CURRENT_COLORS_UPDATED",

src/js/app.js

@@ -87,6 +87,9 @@
       this.notificationController = new pskl.controller.NotificationController();
       this.notificationController.init();
 
+      this.progressBarController = new pskl.controller.ProgressBarController();
+      this.progressBarController.init();
+
       this.canvasBackgroundController = new pskl.controller.CanvasBackgroundController();
       this.canvasBackgroundController.init();
 

src/js/controller/ProgressBarController.js

@@ -0,0 +1,61 @@
+(function () {
+  var ns = $.namespace('pskl.controller');
+
+  ns.ProgressBarController = function () {
+    this.template = pskl.utils.Template.get('progress-bar-template');
+    this.progressBar = null;
+    this.progressBarStatus = null;
+
+    this.showProgressTimer_ = 0;
+  };
+
+  ns.ProgressBarController.prototype.init = function () {
+    $.subscribe(Events.SHOW_PROGRESS, $.proxy(this.showProgress_, this));
+    $.subscribe(Events.UPDATE_PROGRESS, $.proxy(this.updateProgress_, this));
+    $.subscribe(Events.HIDE_PROGRESS, $.proxy(this.hideProgress_, this));
+  };
+
+  ns.ProgressBarController.prototype.showProgress_ = function (event, progressInfo) {
+    this.removeProgressBar_();
+    this.showProgressTimer_ = window.setTimeout(this.onTimerExpired_.bind(this, progressInfo), 300);
+  };
+
+  ns.ProgressBarController.prototype.onTimerExpired_ = function (progressInfo) {
+    var progressBarHtml = pskl.utils.Template.replace(this.template, {
+      name : progressInfo.name,
+      status : 0
+    });
+
+    var progressBarEl = pskl.utils.Template.createFromHTML(progressBarHtml);
+    document.body.appendChild(progressBarEl);
+
+    this.progressBar = document.querySelector('.progress-bar');
+    this.progressBarStatus = document.querySelector('.progress-bar-status');
+  };
+
+  ns.ProgressBarController.prototype.updateProgress_ = function (event, progressInfo) {
+    if (this.progressBar && this.progressBarStatus) {
+      var progress = progressInfo.progress;
+      var width = this.progressBar.offsetWidth;
+      var progressWidth = width - ((progress * width) / 100);
+      this.progressBar.style.backgroundPosition = (-progressWidth) + 'px 0';
+      this.progressBarStatus.innerText = progress + '%';
+    }
+  };
+
+  ns.ProgressBarController.prototype.hideProgress_ = function (event, progressInfo) {
+    if (this.showProgressTimer_) {
+      window.clearTimeout(this.showProgressTimer_);
+    }
+    this.removeProgressBar_();
+  };
+
+  ns.ProgressBarController.prototype.removeProgressBar_ = function () {
+    var progressBarContainer = document.querySelector('.progress-bar-container');
+    if (progressBarContainer) {
+      progressBarContainer.parentNode.removeChild(progressBarContainer);
+      this.progressBar = null;
+      this.progressBarStatus = null;
+    }
+  };
+})();

src/js/controller/settings/GifExportController.js

@@ -36,9 +36,6 @@
     this.downloadButton = $(".gif-download-button");
     this.downloadButton.click(this.onDownloadButtonClick_.bind(this));
 
-    this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
-    this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
-
     this.createOptionElements_();
   };
 
@@ -123,29 +120,19 @@
       });
     }
 
+    $.publish(Events.SHOW_PROGRESS, [{"name": 'Building animated GIF ...'}]);
     gif.on('progress', function(percentage) {
-      this.updateProgressStatus_((percentage*100).toFixed(2));
+      $.publish(Events.UPDATE_PROGRESS, [{"progress": (percentage*100).toFixed(1)}]);
     }.bind(this));
 
     gif.on('finished', function(blob) {
-      this.hideProgressStatus_();
+      $.publish(Events.HIDE_PROGRESS);
       pskl.utils.FileUtils.readFile(blob, cb);
     }.bind(this));
 
     gif.render();
   };
 
-  ns.GifExportController.prototype.updateProgressStatus_ = function (percentage) {
-    this.exportProgressStatusEl.innerHTML = percentage + '%';
-    this.exportProgressBarEl.style.width = percentage + "%";
-
-  };
-
-  ns.GifExportController.prototype.hideProgressStatus_ = function () {
-    this.exportProgressStatusEl.innerHTML = '';
-    this.exportProgressBarEl.style.width = "0";
-  };
-
   // FIXME : HORRIBLE COPY/PASTA
 
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {

src/js/service/palette/PaletteImageReader.js

@@ -16,6 +16,10 @@
       this.onWorkerSuccess_.bind(this),
       this.onWorkerStep_.bind(this),
       this.onWorkerError_.bind(this));
+
+
+    $.publish(Events.SHOW_PROGRESS, [{"name": 'Processing image colors ...'}]);
+
     imageProcessor.process();
   };
 
@@ -33,20 +37,16 @@
 
       this.onSuccess(palette);
     }
+    $.publish(Events.HIDE_PROGRESS);
   };
+
   ns.PaletteImageReader.prototype.onWorkerStep_ = function (event) {
-    var data = event.data;
-    var step = data.step;
-    var total = data.total;
-
-    var progress = ((step/total)*100).toFixed(1);
-
-    if (this.currentProgress !== progress) {
-      this.currentProgress = progress;
-      console.log("Image processing completed at : " + progress + "%");
-    }
+    var progress = event.data.progress;
+    $.publish(Events.UPDATE_PROGRESS, [{"progress": progress}]);
   };
+
   ns.PaletteImageReader.prototype.onWorkerError_ = function (event) {
+    $.publish(Events.HIDE_PROGRESS);
     this.onError('Unable to process the image : ' + event.data.message);
   };
 })();

src/js/worker/ImageProcessor.js

@@ -3,12 +3,25 @@
 
   var worker = function () {
 
-    var postStep_ = function (step, total) {
-      this.postMessage({
-        type : 'STEP',
-        step : step,
-        total : total
-      });
+    var currentStep, currentProgress, currentTotal;
+    var initStepCounter_ = function (total) {
+      currentStep = 0;
+      currentProgress = 0;
+      currentTotal = total;
+    };
+
+    var postStep_ = function () {
+      currentStep = currentStep + 1;
+      var progress = ((currentStep / currentTotal) *100).toFixed(1);
+      if (progress != currentProgress) {
+        currentProgress = progress;
+        this.postMessage({
+          type : 'STEP',
+          progress : currentProgress,
+          currentStep : currentStep,
+          total : currentTotal
+        });
+      }
     };
 
     var rgbToHex = function(r, g, b) {
@@ -20,7 +33,7 @@
       var grid = [];
       for (var x = 0 ; x < width ; x++){
         grid[x] = [];
-        postStep_(x, (width-1)*2);
+        postStep_();
         for (var y = 0 ; y < height ; y++){
           // Find the starting index in the one-dimensional image data
           var i = (y * width + x)*4;
@@ -43,9 +56,7 @@
 
       var colorsMap = {};
       for (var i = 0 ; i < grid.length ; i++) {
-        var step = (grid.length-1) + i;
-        var total = (grid.length-1)*2;
-        postStep_(step, total);
+        postStep_();
         for (var j = 0 ; j < grid[i].length ; j++) {
           var color = grid[i][j];
           if (color != 'transparent') {
@@ -57,22 +68,22 @@
     };
 
     this.onmessage = function(event) {
-      var data = event.data;
-      if (data.type === 'RUN_SCRIPT') {
-        this.importScripts(data.script);
-      } else {
-        try {
-          var colorsMap = getColorsMapFromImageData(data.imageData, data.width, data.height);
-          this.postMessage({
-            type : 'SUCCESS',
-            colorsMap : colorsMap
-          });
-        } catch(e) {
-          this.postMessage({
-            type : 'ERROR',
-            message : e.message
-          });
-        }
+      try {
+        var data = event.data;
+
+        initStepCounter_(data.width * 2);
+
+        var colorsMap = getColorsMapFromImageData(data.imageData, data.width, data.height);
+
+        this.postMessage({
+          type : 'SUCCESS',
+          colorsMap : colorsMap
+        });
+      } catch(e) {
+        this.postMessage({
+          type : 'ERROR',
+          message : e.message
+        });
       }
     };
   };

src/piskel-script-list.js

@@ -84,6 +84,7 @@
   "js/controller/ToolController.js",
   "js/controller/PaletteController.js",
   "js/controller/PalettesListController.js",
+  "js/controller/ProgressBarController.js",
   "js/controller/NotificationController.js",
   "js/controller/CanvasBackgroundController.js",
 

src/piskel-style-list.js

@@ -16,6 +16,7 @@
   "css/dialogs-import-image.css",
   "css/dialogs-browse-local.css",
   "css/dialogs-create-palette.css",
+  "css/notifications.css",
   "css/toolbox.css",
   "css/toolbox-layers-list.css",
   "css/toolbox-palettes-list.css",

src/templates/misc-templates.html

@@ -0,0 +1,9 @@
+<div style="display:none">
+  <script type="text/template" id="progress-bar-template">
+    <div class="progress-bar-container">
+      <div class="progress-bar-name">{{name}}</div>
+      <div class="progress-bar-item progress-bar"></div>
+      <div class="progress-bar-item progress-bar-status">{{status}}%</div>
+    </div>
+  </script>
+</div>

src/templates/settings/export.html

@@ -40,7 +40,5 @@
       <div class="gif-export-preview"></div>
       <div class="gif-upload-status"></div>
     </div>
-    <span class="gif-export-progress-status"></span>
-    <div class="gif-export-progress-bar"></div>
   </div>
 </div>