Add aesthetic elements in settings-schema.json and bind them in desklet.js

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 = this.h_midlines;
-        var h_midlines = 5;
+        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
+        // overrides the line_color if custom_line_color
-        let line_colors = this.line_color.match(/\((.*?)\)/)[1].split(","); // get contents inside brackets: "rgb(...)"
+        if (this.custom_line_color){
-        line_r = parseInt(line_colors[0])/255;
+            line_colors = this.parse_rgba_seetings(this.line_color);
-        line_g = parseInt(line_colors[1])/255;
+        }
-        line_b = parseInt(line_colors[2])/255;
 
+        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.setSourceRGBA(midline_colors[0], midline_colors[1], midline_colors[2], 1);
-            ctx.setLineWidth(0.5);
+            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.setLineWidth(2 * line_width);
-            ctx.setSourceRGBA(line_r, line_g, line_b, 1);
+            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];
+    }
+
 };

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,
+        "units": "scale factor",
-        "max": 30,
+        "description": "H midlines",
-        "units": "seconds",
+        "tooltip": "Increase or decrease the size of this desklet using this scale factor."
-        "description": "Refresh interval",
+    },
-        "tooltip": "Increase or decrease refresh interval in seconds."
+    "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."
     }
-
-
-
 }