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

post

Browse Source
This commit is contained in:
Julian Descottes 2012-08-30 01:16:13 +02:00
parent baa5ea5dc9
commit aaf254cc3f
2 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -15,6 +15,7 @@
</head> </head>
<body> <body>
<div class='debug left-nav'> <div class='debug left-nav'>
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
<button id='add-frame-button' class="action-button"> <button id='add-frame-button' class="action-button">
Add a Frame Add a Frame
</button> </button>

76
js/piskel.js
View File

@ -3,8 +3,8 @@
// Constants: // Constants:
TRANSPARENT_COLOR = 'tc', TRANSPARENT_COLOR = 'tc',
//TRANSPARENT_COLOR = 'pink',
DEFAULT_PEN_COLOR = '#000000', DEFAULT_PEN_COLOR = '#000000',
PISKEL_SERVICE_URL = 'http://2.piskel-app.appspot.com',
// Configuration: // Configuration:
// Canvas size in pixel size (not dpi related) // Canvas size in pixel size (not dpi related)
@ -50,15 +50,51 @@
var piskel = { var piskel = {
init : function () { init : function () {
frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight); frameSheet = FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.setActiveFrame(0); this.setActiveFrame(0);
frameSheet.addEmptyFrame();
var frameId = this.getFrameIdFromUrl();
if (frameId) {
this.loadFramesheetFromService(frameId);
} else {
this.finishInit();
}
},
finishInit : function () {
this.initPalette(); this.initPalette();
this.initDrawingArea(); this.initDrawingArea();
this.initPreviewSlideshow(); this.initPreviewSlideshow();
this.initAnimationPreview(); this.initAnimationPreview();
this.initColorPicker(); this.initColorPicker();
this.initLocalStorageBackup(); this.initLocalStorageBackup();
this.startAnimation();
},
getFrameIdFromUrl : function() {
var href = window.location.href;
if (href.indexOf('frameId=') != -1) {
console.log(href.substring(href.indexOf('frameId=')+8));
return href.substring(href.indexOf('frameId=')+8);
}
},
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
xhr.responseType = 'text';
xhr.onload = function(e) {
frameSheet.deserialize(this.responseText);
piskel.finishInit();
};
xhr.onerror = function () {
piskel.finishInit();
};
xhr.send();
}, },
initLocalStorageBackup: function() { initLocalStorageBackup: function() {
@ -170,17 +206,7 @@
this.createPreviews(); this.createPreviews();
}, },
initPreviewSlideshow: function() {
var addFrameButton = $('add-frame-button');
addFrameButton.addEventListener('mousedown', function() {
frameSheet.addEmptyFrame();
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
});
this.createPreviews();
},
initAnimationPreview : function() { initAnimationPreview : function() {
var scope = this;
var previewAnimationContainer = $('preview-canvas-container'); var previewAnimationContainer = $('preview-canvas-container');
previewCanvas = document.createElement('canvas'); previewCanvas = document.createElement('canvas');
@ -190,7 +216,10 @@
previewAnimationContainer.appendChild(previewCanvas); previewAnimationContainer.appendChild(previewCanvas);
previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi); previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi);
previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi); previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi);
},
startAnimation : function () {
var scope = this;
var animFPSTuner = document.getElementById("preview-fps"); var animFPSTuner = document.getElementById("preview-fps");
var animPreviewFPS = parseInt(animFPSTuner.value, 10); var animPreviewFPS = parseInt(animFPSTuner.value, 10);
var startPreviewRefresh = function() { var startPreviewRefresh = function() {
@ -428,6 +457,25 @@
x : x - canvasRect.left, x : x - canvasRect.left,
y : y - canvasRect.top y : y - canvasRect.top
} }
},
storeSheet : function (event) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('preview-fps').value);
xhr.open('POST', PISKEL_SERVICE_URL + "/store", true);
xhr.onload = function(e) {
if (this.status == 200) {
alert("stored key : " + this.responseText);
}
};
xhr.send(formData);
event.stopPropagation();
event.preventDefault();
return false;
} }
}; };