q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved performance of chunk progress bars and now stable to use!

Browse Source
This commit is contained in:
Hamza Zia 2012-08-02 20:47:01 +08:00
parent bebf4e7741
commit ed3e32a5ec
2 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -73,15 +73,6 @@
} }
</style> </style>
<!-- {{{ progress chunk template -->
<script type="text/mustache" id="download_progress_chunk">
{{#chunks}}
<div class="progress progress-striped progress-chunk active">
<div class="bar" style="width: 100%;"></div>
</div>
{{/chunks}}
</script>
<!-- }}} -->
<!--{{{ active downloads template --> <!--{{{ active downloads template -->
<script type="text/mustache" id="download_active_template"> <script type="text/mustache" id="download_active_template">
<div class="row download_item download_active_item" data-gid="{{gid}}" data-settingsName={{sett_name}}> <div class="row download_item download_active_item" data-gid="{{gid}}" data-settingsName={{sett_name}}>
@ -110,7 +101,7 @@
<div class="span11 more_info collapse"> <div class="span11 more_info collapse">
<div class="span11 active_chunks"> <div class="span11 active_chunks">
{{#chunks}} {{#chunks}}
<div class="progress progress-chunk" style="width:{{width}}%;"> <div class="progress progress-chunk progress-striped" style="width:{{width}}%;">
<div class="bar" style="width: {{progress}}%;"></div> <div class="bar" style="width: {{progress}}%;"></div>
</div> </div>
{{/chunks}} {{/chunks}}

45
js/script.js
View File

@ -424,23 +424,29 @@ function changeTime(time) {
} }
function getChunksFromHex(bitfield, numOfPieces) { function getChunksFromHex(bitfield, numOfPieces) {
var chunks = [], len = 0, numPieces = parseInt(numOfPieces); var chunks = [], len = 0, numPieces = parseInt(numOfPieces);
var totalDownloaded = 0;
if (numPieces > 1) { if (numPieces > 1) {
var chunk_width = 100 / numPieces; var chunk_width = 95 / numPieces;
var piecesProcessed = 0;
for (var i = 0; i < bitfield.length; i++) { for (var i = 0; i < bitfield.length; i++) {
var hex = parseInt(bitfield[i], 16); var hex = parseInt(bitfield[i], 16);
for (var j = 1; j <= 4; j++) { for (var j = 1; j <= 4; j++) {
var bit = hex & (1 << (4 - j)); var bit = hex & (1 << (4 - j));
if (bit) totalDownloaded++;
var prog = bit ? 100 : 0; var prog = bit ? 100 : 0;
if (len && chunks[len - 1].progress == prog) { if (len >= 1 && chunks[len - 1].progress == prog) {
chunks[len - 1].width += chunk_width; chunks[len - 1].width += chunk_width;
} }
else { else {
chunks.push({ chunks.push({
width: chunk_width, width: chunk_width,
progress: bit ? 100 : 0 progress: prog
}); });
len++; len++;
} }
piecesProcessed ++;
if (piecesProcessed == numPieces)
return chunks;
} }
} }
} }
@ -453,7 +459,7 @@ function getTemplateCtx(data) {
var name; var name;
var seed = (data.files[0].path || data.files[0].uris[0].uri).split(/[/\\]/); var seed = (data.files[0].path || data.files[0].uris[0].uri).split(/[/\\]/);
name = seed[seed.length - 1]; name = seed[seed.length - 1];
var chunks = getChunksFromHex(data.bitfield, data.numPieces); var chunks = percentage !== 100 ? getChunksFromHex(data.bitfield, data.numPieces) : [];
var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed); var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
return { return {
@ -485,37 +491,40 @@ function updateDownloadTemplates(elem, ctx) {
elem.find('.tmp_' + i).text(ctx[i]); elem.find('.tmp_' + i).text(ctx[i]);
} }
elem.find('.full-progress .bar').css('width', ctx.percentage + '%'); elem.find('.full-progress .bar').css('width', ctx.percentage + '%');
var partialNodes = elem.find(".progress-chunk .bar");
var chunks = ctx.chunks; var chunks = ctx.chunks;
var diff = partialNodes.length - chunks.length; if (!chunks || !chunks.length) {
return;
}
var partialParent = elem.find(".active_chunks");
var diff = partialParent.children().length - chunks.length;
if (diff > 0) { if (diff > 0) {
partialNodes.slice(0, diff).remove(); partialParent.children().slice(0, diff).remove();
partialNodes = elem.find(".progress-chunk .bar") /*
diff = (partialNodes.length - chunks.length); diff = (partialParent.children().length - chunks.length);
if (diff != 0) { if (diff != 0) {
console.log(diff); console.log(diff);
console.log("diff error in deleting!!!"); console.log("diff error in deleting!!!");
return; return;
} }
*/
} }
else if (diff < 0){ else if (diff < 0){
diff = (-1) * diff; diff = (-1) * diff;
var html = '<div class="progress progress-chunk" style="width:' var html = '<div class="progress progress-striped progress-chunk" style="width:'
+ chunks[0].width + '%;"><div class="bar" style="width: 0%;"></div></div>'; + chunks[0].width + '%;"><div class="bar" style="width: 0%;"></div></div>';
var oldlen = partialNodes.length; partialParent.append((new Array(diff + 1)).join(html));
partialNodes.parents('.active_chunks').first().append((new Array(diff + 1)).join(html)); /*
partialNodes = elem.find(".progress-chunk .bar"); diff = (partialParent.children().length - chunks.length);
var newlen = partialNodes.length;
console.log("diff between lengts:" + (newlen - oldlen - diff).toString());
diff = (partialNodes.length - chunks.length);
if (diff != 0) { if (diff != 0) {
console.log(diff); console.log(diff);
console.log("diff error in appending!!!"); console.log("diff error in appending!!!");
return; return;
} }
*/
} }
partialNodes.each(function(index, node) { partialParent.children().each(function(index, node) {
$(node).css("width", chunks[index].progress.toString() + "%"); $(node).css({width: chunks[index].width.toString() + "%" });
$(node).children().css({width: chunks[index].progress.toString() + "%" });
}); });
} }
function deleteDownloadTemplates(top_elem, data) { function deleteDownloadTemplates(top_elem, data) {