Update settings-schema.json

README.md

@@ -1,23 +1,56 @@
 # System monitor graph Desklet
-Desklet for Cinnamon (desktop environment) to show graphs for system variables
+Desklet to show graphs for the level of activity in various system variables including: CPU, memory, and disks. The desklet supports multiple instances with different system variables with the idea of presenting them in a uniform way.
 
-# Inspiration
-These are some of the projects where I took inspiration for this project:
-
-* [Disk Space](https://cinnamon-spices.linuxmint.com/desklets/view/39)
-* [CPU Load](https://cinnamon-spices.linuxmint.com/desklets/view/44)
-* [Simple system monitor](https://cinnamon-spices.linuxmint.com/desklets/view/29)
-* [Network usage monitor](https://cinnamon-spices.linuxmint.com/desklets/view/15)
-* [Top](https://cinnamon-spices.linuxmint.com/desklets/view/41)
-* [Win10 Widgets](https://win10widgets.com/)
+<p align="center">
+<img src="simple.gif" width="400" align="middle"><br>
+Four instances of the Desklet in action.
+</p>
 
 
-# Resources
+This project has been inspired from other Desklets such as [Disk Space](https://cinnamon-spices.linuxmint.com/desklets/view/39), [CPU Load](https://cinnamon-spices.linuxmint.com/desklets/view/44), [Simple system monitor](https://cinnamon-spices.linuxmint.com/desklets/view/29), [Network usage monitor](https://cinnamon-spices.linuxmint.com/desklets/view/15), [Top](https://cinnamon-spices.linuxmint.com/desklets/view/41), and the  [Rainmeter Win10 Widgets](https://win10widgets.com/).
+
+## Features
+### Variables to monitor (v1.0 - May 2020)
+
+| System variable | Description |
+| -----------     | ----------- |
+| CPU             | CPU usage in % |
+| RAM             | Used RAM as % of total, and in GB  |
+| HDD             | % of I/O activity, and free and total space in the filesystem (partition)  indicated by the user|
+
+Each variable is calculated every `Refresh interval` seconds (Min. 1 s, Max. 60 s.), and the graph shows the last `Duration of the graph` period (Min. 30 s, Max. 60 min).
+
+### Customizable visual elements
+<p align="center">
+<img src="settings.png" width="700" align="middle"><br>
+Settings for one instance of the system monitor graph Desklet.
+</p>
+
+### Screenshots
+<p align="center">
+<img src="screenshot.png" width="900" align="middle"><br>
+The Desklet is fully customizable.
+</p>
+<br>
+
+<p align="center">
+<img src="screenshot2.png" width="900" align="middle"><br>
+A simple screenshot.
+</p>
+
+## TODO
+- [ ] Bottom alignment of the text elements
+- [ ] Right alignment of the third text elements
+- [ ] Add % of use of GPU
+- [ ] Add other variables such as network, CPU and GPU temperatures, battery levels for PC and peripherals.
+
+### Resources
+This is my first Desklet and the first time using JavaScript. Below, some resources that I used for the development of this Desklet.
 * [cinnamon-spices-desklets](https://github.com/linuxmint/cinnamon-spices-desklets)
 * [JavaScript Tutorial](https://www.w3schools.com/js/default.asp)
 * [CJS: JavaScript bindings for Cinnamon](https://github.com/linuxmint/cjs)
 * [CJS the importer](http://lira.epac.to:8080/doc/cinnamon/cinnamon-tutorials/importer.html)
-* [Applet, desklet and extension settings reference](https://projects.linuxmint.com/reference/git/cinnamon-tutorials/xlet-settings.html) and [here](https://projects.linuxmint.com/reference/git/cinnamon-tutorials/xlet-settings-ref.html)
+* [Applet, desklet and extension settings reference](https://projects.linuxmint.com/reference/git/cinnamon-tutorials/xlet-settings.html)  and [here](https://projects.linuxmint.com/reference/git/cinnamon-tutorials/xlet-settings-ref.html)
 * [GJS: JavaScript Bindings for GNOME](https://gitlab.gnome.org/GNOME/gjs/blob/master/doc/Home.md) and [here](https://gjs-docs.gnome.org/)
 * [GJS examples](https://github.com/optimisme/gjs-examples)
 * [Clutter API](https://gjs-docs.gnome.org/clutter4~4_api/)
@@ -27,9 +60,3 @@ These are some of the projects where I took inspiration for this project:
 * Default [`desklet.js` in Cinnamon](https://github.com/linuxmint/cinnamon/blob/master/js/ui/desklet.js)
 * [Manual alpha blending](https://stackoverflow.com/questions/746899/how-to-calculate-an-rgb-colour-by-specifying-an-alpha-blending-amount)
 * [Cairo documentation](https://www.cairographics.org/documentation/)
-
-# Notes:
-* `/bin/df` for disk space
-* `iostat -px` for hdd usage
-
-#TODO: add dependencies

files/system-monitor-graph@rcassani/desklet.js

@@ -44,10 +44,6 @@ MyDesklet.prototype = {
         this.settings.bindProperty(Settings.BindingDirection.IN, "line-color-ram", "line_color_ram", this.on_setting_changed);
         this.settings.bindProperty(Settings.BindingDirection.IN, "line-color-hdd", "line_color_hdd", this.on_setting_changed);
 
-
-
-
-
         // initialize desklet GUI
         this.setupUI();
     },
@@ -58,8 +54,10 @@ MyDesklet.prototype = {
         this.canvas.remove_all_children();
         this.text1 = new St.Label();
         this.text2 = new St.Label();
+        this.text3 = new St.Label();
         this.canvas.add_actor(this.text1);
         this.canvas.add_actor(this.text2);
+        this.canvas.add_actor(this.text3);
         this.setContent(this.canvas);
 
         // flag to indicate the first loop of the Desklet
@@ -108,8 +106,9 @@ MyDesklet.prototype = {
         let desklet_h = graph_h + (4 * unit_size);
         var h_midlines = this.h_midlines;
         var v_midlines = this.v_midlines;
-        let text1_size = 5 * unit_size / 3;
+        let text1_size = 4 * unit_size / 3;
         let text2_size = 4 * unit_size / 3;
+        let text3_size = 3 * unit_size / 3;
         var radius = 2 * unit_size / 3;;
         var degrees = Math.PI / 180.0;
 
@@ -120,6 +119,7 @@ MyDesklet.prototype = {
         var value = 0.0;
         var text1 = '';
         var text2 = '';
+        var text3 = '';
         var line_colors = this.parse_rgba_seetings(this.line_color);
 
         // current values
@@ -136,9 +136,9 @@ MyDesklet.prototype = {
               let ram_use = 100 * ram_values[1] / ram_values[0];
               value = ram_use / 100;
               text1 = "RAM";
-              text2 = Math.round(ram_use).toString() + "%   "
-                    + ram_values[1].toFixed(1) + " / " + ram_values[0].toFixed(1)
-                    + " GB";
+              text2 = Math.round(ram_use).toString() + "%"
+              text3 = ram_values[1].toFixed(1) + " / "
+                    + ram_values[0].toFixed(1) + " GB";
               break;
 
           case "hdd":
@@ -148,9 +148,10 @@ MyDesklet.prototype = {
               let hdd_use = Math.min(hdd_values[1], 100); //already in %
               value = hdd_use / 100;
               text1 = hdd_values[0];
-              text2 = Math.round(hdd_use).toString() + "%   "
-                    + hdd_values[3].toFixed(1) + " GB free of "
-                    + hdd_values[2].toFixed(1) + " GB";
+              text2 = Math.round(hdd_use).toString() + "%"
+              text3 = hdd_values[3].toFixed(0) + " GB free of "
+                    + hdd_values[2].toFixed(0) + " GB";
+
 
               break;
         }
@@ -223,7 +224,7 @@ MyDesklet.prototype = {
         });
 
         // text position and content
-        this.text1.set_position(unit_size, 2 * unit_size / 3);
+        this.text1.set_position(unit_size, unit_size);
         this.text1.set_text(text1);
         this.text1.style = "font-size: " + text1_size + "px;"
                          + "color: " + this.text_color + ";";
@@ -231,6 +232,10 @@ MyDesklet.prototype = {
         this.text2.set_text(text2);
         this.text2.style = "font-size: " + text2_size + "px;"
                          + "color: " + this.text_color + ";";
+        this.text3.set_position(9.5 * unit_size, unit_size * 1.4);
+        this.text3.set_text(text3);
+        this.text3.style = "font-size: " + text3_size + "px;"
+                         + "color: " + this.text_color + ";";
 
         // update canvas
         canvas.invalidate();
@@ -298,6 +303,7 @@ MyDesklet.prototype = {
     },
 
     get_hdd_use: function(fs) {
+      // https://stackoverflow.com/questions/4458183/how-the-util-of-iostat-is-computed
       let cpu_line = Cinnamon.get_file_contents_utf8_sync("/proc/stat").match(/cpu\s.+/)[0];
       let re = new RegExp(fs + '.+');
       let hdd_line = Cinnamon.get_file_contents_utf8_sync("/proc/diskstats").match(re)[0];

files/system-monitor-graph@rcassani/metadata.json

@@ -1,8 +1,8 @@
 {
-    "max-instances": "10",
+    "max-instances": "20",
     "uuid": "system-monitor-graph@rcassani",
     "name": "System monitor graph",
     "description": "Creates graphs for system variables.",
-    "version": "0.1",
+    "version": "1.0",
     "prevent-decorations": true
 }

files/system-monitor-graph@rcassani/settings-schema.json

@@ -23,7 +23,7 @@
         "type": "filechooser",
         "default": "/",
         "description": "Filesystem to monitor",
-        "tooltip": "Select the file system, which you want to monitor.",
+        "tooltip": "Select a directory in the filesystem to monitor.",
         "allow-none" : true,
         "select-dir" : true,
         "dependency": "type=hdd"
@@ -32,7 +32,7 @@
         "type": "combobox",
         "default": 60,
         "description": "Duration of the graph",
-        "tooltip": "Maximum among of time shown in the graph.",
+        "tooltip": "Maximum among of time to show in the graph.",
         "options" : {
             "30 s": 30,
             " 1 min": 60,
@@ -47,7 +47,7 @@
         "type": "combobox",
         "default": 1,
         "description": "Refresh interval",
-        "tooltip": "Refresh interval in seconds.",
+        "tooltip": "How often a new value of the variable will be calculated.",
         "options" : {
             " 1 s": 1,
             " 2 s": 2,
@@ -66,35 +66,41 @@
     "background-color": {
         "type": "colorchooser",
         "default": "rgba(50,50,50,1)",
-        "description": "Background color"
+        "description": "Background color",
+        "tooltip": "RGB or RGBA."
     },
     "text-color": {
         "type": "colorchooser",
         "default": "rgba(255,255,255,1)",
-        "description": "Text color"
+        "description": "Text color",
+        "tooltip": "RGB or RGBA."
     },
     "line-color-cpu": {
         "type": "colorchooser",
         "default": "rgba(23,147,208,1.0)",
         "description": "Line color CPU",
-        "dependency": "type=cpu"
+        "dependency": "type=cpu",
+        "tooltip": "RGB or RGBA. Alpha is ignored"
     },
     "line-color-ram": {
         "type": "colorchooser",
         "default": "rgba(137,190,67,1.0)",
         "description": "Line color RAM",
-        "dependency": "type=ram"
+        "dependency": "type=ram",
+        "tooltip": "RGB or RGBA. Alpha is ignored"
     },
     "line-color-hdd": {
         "type": "colorchooser",
         "default": "rgba(197,86,33,1.0)",
         "description": "Line color HDD",
-        "dependency": "type=hdd"
+        "dependency": "type=hdd",
+        "tooltip": "RGB or RGBA. Alpha is ignored"
     },
     "midline-color": {
         "type": "colorchooser",
         "default": "rgba(127,127,127,1)",
-        "description": "Grid color"
+        "description": "Grid color",
+        "tooltip": "RGB or RGBA."
     },
     "h-midlines": {
         "type": "spinbutton",
@@ -118,6 +124,6 @@
         "min": 0.5,
         "max": 5,
         "step": 0.1,
-        "description": "Scale factor for desklet size (1 = 330x120 px)"
+        "description": "Scale factor for desklet size (scale factor of 1 = 330 x 120 px)"
     }
 }

info.json

@@ -0,0 +1 @@
+{"author": "rcassani"}