Added logic to switch behavior between appengine and static mode. Removed piskel on window in favor of pskl.app

This commit is contained in:
jdescottes 2013-07-14 23:04:42 +02:00
parent bb1672f6ab
commit 032c8c4485
4 changed files with 125 additions and 78 deletions

View File

@ -30,6 +30,24 @@ body {
bottom: 0; bottom: 0;
} }
.piskel-name-container {
overflow:hidden;
position:fixed;
top:10px;
left:10px;
color:white;
font-family:Tahoma;
z-index: 10000;
}
.piskel-name-container #piskel-name {
border :none;
color : lightgrey;
background: transparent;
font-size:16pt;
}
.column { .column {
display: inline-block; display: inline-block;
} }
@ -55,18 +73,16 @@ body {
} }
.sticky-section { .sticky-section {
display: table;
height: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
} }
.sticky-section .sticky-section-wrap { .sticky-section .wrap,
display: table; .sticky-section .drawer {
height: 100%;
}
.sticky-section .vertical-centerer {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
@ -82,7 +98,7 @@ body {
.right-sticky-section.sticky-section { .right-sticky-section.sticky-section {
right: 0; right: 0;
width: 47px; width: 50px;
-webkit-transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out;

View File

@ -18,18 +18,16 @@
<body> <body>
<div id="main-wrapper" class="main-wrapper"> <div id="main-wrapper" class="main-wrapper">
<div class="sticky-section left-sticky-section" id="tool-section"> <div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap"> <div class="wrap">
<div class="vertical-centerer"> <ul id="tools-container" class="tools-wrapper"></ul>
<ul id="tools-container" class="tools-wrapper"></ul> <div class="palette-wrapper">
<div class="palette-wrapper"> <div class="tool-icon tool-color-picker">
<div class="tool-icon tool-color-picker"> <input id="color-picker" class="color {hash:true}" type="text" value="" />
<input id="color-picker" class="color {hash:true}" type="text" value="" /> <input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" />
<input id="secondary-color-picker" class="secondary-color-picker color {hash:true}" type="text" value="" /> </div>
</div> <div class="tool-icon tool-palette">
<div class="tool-icon tool-palette"> <div id="palette" class="palette">
<div id="palette" class="palette"> <span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
<span class="tool-icon palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -37,44 +35,42 @@
</div> </div>
<div id="application-action-section" class="sticky-section right-sticky-section"> <div id="application-action-section" class="sticky-section right-sticky-section">
<div class="sticky-section-wrap"> <div class="wrap">
<div class="vertical-centerer"> <div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
<div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div> <a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a> <div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div> <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left"> <span class="label">GIF</span>
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
</div> </div>
<div class="drawer vertical-centerer"> <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<div class="drawer-content"> <span class="label">PNG</span>
<div class="settings-section"> </div>
<div class="settings-title"> </div>
Canvas settings: <div class="drawer">
</div> <div class="drawer-content">
<div class="settings-item"> <div class="settings-section">
<label>Background:</label> <div class="settings-title">
<div id="background-picker-wrapper" class="background-picker-wrapper"> Canvas settings:
<div class="background-picker light-picker-background" data-background-class="light-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="light / high contrast"> <div class="settings-item">
</div> <label>Background:</label>
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background" <div id="background-picker-wrapper" class="background-picker-wrapper">
rel="tooltip" data-placement="bottom" title="medium / high contrast"> <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="light / high contrast">
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="medium / low contrast"> <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="medium / high contrast">
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background" </div>
rel="tooltip" data-placement="bottom" title="dark / low contrast"> <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
</div> rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div> </div>
</div> </div>
<div class="settings-item"> </div>
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/> <div class="settings-item">
</div> <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,10 +2,8 @@
* @require Constants * @require Constants
* @require Events * @require Events
*/ */
$.namespace("pskl");
(function () { (function () {
var ns = $.namespace("pskl");
/** /**
* FrameSheetModel instance. * FrameSheetModel instance.
*/ */
@ -13,14 +11,19 @@ $.namespace("pskl");
/** /**
* Main application controller * Main application controller
*/ */
var piskel = { ns.app = {
init : function () { init : function () {
var frameSize = this.readSizeFromURL_(); var frameSize = this.readSizeFromURL_();
frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width); frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
frameSheet.addEmptyFrame(); frameSheet.addEmptyFrame();
/**
* True when piskel is running in static mode (no back end needed).
* When started from APP Engine, _appEngineToken (Boolean) should be set on window
*/
this.isStaticVersion = !window._appEngineToken;
this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container')); this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container')); this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list')); this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
@ -54,14 +57,20 @@ $.namespace("pskl");
this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService = new pskl.service.LocalStorageService(frameSheet);
this.localStorageService.init(); this.localStorageService.init();
// TODO: Add comments if (this.isStaticVersion) {
var framesheetId = this.readFramesheetIdFromURL_(); var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) { if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]); $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId); this.loadFramesheetFromService(framesheetId);
} else {
this.finishInit();
this.localStorageService.displayRestoreNotification();
}
} else { } else {
if (window._framesheetData) {
frameSheet.load(window._framesheetData);
}
this.finishInit(); this.finishInit();
this.localStorageService.displayRestoreNotification();
} }
var drawingLoop = new pskl.rendering.DrawingLoop(); var drawingLoop = new pskl.rendering.DrawingLoop();
@ -131,33 +140,61 @@ $.namespace("pskl");
xhr.onload = function(e) { xhr.onload = function(e) {
var res = JSON.parse(this.responseText); var res = JSON.parse(this.responseText);
frameSheet.load(res.framesheet); frameSheet.load(res.framesheet);
piskel.animationController.setFPS(res.fps); pskl.app.animationController.setFPS(res.fps);
$.publish(Events.HIDE_NOTIFICATION); $.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit(); pskl.app.finishInit();
}; };
xhr.onerror = function () { xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION); $.publish(Events.HIDE_NOTIFICATION);
piskel.finishInit(); pskl.app.finishInit();
}; };
xhr.send(); xhr.send();
}, },
getFirstFrameAsPNGData_ : function () {
var tmpSheet = new pskl.model.FrameSheet(frameSheet.getWidth(), frameSheet.getHeight());
tmpSheet.addFrame(frameSheet.getFrameByIndex(0));
return (new pskl.rendering.SpritesheetRenderer(tmpSheet)).renderAsImageDataSpritesheetPNG();
},
// TODO(julz): Create package ? // TODO(julz): Create package ?
storeSheet : function (event) { storeSheet : function (event) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var formData = new FormData(); var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize()); formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('#preview-fps').val()); formData.append('fps_speed', $('#preview-fps').val());
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
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);
}
xhr.onload = function(e) { xhr.onload = function(e) {
if (this.status == 200) { if (this.status == 200) {
var baseUrl = window.location.href.replace(window.location.search, ""); if (pskl.app.isStaticVersion) {
window.location.href = baseUrl + "?frameId=" + this.responseText; 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);
} }
}; };
xhr.onerror = function(e) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
};
xhr.send(formData); xhr.send(formData);
if(event) { if(event) {
@ -185,7 +222,7 @@ $.namespace("pskl");
}, },
uploadAsAnimatedGIF : function () { uploadAsAnimatedGIF : function () {
var fps = piskel.animationController.fps; var fps = pskl.app.animationController.fps;
var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps); var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps);
this.uploadToScreenletstore(imageData); this.uploadToScreenletstore(imageData);
}, },
@ -206,8 +243,6 @@ $.namespace("pskl");
} }
}; };
// TODO(grosbouddha): Remove this window.piskel global (eventually pskl.piskel or pskl.app instead) pskl.app.init();
window.piskel = piskel;
piskel.init();
})(); })();

View File

@ -63,8 +63,8 @@
*/ */
ns.LocalStorageService.prototype.displayRestoreNotification = function() { ns.LocalStorageService.prototype.displayRestoreNotification = function() {
if(window.localStorage && window.localStorage.snapShot) { if(window.localStorage && window.localStorage.snapShot) {
var reloadLink = "<a href='#' class='localstorage-restore onclick='piskel.restoreFromLocalStorage()'>reload</a>"; var reloadLink = "<a href='#' class='localstorage-restore onclick='pskl.app.restoreFromLocalStorage()'>reload</a>";
var discardLink = "<a href='#' class='localstorage-discard' onclick='piskel.cleanLocalStorage()'>discard</a>"; var discardLink = "<a href='#' class='localstorage-discard' onclick='pskl.app.cleanLocalStorage()'>discard</a>";
var content = "Non saved version found. " + reloadLink + " or " + discardLink; var content = "Non saved version found. " + reloadLink + " or " + discardLink;
$.publish(Events.SHOW_NOTIFICATION, [{ $.publish(Events.SHOW_NOTIFICATION, [{