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 progress bar for GIF rendering

Browse Source
This commit is contained in:
jdescottes 2014-04-12 12:08:53 +02:00
parent 3abf0897d5
commit 09319ecc1b
8 changed files with 155 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/css/settings-export.css Normal file
View File

@ -0,0 +1,47 @@
/* Gif/Png Export Setting panel*/
/*******************************/
.gif-upload-button,
.gif-render-button {
/*float : right;*/
margin-top : 10px;
margin-right : 10px;
}
.gif-export-radio-group {
margin:10px 0;
}
.gif-export-preview,
.png-export-preview {
margin-top:20px;
max-width:240px;
position:relative;
}
.png-export-preview {
margin:10px 0;
overflow: hidden;
}
.png-export-preview img {
float: left;
}
.png-upload-status {
margin : 10px 0;
}
.preview-upload-ongoing:before{
content: "Upload ongoing ...";
position: absolute;
display: block;
height: 100%;
width: 100%;
text-align: center;
padding-top: 45%;
box-sizing:border-box;
-moz-box-sizing:border-box;
background: rgba(0,0,0,0.5);
color: white;
}

40
src/css/settings.css
View File

@ -21,9 +21,9 @@
margin-right: 0;
}
/*
* Settings icons
*/
/********************************************************** *j* j** j*j j j j** *****************/
/* Settings icons I I I I I\I \ */
/********************************************************** *** *** *** * * '** *****************/
.tool-icon.gallery-icon {
background-image: url(../img/gallery.png);
@ -104,6 +104,10 @@
border-left : 3px solid gold;
}
/************************************************************************************************/
/* Common settings classes */
/************************************************************************************************/
.settings-section {
margin: 10px 20px;
font-size: 12px;
@ -133,6 +137,10 @@
margin-bottom: 10px;
}
/************************************************************************************************/
/* Application settings */
/************************************************************************************************/
.background-picker-wrapper {
overflow: hidden;
padding: 10px 5px 20px 5px;
@ -166,11 +174,12 @@
border: gold 1px solid;
}
/* Gif/Png Export Setting panel*/
/*******************************/
/************************************************************************************************/
/* Gif/Png Export panel */
/************************************************************************************************/
.gif-upload-button,
.gif-render-button {
/*float : right;*/
margin-top : 10px;
margin-right : 10px;
}
@ -179,6 +188,17 @@
margin:10px 0;
}
.gif-export-progress-status {
margin-left: 5px;
}
.gif-export-progress-bar {
margin-top:5px;
height:3px;
width: 0;
background:gold;
}
.gif-export-preview,
.png-export-preview {
margin-top:20px;
@ -213,7 +233,10 @@
color: white;
}
/************************************************************************************************/
/* Import panel */
/************************************************************************************************/
.import-section,
.resize-section {
margin: 15px 0;
@ -291,6 +314,11 @@
vertical-align: middle;
}
/************************************************************************************************/
/* Browse local piskels panel */
/************************************************************************************************/
.local-piskels-list {
width: 100%;
}

7
src/js/Events.js
View File

@ -17,13 +17,6 @@ var Events = {
PALETTE_LIST_UPDATED : 'PALETTE_LIST_UPDATED',
/**
* When this event is emitted, a request is sent to the localstorage
* Service to save the current framesheet. The storage service
* may not immediately store data (internal throttling of requests).
*/
LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
/**
* Fired each time a user setting change.
* The payload will be:

7
src/js/controller/DrawingController.js
View File

@ -139,8 +139,6 @@
this.overlayFrame,
event
);
$.publish(Events.LOCALSTORAGE_REQUEST);
}
};
@ -166,11 +164,6 @@
this.overlayFrame,
event
);
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
// you don't need to draw anything when mousemoving and you request useless localStorage.
$.publish(Events.LOCALSTORAGE_REQUEST);
} else {
this.currentToolBehavior.moveUnactiveToolAt(

74
src/js/controller/PreviewFilmController.js
View File

@ -1,5 +1,13 @@
(function () {
var ns = $.namespace("pskl.controller");
var ACTION = {
SELECT : 'select',
CLONE : 'clone',
DELETE : 'delete',
NEW_FRAME : 'newframe'
};
ns.PreviewFilmController = function (piskelController, container) {
this.piskelController = piskelController;
@ -15,12 +23,7 @@
$.subscribe(Events.PISKEL_RESET, this.refreshZoom_.bind(this));
$('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
this.updateScrollerOverflows();
};
ns.PreviewFilmController.prototype.addFrame = function () {
this.piskelController.addFrame();
this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
this.container.get(0).addEventListener('click', this.onContainerClick_.bind(this));
this.updateScrollerOverflows();
};
@ -62,6 +65,29 @@
wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
};
ns.PreviewFilmController.prototype.onContainerClick_ = function (event) {
var target = pskl.utils.Dom.getParentWithData(event.target, 'tileAction');
if (!target) {
return;
}
var action = target.dataset.tileAction;
var index = target.dataset.tileNumber;
if (action === ACTION.CLONE) {
this.piskelController.setCurrentFrameIndex(index + 1);
this.updateScrollerOverflows();
} else if (action === ACTION.DELETE) {
this.piskelController.removeFrameAt(index);
this.updateScrollerOverflows();
} else if (action === ACTION.SELECT) {
this.piskelController.setCurrentFrameIndex(index);
} else if (action === ACTION.NEW_FRAME) {
this.piskelController.addFrame();
this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
this.updateScrollerOverflows();
}
};
ns.PreviewFilmController.prototype.createPreviews_ = function () {
this.container.html("");
@ -77,11 +103,10 @@
var newFrameButton = document.createElement("div");
newFrameButton.id = "add-frame-action";
newFrameButton.className = "add-frame-action";
newFrameButton.setAttribute('data-tile-action', ACTION.NEW_FRAME);
newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
this.container.append(newFrameButton);
$(newFrameButton).click(this.addFrame.bind(this));
var needDragndropBehavior = (frameCount > 1);
if(needDragndropBehavior) {
this.initDragndropBehavior_();
@ -112,9 +137,6 @@
this.piskelController.moveFrame(originFrameId, targetInsertionId);
this.piskelController.setCurrentFrameIndex(targetInsertionId);
// TODO(grosbouddha): move localstorage request to the model layer?
$.publish(Events.LOCALSTORAGE_REQUEST);
};
@ -128,6 +150,7 @@
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
previewTileRoot.setAttribute("data-tile-number", tileNumber);
previewTileRoot.setAttribute('data-tile-action', ACTION.SELECT);
if (this.piskelController.getCurrentFrame() == currentFrame) {
classname += " selected";
@ -141,15 +164,14 @@
canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground);
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
var cloneFrameButton = document.createElement("button");
cloneFrameButton.setAttribute('rel', 'tooltip');
cloneFrameButton.setAttribute('data-placement', 'right');
cloneFrameButton.setAttribute('data-tile-number', tileNumber);
cloneFrameButton.setAttribute('data-tile-action', ACTION.CLONE);
cloneFrameButton.setAttribute('title', 'Duplicate this frame');
cloneFrameButton.className = "tile-overlay duplicate-frame-action";
previewTileRoot.appendChild(cloneFrameButton);
cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
// is to make this update function (#createPreviewTile) less aggressive.
@ -169,8 +191,9 @@
deleteButton.setAttribute('rel', 'tooltip');
deleteButton.setAttribute('data-placement', 'right');
deleteButton.setAttribute('title', 'Delete this frame');
deleteButton.setAttribute('data-tile-number', tileNumber);
deleteButton.setAttribute('data-tile-action', ACTION.DELETE);
deleteButton.className = "tile-overlay delete-frame-action";
deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
previewTileRoot.appendChild(deleteButton);
// Add 'dragndrop handle'.
@ -183,30 +206,9 @@
tileCount.innerHTML = tileNumber + 1;
previewTileRoot.appendChild(tileCount);
return previewTileRoot;
};
ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
// has not class tile-action:
if(!evt.target.classList.contains('tile-overlay')) {
this.piskelController.setCurrentFrameIndex(index);
}
};
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
this.piskelController.removeFrameAt(index);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
this.updateScrollerOverflows();
};
ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
this.piskelController.duplicateFrameAt(index);
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
this.piskelController.setCurrentFrameIndex(index + 1);
this.updateScrollerOverflows();
};
/**
* Calculate the preview zoom depending on the piskel size
*/

27
src/js/controller/settings/GifExportController.js
View File

@ -28,14 +28,17 @@
ns.GifExportController.prototype.init = function () {
this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
this.uploadStatusContainerEl = document.querySelector(".gif-upload-status");
this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
this.previewContainerEl = document.querySelector(".gif-export-preview");
this.radioGroupEl = document.querySelector(".gif-export-radio-group");
this.uploadForm = $("[name=gif-export-upload-form]");
this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
this.createRadioElements_();
};
@ -127,13 +130,29 @@
});
}
gif.on('progress', function(percentage) {
this.updateProgressStatus_((percentage*100).toFixed(2));
}.bind(this));
gif.on('finished', function(blob) {
this.blobToBase64_(blob, cb);
this.hideProgressStatus_();
// this.blobToBase64_(blob, cb);
}.bind(this));
gif.render();
};
ns.GifExportController.prototype.updateProgressStatus_ = function (percentage) {
this.exportProgressStatusEl.innerHTML = percentage + '%';
this.exportProgressBarEl.style.width = percentage + "%";
};
ns.GifExportController.prototype.hideProgressStatus_ = function () {
this.exportProgressStatusEl.innerHTML = '';
this.exportProgressBarEl.style.width = "0";
};
// FIXME : HORRIBLE COPY/PASTA
ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {

10
src/js/utils/Dom.js
View File

@ -24,6 +24,16 @@
}
}
return false;
},
getParentWithData : function (node, data) {
while (node) {
if (node.dataset && typeof node.dataset[data] !== 'undefined') {
return node;
}
node = node.parentNode;
}
return null;
}
};
})();

2
src/templates/settings/export-gif.html
View File

@ -11,6 +11,8 @@
</script>
<div class="gif-export-radio-group"></div>
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
<span class="gif-export-progress-status"></span>
<div class="gif-export-progress-bar"></div>
</form>
<div class="gif-export-preview"></div>
<div class="gif-upload-status"></div>