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

@@ -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;

css/style.css

@@ -300,3 +300,7 @@ body {
 .user-message .close:hover {
   color: black;
 }
+
+.image-link {
+  color : gold;
+}

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 @@
+         <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+         <div class="drawer vertical-centerer">
+           <div class="drawer-content" id="drawer-container">
++            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+             <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+             <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
+-            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+             <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+             <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+-            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
++            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
++            <iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+           </div>
+         </div>
+       </div>
+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 = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
++      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 @@
+   </div>
+ 
+   <div
++    data-setting="png"
+     class="tool-icon upload-cloud-icon"
+     title="Upload as a spritesheet PNG"
+-    onclick="pskl.app.uploadAsSpritesheetPNG()"
+     rel="tooltip" data-placement="left">
+     <span class="label">PNG</span>
+   </div>
+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 @@
+       <input type="submit" class="button button-primary gif-upload-button" value="Upload" />
+     </form>
+     <div class="gif-export-preview"></div>
++    <div class="gif-upload-status"></div>
+   </div>
+ </div>
+\ No newline at end of file

index.html

@@ -51,12 +51,13 @@
         <iframe src="templates/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <div class="drawer vertical-centerer">
           <div class="drawer-content" id="drawer-container">
+            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/import.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
             <iframe src="templates/settings/localstorage.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
-            <iframe src="templates/settings/save.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/export-gif.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
+            <iframe src="templates/settings/export-png.html" onload="iframeloader.onLoad(event)"  data-iframe-loader="store"></iframe>
           </div>
         </div>
       </div>

js/Constants.js

@@ -44,8 +44,8 @@ var Constants = {
       SAVE : 'save'
     }
   },
-  IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload',
+  IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload',
-  IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
+  IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/',
 
   GRID_STROKE_WIDTH: 1,
   ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',

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 = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+      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;
+  };
 })();

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 = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+      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 = "<img class='light-picker-background' style='max-width:240px;' src='"+src+"'/>";
+  };
+
+  ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
+    if (url.length > maxLength) {
+      url = url.substring(0, maxLength);
+      url += suffix;
+    }
+    return url;
+  };
+})();

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

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;
     }

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",

templates/settings.html

@@ -43,9 +43,9 @@
   </div>
 
   <div
+    data-setting="png"
     class="tool-icon upload-cloud-icon"
     title="Upload as a spritesheet PNG"
-    onclick="pskl.app.uploadAsSpritesheetPNG()"
     rel="tooltip" data-placement="left">
     <span class="label">PNG</span>
   </div>

templates/settings/export-gif.html

@@ -13,5 +13,6 @@
       <input type="submit" class="button button-primary gif-upload-button" value="Upload" />
     </form>
     <div class="gif-export-preview"></div>
+    <div class="gif-upload-status"></div>
   </div>
 </div>

templates/settings/export-png.html

@@ -0,0 +1,15 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Export to PNG
+  </div>
+  <div class="settings-item">
+    <span>Preview : </span>
+    <div class="png-export-preview"></div>
+    <form action="" method="POST" name="png-export-upload-form">
+      <div class="png-export-radio-group"></div>
+      <input type="submit" class="button button-primary png-upload-button" value="Upload" />
+      <!-- <input type="button" class="button png-download-button" value="Download" /> -->
+      <div class="png-upload-status"></div>
+    </form>
+  </div>
+</div>