Update README.md

README.md

@@ -1,18 +1,51 @@
 # 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
+<p align="center">
-These are some of the projects where I took inspiration for this project:
+<img src="simple.gif" width="400" align="middle"><br>
-
+Four instances of the Desklet in action.
-* [Disk Space](https://cinnamon-spices.linuxmint.com/desklets/view/39)
+</p>
-* [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/)
 
 
-# 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="400" align="middle"><br>
+Settings for one instance of the system monitor graph Desklet.
+</p>
+
+### Screenshots
+<p align="center">
+<img src="screenshot.png" width="800" align="middle"><br>
+The Desklet is fully customizable.
+</p>
+<br>
+
+<p align="center">
+<img src="screenshot2.png" width="800" 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)
@@ -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