diff --git a/js/controller/AnimatedPreviewController.js b/js/controller/AnimatedPreviewController.js index c61e789a..4fec557a 100644 --- a/js/controller/AnimatedPreviewController.js +++ b/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(); diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 64aa1925..a7bd781c 100644 --- a/js/controller/PreviewFilmController.js +++ b/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; }; })(); \ No newline at end of file diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js index 42e57d3d..636272f4 100644 --- a/js/controller/settings/GifExportController.js +++ b/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 = "
"; }; - ns.GifExportController.prototype.getSelectedDpi_ = function () { - var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"), + ns.GifExportController.prototype.getSelectedZoom_ = function () { + 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 label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight(); - var value = dpi; + var zoom = resolution.zoom; + var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight(); + 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, - height: this.piskelController.getHeight()*dpi + width: this.piskelController.getWidth()*zoom, + 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 }); diff --git a/js/rendering/CanvasRenderer.js b/js/rendering/CanvasRenderer.js index 2153f207..76414535 100644 --- a/js/rendering/CanvasRenderer.js +++ b/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 height = this.frame.getHeight() * this.dpi; + var width = this.frame.getWidth() * this.zoom; + var height = this.frame.getHeight() * this.zoom; return pskl.CanvasUtils.createCanvas(width, height); }; })(); \ No newline at end of file diff --git a/js/utils/PixelUtils.js b/js/utils/PixelUtils.js index c0c6973f..767e8b74 100644 --- a/js/utils/PixelUtils.js +++ b/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) { - return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth); + calculateZoomForContainer : function (container, 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) { - var heightBoundDpi = Math.floor(height / pictureHeight), - widthBoundDpi = Math.floor(width / pictureWidth); + calculateZoom : function (height, width, pictureHeight, pictureWidth) { + var heightRatio = Math.floor(height / pictureHeight), + widthRatio = Math.floor(width / pictureWidth); - return Math.min(heightBoundDpi, widthBoundDpi); + return Math.min(heightRatio, widthRatio); } }; })(); \ No newline at end of file diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html index 95e1587d..516f237a 100644 --- a/templates/settings/export-gif.html +++ b/templates/settings/export-gif.html @@ -6,7 +6,7 @@