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

Visual updates

Browse Source
This commit is contained in:
Raymundo Cassani 2020-05-27 10:42:26 -04:00
parent 174f5d8580
commit 293f0f31ed
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,18 +64,22 @@ MyDesklet.prototype = {
let desklet_w = 330; // pixels let desklet_w = 330; // pixels
let desklet_h = 120; // pixels let desklet_h = 120; // pixels
let size_margin = 15; // pixels let size_margin = 15; // pixels
let graph_w = desklet_w - (2 * size_margin); var graph_w = desklet_w - (2 * size_margin);
let graph_h = desklet_h - (4 * size_margin); var graph_h = desklet_h - (4 * size_margin);
let graph_step = 10; let graph_step = 10;
let text1_size = 26; let text1_size = 26;
let text2_size = 16; let text2_size = 16;
let n_values = this.n_values; let n_values = this.n_values;
let values = this.values; let values = this.values;
var value = 0.0; var value = 0.0;
var text1 = ''; var text1 = '';
var text2 = ''; var text2 = '';
var line_r;
var line_g;
var line_b;
// current values // current values
switch (this.type) { switch (this.type) {
@ -115,9 +119,9 @@ MyDesklet.prototype = {
// line_color // line_color
let line_colors = this.line_color.match(/\((.*?)\)/)[1].split(","); // get contents inside brackets: "rgb(...)" let line_colors = this.line_color.match(/\((.*?)\)/)[1].split(","); // get contents inside brackets: "rgb(...)"
var line_r = parseInt(line_colors[0])/255; line_r = parseInt(line_colors[0])/255;
var line_g = parseInt(line_colors[1])/255; line_g = parseInt(line_colors[1])/255;
var line_b = parseInt(line_colors[2])/255; line_b = parseInt(line_colors[2])/255;
let canvas = new Clutter.Canvas(); let canvas = new Clutter.Canvas();
canvas.set_size(desklet_w, desklet_h); canvas.set_size(desklet_w, desklet_h);
@ -127,18 +131,32 @@ MyDesklet.prototype = {
ctx.paint(); ctx.paint();
ctx.restore(); ctx.restore();
ctx.setOperator(Cairo.Operator.OVER); ctx.setOperator(Cairo.Operator.OVER);
ctx.setSourceRGBA(line_r, line_g, line_b, 1);
ctx.setLineWidth(2); ctx.setLineWidth(2);
// desklet background
let radius = 10;
let degrees = Math.PI / 180.0;
ctx.newSubPath();
ctx.arc(desklet_w - radius, radius, radius, -90 * degrees, 0 * degrees);
ctx.arc(desklet_w - radius, desklet_h - radius, radius, 0 * degrees, 90 * degrees);
ctx.arc(radius, desklet_h - radius, radius, 90 * degrees, 180 * degrees);
ctx.arc(radius, radius, radius, 180 * degrees, 270 * degrees);
ctx.closePath();
ctx.setSourceRGB(0.2, 0.2, 0.2);
ctx.fill();
// graph border // graph border
ctx.rectangle(size_margin, size_margin*3, 300, 60); ctx.setSourceRGBA(line_r, line_g, line_b, 1);
ctx.rectangle(size_margin, size_margin*3, 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);
for (let i = 1; i<4; i++){ let n_midlines = 4;
ctx.moveTo(size_margin, (size_margin * 3) + i * (graph_h / 4)); for (let i = 1; i<n_midlines; i++){
ctx.moveTo(size_margin, (size_margin * 3) + i * (graph_h / n_midlines));
ctx.relLineTo(graph_w, 0); ctx.relLineTo(graph_w, 0);
ctx.moveTo((i * (graph_w / 4)) + size_margin, size_margin * 3 ); ctx.moveTo((i * (graph_w / n_midlines)) + size_margin, size_margin * 3 );
ctx.relLineTo(0, graph_h); ctx.relLineTo(0, graph_h);
ctx.stroke(); ctx.stroke();
} }
@ -156,7 +174,6 @@ MyDesklet.prototype = {
ctx.setSourceRGBA(line_r, line_g, line_b, 0.2); ctx.setSourceRGBA(line_r, line_g, line_b, 0.2);
ctx.fill(); ctx.fill();
return false; return false;
}); });
@ -164,8 +181,6 @@ MyDesklet.prototype = {
this.text1.set_position(size_margin, 10); this.text1.set_position(size_margin, 10);
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(80, 17);
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;";