Fix save/upload buttons UX
- new look and feel - upload for png spritesheet & animated gif - remove host code (window.open) from spritesheetRenderer
This commit is contained in:
Vince
parent
a6ef4ace6d
commit
d1f292bd69
7 changed files with 74 additions and 55 deletions
|
|
@ -185,19 +185,29 @@
|
|||
/*
|
||||
* Framesheet level actions:
|
||||
*/
|
||||
.tool-icon.tool-save {
|
||||
background-image: url(../img/actions/save.png);
|
||||
.tool-icon.save-icon {
|
||||
background-image: url(../img/save.png);
|
||||
background-position: 6px 6px;
|
||||
background-size: 36px 36px;
|
||||
}
|
||||
|
||||
.tool-icon.tool-export {
|
||||
background-image: url(../img/actions/image-export.png);
|
||||
.tool-icon.upload-cloud-icon {
|
||||
background-image: url(../img/cloud_export.png);
|
||||
background-position: 4px 0px;
|
||||
background-size: 36px 36px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tool-icon.tool-upload {
|
||||
background-image: url(../img/actions/image-upload.png);
|
||||
.upload-cloud-icon .label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 4px;
|
||||
right: 0;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.tool-icon.tool-add-frame {
|
||||
background-image: url(../img/actions/add.png);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 468 B |
BIN
img/cloud_export.png
Normal file
BIN
img/cloud_export.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
18
index.html
18
index.html
|
|
@ -74,14 +74,16 @@
|
|||
</div>
|
||||
|
||||
<div class="application-actions">
|
||||
<ul>
|
||||
<!-- TODO: Remove that from here or change CSS class naming since
|
||||
they are framesheet level actions, not tools -->
|
||||
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></li>
|
||||
<li class="tool-icon tool-export" data-tool-id="tool-export" title="Export to PNG framesheet" onclick="piskel.exportToPNG()" rel="tooltip" data-placement="bottom" ></li>
|
||||
<li class="tool-icon tool-upload" data-tool-id="tool-upload" title="Export to animated GIF" onclick="piskel.uploadAsGIF()" rel="tooltip" data-placement="bottom" ></li>
|
||||
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></li>
|
||||
</ul>
|
||||
<div class="tool-icon save-icon" title="Save to gallery" onclick="piskel.storeSheet()" rel="tooltip" data-placement="bottom" ></div>
|
||||
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="piskel.uploadAsAnimatedGIF()" rel="tooltip" data-placement="bottom" >
|
||||
<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="bottom" >
|
||||
<span class="label">PNG</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame" rel="tooltip" data-placement="bottom" ></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
51
js/piskel.js
51
js/piskel.js
|
|
@ -167,41 +167,42 @@ $.namespace("pskl");
|
|||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open new window with spritesheet as PNG
|
||||
*/
|
||||
exportToPNG : function () {
|
||||
(new pskl.rendering.SpritesheetRenderer(frameSheet)).render();
|
||||
},
|
||||
|
||||
uploadAsGIF : function () {
|
||||
var encoder = new GIFEncoder(),
|
||||
dpi = 10;
|
||||
encoder.setRepeat(0);
|
||||
var fps = piskel.animationController.fps;
|
||||
encoder.setDelay(1000/fps);
|
||||
|
||||
encoder.start();
|
||||
encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi);
|
||||
for (var i = 0 ; i < frameSheet.frames.length ; i++) {
|
||||
var frame = frameSheet.frames[i];
|
||||
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
|
||||
encoder.addFrame(renderer.render());
|
||||
}
|
||||
encoder.finish();
|
||||
|
||||
var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
|
||||
uploadToScreenletstore : function(imageData) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var formData = new FormData();
|
||||
formData.append('data', imageData);
|
||||
xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true);
|
||||
var cloudURL;
|
||||
var that = this;
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText);
|
||||
cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText;
|
||||
that.openWindow(cloudURL);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(formData);
|
||||
},
|
||||
|
||||
uploadAsAnimatedGIF : function () {
|
||||
var fps = piskel.animationController.fps;
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,18 +6,34 @@
|
|||
this.framesheet = framesheet;
|
||||
};
|
||||
|
||||
/**
|
||||
* Will open a new window displaying the spritesheet as a png
|
||||
*/
|
||||
ns.SpritesheetRenderer.prototype.render = function () {
|
||||
ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () {
|
||||
var canvas = this.createCanvas_();
|
||||
for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) {
|
||||
var frame = this.framesheet.getFrameByIndex(i);
|
||||
this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0);
|
||||
}
|
||||
this.openCanvasAsPNGInWindow_(canvas);
|
||||
return canvas.toDataURL("image/png")
|
||||
};
|
||||
|
||||
ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) {
|
||||
var encoder = new GIFEncoder(), dpi = 10;
|
||||
encoder.setRepeat(0);
|
||||
encoder.setDelay(1000/fps);
|
||||
|
||||
encoder.start();
|
||||
encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi);
|
||||
for (var i = 0 ; i < this.framesheet.frames.length ; i++) {
|
||||
var frame = this.framesheet.frames[i];
|
||||
var renderer = new pskl.rendering.CanvasRenderer(frame, dpi);
|
||||
encoder.addFrame(renderer.render());
|
||||
}
|
||||
encoder.finish();
|
||||
|
||||
var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
|
||||
return imageData;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* TODO(juliandescottes): Mutualize with code already present in FrameRenderer
|
||||
*/
|
||||
|
|
@ -44,14 +60,4 @@
|
|||
throw "Cannot render empty Spritesheet";
|
||||
}
|
||||
};
|
||||
|
||||
ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) {
|
||||
var options = [
|
||||
"dialog=yes", "scrollbars=no", "status=no",
|
||||
"width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(),
|
||||
"height=" + this.framesheet.getHeight()
|
||||
].join(",");
|
||||
|
||||
window.open(canvas.toDataURL("image/png"), "piskel-export", options);
|
||||
};
|
||||
})();
|
||||
Loading…
Reference in a new issue