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 |
|---|---|---|---|
| enabled | bool | true | Object is touchable, if false, a disabled style is applied |
| 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 |