The syntax is %x,py,a,b where x and y are the percentages of the horizontal and vertical size, respectively. a and b are optional parameters that represent the scale factor, for x and y respectively. Negative scale factors can be used to obtain a mirror effect on the corresponding axis. p is an optional flag that precedes y.

The only valid option for p: y
and used to scale the size with respect to the container height instead of the container width.

The last styler parameters can be omitted, so all the following stylers are valid:

%x,y
%x
%,y
%,,a,b
%,,,b

Examples

Create a container with size 80% x 40%:

{%80,40}

Create a container with size 80% x 40% with y-mirrored content:

{%80,40,,-1}

Create a container that cover the whole display area:

{%100,y100}

The syntax is *x where x is the size factor, multiplied by 10, to be applied to the object size. The initial objects’ size is automatically scaled with respect to the display width.

Please note that, x = 10 will not change the object size; x = 20 will double the object size with respect the the current size, and so on…
Please note also that the scale factor is a block styler and it is thus applied on the current object or all the object of the container and sub-containers.

A particular function is obtained if x is . (dot). In this case the object size is reset to the default value proportional to the parent container size. This function is useful when objects with size proportional to the container are required.

Due to the block nature of this styler, it is possible to scale the object size of all the panel’s object simply prefixing the panel definition with the * styler.

Example

Create a container with two texts of double size

*20{T:A;_T:B;}

The basic syntax is !abc where a,b and c are 3 hexadecimal digits representing the R G B components of the colour. This syntax corresponds to the classic short HTML representation of colours (3 digits). It is also possible to create colour gradients specifying two colours with the following extended syntax: !abc,def where def represents the second colour

Examples

Create a container of size 80% x40% with background color gradient from white to blue

{%80,40!FFF,00F}

Create a container with background color blue, with a single cell of background color red containing the text “OK”;

{!00F|!F00T:OK;}

The syntax is #abc where a,b and c are 3 hexadecimal digits representing the R G B components of the colour. This syntax corresponds to the classic short HTML representation of colours (3 digits).

Example

Create a container with colour red and text OK

{#F00T:OK;}

The syntax is t

Example

Create a container of size 50% x 50%, border, vertical align top and text OK

{-%50,50tT:OK;}

The syntax is b

Example

Create a container of size 50% x 50%, border, vertical align top and text OK

{-%50,50bT:OK;}

The syntax is m

Example

Create a container of size 50% x 50%, border, middle align and text OK

{-%50,50mT:OK;}

The syntax is <

Example

Create a container of size 50% x 50%, border, left align and text OK

{%50,50<-T:OK;}

The syntax is ^

Example

Create a container of size 50% x 50%, border, center align and text OK

{%50,50-^T:OK;}

The syntax is >

Example

Create a container of size 50% x 50%, right align and text OK

{%50,50->T:OK;}

The syntax is w (the use of stylers in the Desktop object is Dstylers;)

Example

create a blue table of 50% x 1000% preventing the appearance of scroll bars

Dw;{%50,1000!00F}

The syntax is -xxxxN where xxxx are one or more style options and N is the border width (in pixels scaled with respect to the display width).

The current supported style options are: d (dotted), h (dashed), s (solid), b (double), g (groove), c (collapse), e (separate). The default style is solid.

In addition to these standard flags, two special flags j and k can be used to enable and disable, respectively, the border of all the elements during the development of the layout. Knowing exactly the size of the different containers and object may be of great help during the panel design.

A special meaning is assigned to N = 0: border and margins are cleared so that the object or container can use 100% of the available area

Examples

1. Create a container with size 50% x 50% and dashed border line of width 5 scaled pixels

{%50,50-h5}

2. Create a flag with text taking advantage of the zero border -0

{{-0%10,6|!0F0|!FFF|!F00}|T:Made in Italy;}

The syntax is fxxx where xxxx are one or more style options.

The current supported style options are: b (bold), i (italic), a (arial), c (courier), n (disable font).

Example

Create a container with bold-italic-arial font and the text OK

{fbiT:OK;}

The syntax is rN where N is the radius in scaled pixels

Example

Create a container 50% x 50% with solid border with radius 50 eq. pixels

{%50,50-1r50}

The syntax is pN where N is the distance in scaled pixels

Example

Create a container with border, the text OK and padding 20 eq pixels

{p20-T:OK;}

The syntax is dx,y where x and y are respectively the horizontal and vertical displacements scaled with respect to the horizontal display size.

Example

Create two containers, white and blue, of size 50% x 50% overlapping them almost completely

{%50,50!FFF}{d10,-40%50,50!00F}

The syntax is oN where N is the opacity in percentage. Opacity of 100 means full opacity (not transparent). Opacity of 0 means full transparent.

Example

Create two containers, white and blue, of size 50% x 50% overlapping them almost completely and making the blue one transparent (opacity 70%)

{%50,50!FFF}{o70d10,-40%50,50!00F}

The syntax is aN,x,y where N is the rotation angle in degrees (clockwise), x and y represent respectively the horizontal and vertical position of the rotation centre in percentage of the object size (e.g. to rotate an object by 90 degrees around its right top corner: a90,100,0)

X and Y are optional and if not specified their values will be assigned to 50 (i.e. the object is rotated around its centre)

Example

Create two nested centered containers of size 50% x 50%, white and blue with the nested one rotated by 45 degrees (around its centre)

{%50,50!FFF^{a45%50,50!00F}}

The syntax is gxxxN where xxxx are styler otions and N is the number of the picture to be used. Please refer to the list of pictures.

The available options are: n (do not repeat the image if the area to cover is larger than the picture. If this happens the image will be enlarged to cover the whole area)

Example

Create a containers of size 50% x 50% and cover the background with the image number 1

{%50,50g1}

The syntax is hxN,CCC,M where x is one char option, N represents the position of the shadow in pixels, CCC the shadow 12-bit color represented with 3 hexadecimal digits, M the blur distance.

The available shadow options are: t

The t options applies the shadow to the text instead of the container.

Example

Create a square blue container with faint defined white shadow:

{%50,50!00Fh5,FFF,30}

The syntax is nN where N represents the line-height with respect the font-size. N = 10 corresponds to a line height equals to the font-size.

Example

Create a box with the text “Hello World” over 2 lines whose height is 2 times the font height

{-%1n20T:Hello World;}

The syntax is k

Example

Create a block of text with size 80% blue background, rotated by 15 degrees

Tka15,0%80!00F:Hello World!;

The syntax is @x,py where x and y are the horizontal and vertical position to be assigned to the container or object, and p is one char option. Please note that, by default, both the coordinates are scaled with respect to the display width and are given in percentage.

The available option are: y

The y option asks to scale the vertical position with respect to the display height instead of the display width.

Example

Display a X at the display centre

{@50,y50T:X;} Please note the y option before the height coordinate.

Example

Overlap two boxes at the centre of the display, making the red one in front of the blue one.

{z1@40,y40%20,20!F00}{@50,y50%20,20!00F}

The syntax is: sn where n is the number of saved styler class to be loaded.

Example

Define a styler class with blue background, rounded solid border, yellow color, white box shadow, padding, big fonts, and apply it to 3 text boxes.

S1*20r20-!00F#FF0p15h3,FFF,5;/Ts1:1;Ts1:2;Ts1:3;

The syntax is: ~n where n is the global ID number, which can be any decimal value (integer).

Example

Define a container with size 50% x 50%, background color white and assign to it the Global ID number 31

{~31%50,50!FFF}

The syntax is .xN where x is one or more option characters and N is the event number to be used. The event number will be sent to the controller when the event triggers.

The available options are: . (dot)

The option . (dot) enables the touch-down and touch-up events instead of click/touch

Event Codes

Click / Touch: 1
Mouse down / Touch down: 2
Mouse up / Touch up: 3

Example

Create a container with size 50% x 50%, blue color with click event (number 1)

{%50,50!00F.1}

Example 2

Create a container with size 50% x 50%, blue color with touch-down and touch-up events (number 1)

{%50,50!00F..1}

The tag syntax is: /N where N is an optional number that specifies the height of the new line. N = 10 means a full line-height, N = 20 means a double line-height, and so on…

Example

Create two text messages, one under the other leaving a double line height between them

{^T:First Line;_|/20T:Second Line;}

The tag syntax is: =

Example

Create a list of text separated by horizontal lines

{^T:First;=T:Second;=T:Third;}

The tag syntax is: &

Example

Create two LEDs with a little space between them

{L1G0:0;&L2G0:0;}