From a0a1fa7bdf8b25f66c4b7713b1694d9d2b5e8bd1 Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Wed, 23 Oct 2013 23:34:09 +0200
Subject: [PATCH] Added preview picture. Added a flow : start with only file
 input enabled

---
 css/forms.css                                 | 49 ++++++++---
 css/settings.css                              | 41 +++++----
 js/controller/settings/GifExportController.js |  6 +-
 js/controller/settings/ImportController.js    | 87 ++++++++-----------
 js/utils/FrameUtils.js                        | 58 ++++++++++++-
 js/utils/ImageResizer.js                      | 20 +++--
 templates/settings.html                       |  4 +-
 templates/settings/export-gif.html            |  7 +-
 templates/settings/import.html                | 14 +--
 9 files changed, 188 insertions(+), 98 deletions(-)

diff --git a/css/forms.css b/css/forms.css
index f78c1729..8cc1dd53 100644
--- a/css/forms.css
+++ b/css/forms.css
@@ -16,20 +16,22 @@
 
 .button {
   height: 24px;
-  border: none;
   box-sizing: border-box;
-  border-top: 1px solid #666;
-  border-left: 1px solid #333;
-  border-right: 1px solid #333;
-  border-bottom: 1px solid #333;
+
   background-color: #3f3f3f;
+  border: 1px solid #333;
+  border-top-color: #666;
+  border-bottom-color: #222;
+
   cursor: pointer;
-  color: white;
-  font-size: 1rem;
-  font-weight: bold;
-  text-align: center;
   text-decoration: none;
-  text-shadow: 0px -1px 0 #000;
+
+  color: white;
+  text-shadow: 0px -1px 0 black;
+  font-weight: bold;
+  font-size: 1rem;
+  text-align: center;
+
   transition: background-color 0.2s linear;
 }
 
@@ -37,4 +39,31 @@
   text-decoration: none;
   background-color: #484848;
   color: gold;
+}
+
+.button-primary {
+  background-color: rgb(255,215,0); /* gold */
+
+  border-color: rgb(179, 164, 0);
+  border-top-color: white;
+  border-bottom-color: rgb(151, 133, 0);
+
+  color: black;
+  text-shadow: 0px 1px 0 #fff;
+}
+
+.button-primary:hover {
+  background-color: rgb(255,235,20);
+  color: #333;
+}
+
+.button[disabled=disabled],
+.button[disabled=disabled]:hover {
+  cursor:default;
+  background-color: #aaa;
+  color: #777;
+  text-shadow: 0px 1px 0 #bbb;
+  border-color: #666;
+  border-top-color: #999;
+  border-bottom-color: #555;
 }
\ No newline at end of file
diff --git a/css/settings.css b/css/settings.css
index b1361d92..5b58f9bd 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -93,11 +93,18 @@
 }
 
 /* Gif Export Setting panel*/
-.export-gif-upload-button {
+.gif-upload-button,
+.gif-render-button {
+  /*float : right;*/
   margin-top : 10px;
+  margin-right : 10px;
 }
 
-.export-gif-preview {
+.gif-export-radio-group {
+  margin:10px 0;
+}
+
+.gif-export-preview {
   margin-top:20px;
   max-width:240px;
   position:relative;
@@ -122,6 +129,19 @@
   margin: 15px 0;
 }
 
+.import-section-disabled {
+  color : #888;
+}
+
+.import-section-preview {
+  display : inline-block;
+  height : 60px;
+  width: 60px;
+  border : 1px dashed #999;
+  border-radius: 3px;
+  margin-left : 10px;
+}
+
 .import-resize-field {
   width: 30px;
   margin: 0px 8px;
@@ -138,23 +158,10 @@
   width: 130px;
   overflow: hidden;
 
-  height: 1rem;
+  height: 1.5rem;
+  word-break : break-all;
   vertical-align: middle;
   font-style: italic;
   font-weight: normal;
   text-shadow: none;
-}
-
-.import-button {
-  float: right;
-  padding : 8px 10px;
-  height: auto;
-  background: gold;
-  color: black;
-  text-shadow: 0px 1px 0 #fff;
-  border-radius: 2px;
-  font-size : 1.2rem;
-  border-color: rgb(179, 164, 0);
-  border-top-color: white;
-  border-bottom-color: rgb(151, 133, 0);
 }
\ No newline at end of file
diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js
index 58ed6ca6..42e57d3d 100644
--- a/js/controller/settings/GifExportController.js
+++ b/js/controller/settings/GifExportController.js
@@ -24,9 +24,9 @@
   ];
 
   ns.GifExportController.prototype.init = function () {
-    this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
+    this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
 
-    this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
+    this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
     this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
 
     this.uploadForm = $("[name=gif-export-upload-form]");
@@ -56,7 +56,7 @@
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
-    this.previewContainerEl.innerHTML = "<img style='max-width:240px;' src='"+src+"'/>";
+    this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
   };
 
   ns.GifExportController.prototype.getSelectedDpi_ = function () {
diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js
index 4e9bc792..f28166f9 100644
--- a/js/controller/settings/ImportController.js
+++ b/js/controller/settings/ImportController.js
@@ -1,6 +1,8 @@
 (function () {
   var ns = $.namespace('pskl.controller.settings');
   var DEFAULT_FILE_STATUS = 'No file selected ...';
+  var PREVIEW_HEIGHT  = 60;
+
   ns.ImportController = function (piskelController) {
     this.piskelController = piskelController;
     this.importedImage_ = null;
@@ -10,12 +12,15 @@
     this.importForm = $("[name=import-form]");
     this.hiddenFileInput = $("[name=file-upload-input]");
     this.fileInputButton = $(".file-input-button");
-    this.fileInputStatus=$(".file-input-status");
+    this.fileInputStatus = $(".file-input-status");
     this.fileInputStatus.html(DEFAULT_FILE_STATUS);
 
+    this.importPreview = $(".import-section-preview");
+
     this.resizeWidth = $("[name=resize-width]");
     this.resizeHeight = $("[name=resize-height]");
     this.smoothResize =  $("[name=smooth-resize-checkbox]");
+    this.submitButton =  $("[name=import-submit]");
 
     this.importForm.submit(this.onImportFormSubmit_.bind(this));
     this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
@@ -69,7 +74,7 @@
       var file = files[0];
       if (this.isImage_(file)) {
         this.readImageFile_(file);
-        this.enableAdditionalInputs_();
+        this.enableDisabledSections_();
       } else {
         this.reset_();
         throw "File is not an image : " + file.type;
@@ -77,10 +82,16 @@
     }
   };
 
-  ns.ImportController.prototype.enableAdditionalInputs_ = function () {
+  ns.ImportController.prototype.enableDisabledSections_ = function () {
     this.resizeWidth.removeAttr('disabled');
     this.resizeHeight.removeAttr('disabled');
     this.smoothResize.removeAttr('disabled');
+    this.submitButton.removeAttr('disabled');
+
+    this.fileInputButton.removeClass('button-primary');
+    this.fileInputButton.blur();
+
+    $('.import-section-disabled').removeClass('import-section-disabled');
   };
 
   ns.ImportController.prototype.readImageFile_ = function (imageFile) {
@@ -101,12 +112,22 @@
   ns.ImportController.prototype.onImageLoaded_ = function (evt) {
     var w = this.importedImage_.width,
         h = this.importedImage_.height;
-    this.resizeWidth.val(w);
-    this.resizeHeight.val(h);
-
     var filePath = this.hiddenFileInput.val();
     var fileName = this.extractFileNameFromPath_(filePath);
     this.fileInputStatus.html(fileName);
+
+    this.resizeWidth.val(w);
+    this.resizeHeight.val(h);
+
+    this.importPreview.width("auto");
+    this.importPreview.append(this.createImagePreview_());
+  };
+
+  ns.ImportController.prototype.createImagePreview_ = function () {
+    var image = document.createElement('IMG');
+    image.src = this.importedImage_.src;
+    image.setAttribute('height', PREVIEW_HEIGHT);
+    return image;
   };
 
   ns.ImportController.prototype.extractFileNameFromPath_ = function (path) {
@@ -123,59 +144,23 @@
 
   ns.ImportController.prototype.importImageToPiskel_ = function () {
     if (this.importedImage_) {
-      var image = pskl.utils.ImageResizer.resize(this.importedImage_, this.resizeWidth.val(), this.resizeHeight.val());
-      var frames = this.createFramesFromImage(image);
-      var confirmationMessage = "You are about to erase your current Piskel. " +
-        "A new Piskel will be created from your picture, size : " + image.width + "x" + image.height;
+      if (window.confirm("You are about to create a new Piskel, unsaved changes will be lost.")) {
+        var w = this.resizeWidth.val(),
+          h = this.resizeHeight.val(),
+          smoothing = !!this.smoothResize.prop('checked');
 
-      if (window.confirm(confirmationMessage)) {
-        var piskel = pskl.utils.Serializer.createPiskel([frames]);
+        var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
+        var frame = pskl.utils.FrameUtils.createFromImage(image);
+
+        var piskel = pskl.utils.Serializer.createPiskel([frame]);
         pskl.app.piskelController.setPiskel(piskel);
-        pskl.app.animationController.setFPS(12);
+        pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
 
         this.reset_();
       }
     }
   };
 
-  ns.ImportController.prototype.createFramesFromImage = function (image) {
-    var w = image.width,
-      h = image.height;
-    var canvas = pskl.CanvasUtils.createCanvas(w, h);
-    var context = canvas.getContext('2d');
-
-    context.drawImage(image, 0,0,w,h,0,0,w,h);
-    var imgData = context.getImageData(0,0,w,h).data;
-    // Draw the zoomed-up pixels to a different canvas context
-    var frames = [];
-    for (var x=0;x<image.width;++x){
-      frames[x] = [];
-      for (var y=0;y<image.height;++y){
-        // Find the starting index in the one-dimensional image data
-        var i = (y*image.width + x)*4;
-        var r = imgData[i  ];
-        var g = imgData[i+1];
-        var b = imgData[i+2];
-        var a = imgData[i+3];
-        if (a < 125) {
-          frames[x][y] = "TRANSPARENT";
-        } else {
-          frames[x][y] = this.rgbToHex_(r,g,b);
-        }
-      }
-    }
-    return frames;
-  };
-
-  ns.ImportController.prototype.rgbToHex_ = function (r, g, b) {
-    return "#" + this.componentToHex_(r) + this.componentToHex_(g) + this.componentToHex_(b);
-  };
-
-  ns.ImportController.prototype.componentToHex_ = function (c) {
-    var hex = c.toString(16);
-    return hex.length == 1 ? "0" + hex : hex;
-  };
-
   ns.ImportController.prototype.isImage_ = function (file) {
     return file.type.indexOf('image') === 0;
   };
diff --git a/js/utils/FrameUtils.js b/js/utils/FrameUtils.js
index cb615527..ef14f935 100644
--- a/js/utils/FrameUtils.js
+++ b/js/utils/FrameUtils.js
@@ -20,6 +20,62 @@
           frameA.setPixel(col, row, p);
         }
       });
+    },
+
+    /**
+     * Create a pskl.model.Frame from an Image object.
+     * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
+     * @param  {Image} image source image
+     * @return {pskl.model.Frame} corresponding frame
+     */
+    createFromImage : function (image) {
+      var w = image.width,
+        h = image.height;
+      var canvas = pskl.CanvasUtils.createCanvas(w, h);
+      var context = canvas.getContext('2d');
+
+      context.drawImage(image, 0,0,w,h,0,0,w,h);
+      var imgData = context.getImageData(0,0,w,h).data;
+      // Draw the zoomed-up pixels to a different canvas context
+      var frame = [];
+      for (var x=0;x<image.width;++x){
+        frame[x] = [];
+        for (var y=0;y<image.height;++y){
+          // Find the starting index in the one-dimensional image data
+          var i = (y*image.width + x)*4;
+          var r = imgData[i  ];
+          var g = imgData[i+1];
+          var b = imgData[i+2];
+          var a = imgData[i+3];
+          if (a < 125) {
+            frame[x][y] = "TRANSPARENT";
+          } else {
+            frame[x][y] = this.rgbToHex(r,g,b);
+          }
+        }
+      }
+      return frame;
+    },
+
+    /**
+     * Convert a rgb(Number, Number, Number) color to hexadecimal representation
+     * @param  {Number} r red value, between 0 and 255
+     * @param  {Number} g green value, between 0 and 255
+     * @param  {Number} b blue value, between 0 and 255
+     * @return {String} hex representation of the color '#ABCDEF'
+     */
+    rgbToHex : function (r, g, b) {
+      return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
+    },
+
+    /**
+     * Convert a color component (as a Number between 0 and 255) to its string hexa representation
+     * @param  {Number} c component value, between 0 and 255
+     * @return {String} eg. '0A'
+     */
+    componentToHex : function (c) {
+      var hex = c.toString(16);
+      return hex.length == 1 ? "0" + hex : hex;
     }
   };
-})();
\ No newline at end of file
+})();
diff --git a/js/utils/ImageResizer.js b/js/utils/ImageResizer.js
index 20c5769f..c3c06f45 100644
--- a/js/utils/ImageResizer.js
+++ b/js/utils/ImageResizer.js
@@ -2,21 +2,29 @@
   var ns = $.namespace('pskl.utils');
 
   ns.ImageResizer = {
-    resizeNearestNeighbour : function (image, targetWidth, targetHeight) {
-
-    },
-
-    resize : function (image, targetWidth, targetHeight) {
+    resize : function (image, targetWidth, targetHeight, smoothingEnabled) {
       var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
       var context = canvas.getContext('2d');
-
       context.save();
+
+      if (!smoothingEnabled) {
+        this.disableSmoothingOnContext(context);
+      }
+
       context.translate(canvas.width / 2, canvas.height / 2);
       context.scale(targetWidth / image.width, targetHeight / image.height);
       context.drawImage(image, -image.width / 2, -image.height / 2);
       context.restore();
 
       return canvas;
+    },
+
+    disableSmoothingOnContext : function (context) {
+      context.imageSmoothingEnabled = false;
+      context.mozImageSmoothingEnabled = false;
+      context.oImageSmoothingEnabled = false;
+      context.webkitImageSmoothingEnabled = false;
+      context.msImageSmoothingEnabled = false;
     }
   };
 })();
\ No newline at end of file
diff --git a/templates/settings.html b/templates/settings.html
index ed48a850..efb455eb 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -13,12 +13,12 @@
     rel="tooltip" data-placement="left">
   </div>
 
-  <a
+<!--   <a
     class="tool-icon gallery-icon"
     title="Visit gallery"
     href="http://juliandescottes.github.io/piskel-website/"
     rel="tooltip" data-placement="left" target="_blank">
-  </a>
+  </a> -->
 
   <div
     class="tool-icon save-icon"
diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html
index a90f7f01..95e1587d 100644
--- a/templates/settings/export-gif.html
+++ b/templates/settings/export-gif.html
@@ -5,13 +5,14 @@
   <div class="settings-item">
     <label>Select resolution:</label>
     <form action="" method="POST" name="gif-export-upload-form">
-      <script type="text/template" id="export-gif-radio-template">
+      <script type="text/template" id="gif-export-radio-template">
           <label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
           {{label}}</label>
       </script>
       <div class="gif-export-radio-group"></div>
-      <input type="submit" class="export-gif-upload-button" value="Upload" />
+      <input type="submit" class="button button-primary gif-upload-button" value="Upload" />
+      <button type="button" class="button gif-render-button">Render</button>
     </form>
-    <div class="export-gif-preview"><div></div></div>
+    <div class="gif-export-preview"></div>
   </div>
 </div>
\ No newline at end of file
diff --git a/templates/settings/import.html b/templates/settings/import.html
index 0201dd42..405cd092 100644
--- a/templates/settings/import.html
+++ b/templates/settings/import.html
@@ -6,22 +6,26 @@
     <form action="" method="POST" name="import-form">
       <div class="import-section">
         <span class="import-section-title">File :</span>
-        <button type="button" class="button file-input-button">Browse</button>
+        <button type="button" class="button  button-primary file-input-button">Browse</button>
         <span class="file-input-status"></span>
         <input style="display:none"
           type="file" name="file-upload-input"
           value="file" accept="image/*"/>
       </div>
-      <div class="import-section">
+      <div class="import-section import-section-disabled">
+        <span class="import-section-title" style="vertical-align:top">Preview :</span>
+        <div class="import-section-preview"></div>
+      </div>
+      <div class="import-section import-section-disabled">
         <span class="import-section-title">Size :</span>
         <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-width"/>x
         <input type="text" disabled="disabled" class="textfield import-resize-field" name="resize-height"/>
       </div>
-      <div class="import-section">
+      <div class="import-section import-section-disabled">
         <span class="import-section-title">Smooth resize :</span>
-        <input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox"/>
+        <input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox" value="1"/>
       </div>
-      <input type="submit" class="button import-button" value="Import" />
+      <input type="submit" name="import-submit" disabled="disabled" class="button button-primary import-button" value="Import" />
     </form>
   </div>
 </div>
\ No newline at end of file