Add aesthetic elements in settings-schema.json and bind them in desklet.js
This commit is contained in:
Raymundo Cassani
parent
ac43ebd100
commit
9cdf0275a6
@ -26,7 +26,16 @@ MyDesklet.prototype = {
|
||||
this.settings = new Settings.DeskletSettings(this, this.metadata["uuid"], desklet_id);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "type", "type", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "refresh-interval", "refresh_interval", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "duration", "duration", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "custom-line-color", "custom_line_color", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "line-color", "line_color", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "background-color", "background_color", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "h-midlines", "h_midlines", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "v-midlines", "v_midlines", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "scale-size", "scale_size", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "midline-color", "midline_color", this.on_setting_changed);
|
||||
this.settings.bindProperty(Settings.BindingDirection.IN, "text-color", "text_color", this.on_setting_changed);
|
||||
|
||||
// initialize desklet GUI
|
||||
this.setupUI();
|
||||
},
|
||||
@ -48,23 +57,33 @@ MyDesklet.prototype = {
|
||||
},
|
||||
|
||||
update: function() {
|
||||
// time settings for graph
|
||||
//
|
||||
this.update_draw();
|
||||
// call this.update() every in refresh_interval seconds
|
||||
this.timeout = Mainloop.timeout_add_seconds(this.refresh_interval, Lang.bind(this, this.update));
|
||||
},
|
||||
|
||||
update_draw: function() {
|
||||
// values needed in first run
|
||||
if (this.first_run){
|
||||
this.duration = 30;
|
||||
this.refresh_interval = 1;
|
||||
this.n_values = Math.floor(this.duration / this.refresh_interval) + 1;
|
||||
this.values = new Array(this.n_values).fill(0.0);
|
||||
let cpu_values = this.get_cpu_times();
|
||||
this.cpu_tot = cpu_values[0];
|
||||
this.cpu_idl = cpu_values[1];
|
||||
this.first_run = false;
|
||||
}
|
||||
|
||||
// Desklet proportions
|
||||
let unit_size = 15; // pixels
|
||||
let unit_size = 15 * this.scale_size; // pixels
|
||||
var line_width = unit_size / 15;
|
||||
var margin_up = 3 * unit_size;
|
||||
var graph_w = 20 * unit_size;
|
||||
var graph_h = 4 * unit_size;
|
||||
let desklet_w = graph_w + (2 * unit_size);
|
||||
let desklet_h = graph_h + (4 * unit_size);
|
||||
var v_midlines = 4;
|
||||
var h_midlines = 5;
|
||||
var h_midlines = this.h_midlines;
|
||||
var v_midlines = this.v_midlines;
|
||||
let text1_size = 5 * unit_size / 3;
|
||||
let text2_size = 4 * unit_size / 3;
|
||||
var radius = 2 * unit_size / 3;;
|
||||
@ -77,7 +96,7 @@ MyDesklet.prototype = {
|
||||
var value = 0.0;
|
||||
var text1 = '';
|
||||
var text2 = '';
|
||||
var line_r;
|
||||
var line_colors;
|
||||
var line_g;
|
||||
var line_b;
|
||||
|
||||
@ -89,19 +108,12 @@ MyDesklet.prototype = {
|
||||
let cpu_values = this.get_cpu_times();
|
||||
let cpu_tot = cpu_values[0];
|
||||
let cpu_idl = cpu_values[1];
|
||||
|
||||
if (this.first_run){
|
||||
this.first_run = false;
|
||||
this.cpu_tot = cpu_tot;
|
||||
this.cpu_idl = cpu_idl;
|
||||
}
|
||||
else {
|
||||
let cpu_use = 100 * (1 - (cpu_idl - this.cpu_idl) / (cpu_tot - this.cpu_tot));
|
||||
this.cpu_tot = cpu_tot;
|
||||
this.cpu_idl = cpu_idl;
|
||||
value = cpu_use / 100;
|
||||
text2 = Math.round(cpu_use).toString() + "%";
|
||||
}
|
||||
line_colors = [1, 1, 1];
|
||||
break;
|
||||
|
||||
case "ram":
|
||||
@ -117,12 +129,17 @@ MyDesklet.prototype = {
|
||||
values.shift();
|
||||
this.values = values;
|
||||
|
||||
// line_color
|
||||
let line_colors = this.line_color.match(/\((.*?)\)/)[1].split(","); // get contents inside brackets: "rgb(...)"
|
||||
line_r = parseInt(line_colors[0])/255;
|
||||
line_g = parseInt(line_colors[1])/255;
|
||||
line_b = parseInt(line_colors[2])/255;
|
||||
// overrides the line_color if custom_line_color
|
||||
if (this.custom_line_color){
|
||||
line_colors = this.parse_rgba_seetings(this.line_color);
|
||||
}
|
||||
|
||||
var background_colors = this.parse_rgba_seetings(this.background_color);
|
||||
var midline_colors = this.parse_rgba_seetings(this.midline_color);
|
||||
|
||||
|
||||
|
||||
// draws graph
|
||||
let canvas = new Clutter.Canvas();
|
||||
canvas.set_size(desklet_w, desklet_h);
|
||||
canvas.connect('draw', function (canvas, ctx, desklet_w, desklet_h) {
|
||||
@ -131,10 +148,10 @@ MyDesklet.prototype = {
|
||||
ctx.paint();
|
||||
ctx.restore();
|
||||
ctx.setOperator(Cairo.Operator.OVER);
|
||||
ctx.setLineWidth(2);
|
||||
ctx.setLineWidth(2 * line_width);
|
||||
|
||||
// desklet background
|
||||
ctx.setSourceRGBA(0.2, 0.2, 0.2, 1);
|
||||
ctx.setSourceRGBA(background_colors[0], background_colors[1], background_colors[2], background_colors[3]);
|
||||
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);
|
||||
@ -144,13 +161,13 @@ MyDesklet.prototype = {
|
||||
ctx.fill();
|
||||
|
||||
// graph border
|
||||
ctx.setSourceRGBA(line_r, line_g, line_b, 1);
|
||||
ctx.setSourceRGBA(line_colors[0], line_colors[1], line_colors[2], 1);
|
||||
ctx.rectangle(unit_size, margin_up, graph_w, graph_h);
|
||||
ctx.stroke();
|
||||
|
||||
// graph V and H midlines
|
||||
ctx.setSourceRGBA(0.5, 0.5, 0.5, 1);
|
||||
ctx.setLineWidth(0.5);
|
||||
ctx.setSourceRGBA(midline_colors[0], midline_colors[1], midline_colors[2], 1);
|
||||
ctx.setLineWidth(line_width);
|
||||
for (let i = 1; i<v_midlines; i++){
|
||||
ctx.moveTo((i * graph_w / v_midlines) + unit_size, margin_up);
|
||||
ctx.relLineTo(0, graph_h);
|
||||
@ -163,8 +180,8 @@ MyDesklet.prototype = {
|
||||
}
|
||||
|
||||
// timeseries and area
|
||||
ctx.setLineWidth(2);
|
||||
ctx.setSourceRGBA(line_r, line_g, line_b, 1);
|
||||
ctx.setLineWidth(2 * line_width);
|
||||
ctx.setSourceRGBA(line_colors[0], line_colors[1], line_colors[2], 1);
|
||||
ctx.moveTo(unit_size, margin_up + graph_h - (values[0] * graph_h));
|
||||
for (let i = 1; i<n_values; i++){
|
||||
ctx.lineTo(unit_size + (i * graph_step), margin_up + graph_h - (values[i] * graph_h));
|
||||
@ -173,7 +190,7 @@ MyDesklet.prototype = {
|
||||
ctx.lineTo(unit_size + graph_w, margin_up + graph_h);
|
||||
ctx.lineTo(unit_size, margin_up + graph_h);
|
||||
ctx.closePath();
|
||||
ctx.setSourceRGBA(line_r, line_g, line_b, 0.2);
|
||||
ctx.setSourceRGBA(line_colors[0], line_colors[1], line_colors[2], 0.4);
|
||||
ctx.fill();
|
||||
|
||||
return false;
|
||||
@ -182,22 +199,23 @@ MyDesklet.prototype = {
|
||||
// text position and content
|
||||
this.text1.set_position(unit_size, 2 * unit_size / 3);
|
||||
this.text1.set_text(text1);
|
||||
this.text1.style = "font-size: " + text1_size + "px;";
|
||||
this.text1.style = "font-size: " + text1_size + "px;"
|
||||
+ "color: " + this.text_color + ";";
|
||||
this.text2.set_position(5 * unit_size, unit_size);
|
||||
this.text2.set_text(text2);
|
||||
this.text2.style = "font-size: " + text2_size + "px;";
|
||||
this.text2.style = "font-size: " + text2_size + "px;"
|
||||
+ "color: " + this.text_color + ";";
|
||||
|
||||
// update canvas
|
||||
canvas.invalidate();
|
||||
this.canvas.set_content(canvas);
|
||||
this.canvas.set_size(desklet_w, desklet_h);
|
||||
// call this.update() every in refresh_interval seconds
|
||||
this.timeout = Mainloop.timeout_add_seconds(this.refresh_interval, Lang.bind(this, this.update));
|
||||
},
|
||||
|
||||
on_setting_changed: function() {
|
||||
// settings changed; instant refresh
|
||||
Mainloop.source_remove(this.timeout);
|
||||
this.first_run = true;
|
||||
this.update();
|
||||
},
|
||||
|
||||
@ -222,5 +240,18 @@ MyDesklet.prototype = {
|
||||
cpu_tot += parseFloat(cpu_values[i])
|
||||
}
|
||||
return [cpu_tot, cpu_idl];
|
||||
},
|
||||
|
||||
parse_rgba_seetings: function(color_str) {
|
||||
let colors = color_str.match(/\((.*?)\)/)[1].split(","); // get contents inside brackets: "rgb(...)"
|
||||
let r = parseInt(colors[0])/255;
|
||||
let g = parseInt(colors[1])/255;
|
||||
let b = parseInt(colors[2])/255;
|
||||
let a = 1;
|
||||
if (colors.length > 3){
|
||||
a = colors[3];
|
||||
}
|
||||
return [r, g, b, a];
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@ -18,27 +18,95 @@
|
||||
"RAM": "ram"
|
||||
}
|
||||
},
|
||||
"refresh-interval": {
|
||||
"type": "combobox",
|
||||
"default": 1,
|
||||
"description": "Refresh interval 2",
|
||||
"tooltip": "Increase or decrease refresh interval in seconds.",
|
||||
"options" : {
|
||||
" 1 s": 1,
|
||||
" 2 s": 2,
|
||||
" 5 s": 5,
|
||||
"10 s": 10,
|
||||
"30 s": 30,
|
||||
"60 s": 60
|
||||
}
|
||||
},
|
||||
"duration": {
|
||||
"type": "combobox",
|
||||
"default": 60,
|
||||
"description": "Plot duration",
|
||||
"tooltip": "Increase or decrease refresh interval in seconds.",
|
||||
"options" : {
|
||||
"30 s": 30,
|
||||
" 1 min": 60,
|
||||
" 2 min": 120,
|
||||
" 5 min": 300,
|
||||
"10 min": 600,
|
||||
"30 min": 1800,
|
||||
"60 min": 3600
|
||||
}
|
||||
},
|
||||
|
||||
"head2": {
|
||||
"type": "header",
|
||||
"description": "Visual"
|
||||
},
|
||||
"background-color": {
|
||||
"type": "colorchooser",
|
||||
"default": "rgba(50,50,50,1)",
|
||||
"description": "Background color"
|
||||
},
|
||||
"custom-line-color": {
|
||||
"type": "checkbox",
|
||||
"default": false,
|
||||
"description": "Use a custom circle color",
|
||||
"value": false
|
||||
},
|
||||
"line-color": {
|
||||
"type": "colorchooser",
|
||||
"default": "rgba(50,168,82,1.0)",
|
||||
"description": "Line color"
|
||||
"description": "Line color",
|
||||
"dependency": "custom-line-color"
|
||||
},
|
||||
"refresh-interval": {
|
||||
"midline-color": {
|
||||
"type": "colorchooser",
|
||||
"default": "rgba(127,127,127,1)",
|
||||
"description": "Midline color"
|
||||
},
|
||||
"text-color": {
|
||||
"type": "colorchooser",
|
||||
"default": "rgba(255,255,255,1)",
|
||||
"description": "Text color"
|
||||
},
|
||||
"h-midlines": {
|
||||
"type": "spinbutton",
|
||||
"default": 2,
|
||||
"default": 4,
|
||||
"min": 0,
|
||||
"max": 20,
|
||||
"step": 1,
|
||||
"min": 1,
|
||||
"max": 30,
|
||||
"units": "seconds",
|
||||
"description": "Refresh interval",
|
||||
"tooltip": "Increase or decrease refresh interval in seconds."
|
||||
"units": "scale factor",
|
||||
"description": "H midlines",
|
||||
"tooltip": "Increase or decrease the size of this desklet using this scale factor."
|
||||
},
|
||||
"v-midlines": {
|
||||
"type": "spinbutton",
|
||||
"default": 4,
|
||||
"min": 0,
|
||||
"max": 20,
|
||||
"step": 1,
|
||||
"units": "scale factor",
|
||||
"description": "V midlines",
|
||||
"tooltip": "Increase or decrease the size of this desklet using this scale factor."
|
||||
},
|
||||
"scale-size": {
|
||||
"type": "spinbutton",
|
||||
"default": 1,
|
||||
"min": 0.5,
|
||||
"max": 3,
|
||||
"step": 0.1,
|
||||
"units": "scale factor",
|
||||
"description": "Desklet size",
|
||||
"tooltip": "Increase or decrease the size of this desklet using this scale factor."
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user