Synchronize resize fields, resize image when importing

css/forms.css

@@ -0,0 +1,40 @@
+.textfield {
+  background : black;
+  border : 1px solid #888;
+  border-radius : 2px;
+  padding : 3px 10px;
+  color : white;
+}
+
+.textfield[disabled=disabled] {
+  background : #3a3a3a;
+}
+
+.textfield-small {
+  width : 50px;
+}
+
+.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;
+  cursor: pointer;
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0px -1px 0 #000;
+  transition: background-color 0.2s linear;
+}
+
+.button:hover {
+  text-decoration: none;
+  background-color: #484848;
+  color: gold;
+}

css/settings.css

@@ -134,6 +134,12 @@
 }
 
 .file-input-status {
+  display: inline-block;
+  width: 130px;
+  overflow: hidden;
+
+  height: 1rem;
+  vertical-align: middle;
   font-style: italic;
   font-weight: normal;
   text-shadow: none;

js/Events.js

@@ -39,6 +39,9 @@ var Events = {
    */
   USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
 
+  /* Listened to by SettingsController */
+  CLOSE_SETTINGS_DRAWER : "CLOSE_SETTINGS_DRAWER",
+
   /**
    * The framesheet was reseted and is now probably drastically different.
    * Number of frames, content of frames, color used for the palette may have changed.

js/controller/settings/ImportController.js

@@ -15,16 +15,39 @@
 
     this.resizeWidth = $("[name=resize-width]");
     this.resizeHeight = $("[name=resize-height]");
+    this.smoothResize =  $("[name=smooth-resize-checkbox]");
 
     this.importForm.submit(this.onImportFormSubmit_.bind(this));
     this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
     this.fileInputButton.click(this.onFileInputClick_.bind(this));
+
+    this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
+    this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
   };
 
   ns.ImportController.prototype.reset_ = function () {
     this.importForm.get(0).reset();
     this.fileInputStatus.html(DEFAULT_FILE_STATUS);
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
 
+  ns.ImportController.prototype.onResizeInputKeyUp_ = function (from, evt) {
+    if (this.importedImage_) {
+      this.synchronizeResizeFields_(evt.target.value, from);
+    }
+  };
+
+  ns.ImportController.prototype.synchronizeResizeFields_ = function (value, from) {
+    value = parseInt(value, 10);
+    if (isNaN(value)) {
+      value = 0;
+    }
+    var height = this.importedImage_.height, width = this.importedImage_.width;
+    if (from === 'width') {
+      this.resizeHeight.val(Math.round(value * height / width));
+    } else {
+      this.resizeWidth.val(Math.round(value * width / height));
+    }
   };
 
   ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
@@ -46,6 +69,7 @@
       var file = files[0];
       if (this.isImage_(file)) {
         this.readImageFile_(file);
+        this.enableAdditionalInputs_();
       } else {
         this.reset_();
         throw "File is not an image : " + file.type;
@@ -53,6 +77,12 @@
     }
   };
 
+  ns.ImportController.prototype.enableAdditionalInputs_ = function () {
+    this.resizeWidth.removeAttr('disabled');
+    this.resizeHeight.removeAttr('disabled');
+    this.smoothResize.removeAttr('disabled');
+  };
+
   ns.ImportController.prototype.readImageFile_ = function (imageFile) {
     pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
   };
@@ -93,7 +123,7 @@
 
   ns.ImportController.prototype.importImageToPiskel_ = function () {
     if (this.importedImage_) {
-      var image = 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;
@@ -102,10 +132,10 @@
         var piskel = pskl.utils.Serializer.createPiskel([frames]);
         pskl.app.piskelController.setPiskel(piskel);
         pskl.app.animationController.setFPS(12);
-      }
 
         this.reset_();
       }
+    }
   };
 
   ns.ImportController.prototype.createFramesFromImage = function (image) {

js/controller/settings/SettingsController.js

@@ -48,6 +48,8 @@
         this.closeDrawer();
       }
     }.bind(this));
+
+    $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
   };
 
   ns.SettingsController.prototype.loadSetting = function (setting) {

js/utils/ImageResizer.js

@@ -0,0 +1,22 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.ImageResizer = {
+    resizeNearestNeighbour : function (image, targetWidth, targetHeight) {
+
+    },
+
+    resize : function (image, targetWidth, targetHeight) {
+      var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
+      var context = canvas.getContext('2d');
+
+      context.save();
+      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;
+    }
+  };
+})();

piskel-script-list.js

@@ -16,6 +16,7 @@ exports.scripts = [
   "js/utils/CanvasUtils.js",
   "js/utils/FileUtils.js",
   "js/utils/FrameUtils.js",
+  "js/utils/ImageResizer.js",
   "js/utils/PixelUtils.js",
   "js/utils/Serializer.js",
   "js/utils/Template.js",

templates/settings/import.html

@@ -5,21 +5,21 @@
   <div class="settings-item">
     <form action="" method="POST" name="import-form">
       <div class="import-section">
-        <input style="display:none" type="file" name="file-upload-input" value="file" />
-        <label>File :
+        <span class="import-section-title">File :</span>
         <button type="button" class="button 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">
-        <label>Size :
-          <input type="text" class="textfield import-resize-field" name="resize-width"/>x
-          <input type="text" class="textfield import-resize-field" name="resize-height"/>
-        </label>
+        <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">
-        <label>Smooth resize :
-          <input type="checkbox" checked="checked" name="smooth-resize-checkbox"/>
-        </label>
+        <span class="import-section-title">Smooth resize :</span>
+        <input type="checkbox" disabled="disabled" checked="checked" name="smooth-resize-checkbox"/>
       </div>
       <input type="submit" class="button import-button" value="Import" />
     </form>