Graph Widget

After some months, here is a new widget.
This one draw graphs like *_graph variables in conky (cpugraph, downspeedgraph, ...) but with some amazing options.

The widget use a lot of parameters but only three are mandatory, others are optional. If they are missing, default values are used.

Link to download on deviantArt : here

As usual, settings are made through tables :

graph_settings={
 {table_setting for ring1},
 {table_setting for ring2},
 {table_setting for ring3},
}

For each table, the 3 mandatory parameters are name, arg and max.

In a conky, you write: ${cpu cpu1}, In the script, you will write :

graph_settings={
 {
 name="cpu",
 arg="cpu1",
 max=100,
 --(max is set to 100 because maximum value of $cpu is 100% but you can set it to 50% if you want)
 }
}

For my next examples, I will use this table :

graph_settings={
 {
 name="time",
 arg="%S",
 max=60,
 }
}

and update_interval 1 in conkyrc.


This simple table will draw this kind of graph in the bottom-left corner of the conky window:

You can see a gradient on the background and a gradient on the graph itself.

The default size of the graph is 100x20 pixels but we can change the size and position with width, height, x and y parameters.
x and y are the bottom-left corner of the graph, they are relative to the top-left corner of the conky window

Let zoom in the graph for the next screenshots :

 graph_settings={
     {
     name="time",
     arg="%S",
     max=60,
     width=250,
     height=75,
     x=20,
     y=200,
     },
      }

On the above image, the width is set to 250 pixels, it means , with a conky update of 1 s, that the graph duration is 250 seconds. (each triangle is for one minute)

The same graph with update_interval 0.5 will display half the previous one.


By default, the graph displays one value per pixel, but we can change that with the nb_values parameter : it sets the number of values to display

 graph_settings={
     {
     name="time",
     arg="%S",
     max=60,
     width=250,
     height=75,
     nb_values=60,
     },
      }

Here, we display 60 values, with update_interval 1, it display values for one minute :


Ok, theses triangle are boring, let play with a cpu graph :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     },
      }

With the maximum value set to 100% (max=100), this graph is not useful :


For a better view, we can use the autoscale parameter, if set to true true, the script calculate the maximum value to use (and do not use the max parameter)

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     },
      }

Others ways to change the layout of the output are angle, skew_x and skew_y parameters
For angle :

   graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     x=50,
     angle=-35,
     },
      }

For skew_x :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     x=175,
     skew_x=-15,
     },
      }

For skew_y :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     skew_y=-15,
     },
      }

For both skew_x and skew_y :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     x=175,
     skew_y=-25,
     skew_x=-15,
     },
      }

Another parameter is inverse, if set to true, the graph is drawn from right to left




Now, some parameters to change the output of the graph :
background set to false to not display the background :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     background=false,
     },
      }

foreground set to false to not display the graph! (Wait, you will see that is useful soon !):

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     foreground=false,
     },
      }

But ... we can add a border to the graph with fg_bd_size. If set to zero, no border is drawn

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     foreground=false,
     fg_bd_size=5,
     },
      }

And a border can be added to the background with bg_bd_size

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=60,
     autoscale=true,
     fg_bd_size=2,
     bg_bd_size=2,
     },
      }

with foreground back to true, the default value, we can have that :

---

Now have a look on the colours.
Each colours for background, foreground, background_border, graph border are set in theses parameters :
bg_colour, fg_colour, bg_bd_colour and fg_bd_colour.

For example, for a single colour table:

bg_colour={{0,0x0000ff,1}}

for a 2-colours table :

bg_colour={
 {0,0x0000ff,1},
 {1,0xff00ff,1}
 }

for a 3-colours table:

bg_colour={
 {0,0x0000ff,1},
 {0.5,0xff00ff,1},
 {1,0xff00ff,1}
 }

and so on ...

Each "table colour" above contains one or more tables which defines the colours of a gradient :
table={P,C,A}
P = position inside the linear gradient (0 = start of the gradient, 1= end of the gradient)
C = hexadecimal colour
A = alpha (opacity) of colour (0=invisible,1=opacity 100%)

Some examples with the background only :


As the gradient is linear, I add an orientation parameter, for the four colours :
bg_orientation, bg_bd_orientation, fg_orientation and fg_bd_orientation.
The values of the parameter are the starting point of the gradient, like in this picture :

and, in use :

On the above image, the difference between nw and ww is not obvious but if we decrease the width of the graph, the effect is more visible, like this, for the 8 possible values : "nn","ne","ee","se","ss","sw","ww","nw" :


Stop playing now, try to draw a real graph with some gradients :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     autoscale=true,
     bg_bd_size=1,
     fg_bd_size=3,
     bg_colour = {{0,0xFFFFFF,1}},
     bg_bd_colour = { {0,0x00000,1}},       

     fg_colour = { {0,0xFF0000,1},
                     {0.66,0xFFFF00,1},
                     {1,0x00FF00,1},
                   },
     fg_bd_colour = { {0,0x000000,1}},       
     },
      }

Another one:

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     autoscale=true,
     bg_bd_size=0,
     fg_bd_size=0,
     bg_colour = { {0,0x00000,1},
             {0.5,0xFFFFFF,1},
             {1,0x00000,1}},

     fg_colour = { {0,0x000000,1},
         {0.5,0x0000FF,0.5},
         {1,0x000000,1}},

     },
      }

One more :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     autoscale=true,
     bg_bd_size=2,
     fg_bd_size=0,
     bg_colour = { {0,0x00000,0},
             {0.5,0xFFFFFF,1},
             {1,0x00000,0}},

     bg_bd_colour = { {0,0x00000,0},
             {0.5,0x000000,1},
             {1,0x00000,0}},

     fg_colour = { {0,0x000000,0},
         {0.5,0xFF0000,0.5},
         {1,0x000000,0}},

     bg_bd_orientation="ww",
     bg_orientation="ww",
     fg_orientation="ww",                
     },
      }

Again :

 graph_settings={
     {
     name="cpu",
     arg="",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     autoscale=true,
     bg_bd_size=0,
     fg_bd_size=3,

     fg_bd_colour = { {0,0x000000,1},
                     {.75,0x00000,0},
                     },

     foreground=false,
     background=false
     },
      }

---

Now, we will draw more that one graph. Remember, the script can draw as many graph as you want! So, to draw overlaping graphs, we first draw the main graph with the background on it and then we add others graphs, like this, for a quad core cpu :

 graph_settings={
     {
     name="cpu",
     arg="cpu1",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     fg_bd_size=1,
     bg_colour={{0,0xeeeeee,0.5}},
     fg_bd_colour = { {0,0xFF0000,1}, },
     foreground=false,
     },
     {
     name="cpu",
     arg="cpu2",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     fg_bd_size=1,
     fg_bd_colour = { {0,0x00FF00,1}, },
     background=false,
     foreground=false,
     },
     {
     name="cpu",
     arg="cpu3",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     fg_bd_size=1,
     fg_bd_colour = { {0,0x0000FF,1}, },
     background=false,
     foreground=false,
     },    
     {
     name="cpu",
     arg="cpu4",
     max=100,
     width=250,
     height=75,
     nb_values=100,
     fg_bd_size=1,
     fg_bd_colour = { {0,0xFFFF00,1}, },
     background=false,
     foreground=false,
     },    
      }

While running avidemux :


One of the nice feature in conky is transparancy :


That's all for today !

---

A new website about Conky is starting here. It's name is Conky PitStop and you will fine some Conky's addicts on it. I'm working on the french translation, if anyone is interested to join, drop me a note!
There are also translation ion german and spanish but more languages can be added.

Rings + Sectors Widget

Another widget, after the bar cut into blocks, here is a circle cut into sectors.
This widget use a lot of parameters but only 3 parameters are mandatory, others are optional. If they are missing, default values are used.

Link to download on deviantArt : here

As usual, settings are made through tables :

rings_settings={
{table_setting for ring1},
{table_setting for ring2},
{table_setting for ring3},
}

The 3 mandatory parameters are name, arg and max.

In a conky, you write: ${cpu cpu1}, In the script, you will write :

rings_settings={
{
name="cpu",
arg="cpu1",
max=100,
--(max is set to 100 because maximum value of $cpu is 100% but you can set it to 50% if you want)
}
}

This simple table will draw this kind of circle in the center of the conky window (the radius will be a quarter of the conky's window width):


Defaults colours used in the script have to be used with a dark background.
You can set the colour of the conky window with
own_window_colour 000000
own_window_transparent no

Position and appearance can be changed with xc, yc, thickness and radius.

    {
name="cpu",
arg="cpu0",
max=100,
xc=100,
yc=100,
thickness=20,
radius=60
},

Number of sectors is set with sectors.

    {
name="time",
arg="%S",
max=60,
sectors=50,
radius=90
},

If you look at the first circle above, you will see a gap at the top of the ring, it's because the script draw only sectors, and the parameter gap_sectors is set to 1 by default. So the gap_sectors parameter set the space in pixels between two sectors :

    {
name="time",
arg="%S",
max=60,
sectors=5,
thickness=20,
radius=75,
gap_sectors=5
},

There is two way to close a sector, this is done with the cap parameter.
cap="p" for parallel (default value)
cap="r" for radial
See picture :

    {
name="time",
arg="%S",
max=60,
sectors=5,
thickness=30,
radius=75,
xc=500,
yc=85,
gap_sectors=15,
cap="r"
},

Another way to change the shape of a ring is to change the angles with start_angle and end_angle.
Values are in degrees and default values are :
start_angle=0
end_angle=360
end_angle has to be greater than start_angle but both can be negatives

    {
name="time",
arg="%S",
max=60,
sectors=6,
thickness=30,
radius=75,
xc=500,
yc=85,
start_angle=45,
end_angle=315
},

Of course, arcs can be inversed with inverse_arc parameter (default value is false).
If inverse_arc=true arc will be anticlockwise.

    {
name="time",
arg="%S",
max=60,
sectors=12,
thickness=30,
radius=75,
xc=500,
yc=85,
gap_sectors=10,
inverse_arc=true
},

Another parameter used to change the shape is the border_size parameter. Default is set to zero (i.e. "no border").

    {
name="time",
arg="%S",
max=60,
sectors=6,
thickness=30,
radius=75,
xc=500,
yc=85,
gap_sectors=10,
border_size=5
},

Next paramater is fill_sector, default value is false.
If set to true, each sector will be completely filled (like in the next picture)
Of course, this parameter is inoperate with sectors=1

    {
name="time",
arg="%S",
max=60,
sectors=12,
thickness=30,
radius=75,
xc=300,
yc=85,
gap_sectors=10,
fill_sector=true,
},

I forgot these two parameters background and foreground which can be useful sometimes. If set to false, background or foreground are not drawn.

    {
name="time",
arg="%S",
max=60,
sectors=6,
thickness=30,
radius=75,
xc=300,
yc=85,
gap_sectors=10,
border_size=2,
background=false
},

Well, I think I didn't forgot anything. I think I will add more parameters in the future...

---

Now, I will explain the colours parameters.
Each colours for background, foreground and border are set in theses parameters :
bg_colour1, fg_colour1 and bd_colour1
For example, for a single colour table:
bg_colour1={{0,0x0000ff,1}}
for a 2-colours table :

bg_colour1={
{0,0x0000ff,1},
{1,0xff00ff,1}
}

for a 3-colours table:

bg_colour1={
{0,0x0000ff,1},
{0.5,0xff00ff,1},
{1,0xff00ff,1}
}

and so on ...

Each "table colour" above contains one or more tables which defines the colours of a gradient :
table={P,C,A}
P = position inside the gradient (0 = internal radius, 1= external radius)
C = hexadecimal colour
A = alpha (opacity) of colour (0=invisible,1=opacity 100%)



With 5 colours for background and 3 colours for foreground :

    {
name="time",
arg="%S",
max=60,
sectors=10,
thickness=40,
radius=75,
xc=500,
yc=85,
gap_sectors=5,
bg_colour1={{0,0xFF6600,0.5},{0.25,0xFFFF00,1},{0.5,0xdddddd,1},{0.75,0X99CCFF,1},{1,0X0000FF,0.5}},
fg_colour1={{0,0xFF6600,0.5},{0.5,0xFF0000,1},{1,0x0000FF,0.5}},
},    

Another example :

    {
name="time",
arg="%S",
max=60,
sectors=10,
thickness=40,
radius=75,
xc=500,
yc=85,
end_angle=270,
gap_sectors=5,
fg_colour1={{0,0xFFff00,0.8},{0.5,0xFF0000,0.8},{1,0xffff00,0.8}},
bd_colour1={{0,0xFF0000,0.8},{0.5,0xFFff00,0.8},{1,0xff0000,0.8}},
background=false,
border_size=2,
},

With the previous setup, each sectors have the same color.
But, for each colour (background, foreground and border), a gradient can be created with fg_colour2, bg_colour2 and bd_colour2 parameters.
This is the most interesting part of this script, if we have two colours

fg_colour1={{P1,colour1,alpha1}}
fg_colour2={{P2,0xcolour2,alpha2}}

For each sector a colour will be calculated with the "gradient" from P1 to P2, for each red, green and blue composantes from colour1 to colour2 and from alpha1 to alpha2.

Some examples in picture for a better understanding 8-)

Two tables with same colours and same alpha but with P1 and P2 differents : this has no effects because colours and alpha are the same.


Two differents colours with same alpha:


Two colours, same colours and differents alpha :


Two colours, differents colours and differents alpha :


Now, just start a new rings with 2 colours (a 2-colours table):


If I change the first parameter of the yellow colour which is the starting position of the gradient, we got that :


Adding a second 2-colours table bg_colour2 with the same blue

   bg_colour1={{0,0xffff00,1},{1,0xff0000,1}},
bg_colour2={{0,0x0000ff,1},{1,0x0000ff,1}},

and with a 2-colours table with two differents colours

   bg_colour1={{0,0xffff00,1},{1,0xff0000,1}},
bg_colour2={{0,0x0000ff,1},{1,0x00ffff,1}},

With 3 colours :

    bg_colour1={{0,0x0000ff,1},{0.5,0xffffff,1},{1,0xff0000,1}},
 bg_colour2={{0,0xff0000,1},{0.5,0xffffff,1},{1,0x0000ff,1}},

Tweaking with alpha parameters :

   bg_colour1={{0,0x000000,0},{0.5,0xffffff,1},{1,0x000000,0}},
bg_colour2={{0,0xff0000,1},{0.5,0xffffff,1},{1,0xff0000,1}},

Playing with alpha parameters and position parameters :

   bg_colour1={{0,0x000000,0},{0.5,0xffffff,1},{1,0x000000,0}},
bg_colour2={{0.49,0xff0000,1},{0.5,0xffffff,1},{0.51,0xff0000,1}},

or this one :

   bg_colour1={{0.49,0xffffff,0},{0.5,0xffffff,1},{0.51,0xffffff,0}},
bg_colour2={{0,0xffffff,0},{0.5,0xffffff,1},{1,0xffffff,0}},

As you can see, tweaking with colours, positions and alpha parameters are endless !

Two of my favorites rings :
This one to display CPU temperature and fan speed :

    {
name="exec",
arg="sensors | grep 'CPU Temp' | cut -c15-16",
max=60,
xc=100,
yc=100,
radius=90,
thickness=20,
start_angle=-120,
end_angle=120,
sectors=20,
bg_colour1={{0,0x999999,0},{0.5,0x999999,1}, {1,0x999999,0}},
fg_colour1={{0,0XffFF00,0},{0.5,0xffFF00,1}, {1,0xffFF00,0}},
fg_colour2={{0,0XFF0000,0},{0.5,0xFF0000,1}, {1,0xFF0000,0}},
},

{
name="exec",
arg="sensors | grep 'CPU Fan' | cut -c12-16",
max=1500,
xc=100,
yc=100,
radius=70,
thickness=20,
start_angle=-120,  
end_angle=120,
sectors=20,
bg_colour1={{0,0x999999,0},{0.5,0x999999,1}, {1,0x999999,0}},
fg_colour1={{0,0XFFFF00,0},{0.5,0xFFFF00,1}, {1,0xFFFF00,0}},
fg_colour2={{0,0XFF0000,0},{0.5,0xFF0000,1}, {1,0xFF0000,0}},
bd_colour1={{0,0X00FF00,1},{0.5,0x00FF00,1}, {1,0x00FF00,1}},
},

With a text widget :


And this one, made of two vertical rings of 180 degrees. Each ring has colours inverted.

{

name="fs_used_perc",
arg="/home",
max=50,
xc=350,
yc=150,
radius=90,
thickness=30,
start_angle=0,
end_angle=180,
inverse_arc=false,
border_size=0,
sectors=50,
gap_sectors=-1,
fill_sector=true,
bg_colour1={{0,0X111111,1},{0.5,0x111111,1}, {1,0x888888,1}},
bg_colour2={{0,0X888888,1},{0.5,0x888888,1}, {1,0x111111,1}},

fg_colour1={{0,0XFF4500,1},{0.5,0xFF4500,1}, {1,0xFFFFFF,1}},
fg_colour2={{0,0XFFFFFF,1},{0.5,0xFFFFFF,1}, {1,0xFF4500,1}},

bd_colour1={{0,0X00FF00,1},{0.5,0x00FF00,1}, {1,0x00FF00,1}},
},       

{

name="",
arg=conky_parse("${fs_used_perc /home}")-50,
max=50,
xc=350,
yc=150,
radius=90,
thickness=30,
start_angle=180,   
end_angle=360,
sectors=50,
gap_sectors=-1,
fill_sector=true,
bg_colour2={{0,0X111111,1},{0.5,0x111111,1}, {1,0x888888,1}},
bg_colour1={{0,0X999999,1},{0.5,0x888888,1}, {1,0x111111,1}},

fg_colour2={{0,0XFF4500,1},{0.5,0xFF4500,1}, {1,0xFFFFFF,1}},
fg_colour1={{0,0XFFFFFF,1},{0.5,0xFFFFFF,1}, {1,0xFF4500,1}},

bd_colour1={{0,0X00FF00,1},{0.5,0x00FF00,1}, {1,0x00FF00,1}},
},

Note the use of conky_parse in the second ring. This ring has to start at 50 but the script doesn't have the min parameter, so I have to "translate" the starting point at 50 and set the max to 100-50=50.
And I use gap_sectors=-1 to draw a plain circle.
In this picture, left ring is for a zero-value,


The same with the default value for gap_sectors, gap_sectors=1


That's all for the moment !

Edit :
The widget in real use :

A palette of differents rings :