Skip to content

Styling Properties~

You can adjust the appearance of objects by changing the foreground, background and/or border color of each object. Some objects allow for more complex styling, effectively changing their appearance or their sub-components.

Certain more complex objects are made up of several sub-parts, which can be styled separately. To access the properties of the parts use a number suffix appended to the property.

Tip

For example the gauge object uses line_width to set the minor ticks thickness, line_width1 for major ticks and line_width2 for the thickness of the needle.
Note: not all the suffixed properties are mentioned in this documentation, feel free to discover them yourself.

If objects are children of other objects (they have the parentid property set), property inheritance takes place.

Inheritance

Some properties (typically that are related to text and opacity) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the initial jsonl of the child object (at first draw). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So for example if a button is pressed, and the text color comes from here, the pressed text color will be used. (source) Inheritance takes place at run time too.

General~

General styling options.

Property Value Default Description
radius uint16 depends
on theme
The radius of the rounded corners of the object:
0 = square corners
100 = pill shaped object (true circle if object has same width and height)
clip_corner bool false Enable to clip off the overflowed content on the rounded (radius > 0) corners of the object

Background~

The color and gradient used for drawing the background of an object.

Property Type Description
bg_opa uint8 The background opacity level
bg_color color The background color
bg_grad_color color The background gradient color
bg_grad_dir [0..2] 0 = none (=default)
1 = horizontal
2 = vertical
bg_grad_stop uint8 Specifies where the gradient should stop.
0 = at left/top most position
255= at right/bottom most position (=default)
bg_main_stop uint8 Specifies where should the gradient start
0 = at left/top most position (=default)
255= at right/bottom most position

To adjust the background style of a page use pXb0 where X is the page number.

Border~

The border is drawn on top of the background. It has radius rounding.

Property Type Description
border_color color Specifies the color of the border
border_opa uint8 Specifies opacity of the border
border_width uint8 Set the width of the border
border_side uint8 Specifies which sides of the border to draw.
0 = none
1 = bottom
2 = top
4 = left
8 = right
15 = full
A sum of these values is also possible to select specific sides.
border_post bool If true the border will be drawn after all children have been drawn.

Padding and Margin~

Padding sets the space on the inner sides of the edges. It means "I don't want my children too close to my sides, so keep this space". Padding inner sets the "gap" between the children. Margin sets the space on the outer side of the edges. It means "I want this space around me".

Objects use them to set spacing. See the documentation of the objects for the details.

Property Type Description
pad_top int16 Set the padding on the top
pad_bottom int16 Set the padding on the bottom
pad_left int16 Set the padding on the left
pad_right int16 Set the padding on the right
pad_inner int16 Set the padding inside the object between children
margin_top int16 Set the margin on the top
margin_bottom int16 Set the margin on the bottom
margin_left int16 Set the margin on the left
margin_right int16 Set the margin on the right

Shadow~

The shadow is a blurred area under the object.

Property Type Description
shadow_color color Color of the shadow
shadow_opa uint8 Specifies opacity of the shadow
shadow_width int16 Set the width (blur size) of the outline
shadow_ofs_x int16 Set the an X offset for the shadow
shadow_ofs_y int16 Set the an Y offset for the shadow
shadow_spread uint8 Make the shadow larger than the background in every direction by this value

Text~

Properties applied to the textual elements of the objects.

Property Type Description
text_color color Color of the text
text_opa uint8 Opacity level of the text [0-255]
text_font uint8 The Font ID
text_letter_space int16 Distance between letters of the text, can be a negative number
text_line_space int16 Distance between lines of the text, can be a negative number
text_decor uint8 Add text decoration.
0 = none (=default)
1 = underline
2 = strikethrough
3 = underline and strikethrough
text_sel_color color Set background color of text selection

Value~

Value is an arbitrary text label drawn on top of an object. It can be a lightweight replacement for creating standalone label objects.

Property Type Description
value_str string Text to display
value_color color Color of the text
value_opa uint8 Opacity level of the text [0-255]
value_font uint8 The Font ID
value_letter_space int16 Distance between letters of the text, can be negative
value_line_space int16 Distance between lines of the text, can be negative
value_align align Alignment of the text. Can be:
none
left
right
top
bottom
full
center (=default)
value_ofs_x int16 X offset from the default position of the alignment
value_ofs_y int16 Y offset from the default position of the alignment

Line~

Properties for line, line meter objects.

Property Type Description
line_color color Color of the line
line_opa uint8 Opacity level of the line [0-255]
line_width int16 Width of a scale line in the active region (also see scale_end_line_width below), or gauge minor ticks thickness
line_width1 int16 Gauge major ticks thickness
line_color color Starting color of the gauge minor ticks
line_color1 color Starting color of the gauge major ticks
line_rounded bool true = draw rounded line endings. Default = false
line_dash_width int16 Width of dash. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default)
line_dash_gap int16 Gap between two dash line. Dashing is drawn only for horizontal or vertical lines. 0 = disable dash (= default)

Scale~

The properties for styling the scale of line meter, gauge objects.

Property Type Description
scale_grad_color color Gradient to this color on the scale lines, or gauge minor ticks
scale_grad_color1 color Gradient to this color on the gauge major ticks
scale_end_color color Color of the scale lines in the end region, or gauge minor ticks / critical area
scale_end_color1 color Color of the gauge major ticks in the critical area
scale_width int16 Width of the scale in the normal region, or length of gauge minor ticks
scale_width1 int16 Length of the gauge major ticks
scale_border_width int16 Width of a border drawn on the outer side of the scale in the normal region
scale_end_line_width int16 Width of a scale line in the end region
scale_end_border_width int16 Width of a border drawn on the outer side of the scale in the end region

Needle~

The properties for styling the needle of gauge objects.

Property Type Description
line_width2 int16 Width of the needle line
line_rounded2 bool true = draw rounded needle ending. Default = false
line_color2 color Color of the needle line
line_opa2 uint8 Opacity level of the needle line [0-255]
bg_color2 color Color of the needle central circle
bg_opa2 uint8 Opacity level of the needle central circle [0-255]

Arc~

The properties for styling the arc of arc objects.

Property Type Description
line_width [int16][9] Width of the arc background (default 20)
line_color color Color of the arc background
line_width1 [int16][9] Width of the arc indicator (default 20)
line_color1 color Color of the arc indicator

Image~

Property Type Description
image_opa uint8 Opacity of the image
image_recolor color Color of the overlay color mask
image_recolor_opa uint8 Specifies opacity of the overlay color mask

Last update: 2022-06-04
Back to top