Layers:Review:Cleanup of GifExportController

js/app.js

@@ -11,7 +11,7 @@
 
     init : function () {
       var size = this.readSizeFromURL_();
-      var piskel = new pskl.model.Piskel(size.width, size.height, Constants.DEFAULT.FPS);
+      var piskel = new pskl.model.Piskel(size.width, size.height);
 
       var layer = new pskl.model.Layer("Layer 1");
       var frame = new pskl.model.Frame(size.width, size.height);
@@ -66,7 +66,6 @@
 
       this.initBootstrapTooltips_();
 
-
       /**
        * True when piskel is running in static mode (no back end needed).
        * When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl

js/controller/AnimatedPreviewController.js

@@ -7,8 +7,8 @@
     this.elapsedTime = 0;
     this.currentIndex = 0;
 
-    this.fps = parseInt($("#preview-fps")[0].value, 10);
-    
+    this.setFPS(Constants.DEFAULT.FPS);
+
     var renderingOptions = {
       "dpi": this.calculateDPI_()
     };
@@ -34,6 +34,10 @@
     $("#display-fps").html(this.fps + " FPS");
   };
 
+  ns.AnimatedPreviewController.prototype.getFPS = function () {
+    return this.fps;
+  };
+
   ns.AnimatedPreviewController.prototype.render = function (delta) {
     this.elapsedTime += delta;
     var index = Math.floor(this.elapsedTime / (1000/this.fps));
@@ -55,7 +59,7 @@
       framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
       framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
     // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
-    
+
     //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
     return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
   };

js/controller/PiskelController.js

@@ -24,6 +24,17 @@
     return this.piskel.getWidth();
   };
 
+  /**
+   * TODO : this should be removed
+   * FPS should be stored in the Piskel model and not in the
+   * animationController
+   * Then piskelController should be able to return this information
+   * @return {Number} Frames per second for the current animation
+   */
+  ns.PiskelController.prototype.getFPS = function () {
+    return pskl.app.animationController.getFPS();
+  };
+
   ns.PiskelController.prototype.getLayers = function () {
     return this.piskel.getLayers();
   };

js/controller/settings/GifExportController.js

@@ -1,35 +1,58 @@
 (function () {
   var ns = $.namespace("pskl.controller.settings");
+
   ns.GifExportController = function (piskelController) {
     this.piskelController = piskelController;
   };
 
+  /**
+   * List of Resolutions applicable for Gif export
+   * @static
+   * @type {Array} array of Objects {dpi:{Number}, default:{Boolean}}
+   */
+  ns.GifExportController.RESOLUTIONS = [
+    {
+      'dpi' : 1
+    },{
+      'dpi' : 5
+    },{
+      'dpi' : 10,
+      'default' : true
+    },{
+      'dpi' : 20
+    }
+  ];
+
   ns.GifExportController.prototype.init = function () {
     this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
 
     this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
     this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
 
-    this.uploadFormJQ = $("[name=gif-export-upload-form]");
-    this.uploadFormJQ.submit(this.upload.bind(this));
+    this.uploadForm = $("[name=gif-export-upload-form]");
+    this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
 
-    this.initRadioElements_();
+    this.createRadioElements_();
   };
 
-  ns.GifExportController.prototype.upload = function (evt) {
+  ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
     evt.originalEvent.preventDefault();
     var selectedDpi = this.getSelectedDpi_(),
-        fps = pskl.app.animationController.fps,
+        fps = this.piskelController.getFPS(),
         dpi = selectedDpi;
 
-    this.renderAsImageDataAnimatedGIF(dpi, fps, function (imageData) {
-      this.updatePreview_(imageData);
-      this.previewContainerEl.classList.add("preview-upload-ongoing");
-      pskl.app.imageUploadService.upload(imageData, function (imageUrl) {
-        this.updatePreview_(imageUrl);
-        this.previewContainerEl.classList.remove("preview-upload-ongoing");
-      }.bind(this));
-    }.bind(this));
+    this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
+  };
+
+  ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
+    this.updatePreview_(imageData);
+    this.previewContainerEl.classList.add("preview-upload-ongoing");
+    pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
+  };
+
+  ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
+    this.updatePreview_(imageUrl);
+    this.previewContainerEl.classList.remove("preview-upload-ongoing");
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
@@ -37,7 +60,7 @@
   };
 
   ns.GifExportController.prototype.getSelectedDpi_ = function () {
-    var radiosColl = this.uploadFormJQ.get(0).querySelectorAll("[name=gif-dpi]"),
+    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"),
         radios = Array.prototype.slice.call(radiosColl,0);
     var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
 
@@ -48,32 +71,28 @@
     }
   };
 
-  ns.GifExportController.prototype.initRadioElements_ = function () {
-    var dpis = [
-      [1],
-      [5],
-      [10,true], //default
-      [20]
-    ];
-
-    for (var i = 0 ; i < dpis.length ; i++) {
-      var dpi = dpis[i];
-      var radio = this.createRadioForDpi_(dpi);
+  ns.GifExportController.prototype.createRadioElements_ = function () {
+    var resolutions = ns.GifExportController.RESOLUTIONS;
+    for (var i = 0 ; i < resolutions.length ; i++) {
+      var radio = this.createRadioForResolution_(resolutions[i]);
       this.radioGroupEl.appendChild(radio);
     }
   };
 
-  ns.GifExportController.prototype.createRadioForDpi_ = function (dpi) {
-    var label = dpi[0]*this.piskelController.getWidth() + "x" + dpi[0]*this.piskelController.getHeight();
-    var value = dpi[0];
-    var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
-    var radio = pskl.utils.Template.createFromHTML(radioHTML);
+  ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
+    var dpi = resolution.dpi;
+    var label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight();
+    var value = dpi;
 
-    if (dpi[1]) {
-      radio.getElementsByTagName("input")[0].setAttribute("checked", "checked");
+    var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
+    var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
+
+    if (resolution['default']) {
+      var input = radioEl.getElementsByTagName("input")[0];
+      input.setAttribute("checked", "checked");
     }
 
-    return radio;
+    return radioEl;
   };
 
   ns.GifExportController.prototype.blobToBase64_ = function(blob, cb) {

js/model/Piskel.js

@@ -6,14 +6,11 @@
    * @param {Number} width
    * @param {Number} height
    */
-  ns.Piskel = function (width, height, fps) {
-    if (width && height && fps) {
+  ns.Piskel = function (width, height) {
+    if (width && height) {
       /** @type {Array} */
       this.layers = [];
 
-      /** @type {Number} */
-      this.fps = fps;
-
       /** @type {Number} */
       this.width = width;
 
@@ -36,10 +33,6 @@
     return this.width;
   };
 
-  ns.Piskel.prototype.getFps = function () {
-    return this.fps;
-  };
-
   ns.Piskel.prototype.getLayers = function () {
     return this.layers;
   };

templates/preview.html

@@ -3,7 +3,7 @@
     <div class="canvas-background"></div>
   </div>
   <div>
-    <span id="display-fps" class="display-fps">12 FPS</span>
-    <input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
-  </div>   
+    <span id="display-fps" class="display-fps"></span>
+    <input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
+  </div>
 </div>