Some of my scripts for daily use on a linux desktop

Monday, June 14, 2010

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

No comments:

Post a Comment