1
0
mirror of https://github.com/lvgl/lvgl.git synced 2025-01-14 06:42:58 +08:00

docs add style props

This commit is contained in:
Gabor Kiss-Vamosi 2021-05-14 15:37:35 +02:00
parent 9b647dc919
commit abe04e98d3
7 changed files with 233 additions and 823 deletions

View File

@ -12,38 +12,45 @@ You should read it first to get a general impression and read the detailed [Port
Instead of porting LVGL to an embedded hardware, it's highly recommended to get started in a simulator first.
LVGL is ported to many IDEs to be sure you will find your faviourite one. Go to [Simulators](/get-started/pc-simulator) to get ready-to-use projects which can be run on your PC. This way you can save the porting for now and make some experience with LVGL immediately.
LVGL is ported to many IDEs to be sure you will find your favorite one.
Go to the [Simulators](/get-started/pc-simulator) section to get ready-to-use projects that can be run on your PC.
This way you can save the time of porting for now and make some experience with LVGL immediately.
## Add LVGL into your project
If you rather want to try LVGL on your own project follow these steps:
The following steps show how to setup LVGL on an embedded system with a display and a touchpad.
- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or Clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`
- Copy the `lvgl` folder into your project
- Copy `lvgl/lv_conf_template.h` as `lv_conf.h` next to the `lvgl` folder, change the first `#if 0` to `1` to enable the file's content and set at least `LV_HOR_RES_MAX`, `LV_VER_RES_MAX` and `LV_COLOR_DEPTH` defines.
- Include `lvgl/lvgl.h` where you need to use LVGL related functions.
- Call `lv_tick_inc(x)` every `x` milliseconds **in a Timer or Task** (`x` should be between 1 and 10). It is required for the internal timing of LVGL. Alternatively, configure `LV_TICK_CUSTOM` (see `lv_conf.h`) so that LVGL can retrieve the current time directly.
- [Download](https://github.com/lvgl/lvgl/archive/master.zip) or Clone the library from GitHub with `git clone https://github.com/lvgl/lvgl.git`.
- Copy the `lvgl` folder into your project.
- Copy `lvgl/lv_conf_template.h` as `lv_conf.h` next to the `lvgl` folder, change the first `#if 0` to `1` to enable the file's content and set the `LV_COLOR_DEPTH` defines.
- Include `lvgl/lvgl.h` in files where you need to use LVGL related functions.
- Call `lv_tick_inc(x)` every `x` milliseconds in a Timer or Task (`x` should be between 1 and 10). It is required for the internal timing of LVGL.
Alternatively, configure `LV_TICK_CUSTOM` (see `lv_conf.h`) so that LVGL can retrieve the current time directly.
- Call `lv_init()`
- Create a display buffer for LVGL. LVGL will render the graphics here first, and seed the rendered image to the display. The buffer size can be set freely but 1/10 screen size is a good starting point.
- Create a draw buffer: LVGL will render the graphics here first, and seed the rendered image to the display.
The buffer size can be set freely but 1/10 screen size is a good starting point.
```c
static lv_disp_buf_t disp_buf;
static lv_color_t buf[LV_HOR_RES_MAX * LV_VER_RES_MAX / 10]; /*Declare a buffer for 1/10 screen size*/
lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * LV_VER_RES_MAX / 10); /*Initialize the display buffer*/
static lv_disp_darw_buf_t draw_buf;
static lv_color_t buf1[DISP_HOR_RES * DISP_VER_RES / 10]; /*Declare a buffer for 1/10 screen size*/
lv_disp_draw_buf_init(&draw_buf, buf1, NULL, MY_DISP_HOR_RES * MY_DISP_VER_SER / 10); /*Initialize the display buffer.*/
```
- Implement and register a function which can **copy the rendered image** to an area of your display:
- Implement and register a function which can copy the rendered image to an area of your display:
```c
lv_disp_drv_t disp_drv; /*Descriptor of a display driver*/
lv_disp_drv_init(&disp_drv); /*Basic initialization*/
disp_drv.flush_cb = my_disp_flush; /*Set your driver function*/
disp_drv.buffer = &disp_buf; /*Assign the buffer to the display*/
disp_drv.buffer = &draw_buf; /*Assign the buffer to the display*/
disp_drv.hor_res = MY_DISP_HOR_RES; /*Set the horizontal resolution of the display*/
disp_drv.hor_res = MY_DISP_VER_RES; /*Set the verizontal resolution of the display*/
lv_disp_drv_register(&disp_drv); /*Finally register the driver*/
void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
int32_t x, y;
/*It's a very slow but simple implementation.
*`set_pixel` needs to be written by you to a set pixel on the screen*/
for(y = area->y1; y <= area->y2; y++) {
for(x = area->x1; x <= area->x2; x++) {
set_pixel(x, y, *color_p); /* Put a pixel to the display.*/
set_pixel(x, y, *color_p);
color_p++;
}
}
@ -52,7 +59,7 @@ void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * co
}
```
- Implement and register a function which can **read an input device**. E.g. for a touch pad:
- Implement and register a function which can read an input device. E.g. for a touch pad:
```c
lv_indev_drv_t indev_drv; /*Descriptor of a input device driver*/
lv_indev_drv_init(&indev_drv); /*Basic initialization*/
@ -62,35 +69,42 @@ lv_indev_drv_register(&indev_drv); /*Finally register the driver*/
bool my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
{
data->state = touchpad_is_pressed() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
if(data->state == LV_INDEV_STATE_PR) touchpad_get_xy(&data->point.x, &data->point.y);
return false; /*Return `false` because we are not buffering and no more data to read*/
/*`touchpad_is_pressed` and `touchpad_get_xy` needs to be implemented by you*/
if(touchpad_is_pressed()) {
data->state = LV_INDEV_STATE_PRESSED;
touchpad_get_xy(&data->point.x, &data->point.y);
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
}
```
- Call `lv_task_handler()` periodically every few milliseconds in the main `while(1)` loop, in Timer interrupt or in an Operation system task.
It will redraw the screen if required, handle input devices etc.
- Call `lv_timer_handler()` periodically every few milliseconds in the main `while(1)` loop or in an Operation system task.
It will redraw the screen if required, handle input devices, animation etc.
For a more detailed guide go to the [Porting](https://docs.lvgl.io/v7/en/html/porting/index.html) section.
For a more detailed guide go to the [Porting](/porting/index.html) section.
## Learn the basics
### Widgets
The graphical elements like Buttons, Labels, Sliders, Charts etc are called objects or widgets in LVGL. Go to [Widgets](/widgets/index) to see the full list of available widgets.
The graphical elements like Buttons, Labels, Sliders, Charts etc. are called objects or widgets. Go to [Widgets](/widgets/index) to see the full list of available widgets.
Every object has a parent object where it is create. For example if a label is created on a button, the button is the parent of label.
The child object moves with the parent and if the parent is deleted the children will be deleted too.
Children can be visible only on their parent. It other words, the parts of the children out of the parent are clipped.
A *screen* is the "root" parent. You can have any number of screens. To get the current screen call `lv_scr_act()`, and to load a screen use `lv_scr_load(scr1)`.
A Screen is the "root" parent. You can have any number of screens.
To get the current screen call `lv_scr_act()`, and to load a screen use `lv_scr_load(scr1)`.
You can create a new object with `lv_<type>_create(parent)`. It will return an `lv_obj_t *` variable that can be used as a reference to the object to set its parameters.
You can create a new object with `lv_<type>_create(parent, obj_to_copy)`. It will return an `lv_obj_t *` variable which should be used as a reference to the object to set its parameters.
The first parameter is the desired *parent*, the second parameters can be an object to copy (`NULL` if unused).
For example:
```c
lv_obj_t * slider1 = lv_slider_create(lv_scr_act(), NULL);
lv_obj_t * slider1 = lv_slider_create(lv_scr_act());
```
To set some basic attribute `lv_obj_set_<paramters_name>(obj, <value>)` function can be used. For example:
@ -100,69 +114,132 @@ lv_obj_set_y(btn1, 10);
lv_obj_set_size(btn1, 200, 50);
```
The objects has type specific parameters too which can be set by `lv_<type>_set_<paramters_name>(obj, <value>)` functions. For example:
The widgets have type specific parameters too which can be set by `lv_<widget_type>_set_<paramters_name>(obj, <value>)` functions. For example:
```c
lv_slider_set_value(slider1, 70, LV_ANIM_ON);
```
To see the full API visit the documentation of the widgets or the related header file (e.g. [lvgl/src/lv_widgets/lv_slider.h](https://github.com/lvgl/lvgl/blob/master/src/lv_widgets/lv_slider.h)).
To see the full API visit the documentation of the widgets or the related header file (e.g. [lvgl/src/widgets/lv_slider.h](https://github.com/lvgl/lvgl/blob/master/src/widgets/lv_slider.h)).
### Events
Events are used to inform the user if something has happened with an object. You can assign a callback to an object which will be called if the object is clicked, released, dragged, being deleted etc. It should look like this:
Events are used to inform the user if something has happened with an object.
You can assign one or more callbacks to an object which will be called if the object is clicked, released, dragged, being deleted etc.
It should look like this:
```c
lv_obj_set_event_cb(btn, btn_event_cb); /*Assign a callback to the button*/
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL); /*Assign a callback to the button*/
...
void btn_event_cb(lv_obj_t * btn, lv_event_t event)
void btn_event_cb(lv_event_t * e)
{
if(code == LV_EVENT_CLICKED) {
printf("Clicked\n");
}
printf("Clicked\n");
}
```
Learn more about the events in the [Event overview](/overview/event) section.
Instead of `LV_EVENT_CLICKED` `LV_EVENT_ALL` can be used too to call the callback for any event.
From `lv_event_t * e` the current event code can be get with
```c
lv_event_code_t code = lv_event_get_code(e);
```
The object that triggered the event can be retrieved with
```c
lv_obj_t * obj = lv_event_get_target(e);
```
To learn all features of the events go to the [Event overview](/overview/event) section.
### Parts
Widgets might be built from one or more parts. For example a button has only one part called `LV_BTN_PART_MAIN`.
However, a [Page](/widgets/page) has `LV_PAGE_PART_BG`, `LV_PAGE_PART_SCROLLABLE`, `LV_PAGE_PART_SCROLLBAR` and `LV_PAGE_PART_EDGE_FLASG`.
Widgets might be built from one or more *parts*. For example a button has only one part called `LV_PART_MAIN`.
However, a [Slider](/widgets/core/slider) has `LV_PART_MAIN`, `LV_PART_INDICATOR` and `LV_PART_KNOB`.
Some parts are *virtual* (they are not real object, just drawn on the fly, such as the scrollbar of a page) but other parts are *real* (they are real object, such as the scrollable part of the page).
By using parts you can apply different styles to different parts. (See below)
Parts come into play when you want to set the styles and states of a given part of an object. (See below)
To learn which parts are used by which object read the widgets' documentation.
### States
The objects can be in a combination of the following states:
- **LV_STATE_DEFAULT** Normal, released
- **LV_STATE_CHECKED** Toggled or checked
- **LV_STATE_FOCUSED** Focused via keypad or encoder or clicked via touchpad/mouse
- **LV_STATE_EDITED** Edit by an encoder
- **LV_STATE_HOVERED** Hovered by mouse (not supported now)
- **LV_STATE_PRESSED** Pressed
- **LV_STATE_DISABLED** Disabled or inactive
- `LV_STATE_DEFAULT` Normal, released state
- `LV_STATE_CHECKED` Toggled or checked state
- `LV_STATE_FOCUSED` Focused via keypad or encoder or clicked via touchpad/mouse
- `LV_STATE_FOCUS_KEY` Focused via keypad or encoder but not via touchpad/mouse
- `LV_STATE_EDITED` Edit by an encoder
- `LV_STATE_HOVERED` Hovered by mouse (not supported now)
- `LV_STATE_PRESSED` eing pressed
- `LV_STATE_SCROLLED` Being scrolled
- `LV_STATE_DISABLED` Disabled
For example, if you press an object it will automatically get the `LV_STATE_PRESSED` state and when you release it, the state will be removed.
For example, if you press an object it will automatically goes to `LV_STATE_FOCUSED` and `LV_STATE_PRESSED` state and when you release it, the `LV_STATE_PRESSED` state will be removed.
To get the current state use `lv_obj_get_state(obj, part)`. It will return the `OR`ed states.
For example, this is a valid state for a checkbox: `LV_STATE_CHECKED | LV_STATE_PRESSED | LV_STATE_FOCUSED`
To check if an object is in a geven state use `lv_obj_has_state(obj, LV_STATE_...)`. It will return `true` if the object "has" the given state at that moment.
To manually add remove the states use
```c
lv_obj_add_state(obj, LV_STATE_...);
lv_obj_clear_state(obj, LV_STATE_...);
```
### Styles
Styles can be assigned to the parts of an object to change their appearance.
A style can describe for example the background color, border width, text font and so on. See the full list [here](https://docs.lvgl.io/v7/en/html/overview/style.html#properties).
Styles contains properties such as background color, border width, font, etc to describe the appearance of the objects.
The styles are `lv_style_t` variables. Only their pointer is saved in the objects so they need to be static or global.
Before using a style it needs to be initialized with `lv_style_init(&style1)`. After that properties can be added. For example:
```
static lv_style_t style1;
lv_style_init(&style1);
lv_style_set_bg_color(&style1, lv_color_hex(0xa03080))
lv_style_set_border_width(&style1, 2))
```
See the full list of properties go [here](/overview/style.html#properties).
The styles are assigned to an object's part and state. For example to *"Use this style on the slider's indicator when the slider is pressed"*:
```c
lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR | LV_STATE_PRESSED);
```
If the *part* is `LV_PART_MAIN` it can be omitted:
```c
lv_obj_add_style(btn1, &style1, LV_STATE_PRESSED); /*Equal to LV_PART_MAIN | LV_STATE_PRESSED*/
```
Similarly, `LV_STATE_DEFAULT` can be omitted too:
```c
lv_obj_add_style(slider1, &style1, LV_PART_INDICATOR); /*Equal to LV_PART_INDICATOR | LV_STATE_DEFAULT*/
```
For `LV_STATE_DEFAULT` and `LV_PART_MAIN` simply write `0`:
```c
lv_obj_add_style(btn1, &style1, 0); /*Equal to LV_PART_MAIN | LV_STATE_DEFAULT*/
```
The styles can be cascaded (similarly to CSS). It means you can add more styles to a part of an object.
For example `style_btn` can set a default button appearance, and `style_btn_red` can overwrite some properties to make the button red-
For example `style_btn` can set a default button appearance, and `style_btn_red` can overwrite the background color to make the button red:
```c
lv_obj_add_style(btn1, &style_btn, 0);
lv_obj_add_style(btn1, &style1_btn_red, 0);
```
Every style property you set is specific to a state. For example, you can set a different background color for `LV_STATE_DEFAULT` and `LV_STATE_PRESSED`.
The library finds the best match between the state of the given part and the available style properties. For example if the object is in pressed state and the border width is specified for pressed state, then it will be used.
However, if it's not specified for pressed state, the `LV_STATE_DEFAULT`'s border width will be used. If the border width not defined for `LV_STATE_DEFAULT` either, a default value will be used.
If a property is not set on for the current state the style with `LV_STATE_DEFAULT` will be used. If the property is not defined even in the default state a default value is used.
Some properties (typically the text-related ones) can be inherited. It means if a property is not set in an object it will be searched in its parents too.
For example you can set the font once in the screen's style and every text will inherit it by default.
For example, you can set the font once in the screen's style and every text will inherit it by default.
Local style properties also can be added to the objects. It creates a style is inside the object that is used only by the object:
```c
lv_obj_set_style_bg_color(slider1, lv_color_hex(0x2080bb), LV_PART_INDICATOR | LV_STATE_PRESSED);
```
To learn all the features of styles see the [Style overview](/overview/style) section
Local style properties also can be added to the objects.
### Themes
Themes are the default styles of the objects.
@ -190,3 +267,4 @@ label.set_text("Button")
# Load the screen
lv.scr_load(scr)
```

View File

@ -14,6 +14,7 @@
object
coords
style
style-props
scroll
layer
event

View File

@ -109,7 +109,7 @@ For example a [Slider](/widgets/slider) has three parts:
- Indiactor
- Knob
It means the all three parts of teh slider can have their own styles. See later how to add style styles to objects and parts.
It means the all three parts of the slider can have their own styles. See later how to add style styles to objects and parts.
## Initialize styles and set/get properties
@ -212,12 +212,8 @@ For example:
```c
lv_obj_set_style_local_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);
```
## Properties
TODO include properties generated by style_api_gen.py
For the full list of style properties click [here](/overview/style-props).
### Typical background properties
In the documentation of the widgets you will see sentences like "The widget use the typical background properties". The "typical background properties" are the ones related to:

View File

@ -15,15 +15,15 @@ Once rendering is ready the content of the draw buffer is send to display using
A draw draw buffer can be initialized via a `lv_disp_draw_buf_t` variable like this:
```c
/*A static or global variable to store the buffers*/
static lv_disp_draw_buf_t disp_buf;
/*A static or global variable to store the buffers*/
static lv_disp_draw_buf_t disp_buf;
/*Static or global buffer(s). The second buffer is optional*/
static lv_color_t buf_1[MY_DISP_HOR_RES * 10];
static lv_color_t buf_2[MY_DISP_HOR_RES * 10];
/*Static or global buffer(s). The second buffer is optional*/
static lv_color_t buf_1[MY_DISP_HOR_RES * 10];
static lv_color_t buf_2[MY_DISP_HOR_RES * 10];
/*Initialize `disp_buf` with the buffer(s) */
lv_disp_draw_buf_init(&disp_buf, buf_1, buf_2, MY_DISP_HOR_RES*10);
/*Initialize `disp_buf` with the buffer(s) */
lv_disp_draw_buf_init(&disp_buf, buf_1, buf_2, MY_DISP_HOR_RES*10);
```
Note that `lv_disp_draw_buf_t` needs to be static, global or dynamically allocated and not a local variable destroyed if goes out of the scope.
@ -90,15 +90,15 @@ To use a GPU the following callbacks can be used:
### Examples
All together it looks like this:
```c
static lv_disp_drv_t disp_drv; /*A variable to hold the drivers. Must be static or global.*/
lv_disp_drv_init(&disp_drv); /*Basic initialization*/
disp_drv.draw_buf = &disp_buf; /*Set an initialized buffer*/
disp_drv.flush_cb = my_flush_cb; /*Set a flush callback to draw to the display*/
disp_drv.hor_res = 320; /*Set the horizontal resolution in pixels*/
disp_drv.ver_res = 240; /*Set the vertical resolution in pixels*/
lv_disp_t * disp;
disp = lv_disp_drv_register(&disp_drv); /*Register the driver and save the created display objects*/
static lv_disp_drv_t disp_drv; /*A variable to hold the drivers. Must be static or global.*/
lv_disp_drv_init(&disp_drv); /*Basic initialization*/
disp_drv.draw_buf = &disp_buf; /*Set an initialized buffer*/
disp_drv.flush_cb = my_flush_cb; /*Set a flush callback to draw to the display*/
disp_drv.hor_res = 320; /*Set the horizontal resolution in pixels*/
disp_drv.ver_res = 240; /*Set the vertical resolution in pixels*/
lv_disp_t * disp;
disp = lv_disp_drv_register(&disp_drv); /*Register the driver and save the created display objects*/
```
Here are some simple examples of the callbacks:

View File

@ -48,9 +48,6 @@ void my_input_read(lv_indev_drv_t * drv, lv_indev_data_t*data)
}
```
``` important:: Touchpad drivers must return the last X/Y coordinates even when the state is *LV_INDEV_STATE_REL*.
```
To set a mouse cursor use `lv_indev_set_cursor(my_indev, &img_cursor)`. (`my_indev` is the return value of `lv_indev_drv_register`)
### Keypad or keyboard

View File

@ -1,8 +1,9 @@
#!/usr/bin/env python3
import sys, os
import sys, os, re
props = [
{'section': 'Miscellaneous', 'dsc':'TODO' },
{'name': 'RADIUS',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the radius on every corner. The value is interpreted in pixel (>= 0) or `LV_RADIUS_CIRCLE` for max. radius"},
@ -21,15 +22,15 @@ props = [
{'name': 'TRANSLATE_X',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Move the object with this value in X direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width." },
'dsc': "Move the object with this value in X direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width." },
{'name': 'TRANSLATE_Y',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Move the object with this value in Y direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height." },
'dsc': "Move the object with this value in Y direction. Applied after layouts, aligns and other positioning. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height." },
{'name': 'TRANSFORM_ZOOM',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Zoom image-like objects. Multiplied with the zoom set on the object. The value 256 (or `LV_IMG_ZOOM_NONE`) maens normal size, 128 half size, 512 double size, and so on" },
'dsc': "Zoom image-like objects. Multiplied with the zoom set on the object. The value 256 (or `LV_IMG_ZOOM_NONE`) means normal size, 128 half size, 512 double size, and so on" },
{'name': 'TRANSFORM_ANGLE',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -63,21 +64,22 @@ props = [
'style_type': 'num', 'var_type': 'lv_blend_mode_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Describes how to blend the colors to the background. The possibel values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE`"},
{'section': 'Padding', 'dsc':'TODO' },
{'name': 'PAD_TOP',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the padding on the top. It makes the content arae smaller in this direction."},
'dsc': "Sets the padding on the top. It makes the content area smaller in this direction."},
{'name': 'PAD_BOTTOM',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the padding on the bottom. It makes the content arae smaller in this direction."},
'dsc': "Sets the padding on the bottom. It makes the content area smaller in this direction."},
{'name': 'PAD_LEFT',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the padding on the left. It makes the content arae smaller in this direction."},
'dsc': "Sets the padding on the left. It makes the content area smaller in this direction."},
{'name': 'PAD_RIGHT',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the padding on the right. It makes the content arae smaller in this direction."},
'dsc': "Sets the padding on the right. It makes the content area smaller in this direction."},
{'name': 'PAD_ROW',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -87,6 +89,7 @@ props = [
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the padding between the columns. Used by the layouts."},
{'section': 'Size and position', 'dsc':'TODO' },
{'name': 'WIDTH',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the width of object. Pixel, percentage and `LV_SIZE_CONTENT` values can be used. Percentage values are relative to the width of the parent's content area."},
@ -121,12 +124,13 @@ props = [
{'name': 'ALIGN',
'style_type': 'num', 'var_type': 'lv_align_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the alignment whcih tells from which point of teh aprent the X and Y coordinates should be interptreted. The possibel values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`"},
'dsc': "Set the alignment which tells from which point of the parent the X and Y coordinates should be interpreted. The possible values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`"},
{'name': 'LAYOUT',
'style_type': 'num', 'var_type': 'uint16_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the layout if the object. The children will be repositioned and resized according to the policies set for the layout. For the possible values see the documentation of the layouts."},
{'section': 'Background', 'dsc':'TODO' },
{'name': 'BG_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the background color of the object."},
@ -135,11 +139,11 @@ props = [
'style_type': 'color', 'var_type': 'lv_color_t' },
{'name': 'BG_OPA',
'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the opacity of the bacground. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
'dsc': "Set the opacity of the background. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
{'name': 'BG_GRAD_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the gradien color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`"},
'dsc': "Set the gradient color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`"},
{'name': 'BG_GRAD_COLOR_FILTERED',
'style_type': 'color', 'var_type': 'lv_color_t' },
@ -150,11 +154,11 @@ props = [
{'name': 'BG_MAIN_STOP',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the point from which the backround color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"},
'dsc': "Set the point from which the background color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"},
{'name': 'BG_GRAD_STOP',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the point from which the backround's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"},
'dsc': "Set the point from which the background's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"},
{'name': 'BG_IMG_SRC',
'style_type': 'ptr', 'var_type': 'const void *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -173,12 +177,13 @@ props = [
{'name': 'BG_IMG_RECOLOR_OPA',
'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 256, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportinally."},
'dsc': "Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 256, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportionally."},
{'name': 'BG_IMG_TILED',
'style_type': 'num', 'var_type': 'bool', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "If enbaled the background image will be tiled. The possible values are `ture` or `false`."},
'dsc': "If enbaled the background image will be tiled. The possible values are `true` or `false`."},
{'section': 'Border', 'dsc':'TODO' },
{'name': 'BORDER_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the color of the border"},
@ -202,6 +207,7 @@ props = [
'style_type': 'num', 'var_type': 'bool' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets wheter the the border should be drawn before or after the children ar drawn. `true`: after children, `false`: before children"},
{'section': 'Text', 'dsc':'TODO' },
{'name': 'TEXT_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Sets the color of the text."},
@ -211,7 +217,7 @@ props = [
{'name': 'TEXT_OPA',
'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the opícity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
'dsc': "Set the opacity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
{'name': 'TEXT_FONT',
'style_type': 'ptr', 'var_type': 'const lv_font_t *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -231,8 +237,9 @@ props = [
{'name': 'TEXT_ALIGN',
'style_type': 'num', 'var_type': 'lv_text_align_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set how to align the lines of the text. Note that it doesn't align the object itself, only the lines inside the obejct. The possibel values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly"},
'dsc': "Set how to align the lines of the text. Note that it doesn't align the object itself, only the lines inside the object. The possible values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly"},
{'section': 'Image', 'dsc':'TODO' },
{'name': 'IMG_OPA',
'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
@ -248,6 +255,7 @@ props = [
'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
{'section': 'Outline', 'dsc':'TODO' },
{'name': 'OUTLINE_WIDTH',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the width of the outline in pixels. "},
@ -267,6 +275,7 @@ props = [
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the padding of the outline, i.e. the gap between object and the outline."},
{'section': 'Shadow', 'dsc':'TODO' },
{'name': 'SHADOW_WIDTH',
'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the width of the shadow in pixels. The value should be >= 0."},
@ -294,6 +303,7 @@ props = [
'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the opacity of the shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."},
{'section': 'Line', 'dsc':'TODO' },
{'name': 'LINE_WIDTH',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the width of the lines in pixel."},
@ -308,7 +318,7 @@ props = [
{'name': 'LINE_ROUNDED',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Make the end points of the lines rounded. `true`: rounded, `false`: perpadicular line ending "},
'dsc': "Make the end points of the lines rounded. `true`: rounded, `false`: perpandicular line ending "},
{'name': 'LINE_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -321,13 +331,14 @@ props = [
'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the opacity of the lines."},
{'section': 'Arc', 'dsc':'TODO' },
{'name': 'ARC_WIDTH',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set the width (ticjkness) of the arcs in pixel."},
{'name': 'ARC_ROUNDED',
'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Make the end points of the arcs rounded. `true`: rounded, `false`: perpadicular line ending "},
'dsc': "Make the end points of the arcs rounded. `true`: rounded, `false`: perpandicular line ending "},
{'name': 'ARC_COLOR',
'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
@ -342,7 +353,7 @@ props = [
{'name': 'ARC_IMG_SRC',
'style_type': 'ptr', 'var_type': 'const void *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0,
'dsc': "Set an image from which the arc will be masked out. It's useful to display complex exxects on the arcs. Can be a pointer to `lv_img_dsc_t` or a path to a file"},
'dsc': "Set an image from which the arc will be masked out. It's useful to display complex effects on the arcs. Can be a pointer to `lv_img_dsc_t` or a path to a file"},
]
def style_get_cast(style_type, var_type):
@ -352,6 +363,8 @@ def style_get_cast(style_type, var_type):
return cast
def obj_style_get(p):
if 'section' in p: return
cast = style_get_cast(p['style_type'], p['var_type'])
print("static inline " + p['var_type'] + " lv_obj_get_style_" + p['name'].lower() +"(const struct _lv_obj_t * obj, uint32_t part)")
print("{")
@ -367,6 +380,8 @@ def style_set_cast(style_type):
return cast
def style_set(p):
if 'section' in p: return
cast = style_set_cast(p['style_type'])
print("static inline void lv_style_set_" + p['name'].lower() +"(lv_style_t * style, "+ p['var_type'] +" value)")
print("{")
@ -378,6 +393,8 @@ def style_set(p):
print("")
def local_style_set(p):
if 'section' in p: return
cast = style_set_cast(p['style_type'])
print("static inline void lv_obj_set_style_" + p['name'].lower() + "(struct _lv_obj_t * obj, " + p['var_type'] +" value, lv_style_selector_t selector)")
print("{")
@ -389,20 +406,29 @@ def local_style_set(p):
print("")
def style_const_set(p):
cast = style_set_cast(p['style_type'])
print("#define LV_STYLE_CONST_" + p['name'] + "(val) \\")
print(" { \\")
print(" .prop = LV_STYLE_" + p['name'] + ", \\")
print(" .value = { \\")
print(" ." + p['style_type'] +" = " + cast + "val \\")
print(" } \\")
print(" }")
print("")
if 'section' in p: return
cast = style_set_cast(p['style_type'])
print("#define LV_STYLE_CONST_" + p['name'] + "(val) \\")
print(" { \\")
print(" .prop = LV_STYLE_" + p['name'] + ", \\")
print(" .value = { \\")
print(" ." + p['style_type'] +" = " + cast + "val \\")
print(" } \\")
print(" }")
print("")
docs_prop_cnt = 0
def docs(p):
if "dsc" not in p: return
if "section" in p:
print("")
print("## " + p['section'])
print(p['dsc'])
return
if "default" not in p: return
d = str(p["default"])
@ -415,10 +441,22 @@ def docs(p):
e = "No"
if p["ext_draw"]: e = "Yes"
li_style = "style='display:inline; margin-right: 20px"
print("<h3>" + p["name"].lower() + "</h3>")
print(p["dsc"])
li_style = "style='display:inline; margin-right: 20px; margin-left: 0px"
global docs_prop_cnt
div_style = "padding: 16px;"
if docs_prop_cnt % 2:
div_style += " background-color:#eee;"
docs_prop_cnt+=1
dsc = p['dsc'];
print("")
#print("<div style=\"" + div_style +"\">");
print("")
print("### " + p["name"].lower())
print(dsc)
print("<ul>")
print("<li " + li_style + "'><strong>Default</strong> " + d + "</li>")
@ -426,7 +464,8 @@ def docs(p):
print("<li " + li_style + "'><strong>Layout</strong> " + l + "</li>")
print("<li " + li_style + "'><strong>Ext. draw</strong> " + e + "</li>")
print("</ul>")
print("")
#print("</div>")
print("")
base_dir = os.path.abspath(os.path.dirname(__file__))
sys.stdout = open(base_dir + '/../src/core/lv_obj_style_gen.h', 'w')
@ -443,8 +482,9 @@ for p in props:
style_set(p)
style_const_set(p)
sys.stdout = open(base_dir + '/style_props.md', 'w')
sys.stdout = open(base_dir + '/../docs/overview/style-props.md', 'w')
print('# Style properties')
for p in props:
docs(p)

View File

@ -1,702 +0,0 @@
<h3>radius</h3>
Set the radius on every corner. The value is interpreted in pixel (>= 0) or `LV_RADIUS_CIRCLE` for max. radius
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>clip_corner</h3>
Enable to clip the overflowed content on the rounded corner. Can be `true` or `false`.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>transform_width</h3>
Make the object wider on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>transform_height</h3>
Make the object higher on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>translate_x</h3>
Move the object with this value in X direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>translate_y</h3>
Move the object with this value in Y direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>transform_zoom</h3>
Zoom image-like objects. Multiplied with the zoom set on the object. The value 256 (or `LV_IMG_ZOOM_NONE`) maens normal size, 128 half size, 512 double size, and so on
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>transform_angle</h3>
Rotate image-like objects. Added to the rotation set on the object. The value is interpreted in 0.1 degree unit. E.g. 45 deg. = 450
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>opa</h3>
Scale down all opacity values of the object by this factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>color_filter_dsc</h3>
Mix a color to all colors of the object.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>color_filter_opa</h3>
The intensity of mixing of color filter.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>anim_time</h3>
The animation time in milliseconds. It's meaning is widget specific. E.g. blink time of the cursor on the text area or scroll time of a roller. See the widgets' documentation to learn more.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>anim_speed</h3>
The animation speed in pixel/sec. It's meaning is widget specific. E.g. scroll speed of label. See the widgets' documentation to learn more.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>transition</h3>
An initialized `lv_style_transition_dsc_t` to describe a transition.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>blend_mode</h3>
Describes how to blend the colors to the background. The possibel values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE`
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_top</h3>
Sets the padding on the top. It makes the content arae smaller in this direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_bottom</h3>
Sets the padding on the bottom. It makes the content arae smaller in this direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_left</h3>
Sets the padding on the left. It makes the content arae smaller in this direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_right</h3>
Sets the padding on the right. It makes the content arae smaller in this direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_row</h3>
Sets the padding between the rows. Used by the layouts.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>pad_column</h3>
Sets the padding between the columns. Used by the layouts.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>width</h3>
Sets the width of object. Pixel, percentage and `LV_SIZE_CONTENT` values can be used. Percentage values are relative to the width of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>min_width</h3>
Sets a minimal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>max_width</h3>
Sets a maximal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>height</h3>
Sets the height of object. Pixel, percentage and `LV_SIZE_CONTENT` can be used. Percentage values are relative to the height of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>min_height</h3>
Sets a minimal height. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>max_height</h3>
Sets a maximal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>x</h3>
Set the X coordinate of the object considering the set `align`. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>y</h3>
Set the Y coordinate of the object considering the set `align`. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>align</h3>
Set the alignment whcih tells from which point of teh aprent the X and Y coordinates should be interptreted. The possibel values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>layout</h3>
Set the layout if the object. The children will be repositioned and resized according to the policies set for the layout. For the possible values see the documentation of the layouts.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_color</h3>
Set the background color of the object.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_opa</h3>
Set the opacity of the bacground. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_grad_color</h3>
Set the gradien color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_grad_dir</h3>
Set the direction of the gradient of the background. The possible values are `LV_GRAD_DIR_NONE/HOR/VER`.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_main_stop</h3>
Set the point from which the backround color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_grad_stop</h3>
Set the point from which the backround's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_img_src</h3>
Set a background image. Can be a pointer to `lv_img_dsc_t`, a path to a file or an `LV_SYMBOL_...`
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_img_opa</h3>
Set the opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_img_recolor</h3>
Set a color to mix to the background image.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_img_recolor_opa</h3>
Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 256, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportinally.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>bg_img_tiled</h3>
If enbaled the background image will be tiled. The possible values are `ture` or `false`.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>border_color</h3>
Set the color of the border
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>border_opa</h3>
Set the opcitiy of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>border_width</h3>
Set hte width of the border. Only pixel values can be used.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>border_side</h3>
Set ony which side(s) the border should be drawn. The possible values are `LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL`. OR-ed calues an be used as well, e.g. `LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT`.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>border_post</h3>
Sets wheter the the border should be drawn before or after the children ar drawn. `true`: after children, `false`: before children
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_color</h3>
Sets the color of the text.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_opa</h3>
Set the opícity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_font</h3>
Set the font of the text (a pointer `lv_font_t *`).
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_letter_space</h3>
Set the letter space in pixels
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_line_space</h3>
Set the line space in pixels.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_decor</h3>
Set decoration for the text. The possible values are `LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH`. OR-ed values can be used as well.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>text_align</h3>
Set how to align the lines of the text. Note that it doesn't align the object itself, only the lines inside the obejct. The possibel values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>img_opa</h3>
Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>img_recolor</h3>
Set color to mixt to the image.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>img_recolor_opa</h3>
Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>outline_width</h3>
Set the width of the outline in pixels.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>outline_color</h3>
Set the color of the outline.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>outline_opa</h3>
Set the opacity of the outline. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>outline_pad</h3>
Set the padding of the outline, i.e. the gap between object and the outline.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_width</h3>
Set the width of the shadow in pixels. The value should be >= 0.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_ofs_x</h3>
Set an offset on the shadow in pixels in X direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_ofs_y</h3>
Set an offset on the shadow in pixels in Y direction.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_spread</h3>
Make the shadow calcuation to use a larger or smaller rectangle as base. The value can be in pixel t make the area larger/smaller
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_color</h3>
Set the color of the shadow
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>shadow_opa</h3>
Set the opacity of the shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_width</h3>
Set the width of the lines in pixel.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_dash_width</h3>
Set the width of dashes in pixel. Note that dash works only on horizontal and vertical lines
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_dash_gap</h3>
Set the gap between dashes in pixel. Note that dash works only on horizontal and vertical lines
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_rounded</h3>
Make the end points of the lines rounded. `true`: rounded, `false`: perpadicular line ending
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_color</h3>
Set the color fo the lines.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>line_opa</h3>
Set the opacity of the lines.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>arc_width</h3>
Set the width (ticjkness) of the arcs in pixel.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>arc_rounded</h3>
Make the end points of the arcs rounded. `true`: rounded, `false`: perpadicular line ending
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>arc_color</h3>
Set the color of the arc.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>arc_opa</h3>
Set the opacity of the arcs.
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>
<h3>arc_img_src</h3>
Set an image from which the arc will be masked out. It's useful to display complex exxects on the arcs. Can be a pointer to `lv_img_dsc_t` or a path to a file
<ul>
<li style='display:inline; margin-right: 20px'><strong>Default</strong> 0</li>
<li style='display:inline; margin-right: 20px'><strong>Inherited</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Layout</strong> No</li>
<li style='display:inline; margin-right: 20px'><strong>Ext. draw</strong> No</li>
</ul>