Text widget, Part 2

I finnaly add some effects to the text widget.
The reflection and the "skew".

All these effects are based upon the cairo.Matrix transform


Let start with a simple text displaying hour with a 3-colours and linear gradient:

   text_settings={
  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  },  
   }

The output :



Now, I add some reflection :

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  reflection_alpha=1,
  },

The reflection start with an opacity of 1 (reflection_alpha=1) and ends with a opacity of 0.


But the reflection can start with an opacity less than 1 (reflection_alpha=0.5 here) :

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  reflection_alpha=0.5,
  },   

With the abvoe parameters, reflection ends at the end of the text size, but it can end before with reflection_length=0.5, it means 50% of the full height of the text

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  reflection_alpha=0.5,
  reflection_length=0.5,
  },   

The reflection length can be scaled, a scale of 1 (default value) means the same size of the text, a scale bigger than one means that the reflection is higher of the text:

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  reflection_alpha=0.5,
  reflection_scale=2,
  },  

The skew parameter around x axis (I'm not sure of the units for that !):

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  skew_x=20,
  },  

The skew parameter around y axis

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  skew_y=20,
  },  

We can combine both

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=50,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  skew_y=-20,
  skew_x=-50,
  },  

Unfortunately, we can't have a real perspective with cairo .


Finally, we can combine reflection and skew:

  {
  text=conky_parse("${time %H:%M:%S}"),
  font_name="Rasheeq",
  x=50,  
  y=900,
  font_size=50,
  colour={{0,0xFF0000,1},{0.5,0xFFFF00,1},{1,0x00FF00,1}},
  orientation="nn",
  skew_y=-20,
  skew_x=-10,
  reflection_alpha=0.5,
  },  

Links to the updated script :
In English on ubuntu forums : here
French link (copy/paste) : here

And, an example of real life use combined with the piechart widget:

Text Widget

Hello !

Here is a new widget, it only displays text but with some parameters set in the text_settings table, effects can be nice as you will see in pictures below.

Links to the script on deviantArt : here


A little reminder : tables in Lua

In Lua, tables (arrays) are written like that :

table={a,b,c} --this one has 3 elements

elements can be named, like this :

table={num1=a,number2=b,element3=c}

But an element in a table can be a table, like this :

table={num1=a,table2={A,B,C},element3=c} --second element is a table of 3 elements

or like this :

table={text="my text",
colour={
    {0.00,0xFF0000,0.5},
    {0.50,0x00FF00,1},
    {1.00,0x0000FF,0.5},
    },
}

Colours tables

The last table above is an example of colour table defined in this script to obtain a gradient effect. Table colour contains 1 or more tables which defines colors of the gradient : {P,C,A} :
P = position of gradient (0 = beginning of text, 1= end of text)
C = hexadecimal colour
A = alpha (opacity) of color (0=invisible,1=opacity 100%)
Examples :
for a plain color :

{{1,0x00FF00,0.5}}

for a gradient with two colours

{{0,0x00FF00,0.5},{1,0x000033,1}}

or

{{0.5,0x00FF00,1},{1,0x000033,1}} -with this one, gradient will start in the middle (P=0.5) of the text

for a gradient with three colours

{{0,0x00FF00,0.5},{0.5,0x000033,1},{1,0x440033,1}}

and so on ...

It sounds complicated but with a little practice there is no problem ! If you understand nothing, don't panic, examples with pictures are coming soon !

NB : Tables Tutorial in Lua wiki

Radial gradient
For this script, I also use a table to define a radial gradient, if needed:

radial={0,0,0,0,300,370}

Radial gradients are defined with two circles (start circle and stop circle) and the radial table contains these elements:

x center of circle 1,
y center of circle 1,
radius of circle 1,
x center of circle 2,
y center of circle 2,
radius of circle 2,

Here again, examples below will help you !

Orientation for linear gradient
In case of linear gradient, "orientation" defines the starting point of the gradient, default is "ww"
There are 8 available starting points : "nw","nn","ne","ee","se","ss","sw","ww"
(n for north, w for west ...)
Theses 8 points are the 4 corners + the 4 middles of text's outline
so a gradient "nn" will go from "nn" to "ss" (top to bottom, parallele to text)
a gradient "nw" will go from "nw" to "se" (left-top corner to right-bottom corner)

Setting the widget
Let start with the funny things !
the text_settings table needs at least one table like this :

text_settings={{
text="my text",     --text to display
x=20,                --x coordinate of first letter
y=20,                --y coordinate of first letter
},
}

To display more than one text, add a table in the text_settings table :

text_settings={
{--display a text on coordinates 20,20
text="unformatted text",
x=20,
y=20,
},

{--display a text on coordinates 20,40, with selected font and size, true and bold
text="bold and italic text",
x=20,
y=40,
font_name="Verdana",
font_size=18,
italic=true,
bold=true,
},
}

The output (nothing extraorinary) :


Adding some colors :

        {--display a text on coordinates 20,20, in plain colour
text="Plain Color",
x=20,
y=50,
font_name="Clarendon",
font_size=50,
colour={{0,0xFF0000,1}}
},

A plain color with with a little gradient on opacity (see the two table in colour table):

        {
text="Opacity Gradient",
x=20,
y=100,
font_name="Clarendon",
font_size=50,
colour={{0,0xFF0000,1},
{1,0xFF0000,0.1}}
},

A 2-colours gradient effect :

         {
text="2 colors Gradients",
x=20,
y=150,
font_name="Clarendon",
font_size=50,
colour={{0,0xFF0000,1},
{1,0xFFFF00,1}}
},

A 3-colours gradient effect :

         {
text="3 colors Gradients",
x=20,
y=200,
font_name="Clarendon",
font_size=50,
colour={{0,0xFF0000,1},
{0.5,0xFFFF00,1},
{1,0x0000FF,1}},
},

Mix-up of 5 colors and opacity gradients

         {
text="5 colors Gradient and opacity",
x=20,
y=250,
font_name="Clarendon",
font_size=50,
colour={
{0.00,    0xFF0000,0},
{0.25,    0xFFFF00,1},
{0.5,    0xFFFFFF,1},
{0.75,    0xFFFF00,1},
{1.0,    0xFF0000,0}},
}, 

A 3-colours vertical gradient (orientation="nn") :

         {
text="3 colors vertical Gradient",
x=20,
y=300,
font_name="Clarendon",
font_size=50,
colour={
{0.00,    0xFF0000,0},
{0.5,    0xFFFFFF,1},
{1.0,    0xFF0000,0}},
orientation="nn"
},  

In the examples above, you can see the x and y parameters which defines the starting point of the text, but text can be aligned (vertical or horizontal) with the parameters h_align and v_align.
This example with radial gradient use it :

         {
text="radial gradient",
x=400,
y=350,
font_name="Clarendon",
font_size="48",
colour={
        {0.8,0xF0FFF0,1},
        {1.00,0xF0F0FF,0.1},
        },
   h_align="c",
   radial={0,300,0,0,300,370}
}, 

or this one :

         {
text="another radial gradient",
x=400,
y=400,
font_name="Clarendon",
font_size="48",
colour={
        {0.98,    0xFFFF00,1},
        {0.99,    0xFF0000,1},
        {1.00,    0xFF00FF,1},
        },
   h_align="c",
   v_align="m",
radial={0,-1000,0,0,-1000,1020}

},

Apply some angles on text:

        {--display a text with a 30° angle
text="text at 30 degrees",
x=50,
y=600,
colour={{0,0xFFFF00,1},{0.5,0x0000FF,1},{1,0xFFFF00,1}},
angle=-30,
font_name="ubuntu-title",
font_size=32,
},
{--display a vertical text
text="vertical text",
x=30,
y=450,
colour={{0         ,0xFF0000,1},
        {0.25    ,0xFFFF00,1},
        {0.50    ,0x00FF00,1},
        {0.75    ,0x00FFFF,1},
        {1         ,0x0000FF,1}
        },
angle=-90,
font_name="ubuntu-title",
font_size=32,
orientation="nw",
h_align="r"
},

And how to display conky variables ? Simply use the conky_parse() function like this :

         {--display a text with some conly variables
--use two dots to concatenate texts
text="text with some conky, cpu=" .. conky_parse("${cpu}") .. " %",
x=20,
y=660,
colour={{0,0xFFFF00,1},{0.5,0xFF0000,1},{1,0xFFFF00,1}},
font_name="Purisa",
bold=true,
font_size=38
},     

Well, I think I show all the available options in this script.
But now we can combine some of them to have nices effects with low-cpu usage:
Text with shadow : draw twice the text but with a little offset on x and y :

        {
text=conky_parse('text with shadow #1'),
x=300,
y=500,
font_name="Clarendon",
font_size=50,
colour={{1,0xFF0000,0.75},
        },
   orientation="ww",
},

  {
text=conky_parse('text with shadow #1'),
x=298,
y=498,
font_name="Clarendon",
font_size=50,
colour={{0,0xFFFF00,1}},
    orientation="ww",
},  

Blur effect : display text 3 times but with opacity<0.5>

Focus effect : repeat text 3 times with x and y offsets and at the focus point set opacity for 1 of the 3 texts to 1.0 and to 0.0 for the two others texts.

--focus effect
 {--afficher un texte aux coordonées 20,20
text='focus effect #1',
x=300,
y=600,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,0},
        {0.50,0x00FFFF,1},
        {1.00,0x00FFFF,0},
        },
   orientation="ww",
},
 {
text='focus effect #1',
x=300,
y=599,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,0.5},
        {0.50,0x00FFFF,0},
        {1.00,0x00FFFF,0.5},
        },
   orientation="ww",
},
 {
text='focus effect #1',
x=300,
y=601,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,0.5},
        {0.50,0x00FFFF,0},
        {1.00,0x00FFFF,0.5},
        },
   orientation="ww",
},

Another one :

--focus effect 2
 {
text='focus effect #2',
x=300,
y=720,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,1},
        {1,0x00FFFF,0},
        },
},
 {
text='focus effect #2',
x=299,
y=719,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,0},
        {1,0x00FFFF,0.25},
        },
},
 {
text='focus effect #2',
x=301,
y=721,
font_name="Clarendon",
font_size=50,
colour={{0.00,0x00FFFF,0},
        {1,0x00FFFF,0.25},       
        },
},
}

In a real life desktop, with vertical text, blur and focus effects !(wallpaper here ), click to enlarge

De Text widget

Happy conkying ;-)

PS : While writing this note, I think about new effects like reflection or perspective, maybe I will add them soon ... it's done and it's here