renamed all references to dpi to zoom for consistency (also wtf dpi anyway !)

js/controller/AnimatedPreviewController.js

@@ -1,6 +1,6 @@
 (function () {
   var ns = $.namespace("pskl.controller");
-  ns.AnimatedPreviewController = function (piskelController, container, dpi) {
+  ns.AnimatedPreviewController = function (piskelController, container) {
     this.piskelController = piskelController;
     this.container = container;
 
@@ -56,7 +56,7 @@
   };
 
   /**
-   * Calculate the preview DPI depending on the framesheet size
+   * Calculate the preview zoom depending on the framesheet size
    */
   ns.AnimatedPreviewController.prototype.calculateZoom_ = function () {
     var frame = this.piskelController.getCurrentFrame();

js/controller/PreviewFilmController.js

@@ -208,7 +208,7 @@
   };
 
   /**
-   * Calculate the preview DPI depending on the piskel size
+   * Calculate the preview zoom depending on the piskel size
    */
   ns.PreviewFilmController.prototype.calculateZoom_ = function () {
     var curFrame = this.piskelController.getCurrentFrame(),
@@ -219,6 +219,6 @@
     var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
     var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
 
-    return pskl.PixelUtils.calculateDPI(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
+    return pskl.PixelUtils.calculateZoom(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
   };
 })();

js/controller/settings/GifExportController.js

@@ -8,18 +8,18 @@
   /**
    * List of Resolutions applicable for Gif export
    * @static
-   * @type {Array} array of Objects {dpi:{Number}, default:{Boolean}}
+   * @type {Array} array of Objects {zoom:{Number}, default:{Boolean}}
    */
   ns.GifExportController.RESOLUTIONS = [
     {
-      'dpi' : 1
+      'zoom' : 1
     },{
-      'dpi' : 5
+      'zoom' : 5
     },{
-      'dpi' : 10,
+      'zoom' : 10,
       'default' : true
     },{
-      'dpi' : 20
+      'zoom' : 20
     }
   ];
 
@@ -37,11 +37,11 @@
 
   ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
     evt.originalEvent.preventDefault();
-    var selectedDpi = this.getSelectedDpi_(),
+    var selectedZoom = this.getSelectedZoom_(),
         fps = this.piskelController.getFPS(),
-        dpi = selectedDpi;
+        zoom = selectedZoom;
 
-    this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
+    this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
   };
 
   ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
@@ -59,15 +59,15 @@
     this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
   };
 
-  ns.GifExportController.prototype.getSelectedDpi_ = function () {
+  ns.GifExportController.prototype.getSelectedZoom_ = function () {
-    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"),
+    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
         radios = Array.prototype.slice.call(radiosColl,0);
     var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
 
     if (selectedRadios.length == 1) {
       return selectedRadios[0].value;
     } else {
-      throw "Unexpected error when retrieving selected dpi";
+      throw "Unexpected error when retrieving selected zoom";
     }
   };
 
@@ -80,9 +80,9 @@
   };
 
   ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
-    var dpi = resolution.dpi;
+    var zoom = resolution.zoom;
-    var label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight();
+    var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
-    var value = dpi;
+    var value = zoom;
 
     var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
     var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
@@ -104,17 +104,17 @@
     reader.readAsDataURL(blob);
   };
 
-  ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(dpi, fps, cb) {
+  ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
     var gif = new window.GIF({
       workers: 2,
       quality: 10,
-      width: this.piskelController.getWidth()*dpi,
+      width: this.piskelController.getWidth()*zoom,
-      height: this.piskelController.getHeight()*dpi
+      height: this.piskelController.getHeight()*zoom
     });
 
     for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
       var frame = this.piskelController.getFrameAt(i);
-      var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
+      var renderer = new pskl.rendering.CanvasRenderer(frame, zoom);
       gif.addFrame(renderer.render(), {
         delay: 1000 / fps
       });

js/rendering/CanvasRenderer.js

@@ -1,9 +1,9 @@
 (function () {
 
   var ns = $.namespace("pskl.rendering");
-  ns.CanvasRenderer = function (frame, dpi) {
+  ns.CanvasRenderer = function (frame, zoom) {
     this.frame = frame;
-    this.dpi = dpi;
+    this.zoom = zoom;
     this.transparentColor_ = 'white';
   };
 
@@ -36,12 +36,12 @@
     }
     context.fillStyle = color;
 
-    context.fillRect(col * this.dpi, row * this.dpi, this.dpi, this.dpi);
+    context.fillRect(col * this.zoom, row * this.zoom, this.zoom, this.zoom);
   };
 
   ns.CanvasRenderer.prototype.createCanvas_ = function () {
-    var width = this.frame.getWidth() * this.dpi;
+    var width = this.frame.getWidth() * this.zoom;
-    var height = this.frame.getHeight() * this.dpi;
+    var height = this.frame.getHeight() * this.zoom;
     return pskl.CanvasUtils.createCanvas(width, height);
   };
 })();

js/utils/PixelUtils.js

@@ -147,31 +147,31 @@
     },
 
     /**
-     * Calculate and return the maximal DPI to display a picture in a given container.
+     * Calculate and return the maximal zoom level to display a picture in a given container.
      *
      * @param container jQueryObject Container where the picture should be displayed
      * @param number pictureHeight height in pixels of the picture to display
      * @param number pictureWidth width in pixels of the picture to display
-     * @return number maximal dpi
+     * @return number maximal zoom
      */
-    calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
+    calculateZoomForContainer : function (container, pictureHeight, pictureWidth) {
-      return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
+      return this.calculateZoom(container.height(), container.width(), pictureHeight, pictureWidth);
     },
 
     /**
-     * Calculate and return the maximal DPI to display a picture for a given height and width.
+     * Calculate and return the maximal zoom to display a picture for a given height and width.
      *
      * @param height number Height available to display the picture
      * @param width number Width available to display the picture
      * @param number pictureHeight height in pixels of the picture to display
      * @param number pictureWidth width in pixels of the picture to display
-     * @return number maximal dpi
+     * @return number maximal zoom
      */
-    calculateDPI : function (height, width, pictureHeight, pictureWidth) {
+    calculateZoom : function (height, width, pictureHeight, pictureWidth) {
-      var heightBoundDpi = Math.floor(height / pictureHeight),
+      var heightRatio = Math.floor(height / pictureHeight),
-        widthBoundDpi = Math.floor(width / pictureWidth);
+        widthRatio = Math.floor(width / pictureWidth);
 
-      return Math.min(heightBoundDpi, widthBoundDpi);
+      return Math.min(heightRatio, widthRatio);
     }
   };
 })();

templates/settings/export-gif.html

@@ -6,7 +6,7 @@
     <label>Select resolution:</label>
     <form action="" method="POST" name="gif-export-upload-form">
       <script type="text/template" id="gif-export-radio-template">
-          <label style="display:block"><input type="radio" name="gif-dpi" value="{{value}}"/>
+          <label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
           {{label}}</label>
       </script>
       <div class="gif-export-radio-group"></div>