Import from file

js/controller/settings/ImportController.js

@@ -1,8 +1,88 @@
 (function () {
   var ns = $.namespace('pskl.controller.settings');
 
-  ns.ImportController = function () {};
+  ns.ImportController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
 
-  ns.ImportController.prototype.init = function () {};
+  ns.ImportController.prototype.init = function () {
+    this.fileUploadInput = $("[name=file-upload-input]");
+
+    this.importForm = $("[name=import-form]");
+    this.importForm.submit(this.onImportFormSubmit_.bind(this));
+  };
+
+  ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+    var files = this.fileUploadInput.get(0).files;
+    if (files.length == 1) {
+      var file = files[0];
+      if (this.isImage_(file)) {
+        this.readImageFile_(file);
+      } else {
+        throw "File is not an image : " + file.type;
+      }
+    }
+  };
+
+  ns.ImportController.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageData_.bind(this));
+  };
+
+  ns.ImportController.prototype.processImageData_ = function (imageData) {
+    var image = new Image();
+    image.onload = this.onImageLoaded_.bind(this);
+    image.src = imageData;
+  };
+
+  ns.ImportController.prototype.onImageLoaded_ = function (evt) {
+    var image = evt.target;
+
+    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 framesheet = [];
+    for (var x=0;x<image.width;++x){
+      framesheet[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) {
+          framesheet[x][y] = "TRANSPARENT";
+        } else {
+          framesheet[x][y] = this.rgbToHex_(r,g,b);
+        }
+      }
+    }
+    var confirmationMessage = "You are about to erase your current Piskel. " +
+      "A new Piskel will be created from your picture, size : " + w + "x" + h;
+
+    if (window.confirm(confirmationMessage)) {
+      console.log(framesheet);
+    } else {
+      console.log("ABORT ABORT");
+    }
+  };
+
+  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;
+  };
 
 })();

js/utils/FileUtils.js

@@ -0,0 +1,13 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.FileUtils = {
+    readFile : function (file, callback) {
+      var reader = new FileReader();
+      reader.onload = function(event){
+        callback(event.target.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+})();

js/utils/Template.js

@@ -1,7 +1,7 @@
 (function () {
-  var ns = $.namespace("pskl");
+  var ns = $.namespace("pskl.utils");
 
-  ns.utils.Template = {
+  ns.Template = {
     get : function (templateId) {
       var template = document.getElementById(templateId);
       if (template) {

piskel-script-list.js

@@ -14,6 +14,7 @@ exports.scripts = [
   // Libraries
   "js/utils/core.js",
   "js/utils/CanvasUtils.js",
+  "js/utils/FileUtils.js",
   "js/utils/FrameUtils.js",
   "js/utils/PixelUtils.js",
   "js/utils/Serializer.js",

templates/settings/import.html

@@ -3,11 +3,11 @@
     Import Picture
   </div>
   <div class="settings-item">
-    <form action="" method="POST" name="gif-export-upload-form">
+    <form action="" method="POST" name="import-form">
       <div>
         <input type="radio" name="upload-source-type" checked="checked  " value="1"/>
         <label>From your computer :
-          <input type="file" value="file" />
+          <input type="file" name="file-upload-input" value="file" />
         </label>
       </div>
       <div>