diff --git a/files/system-monitor-graph@rcassani/desklet.js b/files/system-monitor-graph@rcassani/desklet.js index d1ec80b..8d22a49 100644 --- a/files/system-monitor-graph@rcassani/desklet.js +++ b/files/system-monitor-graph@rcassani/desklet.js @@ -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() + "%"; - } + 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 3){ + a = colors[3]; + } + return [r, g, b, a]; } + }; diff --git a/files/system-monitor-graph@rcassani/settings-schema.json b/files/system-monitor-graph@rcassani/settings-schema.json index 2875607..21c4418 100644 --- a/files/system-monitor-graph@rcassani/settings-schema.json +++ b/files/system-monitor-graph@rcassani/settings-schema.json @@ -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." } - - - }