mount/system-monitor-graph
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Desklet size is linked to one single value

Browse Source
This commit is contained in:
Raymundo Cassani 2020-05-27 10:57:53 -04:00
parent 7d8ac4223c
commit 3691ad5218
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
files/system-monitor-graph@rcassani/desklet.js
View File

@ -60,15 +60,24 @@ MyDesklet.prototype = {
}, },
update: function() { update: function() {
// size Desklet // Desklet proportions
let desklet_w = 330; // pixels let unit_size = 15; // pixels
let desklet_h = 120; // pixels var margin_up = 3 * unit_size;
let size_margin = 15; // pixels var graph_w = 20 * unit_size;
var graph_w = desklet_w - (2 * size_margin); var graph_h = 4 * unit_size;
var graph_h = desklet_h - (4 * size_margin); let desklet_w = graph_w + (2 * unit_size);
let graph_step = 10; let desklet_h = graph_h + (4 * unit_size);
let text1_size = 26;
let text2_size = 16; // let desklet_w = 330; // pixels
// let desklet_h = 120; // pixels
// let size_margin = 15; // pixels
// var graph_w = desklet_w - (2 * size_margin);
//var graph_h = desklet_h - (4 * size_margin);
let graph_step = 2 * unit_size / 3; // this depends on the interval, and refresh
let text1_size = 5 * unit_size / 3;
let text2_size = 4 * unit_size / 3;
let n_values = this.n_values; let n_values = this.n_values;
let values = this.values; let values = this.values;
@ -147,29 +156,29 @@ MyDesklet.prototype = {
// graph border // graph border
ctx.setSourceRGBA(line_r, line_g, line_b, 1); ctx.setSourceRGBA(line_r, line_g, line_b, 1);
ctx.rectangle(size_margin, size_margin*3, graph_w, graph_h); ctx.rectangle(unit_size, margin_up, graph_w, graph_h);
ctx.stroke(); ctx.stroke();
// graph midlines // graph midlines
ctx.setSourceRGBA(line_r, line_g, line_b, 0.2); ctx.setSourceRGBA(line_r, line_g, line_b, 0.2);
let n_midlines = 4; let n_midlines = 4;
for (let i = 1; i<n_midlines; i++){ for (let i = 1; i<n_midlines; i++){
ctx.moveTo(size_margin, (size_margin * 3) + i * (graph_h / n_midlines)); ctx.moveTo(unit_size, margin_up + i * (graph_h / n_midlines));
ctx.relLineTo(graph_w, 0); ctx.relLineTo(graph_w, 0);
ctx.moveTo((i * (graph_w / n_midlines)) + size_margin, size_margin * 3 ); ctx.moveTo((i * graph_w / n_midlines) + unit_size, margin_up);
ctx.relLineTo(0, graph_h); ctx.relLineTo(0, graph_h);
ctx.stroke(); ctx.stroke();
} }
// timeseries // timeseries
ctx.setSourceRGBA(line_r, line_g, line_b, 1); ctx.setSourceRGBA(line_r, line_g, line_b, 1);
ctx.moveTo(size_margin, (size_margin * 3) + graph_h - (values[0] * graph_h)); ctx.moveTo(unit_size, margin_up + graph_h - (values[0] * graph_h));
for (let i = 1; i<n_values; i++){ for (let i = 1; i<n_values; i++){
ctx.lineTo(size_margin + (i * graph_step), (size_margin * 3) + graph_h - (values[i] * graph_h)); ctx.lineTo(unit_size + (i * graph_step), margin_up + graph_h - (values[i] * graph_h));
} }
ctx.strokePreserve(); ctx.strokePreserve();
ctx.lineTo(size_margin + graph_w, (size_margin * 3) + graph_h); ctx.lineTo(unit_size + graph_w, margin_up + graph_h);
ctx.lineTo(size_margin, (size_margin * 3) + graph_h); ctx.lineTo(unit_size, margin_up + graph_h);
ctx.closePath(); ctx.closePath();
ctx.setSourceRGBA(line_r, line_g, line_b, 0.2); ctx.setSourceRGBA(line_r, line_g, line_b, 0.2);
ctx.fill(); ctx.fill();
@ -178,10 +187,10 @@ MyDesklet.prototype = {
}); });
// text position and content // text position and content
this.text1.set_position(size_margin, 10); this.text1.set_position(unit_size, 2 * unit_size / 3);
this.text1.set_text(text1); this.text1.set_text(text1);
this.text1.style = "font-size: " + text1_size + "px;"; this.text1.style = "font-size: " + text1_size + "px;";
this.text2.set_position(80, 17); this.text2.set_position(5 * unit_size, unit_size);
this.text2.set_text(text2); this.text2.set_text(text2);
this.text2.style = "font-size: " + text2_size + "px;"; this.text2.style = "font-size: " + text2_size + "px;";
@ -204,7 +213,7 @@ MyDesklet.prototype = {
}, },
on_desklet_added_to_desktop: function(){ on_desklet_added_to_desktop: function(){
this.actor.set_position(0, 0); this.actor.set_position(100, 100);
}, },
get_cpu_times: function(){ get_cpu_times: function(){