chunk progress bar replaced with canvas implementation, global download graph also added
This commit is contained in:
Hamza Zia
parent
88d3b394d1
commit
04823ecfd1
14
index.html
14
index.html
|
|
@ -35,6 +35,10 @@
|
|||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.stat_graph {
|
||||
margin-top: 25px;
|
||||
height: 220px;
|
||||
}
|
||||
.active_settings {
|
||||
text-align: center;
|
||||
margin-bottom: 3px;
|
||||
|
|
@ -103,13 +107,7 @@
|
|||
<div class="bar" style="width: {{percentage}}%;"></div>
|
||||
</div>
|
||||
<div class="span11 more_info collapse">
|
||||
<div class="span11 active_chunks">
|
||||
{{#chunks}}
|
||||
<div class="progress progress-chunk progress-striped" style="width:{{width}}%;">
|
||||
<div class="bar" style="width: {{progress}}%;"></div>
|
||||
</div>
|
||||
{{/chunks}}
|
||||
</div>
|
||||
<canvas class="span10 progress chunk-canvas"></canvas>
|
||||
<b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
|
||||
<b class="span2 label active_settings">GID: <span class="tmp_gid">{{gid}}</span></b>
|
||||
<b class="span2 label active_settings">Dir: <span class="tmp_dir">{{dir}}</span></b>
|
||||
|
|
@ -509,6 +507,8 @@
|
|||
<h5 class="span3 badge" style="text-align: center; margin: 5px;">Total Active Downloads: <span class="stat_numActive"></span></h5>
|
||||
<h5 class="span3 badge" style="text-align: center; margin: 5px;">Total Waiting Downloads: <span class="stat_numWaiting"></span></h5>
|
||||
<h5 class="span3 badge" style="text-align: center; margin: 5px;">Total Stopped Downloads: <span class="stat_numStopped"></span></h5>
|
||||
<div class="span5 stat_graph">
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
|
|
|||
103
js/script.js
103
js/script.js
|
|
@ -1,5 +1,6 @@
|
|||
var graphSize = 15;
|
||||
var graphData = [];
|
||||
var globalGraphData = null;
|
||||
var modals = {
|
||||
err_connect: undefined,
|
||||
change_conf: undefined,
|
||||
|
|
@ -204,6 +205,26 @@ $(function() {
|
|||
web_sock_init();
|
||||
|
||||
update_ui();
|
||||
globalGraphData = {
|
||||
downSpeed: [],
|
||||
upSpeed: [],
|
||||
add: function(arr, val) {
|
||||
if (arr.length == graphSize) {
|
||||
arr.shift();
|
||||
}
|
||||
arr.push([((new Date - this.start)/1000).toFixed(0), val]);
|
||||
},
|
||||
addDown: function(val) {
|
||||
this.add(this.downSpeed, val);
|
||||
return this;
|
||||
},
|
||||
addUp: function(val) {
|
||||
this.add(this.upSpeed, val);
|
||||
return this;
|
||||
},
|
||||
plot: createGraph('.stat_graph'),
|
||||
start: new Date()
|
||||
};
|
||||
$('#newDownload').click(function() {
|
||||
$('#newDownload_url').val("");
|
||||
$('.download_urls').html("");
|
||||
|
|
@ -426,25 +447,25 @@ function getChunksFromHex(bitfield, numOfPieces) {
|
|||
var chunks = [], len = 0, numPieces = parseInt(numOfPieces);
|
||||
var totalDownloaded = 0;
|
||||
if (numPieces > 1) {
|
||||
var chunk_width = 95 / numPieces;
|
||||
var chunk_ratio = 1 / numPieces;
|
||||
var piecesProcessed = 0;
|
||||
for (var i = 0; i < bitfield.length; i++) {
|
||||
var hex = parseInt(bitfield[i], 16);
|
||||
for (var j = 1; j <= 4; j++) {
|
||||
var bit = hex & (1 << (4 - j));
|
||||
if (bit) totalDownloaded++;
|
||||
var prog = bit ? 100 : 0;
|
||||
if (len >= 1 && chunks[len - 1].progress == prog) {
|
||||
chunks[len - 1].width += chunk_width;
|
||||
var prog = !!bit;
|
||||
if (len >= 1 && chunks[len - 1].show == prog) {
|
||||
chunks[len - 1].ratio += chunk_ratio;
|
||||
}
|
||||
else {
|
||||
chunks.push({
|
||||
width: chunk_width,
|
||||
progress: prog
|
||||
ratio: chunk_ratio,
|
||||
show: prog
|
||||
});
|
||||
len++;
|
||||
}
|
||||
piecesProcessed ++;
|
||||
piecesProcessed++;
|
||||
if (piecesProcessed == numPieces)
|
||||
return chunks;
|
||||
}
|
||||
|
|
@ -495,36 +516,21 @@ function updateDownloadTemplates(elem, ctx) {
|
|||
if (!chunks || !chunks.length) {
|
||||
return;
|
||||
}
|
||||
var partialParent = elem.find(".active_chunks");
|
||||
var diff = partialParent.children().length - chunks.length;
|
||||
if (diff > 0) {
|
||||
partialParent.children().slice(0, diff).remove();
|
||||
/*
|
||||
diff = (partialParent.children().length - chunks.length);
|
||||
if (diff != 0) {
|
||||
console.log(diff);
|
||||
console.log("diff error in deleting!!!");
|
||||
return;
|
||||
}
|
||||
*/
|
||||
var canvas = elem.find(".chunk-canvas")[0];
|
||||
if (!canvas) {
|
||||
console.log("cant find canvas!!!", elem);
|
||||
return;
|
||||
}
|
||||
else if (diff < 0){
|
||||
diff = (-1) * diff;
|
||||
var html = '<div class="progress progress-striped progress-chunk" style="width:'
|
||||
+ chunks[0].width + '%;"><div class="bar" style="width: 0%;"></div></div>';
|
||||
partialParent.append((new Array(diff + 1)).join(html));
|
||||
/*
|
||||
diff = (partialParent.children().length - chunks.length);
|
||||
if (diff != 0) {
|
||||
console.log(diff);
|
||||
console.log("diff error in appending!!!");
|
||||
return;
|
||||
}
|
||||
*/
|
||||
}
|
||||
partialParent.children().each(function(index, node) {
|
||||
$(node).css({width: chunks[index].width.toString() + "%" });
|
||||
$(node).children().css({width: chunks[index].progress.toString() + "%" });
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = "#149BDF";
|
||||
var x = 0,
|
||||
width = canvas.width,
|
||||
height = canvas.height;
|
||||
chunks.forEach(function(c) {
|
||||
var dx = c.ratio * width;
|
||||
if (c.show)
|
||||
ctx.fillRect(x, 0, dx, height);
|
||||
x += dx;
|
||||
});
|
||||
}
|
||||
function deleteDownloadTemplates(top_elem, data) {
|
||||
|
|
@ -576,7 +582,6 @@ function updateGraph(gid) {
|
|||
if (graphData[i].gid == gid) {
|
||||
var moreInfo = $(elem).find(".more_info");
|
||||
if (moreInfo.hasClass("in")) {
|
||||
window.data = graphData[i];
|
||||
graphData[i].plot.setData([{
|
||||
label: "Download Speed",
|
||||
data: graphData[i].downSpeed,
|
||||
|
|
@ -594,8 +599,8 @@ function updateGraph(gid) {
|
|||
}
|
||||
}
|
||||
}
|
||||
function createGraph(gid) {
|
||||
return $.plot('[data-gid=' + gid + '] .active_graph', [{
|
||||
function createGraph(selector) {
|
||||
return $.plot(selector, [{
|
||||
label: "Download Speed",
|
||||
data: [],
|
||||
color: "#ff0000",
|
||||
|
|
@ -649,7 +654,7 @@ function updateGraphData(data) {
|
|||
this.add(this.upSpeed, val);
|
||||
return this;
|
||||
},
|
||||
plot: that.createGraph(gid),
|
||||
plot: that.createGraph('[data-gid=' + gid + '] .active_graph'),
|
||||
start: new Date()
|
||||
}
|
||||
})().addDown(downSpeed).addUp(upSpeed));
|
||||
|
|
@ -1009,11 +1014,29 @@ function updateDownloads() {
|
|||
}
|
||||
|
||||
function updateGlobalStatistics(data) {
|
||||
globalGraphData.addDown(parseFloat(data.downloadSpeed));
|
||||
globalGraphData.addUp(parseFloat(data.uploadSpeed));
|
||||
data.downloadSpeed = changeLength(data.downloadSpeed, "B/s");
|
||||
data.uploadSpeed = changeLength(data.uploadSpeed, "B/s");
|
||||
for(var i in data) {
|
||||
$('.stat_' + i).text(data[i]);
|
||||
}
|
||||
if (globalGraphData) {
|
||||
globalGraphData.plot.setData([{
|
||||
label: "Download Speed",
|
||||
data: globalGraphData.downSpeed,
|
||||
color: "#ff0000",
|
||||
lines: { show: true }
|
||||
}, {
|
||||
label: "Upload Speed",
|
||||
data: globalGraphData.upSpeed,
|
||||
color: "#00ff00",
|
||||
lines: { show: true }
|
||||
}]);
|
||||
globalGraphData.plot.setupGrid();
|
||||
globalGraphData.plot.draw();
|
||||
}
|
||||
|
||||
}
|
||||
function custom_global_statistics() {
|
||||
var tmpl = $('#global_statistics_template').text();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user