github-code/lvgl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(objects) update to v8

Browse Source
This commit is contained in:
Gabor Kiss-Vamosi
2021-04-27 15:36:53 +02:00
parent 492b3a417e
commit fa0c1d1423
15 changed files with 795 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/misc/list_theme_example.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 105 KiB

BIN
docs/misc/list_theme_example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/misc/lv_theme_intro.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
docs/misc/slider_example.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/misc/slider_example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
docs/misc/style-built-in.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/misc/style-example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
docs/misc/theme-example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

13
docs/overview/object.md
View File

@@ -141,6 +141,19 @@ To get the currently active screen use the `lv_scr_act()` function.
To load a new screen, use `lv_scr_load(scr1)`.
### Layers
There are two automatically generated layers:
- top layer
- system layer
They are independent of the screens and they will be shown on every screen. The *top layer* is above every object on the screen and the *system layer* is above the *top layer* too.
You can add any pop-up windows to the *top layer* freely. But, the *system layer* is restricted to system-level things (e.g. mouse cursor will be placed here in `lv_indev_set_cursor()`).
The `lv_layer_top()` and `lv_layer_sys()` functions gives a pointer to the top or system layer.
Read the [Layer overview](/overview/layer) section to learn more about layers.
#### Load screen with animation
A new screen can be loaded with animation too using `lv_scr_load_anim(scr, transition_type, time, delay, auto_del)`. The following transition types exist:

70
docs/widgets/gauge.md
View File

@@ -1,70 +0,0 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/gauge.md
```
# Gauge (lv_gauge)
## Overview
The gauge is a meter with scale labels and one or more needles.
## Parts and Styles
The Gauge's main part is called `LV_GAUGE_PART_MAIN`. It draws a background using the typical background style properties and "minor" scale lines using the *line* and *scale* style properties.
It also uses the *text* properties to set the style of the scale labels. *pad_inner* is used to set space between the scale lines and the scale labels.
`LV_GAUGE_PART_MAJOR` is a virtual part which describes the major scale lines (where labels are added) using the *line* and *scale* style properties.
`LV_GAUGE_PART_NEEDLE` is also virtual part and it describes the needle(s) via the *line* style properties.
The *size* and the typical background properties are used to describe a rectangle (or circle) in the pivot point of the needle(s).
*pad_inner* is used to to make the needle(s) smaller than the outer radius of the scale lines.
## Usage
### Set value and needles
The gauge can show more than one needle.
Use the `lv_gauge_set_needle_count(gauge, needle_num, color_array)` function to set the number of needles and an array with colors for each needle.
The array must be static or global variable because only its pointer is stored.
You can use `lv_gauge_set_value(gauge, needle_id, value)` to set the value of a needle.
### Scale
You can use the `lv_gauge_set_scale(gauge, angle, line_num, label_cnt)` function to adjust the scale angle and the number of the scale lines and labels.
The default settings are 220 degrees, 6 scale labels, and 21 lines.
The scale of the Gauge can have offset. It can be adjusted with `lv_gauge_set_angle_offset(gauge, angle)`.
### Range
The range of the gauge can be specified by `lv_gauge_set_range(gauge, min, max)`. The default range is 0..100.
### Needle image
An images also can be used as needles. The image should point to the right (like `==>`). To set an image use `lv_gauge_set_needle_img(gauge1, &img, pivot_x, pivot_y)`. `pivot_x` and `pivot_y` are offset of the rotation center from the top left corner. Images will be recolored to the needle's color with `image_recolor_opa` intensity coming from the styles in `LV_GAUGE_PART_NEEDLE`.
### Critical value
To set a critical value, use `lv_gauge_set_critical_value(gauge, value)`. The scale color will be changed to *scale_end_color* after this value. The default critical value is 80.
## Events
Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
Learn more about [Events](/overview/event).
## Keys
No *Keys* are processed by the object type.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: /lv_examples/src/lv_ex_widgets/lv_ex_gauge/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_gauge.h
:project: lvgl
```

61
docs/widgets/linemeter.md
View File

@@ -1,61 +0,0 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/linemeter.md
```
# Line meter (lv_lmeter)
## Overview
The Line meter object consists of some radial lines which draw a scale. Setting a value for the Line meter will change the color of the scale lines proportionally.
## Parts and Styles
The Line meter has only a main part, called `LV_LINEMETER_PART_MAIN`. It uses all the typical background properties the draw a rectangle-like or circle background and the *line* and *scale* properties to draw the scale lines.
The active lines (which are related to smaller values the the current value) are colored from *line_color* to *scale_grad_color*. The lines in the end (after the current value) are set to *scale_end_color* color.
## Usage
### Set value
When setting a new value with `lv_linemeter_set_value(linemeter, new_value)` the proportional part of the scale will be recolored.
### Range and Angles
The `lv_linemeter_set_range(linemeter, min, max)` function sets the range of the line meter.
You can set the angle of the scale and the number of the lines by: `lv_linemeter_set_scale(linemeter, angle, line_num)`.
The default angle is 240 and the default line number is 31.
### Angle offset
By default the scale angle is interpreted symmetrically to the y axis. It results in "standing" line meter. With `lv_linemeter_set_angle_offset` an offset can be added the scale angle.
It can used e.g to put a quarter line meter into a corner or a half line meter to the right or left side.
### Mirror
By default the Line meter's lines are activated clock-wise. It can be changed using `lv_linemeter_set_mirror(linemeter, true/false)`.
## Events
Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
Learn more about [Events](/overview/event).
## Keys
No *Keys* are processed by the object type.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: /lv_examples/src/lv_ex_widgets/lv_ex_linemeter/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_linemeter.h
:project: lvgl
```

211
docs/widgets/obj.md
View File

@@ -10,205 +10,154 @@ The 'Base Object' implements the basic properties of widgets on a screen, such a
- coordinates
- parent object
- children
- main style
- attributes like *Click enable*, *Drag enable*, etc.
- contains the styles
- attributes like *Clickable*, *Scrollable*, etc.
In object-oriented thinking, it is the base class from which all other objects in LVGL are inherited. This, among another things, helps reduce code duplication.
In object-oriented thinking, it is the base class from which all other objects in LVGL are inherited.
The functions and functionalities of Base object can be used with other widgets too. For example `lv_obj_set_width(slider, 100)`
The Base object can be directly used as a simple widgets. It nothing else then a rectangle.
The Base object can be directly used as a simple widgets. It nothing else than a rectangle. Or from the the HTML world it's like a `<div>`.
### Coordinates
Here only a small subset of cooridnate settings is described. To see all the features of LVGL (padding, cooridnates in styles, layouts, etc) visit the [Coordinates](overview/coord) page.
#### Size
The object size can be modified on individual axes with `lv_obj_set_width(obj, new_width)` and `lv_obj_set_height(obj, new_height)`, or both axes can be modified at the same time with `lv_obj_set_size(obj, new_width, new_height)`.
Styles can add [Margin](/overview/style/#properties) to the objects. Margin tells that "I want this space around me".
To set width or height reduced by the margin `lv_obj_set_width_margin(obj, new_width)` or `lv_obj_set_height_margin(obj, new_height)`.
In more exact way: `new_width = left_margin + object_width + right_margin`.
To get the width or height which includes the margins use `lv_obj_get_width/height_margin(obj)`.
Styles can add [Padding](/overview/style/#properties) to the object as well. Padding means "I don't want my children too close to my sides, so keep this space".
To set width or height reduced by the padding `lv_obj_set_width_fit(obj, new_width)` or `lv_obj_set_height_fit(obj, new_height)`.
In a more exact way: `new_width = left_pad + object_width + right_pad`
To get the width or height which is REDUCED by padding use `lv_obj_get_width/height_fit(obj)`. It can be considered the "useful size of the object".
Margin and padding gets important when [Layout](/widget/cont#layout) or [Auto-fit](/wisgets/cont#fit) is used by other widgets.
#### Position
You can set the x and y coordinates relative to the parent with `lv_obj_set_x(obj, new_x)` and `lv_obj_set_y(obj, new_y)`, or both at the same time with `lv_obj_set_pos(obj, new_x, new_y)`.
#### Alignment
You can align the object to another with `lv_obj_align(obj, obj_ref, LV_ALIGN_..., x_ofs, y_ofs)`.
- `obj` is the object to align.
- `obj_ref` is a reference object. `obj` will be aligned to it. If `obj_ref = NULL`, then the parent of `obj` will be used.
- The third argument is the *type* of alignment. These are the possible options:
![](/misc/align.png "Alignment types in LVGL")
You can align the object on it's parent with `lv_obj_set_align(obj, LV_ALIGN_...)`. After this every x and y settings will be ralitiev to the set alignment mode.
For example a this will shift the object by 10;20 px fro mthe center of its parent.
```c
lv_obj_set_align(obj, LV_ALIGN_CENTER);
lv_obj_set_pos(obj, 10, 20);
The alignment types build like `LV_ALIGN_OUT_TOP_MID`.
- The last two arguments allow you to shift the object by a specified number of pixels after aligning it.
//Or in one function
lv_obj_align(obj, LV_ALIGN_CENTER, 10, 20);
```
To align an object to an other use `lv_obj_align_to(obj_to_align, obj_referece, LV_ALIGN_..., x, y)`
For example, to align a text below an image: `lv_obj_align(text, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 10)`.
Or to align a text in the middle of its parent: `lv_obj_align(text, NULL, LV_ALIGN_CENTER, 0, 0)`.
The following align types exists:
![](/misc/align.png "Alignment types in LVGL")
`lv_obj_align_origo` works similarly to `lv_obj_align` but it aligns the center of the object.
For example, `lv_obj_align_origo(btn, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 0)` will align the center of the button the bottom of the image.
The parameters of the alignment will be saved in the object if `LV_USE_OBJ_REALIGN` is enabled in *lv_conf.h*. You can then realign the objects simply by calling `lv_obj_realign(obj)`.
It's equivalent to calling `lv_obj_align` again with the same parameters.
If the alignment happened with `lv_obj_align_origo`, then it will be used when the object is realigned.
The `lv_obj_align_x/y` and `lv_obj_align_origo_x/y` function can be used t align only on one axis.
If `lv_obj_set_auto_realign(obj, true)` is used the object will be realigned automatically, if its size changes in `lv_obj_set_width/height/size()` functions.
It's very useful when size animations are applied to the object and the original position needs to be kept.
**Note that the coordinates of screens can't be changed. Attempting to use these functions on screens will result in undefined behavior.**
### Parents and children
You can set a new parent for an object with `lv_obj_set_parent(obj, new_parent)`. To get the current parent, use `lv_obj_get_parent(obj)`.
To get the children of an object, use `lv_obj_get_child(obj, child_prev)` (from last to first) or `lv_obj_get_child_back(obj, child_prev)` (from first to last).
To get the first child, pass `NULL` as the second parameter and use the return value to iterate through the children. The function will return `NULL` if there are no more children. For example:
To get a specific children of a parent use `lv_obj_get_child(parent, idx)`. Some examples for `idx`:
- `0` get the firstly (youngest) created child
- `1` get the secondly created child
- `-1` get the lastly (youngest) craeted child
The children can be iterated lke this
```c
lv_obj_t * child = lv_obj_get_child(parent, NULL);
while(child) {
/*Do something with "child" */
child = lv_obj_get_child(parent, child);
uint32_t i;
for(i = 0; i < lv_obj_get_child_cnt(parent); i++) {
lv_obj_t * child = lv_obj_get_child(paernt, i);
/*Do something with child*/
}
```
`lv_obj_count_children(obj)` tells the number of children on an object. `lv_obj_count_children_recursive(obj)` also tells the number of children but counts children of children recursively.
`lv_obj_get_child_id(obj)` tells the index of the object. That is how many younger children its parent has.
You can bring an object to the foreground or send it to the background with `lv_obj_move_foreground(obj)` and `lv_obj_move_background(obj)`.
### Screens
When you have created a screen like `lv_obj_t * screen = lv_obj_create(NULL, NULL)`, you can load it with `lv_scr_load(screen)`. The `lv_scr_act()` function gives you a pointer to the current screen.
When you have created a screen like `lv_obj_t * screen = lv_obj_create(NULL)`, you can load it with `lv_scr_load(screen)`. The `lv_scr_act()` function gives you a pointer to the current screen.
If you have more display then it's important to know that these functions operate on the lastly created or the explicitly selected (with `lv_disp_set_default`) display.
To get an object's screen use the `lv_obj_get_screen(obj)` function.
### Layers
There are two automatically generated layers:
- top layer
- system layer
They are independent of the screens and they will be shown on every screen. The *top layer* is above every object on the screen and the *system layer* is above the *top layer* too.
You can add any pop-up windows to the *top layer* freely. But, the *system layer* is restricted to system-level things (e.g. mouse cursor will be placed here in `lv_indev_set_cursor()`).
The `lv_layer_top()` and `lv_layer_sys()` functions gives a pointer to the top or system layer.
You can bring an object to the foreground or send it to the background with `lv_obj_move_foreground(obj)` and `lv_obj_move_background(obj)`.
Read the [Layer overview](/overview/layer) section to learn more about layers.
### Events
To set an event callback for an object, use `lv_obj_set_event_cb(obj, event_cb)`,
To set an event callback for an object, use `lv_obj_add_event_cb(obj, event_cb, LV_EVENT_..., user_data)`,
To manually send an event to an object, use `lv_event_send(obj, LV_EVENT_..., data)`
To manually send an event to an object, use `lv_event_send(obj, LV_EVENT_..., param)`
Read the [Event overview](/overview/event) to learn more about the events.
## Parts
The widgets can have multiple parts. For example a [Button](/widgets/btn) has only a main part but a [Slider](/widgets/slider) is built from a background, an indicator and a knob.
The name of the parts is constructed like `LV_ + <TYPE> _PART_ <NAME>`. For example `LV_BTN_PART_MAIN` or `LV_SLIDER_PART_KNOB`. The parts are usually used when styles are add to the objects.
Using parts different styles can be assigned to the different parts of the objects.
To learn more about the parts read the related section of the [Style overview](/overview/style#parts).
### States
The object can be in a combinations 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
The states are usually automatically changed by the library as the user presses, releases, focuses etc an object.
However, the states can be changed manually too. To completely overwrite the current state use `lv_obj_set_state(obj, part, LV_STATE...)`.
To set or clear given state (but leave to other states untouched) use `lv_obj_add/clear_state(obj, part, LV_STATE_...)`
In both cases ORed state values can be used as well. E.g. `lv_obj_set_state(obj, part, LV_STATE_PRESSED | LV_PRESSED_CHECKED)`.
To learn more about the states read the related section of the [Style overview](/overview/style#states).
### Style
Be sure to read the [Style overview](/overview/style) first.
Be sure to read the [Style overview](/overview/style). Here or only the most essential functions are described.
To add a style to an object use `lv_obj_add_style(obj, part, &new_style)` function. The Base object use all the rectangle-like style properties.
To remove all styles from an object use `lv_obj_reset_style_list(obj, part)`
A new style can be added to an object with `lv_obj_add_style(obj, part, &new_style)` function. The Base object use all the rectangle-like style properties.
If you modify a style, which is already used by objects, in order to refresh the affected objects you can use either `lv_obj_refresh_style(obj)` on each object using it or
to notify all objects with a given style use `lv_obj_report_style_mod(&style)`. If the parameter of `lv_obj_report_style_mod` is `NULL`, all objects will be notified.
notify all objects with a given style use `lv_obj_report_style_change(&style)`. If the parameter of `lv_obj_report_style_change` is `NULL`, all objects will be notified.
### Attributes
There are some attributes which can be enabled/disabled by `lv_obj_set_...(obj, true/false)`:
### Flags
There are some attributes which can be enabled/disabled by `lv_obj_add/clear_flag(obj, LV_OBJ_FLAG_...)`:
- **hidden** - Hide the object. It will not be drawn and will be considered by input devices as if it doesn't exist., Its children will be hidden too.
- **click** - Allows you to click the object via input devices. If disabled, then click events are passed to the object behind this one. (E.g. [Labels](/widgets/label) are not clickable by default)
- **top** - If enabled then when this object or any of its children is clicked then this object comes to the foreground.
- **drag** - Enable dragging (moving by an input device)
- **drag_dir** - Enable dragging only in specific directions. Can be `LV_DRAG_DIR_HOR/VER/ALL`.
- **drag_throw** - Enable "throwing" with dragging as if the object would have momentum
- **drag_parent** - If enabled then the object's parent will be moved during dragging. It will look like as if the parent is dragged. Checked recursively, so can propagate to grandparents too.
- **parent_event** - Propagate the events to the parents too. Checked recursively, so can propagate to grandparents too.
- **opa_scale_enable** - Enable opacity scaling. See the [#opa-scale](Opa scale) section.
-`LV_OBJ_FLAG_HIDDEN` Make the object hidden. (Like it wasn't there at all)
-`LV_OBJ_FLAG_CLICKABLE` Make the object clickable by the input devices
-`LV_OBJ_FLAG_CLICK_FOCUSABLE` Add focused state to the object when clicked
-`LV_OBJ_FLAG_CHECKABLE` Toggle checked state when the object is clicked
-`LV_OBJ_FLAG_SCROLLABLE` Make the object scrollable
-`LV_OBJ_FLAG_SCROLL_ELASTIC` Allow scrolling inside but with slower speed
-`LV_OBJ_FLAG_SCROLL_MOMENTUM` Make the object scroll further when "thrown"
-`LV_OBJ_FLAG_SCROLL_ONE`Allow scrolling only one snapable children
-`LV_OBJ_FLAG_SCROLL_CHAIN` Allow propagating the scroll to a parent
-`LV_OBJ_FLAG_SCROLL_ON_FOCUS` Automatically scroll object to make it visible when focused
-`LV_OBJ_FLAG_SNAPABLE` If scroll snap is enabled on the parent it can snap to this object
-`LV_OBJ_FLAG_PRESS_LOCK` Keep the object pressed even if the press slid from the object
-`LV_OBJ_FLAG_EVENT_BUBBLE` Propagate the events to the parent too
-`LV_OBJ_FLAG_GESTURE_BUBBLE` Propagate the gestures to the parent
-`LV_OBJ_FLAG_ADV_HITTEST` Allow performing more accurate hit (click) test. E.g. consider rounded corners.
-`LV_OBJ_FLAG_IGNORE_LAYOUT` Make the object position-able by the layouts
-`LV_OBJ_FLAG_FLOATING` Do not scroll the object when the parent scrolls and ignore layout
### Protect
There are some specific actions which happen automatically in the library.
To prevent one or more that kind of actions, you can protect the object against them. The following protections exists:
- **LV_PROTECT_NONE** No protection
- **LV_PROTECT_POS** Prevent automatic positioning (e.g. Layout in [Containers](/widgets/cont))
- **LV_PROTECT_FOLLOW** Prevent the object be followed (make a "line break") in automatic ordering (e.g. Layout in [Containers](/widgets/cont))
- **LV_PROTECT_PARENT** Prevent automatic parent change. (e.g. [Page](/widgets/page) moves the children created on the background to the scrollable)
- **LV_PROTECT_PRESS_LOST** Prevent losing press when the press is slid out of the objects. (E.g. a [Button](/widgets/btn) can be released out of it if it was being pressed)
- **LV_PROTECT_CLICK_FOCUS** Prevent automatically focusing the object if it's in a *Group* and click focus is enabled.
- **LV_PROTECT_CHILD_CHG** Disable the child change signal. Used internally by the library
-`LV_OBJ_FLAG_LAYOUT_1` Custom flag, free to use by layouts
-`LV_OBJ_FLAG_LAYOUT_2` Custom flag, free to use by layouts
The `lv_obj_add/clear_protect(obj, LV_PROTECT_...)` sets/clears the protection. You can use *'OR'ed* values of protection types too.
-`LV_OBJ_FLAG_WIDGET_1` Custom flag, free to use by widget
-`LV_OBJ_FLAG_WIDGET_2` Custom flag, free to use by widget
-`LV_OBJ_FLAG_USER_1` Custom flag, free to use by user
-`LV_OBJ_FLAG_USER_2` Custom flag, free to use by user
-`LV_OBJ_FLAG_USER_3` Custom flag, free to use by user
-`LV_OBJ_FLAG_USER_4` Custom flag, free to use by usersection.
Some examples:
```c
/*Hide on object*/
lv_obj_add_flag(obj, LV_OBJ_FLAG_HIDDEN);
/*Make an obejct non-clickable*/
lv_obj_clear_flag(obj, LV_OBJ_FLAG_CLICKABLE);
```
### Groups
Read the [Input devices overview](/overview/indev) to learn more about the *Groups*.
Once, an object is added to *group* with `lv_group_add_obj(group, obj)` the object's current group can be get with `lv_obj_get_group(obj)`.
`lv_obj_is_focused(obj)` tells if the object is currently focused on its group or not. If the object is not added to a group, `false` will be returned.
Read the [Input devices overview](/overview/indev) to learn more about the *Groups*.
### Extended click area
By default, the objects can be clicked only on their coordinates, however, this area can be extended with `lv_obj_set_ext_click_area(obj, left, right, top, bottom)`.
`left/right/top/bottom` describes how far the clickable area should extend past the default in each direction.
This feature needs to enabled in *lv_conf.h* with `LV_USE_EXT_CLICK_AREA`. The possible values are:
- **LV_EXT_CLICK_AREA_FULL** store all 4 coordinates as `lv_coord_t`
- **LV_EXT_CLICK_AREA_TINY** store only horizontal and vertical coordinates (use the greater value of left/right and top/bottom) as `uint8_t`
- **LV_EXT_CLICK_AREA_OFF** Disable this feature
By default, the objects can be clicked only on their coordinates, however, this area can be extended with `lv_obj_set_ext_click_area(obj, size)`.
## Events
Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
Besides the following special event(s) are sent by the base object:
- `LV_EVENT_VALUE_CHANGED` when the `LV_OBJ_FLAG_CHECKABLE` flag is enabled and the obejct clicked (on transition to/from the checked state)
Learn more about [Events](/overview/event).
## Keys
No *Keys* are processed by the object type.
If `LV_OBJ_FLAG_CHECKABLE` is enabled `LV_KEY_RIGHT` and `LV_KEY_UP` makes the object checked, and `LV_KEY_LEFT` and `LV_KEY_DOWN` makes i unchcked.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst

70
docs/widgets/objmask.md
View File

@@ -1,70 +0,0 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/objmask.md
```
# Object mask (lv_objmask)
## Overview
The *Object mask* is capable of add some mask to drawings when its children is drawn.
## Parts and Styles
The Object mask has only a main part called `LV_OBJMASK_PART_BG` and it uses the typical background style properties.
## Usage
### Adding mask
Before adding a mask to the *Object mask* the mask should be initialized:
```c
lv_draw_mask_<type>_param_t mask_param;
lv_draw_mask_<type>_init(&mask_param, ...);
lv_objmask_mask_t * mask_p = lv_objmask_add_mask(objmask, &mask_param);
```
Lvgl supports the following mask types:
- **line** clip the pixels on the top/bottom left/right of a line. Can be initialized from two points or a point and an angle:
- **angle** keep the pixels only between a given start and end angle
- **radius** keep the pixel only inside a rectangle which can have radius (can for a circle too). Can be inverted to keep the pixel outside of the rectangle.
- **fade** fade vertically (change the pixels opacity according to their y position)
- **map** use an alpha mask (a byte array) to describe the pixels opacity.
The coordinates in the mask are relative to the Object. That is if the object moves the masks move with it.
For the details of the mask *init* function see the [API](#api) documentation below.
### Update mask
AN existing mask can be updated with `lv_objmask_update_mask(objmask, mask_p, new_param)`, where `mask_p` is return value of `lv_objmask_add_mask`.
### Remove mask
A mask can be removed with `lv_objmask_remove_mask(objmask, mask_p)`
## Events
Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
Learn more about [Events](/overview/event).
## Keys
No *Keys* are processed by the object type.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: /lv_examples/src/lv_ex_widgets/lv_ex_objmask/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_objmask.h
:project: lvgl
.. doxygenfile:: lv_draw_mask.h
:project: lvgl
```

111
docs/widgets/page.md
View File

@@ -1,111 +0,0 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/page.md
```
# Page (lv_page)
## Overview
The Page consist of two [Containers](/widgets/cont) on each other:
- a **background**
- a top which is **scrollable**.
## Parts and Styles
The Page's main part is called `LV_PAGE_PART_BG` which is the background of the Page. It uses all the typical background style properties. Using padding will add space on the sides.
The scrollable object can be referenced via the `LV_PAGE_PART_SCRL` part. It also uses all the typical background style properties and padding to add space on the sides.
`LV_LIST_PART_SCROLLBAR` is a virtual part of the background to draw the scroll bars. Uses all the typical background style properties, *size* to set the width of the scroll bars, and *pad_right* and *pad_bottom* to set the spacing.
`LV_LIST_PART_EDGE_FLASH`is also a virtual part of the background to draw a semicircle on the sides when the list can not be scrolled in that direction further. Uses all the typical background properties.
## Usage
The background object can be referenced as the page itself like. E.g. to set the page's width: `lv_obj_set_width(page, 100)`.
If a child is created on the page it will be automatically moved to the scrollable container.
If the scrollable container becomes larger then the background it can be scrolled by dragging (like the lists on smartphones).
By default, the scrollable's has `LV_FIT_MAX` fit in all directions.
It means the scrollable size will be the same as the background's size (minus the padding) while the children are in the background.
But when an object is positioned out of the background the scrollable size will be increased to involve it.
### Scrollbars
Scrollbars can be shown according to four policies:
- `LV_SCRLBAR_MODE_OFF` Never show scroll bars
- `LV_SCRLBAR_MODE_ON` Always show scroll bars
- `LV_SCRLBAR_MODE_DRAG` Show scroll bars when the page is being dragged
- `LV_SCRLBAR_MODE_AUTO` Show scroll bars when the scrollable container is large enough to be scrolled
- `LV_SCRLBAR_MODE_HIDE` Hide the scroll bar temporally
- `LV_SCRLBAR_MODE_UNHIDE` Unhide the previously hidden scrollbar. Recover the original mode too
The scroll bar show policy can be changed by: `lv_page_set_scrlbar_mode(page, SB_MODE)`. The default value is `LV_SCRLBAR_MODE_AUTO`.
### Glue object
A children can be "glued" to the page. In this case, if the page can be scrolled by dragging that object.
It can be enabled by the `lv_page_glue_obj(child, true)`.
### Focus object
An object on a page can be focused with `lv_page_focus(page, child, LV_ANIM_ONO/FF)`.
It will move the scrollable container to show a child. The time of the animation can be set by `lv_page_set_anim_time(page, anim_time)` in milliseconds.
`child` doesn't have to be a direct child of the page. This is it works if the scrollable object is the grandparent of the object too.
### Manual navigation
You can move the scrollable object manually using `lv_page_scroll_hor(page, dist)` and `lv_page_scroll_ver(page, dist)`
### Edge flash
A circle-like effect can be shown if the list reached the most top/bottom/left/right position. `lv_page_set_edge_flash(list, en)` enables this feature.
### Scroll propagation
If the list is created on an other scrollable element (like an other page) and the Page can't be scrolled further the scrolling can be propagated to the parent to continue the scrolling on the parent.
It can be enabled with `lv_page_set_scroll_propagation(list, true)`
## Clean the page
All the object created on the page can be clean with `lv_page_clean(page)`. Note that `lv_obj_clean(page)` doesn't work here because it would delete the scrollable object too.
### Scrollable API
There are functions to directly set/get the scrollable's attributes:
- `lv_page_get_scrl()`
- `lv_page_set_scrl_fit/fint2/fit4()`
- `lv_page_set_scrl_width()`
- `lv_page_set_scrl_height()`
- `lv_page_set_scrl_fit_width()`
- `lv_page_set_scrl_fit_height()`
- `lv_page_set_scrl_layout()`
## Events
Only the [Generic events](../overview/event.html#generic-events) are sent by the object type.
The scrollable object has a default event callback which propagates the following events to the background object:
`LV_EVENT_PRESSED`, `LV_EVENT_PRESSING`, `LV_EVENT_PRESS_LOST`,`LV_EVENT_RELEASED`, `LV_EVENT_SHORT_CLICKED`, `LV_EVENT_CLICKED`, `LV_EVENT_LONG_PRESSED`, `LV_EVENT_LONG_PRESSED_REPEAT`
Learn more about [Events](/overview/event).
##Keys
The following *Keys* are processed by the Page:
- **LV_KEY_RIGHT/LEFT/UP/DOWN** Scroll the page
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: /lv_examples/src/lv_ex_widgets/lv_ex_page/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_page.h
:project: lvgl
```

702
scripts/style_props.md Normal file
View File

@@ -0,0 +1,702 @@
<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>