mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/style.css
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;

90
index.html
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>

79
js/piskel.js
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();
})(); })();

4
js/service/LocalStorageService.js
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, [{