Box widget

Back to basics with Lua and Cairo! This widget draws only a customizable box. It is inspired from Londonali's Background script.

The script can be downloaded on deviantArt : here.

As usual, the widget uses a table to get the parameters : boxes_settings

The minimum setup is an empty table :

local boxes_settings={
 {},
}

This one draws a box with the default parameters : same size of the conky window, white background with opacity set to 50 %.



Parameters for positioning the box are x, y, w and h, relatives to the top-left corner of the Conky's window.
The same box as above but with a shorter height:

local boxes_settings={
 {h=130},
}

Another box with the 4 parameters :

local boxes_settings={
 {x=3,y=35,h=95,w=85},
}

It's quite easy to use more than one box :

local boxes_settings={
 {x=3,y=35,h=95,w=85},
 {x=92,y=35,h=95,w=117},
}

Tha Lua API for Conky can get some informations about Conky's window, for example, to get the window's height or width, use conky_window.height or conky_window.width in the Lua scripts :

local boxes_settings={
 {x=3,h=25,w=conky_window.width-6},
 {x=3,y=35,h=95,w=85},
 {x=92,y=35,h=95,w=117},
}

So, with the above code, when the Conky's window increases, the top box is still nice :


Each corner of a box can be set individually in a table {shape,radius}
The four corners are join into a table named corners:

corners={ {shape-top-left,radius-top-left},
 {shape-top-right,radius-top-right},
 {shape-bottom-left,radius-bottom-left},   
 {shape-bottom-right,radius-bottom-right}
 }

Available shapes are : "curve", "circle" and "line"


If the corners table has less than 4 elements, the last element is used for missing elements:
Box with one corner defined:

{w=400,h=120, corners={ {"circle",40} } }

The boxes can be draw with only a border if the border parameter is greater than zero :


Some dashes can be added to the border if the dash parameter is greater than zero:


The box can be rotated around his top-left corner with the angle parameter :


The rotation can be arround the x axis or the y axis with the skew_x and skew_y parameters :


An interesting feature of Cairo is the compositing operator :
In this script, the compositing operator is called with the operator parameter, and the available arguments are "clear", "source", "over", "in", "out", "atop", "dest", "dest_over", "dest_in", "dest_out", "dest_atop", "xor", "add", "saturate". Default is "over".

NOTE : in your conkyrc, you need the parameter

own_window_argb_visual yes

Let's start with theses two boxes :

     {x=10,y=10,w=150,h=90, },
 {x=50,y=20,w=60,h=150, corners={{ "curve",10}} },

for this output :


The "clear" operator :

     {x=10,y=10,w=150,h=90, },
 {x=50,y=20,w=60,h=150, corners={{ "curve",10}} , operator="clear" },

The "out" operator :

     {x=10,y=10,w=150,h=90, },
 {x=50,y=20,w=60,h=150, corners={{ "curve",10}} , operator="out" },

The "add" operator :

     {x=10,y=10,w=150,h=90, },
 {x=50,y=20,w=60,h=150, corners={{ "curve",10}} , operator="add" },

and so on ...


Last part of the boxes are the colour, colours are set in the colour tables.
Each "table colour" 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%)


For example, for a single colour table:

colour={{0,0x0000ff,1}}

for a 2-colours table :

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

for a 3-colours table:

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

The output of this box :

     {x=10,y=10,w=250,h=90, colour={ {0,0xFFFF00,1} } }

is a yellow rectangle :


The output of this box

   {x=10,y=10,w=250,h=90, colour={ {0,0xFFFF00,1}, {1,0xFF0000,1}  } }

is a yellow rectangle again because we haven't set up the gradient to use.


Gradients are defined with one of this parameters linear_gradient or radial_gradient

linear_gradient - table with the coordinates of two points to define a linear gradient,
              points are relative to top-left corner of the box, (not the conky's window)
              {x1,y1,x2,y2}
radial_gradient - table with the coordinates of two circle to define a radial gradient,
              points are relative to top-left corner of the box, (not the conky window)
              {x1,y1,r1,x2,y2,r2} (r=radius)

This code :

     {x=10,y=10,w=250,h=100,
 colour={ {0,0xFFFF00,1}, {1,0xFF0000,1}} ,
 linear_gradient={0,0,0,100}  }

gives this output:


This code :

     {x=10,y=10,w=250,h=100,
 colour={ {0,0xFFFF00,1}, {1,0xFF0000,1}} ,
 linear_gradient={0,0,0,50}  }

gives this output:


This code :

     {x=10,y=10,w=250,h=100,
 colour={ {0,0xFFFF00,1}, {0.5,0xFF0000,1}} ,
 linear_gradient={0,0,0,50}  }

gives this output:


This code, with a radial gradient :

     {x=10,y=10,w=250,h=90,
 colour={ {0,0xFFFF00,1}, {1,0xFF0000,1}} ,
 radial_gradient={0,0,0,0,0,90}  }

gives this output :


This code:

     {x=10,y=110,w=300,h=10,
 colour={ {0,0x0000FF,0}, {0.5,0x00FF00,1}, {1,0x0000FF,0},} ,
 radial_gradient={0,5,0,0,5,300}  }

gives this output :


Other parameters added recently, while writing this note :
scale_x and scale_y to rescale the box, useful for drawing elipses
draw_me : if set to false, box is not drawn (default = true or 1)
it can be used with a conky string, if the string returns 1, the box is drawn :
example : "${if_empty ${wireless_essid wlan0}}${else}1$endif",




Some examples of amazing setup :

     {x=300,y=70,w=250,h=100,
    linear_gradient={0,80,0,100},
    colour={{0,0x000000,1},{0.5,0xFFFFFF,1}},
    },

    {x=200,y=70,w=100,h=100,
    radial_gradient={100,100,0,100,100,20},
    colour={{0.5,0xFFFFFF,1},{1,0x000000,1}},
    },

    {x=200,y=170,w=100,h=100,
    linear_gradient={80,0,100,0},
    colour={{0.5,0xFFFFFF,1},{0,0x000000,1}},
     },     
    {x=200,y=270,w=100,h=100,
    radial_gradient={100,0,0,100,0,20},
    colour={{0.5,0xFFFFFF,1},{1,0x000000,1}},
    },
    {x=300,y=270,w=250,h=100,
    linear_gradient={0,0,0,20},
    colour={{1,0x000000,1},{0.5,0xFFFFFF,1}},
    },        
    {x=290,y=160,h=120,
    corners={{"circle",10}},
    operator="clear"  }

for this output :




A button :

 local gradient = { {0,0x858585,1}, {1,0x000000,1}}
local table_settings={
 
 {w=200,h=200,
 colour=gradient,
 linear_gradient= {0,0,0,200}  },
 
 {x=10,y=10,w=180,h=180,
 corners={ {"circle",90} },
 colour=gradient ,
 linear_gradient= {180,180,10,10}  },
 
 {x=20,y=20,w=160,h=160,
 corners={ {"circle",80} },
 colour=gradient ,
 linear_gradient= {20,20,160,160}  },

}

for this output :


If you create some nice conkys with this widget, or any other, feel free to post a link in the comments ;-)

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.