piskel/js/piskel.js

212 lines
6.7 KiB
JavaScript
Raw Normal View History

/**
* @require Constants
* @require Events
*/
$.namespace("pskl");
(function () {
/**
* FrameSheetModel instance.
*/
2012-09-16 20:48:32 +04:00
var frameSheet;
/**
* Main application controller
*/
var piskel = {
init : function () {
2012-09-16 20:48:32 +04:00
var frameSize = this.readSizeFromURL_();
frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
2012-09-06 02:23:24 +04:00
frameSheet.addEmptyFrame();
2012-09-16 20:48:32 +04:00
this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
2012-09-05 02:09:42 +04:00
2012-09-14 00:57:32 +04:00
// To catch the current active frame, the selection manager have to be initialized before
2012-09-15 04:24:06 +04:00
// the 'frameSheet.setCurrentFrameIndex(0);' line below.
// TODO(vincz): Slice each constructor to have:
// - an event(s) listening init
// - an event(s) triggering init
2012-09-15 04:24:06 +04:00
// All listeners will be hook in a first step, then all event triggering inits will be called
// in a second batch.
2012-09-16 20:48:32 +04:00
this.selectionManager = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
// DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0);
2012-09-05 02:09:42 +04:00
this.animationController.init();
this.previewsController.init();
2012-09-16 15:10:05 +04:00
this.historyService = new pskl.service.HistoryService(frameSheet);
this.historyService.init();
this.keyboardEventService = new pskl.service.KeyboardEventService();
this.keyboardEventService.init();
this.notificationController = new pskl.controller.NotificationController();
this.notificationController.init();
this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
this.localStorageService.init();
// TODO: Add comments
2012-09-16 20:48:32 +04:00
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
2012-08-30 03:16:13 +04:00
} else {
this.finishInit();
this.localStorageService.displayRestoreNotification();
2012-08-30 03:16:13 +04:00
}
var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this);
drawingLoop.start();
2012-09-16 06:33:26 +04:00
// Init (event-delegated) bootstrap tooltips:
$('body').tooltip({
selector: '[rel=tooltip]'
});
},
render : function (delta) {
this.drawingController.render(delta);
this.animationController.render(delta);
this.previewsController.render(delta);
2012-09-16 20:48:32 +04:00
},
2012-09-08 18:32:28 +04:00
2012-08-30 03:16:13 +04:00
finishInit : function () {
var toolController = new pskl.controller.ToolController();
toolController.init();
var paletteController = new pskl.controller.PaletteController();
paletteController.init(frameSheet);
2012-08-30 03:16:13 +04:00
},
2012-09-16 20:48:32 +04:00
readSizeFromURL_ : function () {
var sizeParam = this.readUrlParameter_("size"), size;
// parameter expected as size=64x48 => size=widthxheight
var parts = sizeParam.split("x");
if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
var width = parseInt(parts[0], 10),
height = parseInt(parts[1], 10);
size = {
height : Math.min(height, Constants.MAX_HEIGHT),
2012-09-17 01:47:37 +04:00
width : Math.min(width, Constants.MAX_WIDTH)
2012-09-16 20:48:32 +04:00
};
} else {
size = Constants.DEFAULT_SIZE;
}
return size;
},
readFramesheetIdFromURL_ : function() {
return this.readUrlParameter_("frameId");
},
readUrlParameter_ : function (paramName) {
var searchString = window.location.search.substring(1),
i, val, params = searchString.split("&");
for (i=0;i<params.length;i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return unescape(val[1]);
}
2012-08-30 03:16:13 +04:00
}
2012-09-16 20:48:32 +04:00
return "";
2012-08-30 03:16:13 +04:00
},
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
// TODO: Change frameId to framesheetId on the backend
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
2012-08-30 03:16:13 +04:00
xhr.responseType = 'text';
xhr.onload = function(e) {
2012-09-21 01:57:26 +04:00
var res = JSON.parse(this.responseText);
frameSheet.load(res.framesheet);
piskel.animationController.setFPS(res.fps);
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
piskel.finishInit();
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
piskel.finishInit();
};
xhr.send();
2012-08-30 01:32:51 +04:00
},
2012-08-30 01:01:04 +04:00
// TODO(julz): Create package ?
2012-08-30 03:16:13 +04:00
storeSheet : function (event) {
// TODO Refactor using jquery ?
2012-08-30 03:16:13 +04:00
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('#preview-fps').val());
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
2012-08-30 03:16:13 +04:00
xhr.onload = function(e) {
if (this.status == 200) {
2012-08-30 03:26:14 +04:00
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
2012-08-30 03:16:13 +04:00
}
};
xhr.send(formData);
2012-09-05 01:48:02 +04:00
if(event) {
event.stopPropagation();
event.preventDefault();
}
2012-08-30 03:16:13 +04:00
return false;
},
/**
* Open new window with spritesheet as PNG
*/
exportToPNG : function () {
(new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
2013-04-07 22:16:47 +04:00
},
uploadAsGIF : function () {
var encoder = new GIFEncoder(),
2013-04-07 23:26:51 +04:00
dpi = 10;
2013-04-07 22:16:47 +04:00
encoder.setRepeat(0);
2013-04-07 23:26:51 +04:00
var fps = piskel.animationController.fps;
encoder.setDelay(1000/fps);
2013-04-07 22:16:47 +04:00
encoder.start();
encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi);
for (var i = 0 ; i < frameSheet.frames.length ; i++) {
var frame = frameSheet.frames[i];
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
encoder.addFrame(renderer.render());
}
encoder.finish();
var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('data', imageData);
xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
xhr.onload = function(e) {
if (this.status == 200) {
var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText);
}
};
xhr.send(formData);
}
};
window.piskel = piskel;
piskel.init();
})();