2012-08-31 08:45:07 +00:00
|
|
|
/**
|
|
|
|
* @require Constants
|
|
|
|
* @require Events
|
|
|
|
*/
|
|
|
|
(function () {
|
2013-07-14 21:04:42 +00:00
|
|
|
var ns = $.namespace("pskl");
|
2012-09-02 23:24:55 +00:00
|
|
|
/**
|
|
|
|
* FrameSheetModel instance.
|
|
|
|
*/
|
2012-09-16 16:48:32 +00:00
|
|
|
var frameSheet;
|
2012-09-02 23:24:55 +00:00
|
|
|
/**
|
|
|
|
* Main application controller
|
|
|
|
*/
|
2013-07-14 21:04:42 +00:00
|
|
|
ns.app = {
|
2012-09-02 23:24:55 +00:00
|
|
|
|
2012-08-22 22:57:35 +00:00
|
|
|
init : function () {
|
2012-09-16 16:48:32 +00:00
|
|
|
var frameSize = this.readSizeFromURL_();
|
|
|
|
frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
|
2012-09-05 22:23:24 +00:00
|
|
|
frameSheet.addEmptyFrame();
|
2013-08-05 21:34:11 +00:00
|
|
|
frameSheet.setCurrentFrameIndex(0);
|
2013-07-14 21:04:42 +00:00
|
|
|
|
2012-09-12 10:01:47 +00:00
|
|
|
|
2012-09-16 16:48:32 +00:00
|
|
|
this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
|
2013-08-05 21:34:11 +00:00
|
|
|
this.drawingController.init();
|
2012-09-12 10:01:47 +00:00
|
|
|
|
2013-08-05 21:34:11 +00:00
|
|
|
this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
|
2012-09-04 22:09:42 +00:00
|
|
|
this.animationController.init();
|
2013-08-05 21:34:11 +00:00
|
|
|
|
|
|
|
this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
|
2012-09-04 22:09:42 +00:00
|
|
|
this.previewsController.init();
|
2013-08-05 21:34:11 +00:00
|
|
|
|
|
|
|
this.settingsController = new pskl.controller.SettingsController();
|
2013-06-16 08:17:50 +00:00
|
|
|
this.settingsController.init();
|
2012-09-06 22:18:59 +00:00
|
|
|
|
2013-08-05 21:34:11 +00:00
|
|
|
this.selectionManager = new pskl.selection.SelectionManager(frameSheet);
|
|
|
|
this.selectionManager.init();
|
|
|
|
|
2012-09-16 11:10:05 +00:00
|
|
|
this.historyService = new pskl.service.HistoryService(frameSheet);
|
|
|
|
this.historyService.init();
|
2012-09-10 21:26:12 +00:00
|
|
|
|
2012-09-16 12:41:47 +00:00
|
|
|
this.keyboardEventService = new pskl.service.KeyboardEventService();
|
|
|
|
this.keyboardEventService.init();
|
|
|
|
|
|
|
|
this.notificationController = new pskl.controller.NotificationController();
|
|
|
|
this.notificationController.init();
|
2012-09-16 11:50:40 +00:00
|
|
|
|
2012-09-16 10:59:19 +00:00
|
|
|
this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
|
|
|
|
this.localStorageService.init();
|
2012-09-02 23:24:55 +00:00
|
|
|
|
2013-08-05 21:34:11 +00:00
|
|
|
this.toolController = new pskl.controller.ToolController();
|
|
|
|
this.toolController.init();
|
|
|
|
|
|
|
|
this.paletteController = new pskl.controller.PaletteController();
|
|
|
|
this.paletteController.init(frameSheet);
|
|
|
|
|
|
|
|
var drawingLoop = new pskl.rendering.DrawingLoop();
|
|
|
|
drawingLoop.addCallback(this.render, this);
|
|
|
|
drawingLoop.start();
|
|
|
|
|
|
|
|
// Init (event-delegated) bootstrap tooltips:
|
|
|
|
$('body').tooltip({
|
|
|
|
selector: '[rel=tooltip]'
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
*/
|
|
|
|
this.isStaticVersion = !pskl.appEngineToken_;
|
|
|
|
|
2013-07-14 21:04:42 +00:00
|
|
|
if (this.isStaticVersion) {
|
|
|
|
var framesheetId = this.readFramesheetIdFromURL_();
|
|
|
|
if (framesheetId) {
|
|
|
|
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
|
|
|
|
this.loadFramesheetFromService(framesheetId);
|
|
|
|
} else {
|
|
|
|
this.localStorageService.displayRestoreNotification();
|
|
|
|
}
|
2012-08-29 23:16:13 +00:00
|
|
|
} else {
|
2013-07-18 20:55:26 +00:00
|
|
|
if (pskl.framesheetData_) {
|
|
|
|
frameSheet.load(pskl.framesheetData_);
|
2013-07-14 21:04:42 +00:00
|
|
|
}
|
2012-08-29 23:16:13 +00:00
|
|
|
}
|
2012-09-08 21:59:44 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
render : function (delta) {
|
|
|
|
this.drawingController.render(delta);
|
|
|
|
this.animationController.render(delta);
|
|
|
|
this.previewsController.render(delta);
|
2012-09-16 16:48:32 +00:00
|
|
|
},
|
2012-09-08 14:32:28 +00:00
|
|
|
|
2012-09-16 16:48:32 +00: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-16 21:47:37 +00:00
|
|
|
width : Math.min(width, Constants.MAX_WIDTH)
|
2012-09-16 16:48:32 +00: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-29 23:16:13 +00:00
|
|
|
}
|
2012-09-16 16:48:32 +00:00
|
|
|
return "";
|
2012-08-29 23:16:13 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
loadFramesheetFromService : function (frameId) {
|
|
|
|
var xhr = new XMLHttpRequest();
|
2012-09-02 23:24:55 +00:00
|
|
|
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
|
2012-08-29 23:16:13 +00:00
|
|
|
xhr.responseType = 'text';
|
|
|
|
|
|
|
|
xhr.onload = function(e) {
|
2012-09-20 21:57:26 +00:00
|
|
|
var res = JSON.parse(this.responseText);
|
|
|
|
frameSheet.load(res.framesheet);
|
2013-07-14 21:04:42 +00:00
|
|
|
pskl.app.animationController.setFPS(res.fps);
|
2012-09-02 23:24:55 +00:00
|
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
2012-08-29 23:16:13 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
xhr.onerror = function () {
|
2012-09-02 23:24:55 +00:00
|
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
2012-08-29 23:16:13 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
xhr.send();
|
2012-08-29 21:32:51 +00:00
|
|
|
},
|
2012-08-29 21:01:04 +00:00
|
|
|
|
2013-07-14 21:04:42 +00:00
|
|
|
getFirstFrameAsPNGData_ : function () {
|
|
|
|
var tmpSheet = new pskl.model.FrameSheet(frameSheet.getWidth(), frameSheet.getHeight());
|
|
|
|
tmpSheet.addFrame(frameSheet.getFrameByIndex(0));
|
|
|
|
return (new pskl.rendering.SpritesheetRenderer(tmpSheet)).renderAsImageDataSpritesheetPNG();
|
|
|
|
},
|
|
|
|
|
2012-08-31 08:45:07 +00:00
|
|
|
// TODO(julz): Create package ?
|
2012-08-29 23:16:13 +00:00
|
|
|
storeSheet : function (event) {
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
var formData = new FormData();
|
|
|
|
formData.append('framesheet_content', frameSheet.serialize());
|
2012-08-31 08:45:07 +00:00
|
|
|
formData.append('fps_speed', $('#preview-fps').val());
|
2013-07-14 21:04:42 +00:00
|
|
|
|
|
|
|
if (this.isStaticVersion) {
|
|
|
|
// anonymous save on old app-engine backend
|
|
|
|
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
|
|
|
|
} else {
|
|
|
|
// additional values only used with latest app-engine backend
|
|
|
|
formData.append('name', $('#piskel-name').val());
|
|
|
|
formData.append('frames', frameSheet.getFrameCount());
|
|
|
|
// Get image/png data for first frame
|
|
|
|
|
|
|
|
formData.append('preview', this.getFirstFrameAsPNGData_());
|
|
|
|
|
|
|
|
xhr.open('POST', "save", true);
|
|
|
|
}
|
|
|
|
|
2012-08-29 23:16:13 +00:00
|
|
|
xhr.onload = function(e) {
|
|
|
|
if (this.status == 200) {
|
2013-07-14 21:04:42 +00:00
|
|
|
if (pskl.app.isStaticVersion) {
|
|
|
|
var baseUrl = window.location.href.replace(window.location.search, "");
|
|
|
|
window.location.href = baseUrl + "?frameId=" + this.responseText;
|
|
|
|
} else {
|
|
|
|
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.onerror(e);
|
2012-08-29 23:16:13 +00:00
|
|
|
}
|
|
|
|
};
|
2013-07-14 21:04:42 +00:00
|
|
|
xhr.onerror = function(e) {
|
|
|
|
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
|
|
|
|
};
|
2012-08-29 23:16:13 +00:00
|
|
|
xhr.send(formData);
|
|
|
|
|
2012-09-04 21:48:02 +00:00
|
|
|
if(event) {
|
|
|
|
event.stopPropagation();
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
2012-08-29 23:16:13 +00:00
|
|
|
return false;
|
2012-09-19 22:43:39 +00:00
|
|
|
},
|
|
|
|
|
2013-06-13 14:31:09 +00:00
|
|
|
uploadToScreenletstore : function(imageData) {
|
2013-04-07 18:16:47 +00:00
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
var formData = new FormData();
|
|
|
|
formData.append('data', imageData);
|
|
|
|
xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
|
2013-06-13 14:31:09 +00:00
|
|
|
var cloudURL;
|
|
|
|
var that = this;
|
2013-04-07 18:16:47 +00:00
|
|
|
xhr.onload = function(e) {
|
|
|
|
if (this.status == 200) {
|
2013-06-13 14:31:09 +00:00
|
|
|
cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
|
|
|
|
that.openWindow(cloudURL);
|
2013-04-07 18:16:47 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
xhr.send(formData);
|
2013-06-13 14:31:09 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
uploadAsAnimatedGIF : function () {
|
2013-07-14 21:04:42 +00:00
|
|
|
var fps = pskl.app.animationController.fps;
|
2013-06-13 14:31:09 +00:00
|
|
|
var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
|
|
|
|
this.uploadToScreenletstore(imageData);
|
|
|
|
},
|
|
|
|
|
|
|
|
uploadAsSpritesheetPNG : function () {
|
|
|
|
var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG();
|
|
|
|
this.uploadToScreenletstore(imageData);
|
|
|
|
},
|
|
|
|
|
|
|
|
openWindow: function(url) {
|
|
|
|
var options = [
|
|
|
|
"dialog=yes", "scrollbars=no", "status=no",
|
|
|
|
"width=" + frameSheet.getWidth() * frameSheet.getFrameCount(),
|
|
|
|
"height=" + frameSheet.getHeight()
|
|
|
|
].join(",");
|
|
|
|
|
|
|
|
window.open(url, "piskel-export", options);
|
2012-08-22 22:57:35 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-07-14 21:04:42 +00:00
|
|
|
pskl.app.init();
|
2012-08-22 22:57:35 +00:00
|
|
|
|
2012-09-02 23:24:55 +00:00
|
|
|
})();
|