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

Merge pull request #116 from juliandescottes/merge-piskelapp-changes

Browse Source 
Merge piskelapp changes
This commit is contained in:
grosbouddha 2013-07-18 16:39:38 -07:00
commit 9a68da8bda
4 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
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;
} }

10
index.html
View File

@ -16,6 +16,9 @@
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head> </head>
<body> <body>
<div class="piskel-name-container">
<input readonly id="piskel-name" type="text" value=""/>
</div>
<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="sticky-section-wrap">
@ -41,11 +44,11 @@
<div class="vertical-centerer"> <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="piskel.storeSheet()" rel="tooltip" data-placement="left" ></div> <div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left"> <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<span class="label">GIF</span> <span class="label">GIF</span>
</div> </div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="piskel.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left"> <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span> <span class="label">PNG</span>
</div> </div>
</div> </div>
@ -183,4 +186,3 @@
<script src="js/piskel.js"></script> <script src="js/piskel.js"></script>
</body> </body>
</html> </html>

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,13 +11,18 @@ $.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.pskl
*/
this.isStaticVersion = !pskl.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'));
@ -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 (pskl.framesheetData_) {
frameSheet.load(pskl.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, [{