From 087b8c57c55c61a0f439c213f07a1ba8f1075f24 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sat, 8 Mar 2014 17:23:20 +0100 Subject: [PATCH] UI : Align PNG export with GIF export - PNG export now has its own panel - Lots of code duplication between PNG and GIF controller => FIXIT - Added a link displayed after image upload --- css/settings.css | 19 +- css/style.css | 4 + diff.txt | 222 ++++++++++++++++++ index.html | 5 +- js/Constants.js | 4 +- js/controller/settings/GifExportController.js | 29 +++ js/controller/settings/PngExportController.js | 63 +++++ js/controller/settings/SettingsController.js | 4 + js/drawingtools/BaseTool.js | 6 +- piskel-script-list.js | 1 + templates/settings.html | 2 +- templates/settings/export-gif.html | 1 + templates/settings/export-png.html | 15 ++ 13 files changed, 367 insertions(+), 8 deletions(-) create mode 100644 diff.txt create mode 100644 js/controller/settings/PngExportController.js create mode 100644 templates/settings/export-png.html diff --git a/css/settings.css b/css/settings.css index 829a727e..32dd7dfd 100644 --- a/css/settings.css +++ b/css/settings.css @@ -161,7 +161,8 @@ border: gold 1px solid; } -/* Gif Export Setting panel*/ +/* Gif/Png Export Setting panel*/ +/*******************************/ .gif-upload-button, .gif-render-button { /*float : right;*/ @@ -173,12 +174,26 @@ margin:10px 0; } -.gif-export-preview { +.gif-export-preview, +.png-export-preview { margin-top:20px; max-width:240px; position:relative; } +.png-export-preview { + margin:10px 0; + overflow: hidden; +} + +.png-export-preview img { + float: left; +} + +.png-upload-status { + margin : 10px 0; +} + .preview-upload-ongoing:before{ content: "Upload ongoing ..."; position: absolute; diff --git a/css/style.css b/css/style.css index a61879a0..fe9405bc 100644 --- a/css/style.css +++ b/css/style.css @@ -300,3 +300,7 @@ body { .user-message .close:hover { color: black; } + +.image-link { + color : gold; +} \ No newline at end of file diff --git a/diff.txt b/diff.txt new file mode 100644 index 00000000..6e5bf0c5 --- /dev/null +++ b/diff.txt @@ -0,0 +1,222 @@ +diff --git a/css/settings.css b/css/settings.css +index 829a727..32dd7df 100644 +--- a/css/settings.css ++++ b/css/settings.css +@@ -161,7 +161,8 @@ + border: gold 1px solid; + } + +-/* Gif Export Setting panel*/ ++/* Gif/Png Export Setting panel*/ ++/*******************************/ + .gif-upload-button, + .gif-render-button { + /*float : right;*/ +@@ -173,12 +174,26 @@ + margin:10px 0; + } + +-.gif-export-preview { ++.gif-export-preview, ++.png-export-preview { + margin-top:20px; + max-width:240px; + position:relative; + } + ++.png-export-preview { ++ margin:10px 0; ++ overflow: hidden; ++} ++ ++.png-export-preview img { ++ float: left; ++} ++ ++.png-upload-status { ++ margin : 10px 0; ++} ++ + .preview-upload-ongoing:before{ + content: "Upload ongoing ..."; + position: absolute; +diff --git a/css/style.css b/css/style.css +index a61879a..fe9405b 100644 +--- a/css/style.css ++++ b/css/style.css +@@ -300,3 +300,7 @@ body { + .user-message .close:hover { + color: black; + } ++ ++.image-link { ++ color : gold; ++} +\ No newline at end of file +diff --git a/index.html b/index.html +index 05d758b..36cb01c 100644 +--- a/index.html ++++ b/index.html +@@ -51,12 +51,13 @@ + +
+
++ + + +- + + +- ++ ++ +
+
+ +diff --git a/js/Constants.js b/js/Constants.js +index 71a12bc..67be116 100644 +--- a/js/Constants.js ++++ b/js/Constants.js +@@ -44,8 +44,8 @@ var Constants = { + SAVE : 'save' + } + }, +- IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload', +- IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/', ++ IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload', ++ IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/', + + GRID_STROKE_WIDTH: 1, + ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', +diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js +index ac7602e..9a5bd75 100644 +--- a/js/controller/settings/GifExportController.js ++++ b/js/controller/settings/GifExportController.js +@@ -1,6 +1,8 @@ + (function () { + var ns = $.namespace("pskl.controller.settings"); + ++ var URL_MAX_LENGTH = 60; ++ + ns.GifExportController = function (piskelController) { + this.piskelController = piskelController; + }; +@@ -26,6 +28,8 @@ + ns.GifExportController.prototype.init = function () { + this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template"); + ++ this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0]; ++ + this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0]; + this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0]; + +@@ -52,7 +56,9 @@ + + ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) { + this.updatePreview_(imageUrl); ++ this.updateStatus_(imageUrl); + this.previewContainerEl.classList.remove("preview-upload-ongoing"); ++ + }; + + ns.GifExportController.prototype.updatePreview_ = function (src) { +@@ -127,4 +133,27 @@ + + gif.render(); + }; ++ ++ // FIXME : HORRIBLE COPY/PASTA ++ ++ ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) { ++ if (imageUrl) { ++ var linkTpl = "{{shortLink}}"; ++ var linkHtml = pskl.utils.Template.replace(linkTpl, { ++ link : imageUrl, ++ shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...') ++ }); ++ this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml; ++ } else { ++ // FIXME : Should display error message instead ++ } ++ }; ++ ++ ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) { ++ if (url.length > maxLength) { ++ url = url.substring(0, maxLength); ++ url += suffix; ++ } ++ return url; ++ }; + })(); +\ No newline at end of file +diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js +index de4a0bd..dc20b2d 100644 +--- a/js/controller/settings/SettingsController.js ++++ b/js/controller/settings/SettingsController.js +@@ -14,6 +14,10 @@ + template : 'templates/settings/export-gif.html', + controller : ns.GifExportController + }, ++ 'png' : { ++ template : 'templates/settings/export-png.html', ++ controller : ns.PngExportController ++ }, + 'import' : { + template : 'templates/settings/import.html', + controller : ns.ImportController +diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js +index 1d2dfd4..a78d5cf 100644 +--- a/js/drawingtools/BaseTool.js ++++ b/js/drawingtools/BaseTool.js +@@ -33,7 +33,11 @@ + + ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) { + if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) { +- overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); ++ try { ++ overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); ++ } catch (e) { ++ console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed'); ++ } + this.highlightedPixelRow = null; + this.highlightedPixelCol = null; + } +diff --git a/piskel-script-list.js b/piskel-script-list.js +index 65247a7..6048fa7 100644 +--- a/piskel-script-list.js ++++ b/piskel-script-list.js +@@ -72,6 +72,7 @@ exports.scripts = [ + "js/controller/settings/ApplicationSettingsController.js", + "js/controller/settings/ResizeController.js", + "js/controller/settings/GifExportController.js", ++ "js/controller/settings/PngExportController.js", + "js/controller/settings/LocalStorageController.js", + "js/controller/settings/SaveController.js", + "js/controller/settings/ImportController.js", +diff --git a/templates/settings.html b/templates/settings.html +index bb12a43..22b9a43 100644 +--- a/templates/settings.html ++++ b/templates/settings.html +@@ -43,9 +43,9 @@ + + +
+ PNG +
+diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html +index b2c9576..97feaf3 100644 +--- a/templates/settings/export-gif.html ++++ b/templates/settings/export-gif.html +@@ -13,5 +13,6 @@ + + +
++
+ + +\ No newline at end of file diff --git a/index.html b/index.html index 05d758b1..36cb01c3 100644 --- a/index.html +++ b/index.html @@ -51,12 +51,13 @@
+ - - + +
diff --git a/js/Constants.js b/js/Constants.js index 71a12bc9..67be1167 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -44,8 +44,8 @@ var Constants = { SAVE : 'save' } }, - IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload', - IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/', + IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload', + IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/', GRID_STROKE_WIDTH: 1, ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js index ac7602e6..9a5bd75f 100644 --- a/js/controller/settings/GifExportController.js +++ b/js/controller/settings/GifExportController.js @@ -1,6 +1,8 @@ (function () { var ns = $.namespace("pskl.controller.settings"); + var URL_MAX_LENGTH = 60; + ns.GifExportController = function (piskelController) { this.piskelController = piskelController; }; @@ -26,6 +28,8 @@ ns.GifExportController.prototype.init = function () { this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template"); + this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0]; + this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0]; this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0]; @@ -52,7 +56,9 @@ ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) { this.updatePreview_(imageUrl); + this.updateStatus_(imageUrl); this.previewContainerEl.classList.remove("preview-upload-ongoing"); + }; ns.GifExportController.prototype.updatePreview_ = function (src) { @@ -127,4 +133,27 @@ gif.render(); }; + + // FIXME : HORRIBLE COPY/PASTA + + ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) { + if (imageUrl) { + var linkTpl = "{{shortLink}}"; + var linkHtml = pskl.utils.Template.replace(linkTpl, { + link : imageUrl, + shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...') + }); + this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml; + } else { + // FIXME : Should display error message instead + } + }; + + ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) { + if (url.length > maxLength) { + url = url.substring(0, maxLength); + url += suffix; + } + return url; + }; })(); \ No newline at end of file diff --git a/js/controller/settings/PngExportController.js b/js/controller/settings/PngExportController.js new file mode 100644 index 00000000..a788434a --- /dev/null +++ b/js/controller/settings/PngExportController.js @@ -0,0 +1,63 @@ +(function () { + var ns = $.namespace("pskl.controller.settings"); + + var URL_MAX_LENGTH = 60; + + ns.PngExportController = function (piskelController) { + this.piskelController = piskelController; + }; + + ns.PngExportController.prototype.init = function () { + this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0]; + this.uploadStatusContainerEl = document.querySelectorAll(".png-upload-status")[0]; + + this.uploadForm = $("[name=png-export-upload-form]"); + this.uploadForm.submit(this.onUploadFormSubmit_.bind(this)); + + this.updatePreview_(this.getFramesheetAsBase64Png()); + }; + + ns.PngExportController.prototype.onUploadFormSubmit_ = function (evt) { + evt.originalEvent.preventDefault(); + + this.previewContainerEl.classList.add("preview-upload-ongoing"); + pskl.app.imageUploadService.upload(this.getFramesheetAsBase64Png(), this.onImageUploadCompleted_.bind(this)); + }; + + ns.PngExportController.prototype.getFramesheetAsBase64Png = function () { + var renderer = new pskl.rendering.PiskelRenderer(this.piskelController); + var framesheetCanvas = renderer.renderAsCanvas(); + return framesheetCanvas.toDataURL("image/png"); + }; + + ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) { + this.updatePreview_(imageUrl); + this.updateStatus_(imageUrl); + this.previewContainerEl.classList.remove("preview-upload-ongoing"); + }; + + ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) { + if (imageUrl) { + var linkTpl = "{{shortLink}}"; + var linkHtml = pskl.utils.Template.replace(linkTpl, { + link : imageUrl, + shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...') + }); + this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml; + } else { + // FIXME : Should display error message instead + } + }; + + ns.PngExportController.prototype.updatePreview_ = function (src) { + this.previewContainerEl.innerHTML = ""; + }; + + ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) { + if (url.length > maxLength) { + url = url.substring(0, maxLength); + url += suffix; + } + return url; + }; +})(); \ No newline at end of file diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js index de4a0bd9..dc20b2d2 100644 --- a/js/controller/settings/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -14,6 +14,10 @@ template : 'templates/settings/export-gif.html', controller : ns.GifExportController }, + 'png' : { + template : 'templates/settings/export-png.html', + controller : ns.PngExportController + }, 'import' : { template : 'templates/settings/import.html', controller : ns.ImportController diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index 1d2dfd40..a78d5cf3 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -33,7 +33,11 @@ ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) { if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) { - overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + try { + overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + } catch (e) { + console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed'); + } this.highlightedPixelRow = null; this.highlightedPixelCol = null; } diff --git a/piskel-script-list.js b/piskel-script-list.js index 65247a70..6048fa74 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -72,6 +72,7 @@ exports.scripts = [ "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/ResizeController.js", "js/controller/settings/GifExportController.js", + "js/controller/settings/PngExportController.js", "js/controller/settings/LocalStorageController.js", "js/controller/settings/SaveController.js", "js/controller/settings/ImportController.js", diff --git a/templates/settings.html b/templates/settings.html index bb12a438..22b9a435 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -43,9 +43,9 @@
PNG
diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html index b2c95760..97feaf34 100644 --- a/templates/settings/export-gif.html +++ b/templates/settings/export-gif.html @@ -13,5 +13,6 @@
+
\ No newline at end of file diff --git a/templates/settings/export-png.html b/templates/settings/export-png.html new file mode 100644 index 00000000..6827e13c --- /dev/null +++ b/templates/settings/export-png.html @@ -0,0 +1,15 @@ +
+
+ Export to PNG +
+
+ Preview : +
+
+
+ + +
+
+
+
\ No newline at end of file