Ticket #378: piecesbar_webui.patch

deluge/ui/web/js/deluge-all/Keys.js

@@ -62 +62 @@
     Status: [
         'total_done', 'total_payload_download', 'total_uploaded',
         'total_payload_upload', 'next_announce', 'tracker_status', 'num_pieces',
-        'piece_length', 'is_auto_managed', 'active_time', 'seeding_time',
+        'piece_length', 'pieces', 'is_auto_managed', 'active_time', 'seeding_time',
         'seed_rank'
     ],
 

deluge/ui/web/js/deluge-all/details/StatusTab.js

@@ -38 +38 @@
 Deluge.details.StatusTab = Ext.extend(Ext.Panel, {
         title: _('Status'),
         autoScroll: true,
-        
+    
         onRender: function(ct, position) {
                 Deluge.details.StatusTab.superclass.onRender.call(this, ct, position);
                 
-                this.progressBar = this.add({
-                        xtype: 'progress',
-                        cls: 'x-deluge-status-progressbar'
+        this.piecesBar = this.add({                   
+            xtype: 'box',
+            id: 'piecesbar',
+            width: '99%', 
+            height: 30,
+            
+            style: {
+                marginRight: '.5%',
+                marginLeft: '.5%',
+                marginTop: '7px'
+            },
+            
+            autoEl: {
+                tag: 'canvas',
+                height: 30,
+                width: '99%'
+            },
+
+            colors: {
+                0: "#a8a8a9",
+                1: "#22dd00",
+                2: "#dddd00",
+                3: "#3258c1",
+                4: "#cccccc"
+            },
+
+            pieces: null,
+            fraction: null,
+            text: null,
+            
+            compare_pieces: function(pieces) {
+                if (!this.pieces || pieces.length != this.pieces.length) {
+                    return false;
+                }
+    
+                for (var i = 0; i < pieces.length; i++) {
+                    if (pieces[i] != this.pieces[i]) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+
+            roundcorners_clipping: function(ctx) {
+                this.create_roundcorners_subpath(ctx, 0.0, 0.0, this.getWidth(), this.getHeight());
+                ctx.clip();
+            },
+
+            roundcorners_border: function(ctx) {
+                this.create_roundcorners_subpath(ctx, 0.5, 0.5, this.getWidth()-1, this.getHeight()-1);
+                ctx.strokeStyle = "rgba(0,0,0,0.9)";
+                ctx.stroke();
+            },
+
+            create_roundcorners_subpath: function(ctx, x, y, width, height) {
+                var aspect = 1.0;
+                var corner_radius = height/10.0;
+                var radius = corner_radius/aspect;
+                var degrees = Math.PI/180.0;
+                ctx.beginPath();
+                ctx.arc(x + width - radius, y + radius, radius, -90 * degrees, 0 * degrees);
+                ctx.arc(x + width - radius, y + height - radius, radius, 0 * degrees, 90 * degrees);
+                ctx.arc(x + radius, y + height - radius, radius, 90 * degrees, 180 * degrees);
+                ctx.arc(x + radius, y + radius, radius, 180 * degrees, 270 * degrees);
+                ctx.closePath();
+                
+            },
+
+            draw_progress_overlay: function(ctx, fraction) {
+                if (fraction == 0) {
+                    return;
+                }
+                
+                var overlay_width = this.getWidth()*fraction;
+                var gradient = ctx.createLinearGradient(0, this.getHeight()/2, overlay_width, this.getHeight()/2);
+                gradient.addColorStop(0, "rgba(0,0,0,0.4)");
+                
+                var stop = 20/overlay_width;
+                gradient.addColorStop(1-stop, "rgba(0,0,0,0.4)");
+
+                if (fraction != 1.0) {
+                    gradient.addColorStop(1, "rgba(0,0,0,0.0)");
+                }
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, overlay_width, this.getHeight()); 
+            },
+
+            write_text: function(ctx, text) {
+                ctx.textAlign = "center";
+                ctx.font = "bold 13px sans-serif";
+                ctx.fillStyle = "rgba(255,255,255,1)";
+                ctx.fillText(text, Math.floor(this.getWidth()/2), this.getHeight()/2 + 4);
+            },
+
+            draw_pieces: function(ctx, pieces) {
+                var piece_width = (1/pieces.length) * (this.getWidth() - 2);
+                var start_pos = 1;
+                for (var i = 0; i < pieces.length; i++) {
+                    ctx.fillStyle = this.colors[pieces[i]];
+                    ctx.fillRect(start_pos, 1, piece_width, this.getHeight() - 2);
+                    start_pos += piece_width;
+                }   
+            },
+
+            update: function(pieces, fraction, text) {
+                if (!this.compare_pieces(pieces) && typeof(pieces) != "number" 
+                    || this.fraction != fraction || this.text != text) {
+                
+                    var canvas = document.getElementById("piecesbar");
+                    var ctx = canvas.getContext("2d");
+                    canvas.width = this.getWidth();
+                
+                    this.roundcorners_clipping(ctx);
+                    
+                    this.pieces = pieces;
+                    this.fraction = fraction;
+                    this.text = text;
+                    
+                    this.draw_pieces(ctx, pieces);
+                    this.draw_progress_overlay(ctx, fraction);
+                    this.write_text(ctx, text);
+                    
+                    this.roundcorners_border(ctx);
+                }
+            }
+
                 });
                 
                 this.status = this.add({
@@ -69 +192 @@
         },
         
         clear: function() {
-                this.progressBar.updateProgress(0, ' ');
+                this.piecesBar.update([4], 0, ' ');
                 for (var k in this.fields) {
                         this.fields[k].innerHTML = '';
                 }
@@ -120 +243 @@
                         this.fields[field].innerHTML = data[field];
                 }
                 var text = status.state + ' ' + status.progress.toFixed(2) + '%';
-                this.progressBar.updateProgress(status.progress / 100.0, text);
+
+        if (parseInt(status.num_pieces) != status.pieces.length) {
+            pieces = Array(parseInt(status.num_pieces));
+            for (var i=0; i<pieces.length; i++) {
+                pieces[i] = 3;
+            }
+            this.piecesBar.update(pieces, 1.0, text);
+        }
+        else {
+            this.piecesBar.update(status.pieces, status.progress / 100.0, text);
+        }
+
+                
         }
 });