From 00dd6605718e63ec2388956bfe7d505cb5e30fd6 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Mon, 22 Sep 2014 23:51:28 +0200 Subject: [PATCH] Use dedicated service to display progress information --- src/css/notifications.css | 74 +++++++++++++++++++ src/css/settings-export.css | 13 +--- src/css/style.css | 36 --------- src/index.html | 1 + src/js/Events.js | 4 + src/js/app.js | 3 + src/js/controller/ProgressBarController.js | 61 +++++++++++++++ .../settings/GifExportController.js | 19 +---- src/js/service/palette/PaletteImageReader.js | 20 ++--- src/js/worker/ImageProcessor.js | 63 +++++++++------- src/piskel-script-list.js | 1 + src/piskel-style-list.js | 1 + src/templates/misc-templates.html | 9 +++ src/templates/settings/export.html | 2 - 14 files changed, 205 insertions(+), 102 deletions(-) create mode 100644 src/css/notifications.css create mode 100644 src/js/controller/ProgressBarController.js create mode 100644 src/templates/misc-templates.html diff --git a/src/css/notifications.css b/src/css/notifications.css new file mode 100644 index 0000000..b1ab288 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/css/settings-export.css b/src/css/settings-export.css index e6dd2fe..e02406c 100644 --- a/src/css/settings-export.css +++ b/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; -} +} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index c4f2312..deaa44a 100644 --- a/src/css/style.css +++ b/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; } diff --git a/src/index.html b/src/index.html index 969a082..ad7ae0f 100644 --- a/src/index.html +++ b/src/index.html @@ -74,6 +74,7 @@ + diff --git a/src/js/Events.js b/src/js/Events.js index 5b9d110..fb2203a 100644 --- a/src/js/Events.js +++ b/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", diff --git a/src/js/app.js b/src/js/app.js index a6fcd4a..fe8eb76 100644 --- a/src/js/app.js +++ b/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(); diff --git a/src/js/controller/ProgressBarController.js b/src/js/controller/ProgressBarController.js new file mode 100644 index 0000000..5ddb07b --- /dev/null +++ b/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; + } + }; +})(); \ No newline at end of file diff --git a/src/js/controller/settings/GifExportController.js b/src/js/controller/settings/GifExportController.js index c0b68ea..0261849 100644 --- a/src/js/controller/settings/GifExportController.js +++ b/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) { diff --git a/src/js/service/palette/PaletteImageReader.js b/src/js/service/palette/PaletteImageReader.js index 6194590..ff2ba5b 100644 --- a/src/js/service/palette/PaletteImageReader.js +++ b/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); }; })(); \ No newline at end of file diff --git a/src/js/worker/ImageProcessor.js b/src/js/worker/ImageProcessor.js index 45dc344..0cc8020 100644 --- a/src/js/worker/ImageProcessor.js +++ b/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 + }); } }; }; diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index fed8325..b46e240 100644 --- a/src/piskel-script-list.js +++ b/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", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index e20c191..fdb8e0c 100644 --- a/src/piskel-style-list.js +++ b/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", diff --git a/src/templates/misc-templates.html b/src/templates/misc-templates.html new file mode 100644 index 0000000..56d5a0b --- /dev/null +++ b/src/templates/misc-templates.html @@ -0,0 +1,9 @@ +
+ +
\ No newline at end of file diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index 5686593..ff640f3 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -40,7 +40,5 @@
- -