README.md

@@ -1,51 +1,18 @@
 # System monitor graph Desklet
-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.
+Desklet for Cinnamon (desktop environment) to show graphs for system variables
 
-<p align="center">
+# Inspiration
-<img src="simple.gif" width="400" align="middle"><br>
+These are some of the projects where I took inspiration for this project:
-Four instances of the Desklet in action.
+
-</p>
+* [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/)
 
 
-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/).
+# Resources
-
-## 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)
@@ -60,3 +27,9 @@ This is my first Desklet and the first time using JavaScript. Below, some resour
 * 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,6 +44,10 @@ 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();
     },
@@ -54,10 +58,8 @@ 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
@@ -106,9 +108,8 @@ 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 = 4 * unit_size / 3;
+        let text1_size = 5 * 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;
 
@@ -119,7 +120,6 @@ 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() + "%"
+              text2 = Math.round(ram_use).toString() + "%   "
-              text3 = ram_values[1].toFixed(1) + " / "
+                    + ram_values[1].toFixed(1) + " / " + ram_values[0].toFixed(1)
-                    + ram_values[0].toFixed(1) + " GB";
+                    + " GB";
               break;
 
           case "hdd":
@@ -148,10 +148,9 @@ 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() + "%"
+              text2 = Math.round(hdd_use).toString() + "%   "
-              text3 = hdd_values[3].toFixed(0) + " GB free of "
+                    + hdd_values[3].toFixed(1) + " GB free of "
-                    + hdd_values[2].toFixed(0) + " GB";
+                    + hdd_values[2].toFixed(1) + " GB";
-
 
               break;
         }
@@ -224,7 +223,7 @@ MyDesklet.prototype = {
         });
 
         // text position and content
-        this.text1.set_position(unit_size, unit_size);
+        this.text1.set_position(unit_size, 2 * unit_size / 3);
         this.text1.set_text(text1);
         this.text1.style = "font-size: " + text1_size + "px;"
                          + "color: " + this.text_color + ";";
@@ -232,10 +231,6 @@ 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();
@@ -303,7 +298,6 @@ 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": "20",
+    "max-instances": "10",
     "uuid": "system-monitor-graph@rcassani",
     "name": "System monitor graph",
     "description": "Creates graphs for system variables.",
-    "version": "1.0",
+    "version": "0.1",
     "prevent-decorations": true
 }

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

@@ -23,7 +23,7 @@
         "type": "filechooser",
         "default": "/",
         "description": "Filesystem to monitor",
-        "tooltip": "Select a directory in the filesystem to monitor.",
+        "tooltip": "Select the file system, which you want 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 to show in the graph.",
+        "tooltip": "Maximum among of time shown in the graph.",
         "options" : {
             "30 s": 30,
             " 1 min": 60,
@@ -47,7 +47,7 @@
         "type": "combobox",
         "default": 1,
         "description": "Refresh interval",
-        "tooltip": "How often a new value of the variable will be calculated.",
+        "tooltip": "Refresh interval in seconds.",
         "options" : {
             " 1 s": 1,
             " 2 s": 2,
@@ -66,41 +66,35 @@
     "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",
@@ -124,6 +118,6 @@
         "min": 0.5,
         "max": 5,
         "step": 0.1,
-        "description": "Scale factor for desklet size (scale factor of 1 = 330 x 120 px)"
+        "description": "Scale factor for desklet size (1 = 330x120 px)"
     }
 }

info.json

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