mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Layers:Review:Cleanup of GifExportController
This commit is contained in:
parent
7aa407970f
commit
f514b6cd10
|
@ -11,7 +11,7 @@
|
||||||
|
|
||||||
init : function () {
|
init : function () {
|
||||||
var size = this.readSizeFromURL_();
|
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 layer = new pskl.model.Layer("Layer 1");
|
||||||
var frame = new pskl.model.Frame(size.width, size.height);
|
var frame = new pskl.model.Frame(size.width, size.height);
|
||||||
|
@ -66,7 +66,6 @@
|
||||||
|
|
||||||
this.initBootstrapTooltips_();
|
this.initBootstrapTooltips_();
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* True when piskel is running in static mode (no back end needed).
|
* 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
|
* When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
this.elapsedTime = 0;
|
this.elapsedTime = 0;
|
||||||
this.currentIndex = 0;
|
this.currentIndex = 0;
|
||||||
|
|
||||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
this.setFPS(Constants.DEFAULT.FPS);
|
||||||
|
|
||||||
var renderingOptions = {
|
var renderingOptions = {
|
||||||
"dpi": this.calculateDPI_()
|
"dpi": this.calculateDPI_()
|
||||||
};
|
};
|
||||||
|
@ -34,6 +34,10 @@
|
||||||
$("#display-fps").html(this.fps + " FPS");
|
$("#display-fps").html(this.fps + " FPS");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.AnimatedPreviewController.prototype.getFPS = function () {
|
||||||
|
return this.fps;
|
||||||
|
};
|
||||||
|
|
||||||
ns.AnimatedPreviewController.prototype.render = function (delta) {
|
ns.AnimatedPreviewController.prototype.render = function (delta) {
|
||||||
this.elapsedTime += delta;
|
this.elapsedTime += delta;
|
||||||
var index = Math.floor(this.elapsedTime / (1000/this.fps));
|
var index = Math.floor(this.elapsedTime / (1000/this.fps));
|
||||||
|
@ -55,7 +59,7 @@
|
||||||
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
|
framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
|
||||||
framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
|
framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
|
||||||
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
|
// 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.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
|
||||||
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
|
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
|
||||||
};
|
};
|
||||||
|
|
|
@ -24,6 +24,17 @@
|
||||||
return this.piskel.getWidth();
|
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 () {
|
ns.PiskelController.prototype.getLayers = function () {
|
||||||
return this.piskel.getLayers();
|
return this.piskel.getLayers();
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,35 +1,58 @@
|
||||||
(function () {
|
(function () {
|
||||||
var ns = $.namespace("pskl.controller.settings");
|
var ns = $.namespace("pskl.controller.settings");
|
||||||
|
|
||||||
ns.GifExportController = function (piskelController) {
|
ns.GifExportController = function (piskelController) {
|
||||||
this.piskelController = 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 () {
|
ns.GifExportController.prototype.init = function () {
|
||||||
this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
|
this.radioTemplate_ = pskl.utils.Template.get("export-gif-radio-template");
|
||||||
|
|
||||||
this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
|
this.previewContainerEl = document.querySelectorAll(".export-gif-preview div")[0];
|
||||||
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
|
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
|
||||||
|
|
||||||
this.uploadFormJQ = $("[name=gif-export-upload-form]");
|
this.uploadForm = $("[name=gif-export-upload-form]");
|
||||||
this.uploadFormJQ.submit(this.upload.bind(this));
|
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();
|
evt.originalEvent.preventDefault();
|
||||||
var selectedDpi = this.getSelectedDpi_(),
|
var selectedDpi = this.getSelectedDpi_(),
|
||||||
fps = pskl.app.animationController.fps,
|
fps = this.piskelController.getFPS(),
|
||||||
dpi = selectedDpi;
|
dpi = selectedDpi;
|
||||||
|
|
||||||
this.renderAsImageDataAnimatedGIF(dpi, fps, function (imageData) {
|
this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
|
||||||
this.updatePreview_(imageData);
|
};
|
||||||
this.previewContainerEl.classList.add("preview-upload-ongoing");
|
|
||||||
pskl.app.imageUploadService.upload(imageData, function (imageUrl) {
|
ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
|
||||||
this.updatePreview_(imageUrl);
|
this.updatePreview_(imageData);
|
||||||
this.previewContainerEl.classList.remove("preview-upload-ongoing");
|
this.previewContainerEl.classList.add("preview-upload-ongoing");
|
||||||
}.bind(this));
|
pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
|
||||||
}.bind(this));
|
};
|
||||||
|
|
||||||
|
ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
|
||||||
|
this.updatePreview_(imageUrl);
|
||||||
|
this.previewContainerEl.classList.remove("preview-upload-ongoing");
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.GifExportController.prototype.updatePreview_ = function (src) {
|
ns.GifExportController.prototype.updatePreview_ = function (src) {
|
||||||
|
@ -37,7 +60,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.GifExportController.prototype.getSelectedDpi_ = function () {
|
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);
|
radios = Array.prototype.slice.call(radiosColl,0);
|
||||||
var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
|
var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
|
||||||
|
|
||||||
|
@ -48,32 +71,28 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.GifExportController.prototype.initRadioElements_ = function () {
|
ns.GifExportController.prototype.createRadioElements_ = function () {
|
||||||
var dpis = [
|
var resolutions = ns.GifExportController.RESOLUTIONS;
|
||||||
[1],
|
for (var i = 0 ; i < resolutions.length ; i++) {
|
||||||
[5],
|
var radio = this.createRadioForResolution_(resolutions[i]);
|
||||||
[10,true], //default
|
|
||||||
[20]
|
|
||||||
];
|
|
||||||
|
|
||||||
for (var i = 0 ; i < dpis.length ; i++) {
|
|
||||||
var dpi = dpis[i];
|
|
||||||
var radio = this.createRadioForDpi_(dpi);
|
|
||||||
this.radioGroupEl.appendChild(radio);
|
this.radioGroupEl.appendChild(radio);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.GifExportController.prototype.createRadioForDpi_ = function (dpi) {
|
ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
|
||||||
var label = dpi[0]*this.piskelController.getWidth() + "x" + dpi[0]*this.piskelController.getHeight();
|
var dpi = resolution.dpi;
|
||||||
var value = dpi[0];
|
var label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight();
|
||||||
var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
|
var value = dpi;
|
||||||
var radio = pskl.utils.Template.createFromHTML(radioHTML);
|
|
||||||
|
|
||||||
if (dpi[1]) {
|
var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
|
||||||
radio.getElementsByTagName("input")[0].setAttribute("checked", "checked");
|
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) {
|
ns.GifExportController.prototype.blobToBase64_ = function(blob, cb) {
|
||||||
|
|
|
@ -6,14 +6,11 @@
|
||||||
* @param {Number} width
|
* @param {Number} width
|
||||||
* @param {Number} height
|
* @param {Number} height
|
||||||
*/
|
*/
|
||||||
ns.Piskel = function (width, height, fps) {
|
ns.Piskel = function (width, height) {
|
||||||
if (width && height && fps) {
|
if (width && height) {
|
||||||
/** @type {Array} */
|
/** @type {Array} */
|
||||||
this.layers = [];
|
this.layers = [];
|
||||||
|
|
||||||
/** @type {Number} */
|
|
||||||
this.fps = fps;
|
|
||||||
|
|
||||||
/** @type {Number} */
|
/** @type {Number} */
|
||||||
this.width = width;
|
this.width = width;
|
||||||
|
|
||||||
|
@ -36,10 +33,6 @@
|
||||||
return this.width;
|
return this.width;
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Piskel.prototype.getFps = function () {
|
|
||||||
return this.fps;
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.Piskel.prototype.getLayers = function () {
|
ns.Piskel.prototype.getLayers = function () {
|
||||||
return this.layers;
|
return this.layers;
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<div class="canvas-background"></div>
|
<div class="canvas-background"></div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span id="display-fps" class="display-fps">12 FPS</span>
|
<span id="display-fps" class="display-fps"></span>
|
||||||
<input id="preview-fps" class="range-fps" type="range" min="1" max="24" value="12"/>
|
<input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue
Block a user