chore(style): remove the trailing space from all source files (#3188)
Signed-off-by: Xiang Xiao <xiaoxiang@xiaomi.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/arc.md
|
||||
```
|
||||
# Arc (lv_arc)
|
||||
@@ -10,20 +10,20 @@ The Arc consists of a background and a foreground arc. The foreground (indicator
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` Draws a background using the typical background style properties and an arc using the arc style properties. The arc's size and position will respect the *padding* style properties.
|
||||
- `LV_PART_INDICATOR` Draws another arc using the *arc* style properties. Its padding values are interpreted relative to the background arc.
|
||||
- `LV_PART_KNOB` Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width.
|
||||
Larger padding makes it larger, smaller padding makes it smaller.
|
||||
- `LV_PART_INDICATOR` Draws another arc using the *arc* style properties. Its padding values are interpreted relative to the background arc.
|
||||
- `LV_PART_KNOB` Draws a handle on the end of the indicator using all background properties and padding values. With zero padding the knob size is the same as the indicator's width.
|
||||
Larger padding makes it larger, smaller padding makes it smaller.
|
||||
|
||||
## Usage
|
||||
|
||||
### Value and range
|
||||
|
||||
A new value can be set using `lv_arc_set_value(arc, new_value)`.
|
||||
A new value can be set using `lv_arc_set_value(arc, new_value)`.
|
||||
The value is interpreted in a range (minimum and maximum values) which can be modified with `lv_arc_set_range(arc, min, max)`.
|
||||
The default range is 0..100.
|
||||
|
||||
The indicator arc is drawn on the main part's arc. This if the value is set to maximum the indicator arc will cover the entire "background" arc.
|
||||
To set the start and end angle of the background arc use the `lv_arc_set_bg_angles(arc, start_angle, end_angle)` functions or `lv_arc_set_bg_start/end_angle(arc, angle)`.
|
||||
To set the start and end angle of the background arc use the `lv_arc_set_bg_angles(arc, start_angle, end_angle)` functions or `lv_arc_set_bg_start/end_angle(arc, angle)`.
|
||||
|
||||
Zero degrees is at the middle right (3 o'clock) of the object and the degrees are increasing in clockwise direction.
|
||||
The angles should be in the [0;360] range.
|
||||
@@ -42,7 +42,7 @@ The arc can be one of the following modes:
|
||||
The mode can be set by `lv_arc_set_mode(arc, LV_ARC_MODE_...)` and used only if the angle is set by `lv_arc_set_value()` or the arc is adjusted by finger.
|
||||
|
||||
### Change rate
|
||||
If the arc is pressed the current value will set with a limited speed according to the set *change rate*.
|
||||
If the arc is pressed the current value will set with a limited speed according to the set *change rate*.
|
||||
The change rate is defined in degree/second unit and can be set with `lv_arc_set_change_rage(arc, rate)`
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ lv_obj_clear_flag(arc, LV_OBJ_FLAG_CLICKABLE);
|
||||
|
||||
### Advanced hit test
|
||||
|
||||
If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through in the middle. Clicks are recognized only on the ring of the background arc. `lv_obj_set_ext_click_size()` makes the sensitive area larger inside and outside with the given number of pixels.
|
||||
If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through in the middle. Clicks are recognized only on the ring of the background arc. `lv_obj_set_ext_click_size()` makes the sensitive area larger inside and outside with the given number of pixels.
|
||||
|
||||
|
||||
|
||||
@@ -68,12 +68,12 @@ If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` sent when the arc is pressed/dragged to set a new value.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent with the following types:
|
||||
- `LV_ARC_DRAW_PART_BACKGROUND` The background arc.
|
||||
- `LV_ARC_DRAW_PART_BACKGROUND` The background arc.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `p1`: center of the arc
|
||||
- `radius`: radius of the arc
|
||||
- `arc_dsc`
|
||||
- `LV_ARC_DRAW_PART_FOREGROUND` The foreground arc.
|
||||
- `LV_ARC_DRAW_PART_FOREGROUND` The foreground arc.
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `p1`: center of the arc
|
||||
- `radius`: radius of the arc
|
||||
@@ -82,9 +82,9 @@ If the `LV_OBJ_FLAG_ADV_HITTEST` flag is enabled the arc can be clicked through
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: the area of the knob
|
||||
- `rect_dsc`:
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/bar.md
|
||||
```
|
||||
# Bar (lv_bar)
|
||||
|
||||
## Overview
|
||||
|
||||
The bar object has a background and an indicator on it. The width of the indicator is set according to the current value of the bar.
|
||||
The bar object has a background and an indicator on it. The width of the indicator is set according to the current value of the bar.
|
||||
|
||||
Vertical bars can be created if the width of the object is smaller than its height.
|
||||
|
||||
@@ -16,7 +16,7 @@ Not only the end, but also the start value of the bar can be set, which changes
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the bar and it uses the typical background style properties. Adding padding makes the indicator smaller or larger. The `anim_time` style property sets the animation time if the values set with `LV_ANIM_ON`.
|
||||
- `LV_PART_INDICATOR` The indicator itself; also uses all the typical background properties.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Value and range
|
||||
@@ -35,10 +35,10 @@ The bar can be one of the following modes:
|
||||
## Events
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts:
|
||||
- `LV_BAR_DRAW_PART_INDICATOR` The indicator of the bar
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/btn.md
|
||||
```
|
||||
# Button (lv_btn)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/btnmatrix.md
|
||||
```
|
||||
# Button matrix (lv_btnmatrix)
|
||||
@@ -12,7 +12,7 @@ The Button matrix is added to the default group (if one is set). Besides the But
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the button matrix, uses the typical background style properties. `pad_row` and `pad_column` sets the space between the buttons.
|
||||
- `LV_PART_ITEMS` The buttons all use the text and typical background style properties except translations and transformations.
|
||||
- `LV_PART_ITEMS` The buttons all use the text and typical background style properties except translations and transformations.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -27,7 +27,7 @@ So in the example the first row will have 2 buttons each with 50% width and a se
|
||||
|
||||
### Control buttons
|
||||
The buttons' width can be set relative to the other button in the same row with `lv_btnmatrix_set_btn_width(btnm, btn_id, width)`
|
||||
E.g. in a line with two buttons: *btnA, width = 1* and *btnB, width = 2*, *btnA* will have 33 % width and *btnB* will have 66 % width.
|
||||
E.g. in a line with two buttons: *btnA, width = 1* and *btnB, width = 2*, *btnA* will have 33 % width and *btnB* will have 66 % width.
|
||||
It's similar to how the [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) property works in CSS.
|
||||
The width must be in the \[1..7\] range and the default width is 1.
|
||||
|
||||
@@ -45,14 +45,14 @@ In addition to the width, each button can be customized with the following param
|
||||
|
||||
By default, all flags are disabled.
|
||||
|
||||
To set or clear a button's control attribute, use `lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...)` and
|
||||
To set or clear a button's control attribute, use `lv_btnmatrix_set_btn_ctrl(btnm, btn_id, LV_BTNM_CTRL_...)` and
|
||||
`lv_btnmatrix_clear_btn_ctrl(btnm, btn_id, LV_BTNMATRIX_CTRL_...)` respectively. More `LV_BTNM_CTRL_...` values can be OR-ed
|
||||
|
||||
To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...)` and
|
||||
To set/clear the same control attribute for all buttons of a button matrix, use `lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNM_CTRL_...)` and
|
||||
`lv_btnmatrix_clear_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...)`.
|
||||
|
||||
The set a control map for a button matrix (similarly to the map for the text), use `lv_btnmatrix_set_ctrl_map(btnm, ctrl_map)`.
|
||||
An element of `ctrl_map` should look like `ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT | LV_BTNM_CTRL_CHECHKABLE`.
|
||||
An element of `ctrl_map` should look like `ctrl_map[0] = width | LV_BTNM_CTRL_NO_REPEAT | LV_BTNM_CTRL_CHECHKABLE`.
|
||||
The number of elements should be equal to the number of buttons (excluding newlines characters).
|
||||
|
||||
### One check
|
||||
@@ -63,7 +63,7 @@ The "One check" feature can be enabled with `lv_btnmatrix_set_one_checked(btnm,
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_BTNMATRIX_DRAW_PART_BTN` The individual buttons.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`:index of the button being drawn
|
||||
- `id`:index of the button being drawn
|
||||
- `draw_area`: the area of teh button
|
||||
- `rect_dsc`
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/canvas.md
|
||||
```
|
||||
# Canvas (lv_canvas)
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
## Overview
|
||||
|
||||
A Canvas inherits from [Image](/widgets/core/img) where the user can draw anything.
|
||||
Rectangles, texts, images, lines, arcs can be drawn here using lvgl's drawing engine.
|
||||
A Canvas inherits from [Image](/widgets/core/img) where the user can draw anything.
|
||||
Rectangles, texts, images, lines, arcs can be drawn here using lvgl's drawing engine.
|
||||
Additionally "effects" can be applied, such as rotation, zoom and blur.
|
||||
|
||||
|
||||
@@ -19,31 +19,31 @@ Additionally "effects" can be applied, such as rotation, zoom and blur.
|
||||
|
||||
### Buffer
|
||||
The Canvas needs a buffer in which stores the drawn image.
|
||||
To assign a buffer to a Canvas, use `lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)`.
|
||||
To assign a buffer to a Canvas, use `lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...)`.
|
||||
Where `buffer` is a static buffer (not just a local variable) to hold the image of the canvas.
|
||||
For example,
|
||||
`static lv_color_t buffer[LV_CANVAS_BUF_SIZE_TRUE_COLOR(width, height)]`.
|
||||
`static lv_color_t buffer[LV_CANVAS_BUF_SIZE_TRUE_COLOR(width, height)]`.
|
||||
`LV_CANVAS_BUF_SIZE_...` macros help to determine the size of the buffer with different color formats.
|
||||
|
||||
The canvas supports all the built-in color formats like `LV_IMG_CF_TRUE_COLOR` or `LV_IMG_CF_INDEXED_2BIT`.
|
||||
The canvas supports all the built-in color formats like `LV_IMG_CF_TRUE_COLOR` or `LV_IMG_CF_INDEXED_2BIT`.
|
||||
See the full list in the [Color formats](/overview/image.html#color-formats) section.
|
||||
|
||||
### Indexed colors
|
||||
For `LV_IMG_CF_INDEXED_1/2/4/8` color formats a palette needs to be
|
||||
For `LV_IMG_CF_INDEXED_1/2/4/8` color formats a palette needs to be
|
||||
initialized with `lv_canvas_set_palette(canvas, 3, LV_COLOR_RED)`. It sets pixels with *index=3* to red.
|
||||
|
||||
### Drawing
|
||||
To set a pixel's color on the canvas, use `lv_canvas_set_px_color(canvas, x, y, LV_COLOR_RED)`.
|
||||
With `LV_IMG_CF_INDEXED_...` the index of the color needs to be passed as color.
|
||||
With `LV_IMG_CF_INDEXED_...` the index of the color needs to be passed as color.
|
||||
E.g. `lv_color_t c; c.full = 3;`
|
||||
|
||||
To set a pixel's opacity with `LV_IMG_CF_TRUE_COLOR_ALPHA` or `LV_IMG_CF_ALPHA_...` format on the canvas, use `lv_canvas_set_px_opa(canvas, x, y, opa)`.
|
||||
|
||||
|
||||
`lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)` fills the whole canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. `LV_IMG_CF_ALPHA_2BIT`) the color will be ignored.
|
||||
`lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50)` fills the whole canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. `LV_IMG_CF_ALPHA_2BIT`) the color will be ignored.
|
||||
Similarly, if opacity is not supported (e.g. `LV_IMG_CF_TRUE_COLOR`) it will be ignored.
|
||||
|
||||
An array of pixels can be copied to the canvas with `lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)`.
|
||||
An array of pixels can be copied to the canvas with `lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height)`.
|
||||
The color format of the buffer and the canvas need to match.
|
||||
|
||||
To draw something to the canvas use
|
||||
@@ -59,7 +59,7 @@ To draw something to the canvas use
|
||||
The draw function can draw to any color format. For example, it's possible to draw a text to an `LV_IMG_VF_ALPHA_8BIT` canvas and use the result image as a [draw mask](/overview/drawing) later.
|
||||
|
||||
### Transformations
|
||||
`lv_canvas_transform()` can be used to rotate and/or scale the image of an image and store the result on the canvas.
|
||||
`lv_canvas_transform()` can be used to rotate and/or scale the image of an image and store the result on the canvas.
|
||||
The function needs the following parameters:
|
||||
- `canvas` pointer to a canvas object to store the result of the transformation.
|
||||
- `img pointer` to an image descriptor to transform. Can be the image descriptor of another canvas too (`lv_canvas_get_img()`).
|
||||
@@ -70,16 +70,16 @@ The function needs the following parameters:
|
||||
- `pivot_x` pivot X of rotation. Relative to the source canvas. Set to `source width / 2` to rotate around the center
|
||||
- `pivot_y` pivot Y of rotation. Relative to the source canvas. Set to `source height / 2` to rotate around the center
|
||||
- `antialias` true: apply anti-aliasing during the transformation. Looks better but slower.
|
||||
|
||||
|
||||
Note that a canvas can't be rotated on itself. You need a source and destination canvas or image.
|
||||
|
||||
### Blur
|
||||
A given area of the canvas can be blurred horizontally with `lv_canvas_blur_hor(canvas, &area, r)` or vertically with `lv_canvas_blur_ver(canvas, &area, r)`.
|
||||
A given area of the canvas can be blurred horizontally with `lv_canvas_blur_hor(canvas, &area, r)` or vertically with `lv_canvas_blur_ver(canvas, &area, r)`.
|
||||
`r` is the radius of the blur (greater value means more intensive burring). `area` is the area where the blur should be applied (interpreted relative to the canvas).
|
||||
|
||||
## Events
|
||||
No special events are sent by canvas objects.
|
||||
The same events are sent as for the
|
||||
The same events are sent as for the
|
||||
|
||||
See the events of the [Images](/widgets/core/img) too.
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/checkbox.md
|
||||
```
|
||||
# Checkbox (lv_checkbox)
|
||||
@@ -10,12 +10,12 @@
|
||||
The Checkbox object is created from a "tick box" and a label. When the Checkbox is clicked the tick box is toggled.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical background style properties.
|
||||
- `LV_PART_MAIN` The is the background of the Checkbox and it uses the text and all the typical background style properties.
|
||||
`pad_column` adjusts the spacing between the tickbox and the label
|
||||
- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical background style properties.
|
||||
- `LV_PART_INDICATOR` The "tick box" is a square that uses all the typical background style properties.
|
||||
By default, its size is equal to the height of the main part's font. Padding properties make the tick box larger in the respective directions.
|
||||
|
||||
The Checkbox is added to the default group (if it is set).
|
||||
The Checkbox is added to the default group (if it is set).
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -23,7 +23,7 @@ The Checkbox is added to the default group (if it is set).
|
||||
### Text
|
||||
The text can be modified with the `lv_checkbox_set_text(cb, "New text")` function and will be dynamically allocated.
|
||||
|
||||
To set a static text,
|
||||
To set a static text,
|
||||
use `lv_checkbox_set_static_text(cb, txt)`. This way, only a pointer to `txt` will be stored. The text then shouldn't be deallocated while the checkbox exists.
|
||||
|
||||
### Check, uncheck, disable
|
||||
@@ -38,7 +38,7 @@ lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /*Make the checkbox
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the checkbox is toggled.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_CHECKBOX_DRAW_PART_BOX` The tickbox of the checkbox
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `part`: `LV_PART_INDICATOR`
|
||||
- `draw_area`: the area of the tickbox
|
||||
- `rect_dsc`
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/dropdown.md
|
||||
```
|
||||
# Drop-down list (lv_dropdown)
|
||||
@@ -7,10 +7,10 @@
|
||||
|
||||
## Overview
|
||||
|
||||
The drop-down list allows the user to select one value from a list.
|
||||
The drop-down list allows the user to select one value from a list.
|
||||
|
||||
The drop-down list is closed by default and displays a single value or a predefined text.
|
||||
When activated (by click on the drop-down list), a list is created from which the user may select one option.
|
||||
The drop-down list is closed by default and displays a single value or a predefined text.
|
||||
When activated (by click on the drop-down list), a list is created from which the user may select one option.
|
||||
When the user selects a new value, the list is deleted again.
|
||||
|
||||
The Drop-down list is added to the default group (if it is set). Besides the Drop-down list is an editable object to allow selecting an option with encoder navigation too.
|
||||
@@ -25,9 +25,9 @@ The Dropdown widget is built from the elements: "button" and "list" (both not re
|
||||
The button goes to `LV_STATE_CHECKED` when it's opened.
|
||||
|
||||
### List
|
||||
- `LV_PART_MAIN` The list itself. Uses the typical background properties. `max_height` can be used to limit the height of the list.
|
||||
- `LV_PART_MAIN` The list itself. Uses the typical background properties. `max_height` can be used to limit the height of the list.
|
||||
- `LV_PART_SCROLLBAR` The scrollbar background, border, shadow properties and width (for its own width) and right padding for the spacing on the right.
|
||||
- `LV_PART_SELECTED` Refers to the currently pressed, checked or pressed+checked option. Also uses the typical background properties.
|
||||
- `LV_PART_SELECTED` Refers to the currently pressed, checked or pressed+checked option. Also uses the typical background properties.
|
||||
|
||||
The list is hidden/shown on open/close. To add styles to it use `lv_dropdown_get_list(dropdown)` to get the list object. For example:
|
||||
|
||||
@@ -36,8 +36,8 @@ lv_obj_t * list = lv_dropdown_get_list(dropdown) /*Get the list*/
|
||||
lv_obj_add_style(list, &my_style, ...) /*Add the styles to the list*/}`
|
||||
```
|
||||
|
||||
Alternatively the theme can be extended with the new styles.
|
||||
|
||||
Alternatively the theme can be extended with the new styles.
|
||||
|
||||
## Usage
|
||||
|
||||
## Overview
|
||||
@@ -47,7 +47,7 @@ Options are passed to the drop-down list as a string with `lv_dropdown_set_optio
|
||||
|
||||
The `lv_dropdown_add_option(dropdown, "New option", pos)` function inserts a new option to `pos` index.
|
||||
|
||||
To save memory the options can set from a static(constant) string too with `lv_dropdown_set_static_options(dropdown, options)`.
|
||||
To save memory the options can set from a static(constant) string too with `lv_dropdown_set_static_options(dropdown, options)`.
|
||||
In this case the options string should be alive while the drop-down list exists and `lv_dropdown_add_option` can't be used
|
||||
|
||||
You can select an option manually with `lv_dropdown_set_selected(dropdown, id)`, where `id` is the index of an option.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/img.md
|
||||
```
|
||||
# Image (lv_img)
|
||||
@@ -35,7 +35,7 @@ To set an image sourced from a file, use `lv_img_set_src(img, "S:folder1/my_img.
|
||||
You can also set a symbol similarly to [Labels](/widgets/core/label). In this case, the image will be rendered as text according to the *font* specified in the style. It enables to use of light-weight monochrome "letters" instead of real images. You can set symbol like `lv_img_set_src(img1, LV_SYMBOL_OK)`.
|
||||
|
||||
### Label as an image
|
||||
Images and labels are sometimes used to convey the same thing. For example, to describe what a button does.
|
||||
Images and labels are sometimes used to convey the same thing. For example, to describe what a button does.
|
||||
Therefore, images and labels are somewhat interchangeable, that is the images can display texts by using `LV_SYMBOL_DUMMY` as the prefix of the text. For example, `lv_img_set_src(img, LV_SYMBOL_DUMMY "Some text")`.
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@ Using the offset parameter a [Texture atlas](https://en.wikipedia.org/wiki/Textu
|
||||
|
||||
## Transformations
|
||||
|
||||
Using the `lv_img_set_zoom(img, factor)` the images will be zoomed. Set `factor` to `256` or `LV_IMG_ZOOM_NONE` to disable zooming.
|
||||
Using the `lv_img_set_zoom(img, factor)` the images will be zoomed. Set `factor` to `256` or `LV_IMG_ZOOM_NONE` to disable zooming.
|
||||
A larger value enlarges the images (e.g. `512` double size), a smaller value shrinks it (e.g. `128` half size).
|
||||
Fractional scale works as well. E.g. `281` for 10% enlargement.
|
||||
|
||||
@@ -87,16 +87,16 @@ By default, the pivot point of the rotation is the center of the image. It can b
|
||||
|
||||
The quality of the transformation can be adjusted with `lv_img_set_antialias(img, true/false)`. With enabled anti-aliasing the transformations are higher quality but slower.
|
||||
|
||||
The transformations require the whole image to be available. Therefore indexed images (`LV_IMG_CF_INDEXED_...`), alpha only images (`LV_IMG_CF_ALPHA_...`) or images from files can not be transformed.
|
||||
The transformations require the whole image to be available. Therefore indexed images (`LV_IMG_CF_INDEXED_...`), alpha only images (`LV_IMG_CF_ALPHA_...`) or images from files can not be transformed.
|
||||
In other words transformations work only on true color images stored as C array, or if a custom [Image decoder](/overview/images#image-edecoder) returns the whole image.
|
||||
|
||||
Note that the real coordinates of image objects won't change during transformation. That is `lv_obj_get_width/height/x/y()` will return the original, non-zoomed coordinates.
|
||||
|
||||
### Size mode
|
||||
|
||||
By default, when the image is zoomed or rotated the real coordinates of the image object are not changed.
|
||||
The larger content simply overflows the object's boundaries.
|
||||
It also means the layouts are not affected the by the transformations.
|
||||
By default, when the image is zoomed or rotated the real coordinates of the image object are not changed.
|
||||
The larger content simply overflows the object's boundaries.
|
||||
It also means the layouts are not affected the by the transformations.
|
||||
|
||||
If you need the object size to be updated to the transformed size set `lv_img_set_size_mode(img, LV_IMG_SIZE_MODE_REAL)`. (The previous mode is the default and called `LV_IMG_SIZE_MODE_VIRTUAL`).
|
||||
In this case if the width/height of the object is set to `LV_SIZE_CONTENT` the object's size will be set to the zoomed and rotated size.
|
||||
@@ -104,8 +104,8 @@ If an explicit size is set then the overflowing content will be cropped.
|
||||
|
||||
### Rounded image
|
||||
|
||||
You can use `lv_obj_set_style_radius` to set radius to an image, and enable `lv_obj_set_style_clip_corner` to clip the
|
||||
content to rounded rectangle or circular shape. Please note this will have some negative performance impact to CPU
|
||||
You can use `lv_obj_set_style_radius` to set radius to an image, and enable `lv_obj_set_style_clip_corner` to clip the
|
||||
content to rounded rectangle or circular shape. Please note this will have some negative performance impact to CPU
|
||||
based renderers.
|
||||
|
||||
## Events
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/object-types/index.md
|
||||
```
|
||||
# Core widgets
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
arc
|
||||
bar
|
||||
btn
|
||||
@@ -24,7 +24,7 @@
|
||||
switch
|
||||
table
|
||||
textarea
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/line.md
|
||||
```
|
||||
# Line (lv_line)
|
||||
@@ -12,14 +12,14 @@ The Line object is capable of drawing straight lines between a set of points.
|
||||
|
||||
## Usage
|
||||
|
||||
### Set points
|
||||
The points have to be stored in an `lv_point_t` array and passed to the object by the `lv_line_set_points(lines, point_array, point_cnt)` function.
|
||||
### Set points
|
||||
The points have to be stored in an `lv_point_t` array and passed to the object by the `lv_line_set_points(lines, point_array, point_cnt)` function.
|
||||
|
||||
### Auto-size
|
||||
By default, the Line's width and height are set to `LV_SIZE_CONTENT`. This means it will automatically set its size to fit all the points. If the size is set explicitly, parts on the line may not be visible.
|
||||
|
||||
### Invert y
|
||||
By default, the *y == 0* point is in the top of the object. It might be counter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case, *y == 0* will be the bottom of the object.
|
||||
By default, the *y == 0* point is in the top of the object. It might be counter-intuitive in some cases so the y coordinates can be inverted with `lv_line_set_y_invert(line, true)`. In this case, *y == 0* will be the bottom of the object.
|
||||
*y invert* is disabled by default.
|
||||
|
||||
## Events
|
||||
@@ -42,11 +42,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_line.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/roller.md
|
||||
```
|
||||
# Roller (lv_roller)
|
||||
|
||||
## Overview
|
||||
|
||||
Roller allows you to simply select one option from a list by scrolling.
|
||||
Roller allows you to simply select one option from a list by scrolling.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the roller uses all the typical background properties and text style properties. `style_text_line_space` adjusts the space between the options.
|
||||
- `LV_PART_MAIN` The background of the roller uses all the typical background properties and text style properties. `style_text_line_space` adjusts the space between the options.
|
||||
When the Roller is scrolled and doesn't stop exactly on an option it will scroll to the nearest valid option automatically in `anim_time` milliseconds as specified in the style.
|
||||
- `LV_PART_SELECTED` The selected option in the middle. Besides the typical background properties it uses the text style properties to change the appearance of the text in the selected area.
|
||||
|
||||
@@ -30,7 +30,7 @@ To get the *index* of the currently selected option use `lv_roller_get_selected(
|
||||
### Visible rows
|
||||
The number of visible rows can be adjusted with `lv_roller_set_visible_row_count(roller, num)`.
|
||||
|
||||
This function calculates the height with the current style. If the font, line space, border width, etc. of the roller changes this function needs to be called again.
|
||||
This function calculates the height with the current style. If the font, line space, border width, etc. of the roller changes this function needs to be called again.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a new option is selected.
|
||||
@@ -42,7 +42,7 @@ Learn more about [Events](/overview/event).
|
||||
## Keys
|
||||
- `LV_KEY_RIGHT/DOWN` Select the next option
|
||||
- `LV_KEY_LEFT/UP` Select the previous option
|
||||
- `LY_KEY_ENTER` Apply the selected option (Send `LV_EVENT_VALUE_CHANGED` event)
|
||||
- `LY_KEY_ENTER` Apply the selected option (Send `LV_EVENT_VALUE_CHANGED` event)
|
||||
|
||||
## Example
|
||||
|
||||
@@ -52,11 +52,11 @@ Learn more about [Events](/overview/event).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_roller.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/slider.md
|
||||
```
|
||||
# Slider (lv_slider)
|
||||
@@ -9,10 +9,10 @@
|
||||
The Slider object looks like a [Bar](/widgets/core/bar) supplemented with a knob. The knob can be dragged to set a value. Just like Bar, Slider can be vertical or horizontal.
|
||||
|
||||
|
||||
## Parts and Styles
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the slider. Uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
|
||||
- `LV_PART_INDICATOR` The indicator that shows the current state of the slider. Also uses all the typical background style properties.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at the current value. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -30,22 +30,22 @@ The slider can be one of the following modes:
|
||||
The mode can be changed with `lv_slider_set_mode(slider, LV_SLIDER_MODE_...)`
|
||||
|
||||
### Knob-only mode
|
||||
Normally, the slider can be adjusted either by dragging the knob, or by clicking on the slider bar.
|
||||
Normally, the slider can be adjusted either by dragging the knob, or by clicking on the slider bar.
|
||||
In the latter case the knob moves to the point clicked and slider value changes accordingly. In some cases it is desirable to set the slider to react on dragging the knob only. This feature is enabled by adding the `LV_OBJ_FLAG_ADV_HITTEST`: `lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST)`.
|
||||
|
||||
The extended click area (set by `lv_obj_set_ext_click_area(slider, value)`) increases to knob's click area.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent while the slider is being dragged or changed with keys.
|
||||
The event is sent continuously while the slider is dragged and once when released. Use `lv_slider_is_dragged` to determine whether the Slider is still being dragged or has just been released.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following parts.
|
||||
- `LV_SLIDER_DRAW_PART_KNOB` The main (right) knob of the slider
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `id`: 0
|
||||
- `LV_SLIDER_DRAW_PART_KNOB` The left knob of the slider
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `part`: `LV_PART_KNOB`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `id`: 1
|
||||
@@ -68,11 +68,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_slider.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/switch.md
|
||||
```
|
||||
|
||||
@@ -7,20 +7,20 @@
|
||||
|
||||
## Overview
|
||||
|
||||
The Switch looks like a little slider and can be used to turn something on and off.
|
||||
The Switch looks like a little slider and can be used to turn something on and off.
|
||||
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the switch uses all the typical background style properties. `padding` makes the indicator smaller in the respective direction.
|
||||
- `LV_PART_INDICATOR` The indicator that shows the current state of the switch. Also uses all the typical background style properties.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at left or right side of the indicator. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
- `LV_PART_KNOB` A rectangle (or circle) drawn at left or right side of the indicator. Also uses all the typical background properties to describe the knob(s). By default, the knob is square (with an optional corner radius) with side length equal to the smaller side of the slider. The knob can be made larger with the `padding` values. Padding values can be asymmetric too.
|
||||
|
||||
## Usage
|
||||
|
||||
### Change state
|
||||
The switch uses the standard `LV_STATE_CHECKED` state.
|
||||
|
||||
To get the current state of the switch (with `true` being on), use `lv_obj_has_state(switch, LV_STATE_CHECKED)`.
|
||||
To get the current state of the switch (with `true` being on), use `lv_obj_has_state(switch, LV_STATE_CHECKED)`.
|
||||
|
||||
Call `lv_obj_add_state(switch, LV_STATE_CHECKED)` to turn it on, or `lv_obj_clear_state(switch, LV_STATE_CHECKED)` to turn it off.
|
||||
|
||||
@@ -35,7 +35,7 @@ Learn more about [Events](/overview/event).
|
||||
## Keys
|
||||
- `LV_KEY_UP/RIGHT` Turns on the slider
|
||||
- `LV_KEY_DOWN/LEFT` Turns off the slider
|
||||
- `LV_KEY_ENTER` Toggles the switch
|
||||
- `LV_KEY_ENTER` Toggles the switch
|
||||
|
||||
Learn more about [Keys](/overview/indev).
|
||||
|
||||
@@ -47,11 +47,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_switch.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/table.md
|
||||
```
|
||||
# Table (lv_table)
|
||||
@@ -27,7 +27,7 @@ The cells can store only text so numbers need to be converted to text before dis
|
||||
|
||||
Line breaks can be used in the text like `"Value\n60.3"`.
|
||||
|
||||
New rows and columns are automatically added is required
|
||||
New rows and columns are automatically added is required
|
||||
|
||||
### Rows and Columns
|
||||
|
||||
@@ -44,7 +44,7 @@ The height is calculated automatically from the cell styles (font, padding etc)
|
||||
Cells can be merged horizontally with `lv_table_add_cell_ctrl(table, row, col, LV_TABLE_CELL_CTRL_MERGE_RIGHT)`. To merge more adjacent cells call this function for each cell.
|
||||
|
||||
### Scroll
|
||||
If the label's width or height is set to `LV_SIZE_CONTENT` that size will be used to show the whole table in the respective direction.
|
||||
If the label's width or height is set to `LV_SIZE_CONTENT` that size will be used to show the whole table in the respective direction.
|
||||
E.g. `lv_obj_set_size(table, LV_SIZE_CONTENT, LV_SIZE_CONTENT)` automatically sets the table size to show all the columns and rows.
|
||||
|
||||
If the width or height is set to a smaller number than the "intrinsic" size then the table becomes scrollable.
|
||||
@@ -53,11 +53,11 @@ If the width or height is set to a smaller number than the "intrinsic" size then
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a new cell is selected with keys.
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent for the following types:
|
||||
- `LV_TABLE_DRAW_PART_CELL` The individual cells of the table
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `draw_area`: area of the indicator
|
||||
- `rect_dsc`
|
||||
- `label_dsc`
|
||||
- `id`: current row × col count + current column
|
||||
- `id`: current row × col count + current column
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
@@ -85,11 +85,11 @@ Learn more about [Keys](/overview/indev).
|
||||
### MicroPython
|
||||
No examples yet.
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_table.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/core/textarea.md
|
||||
```
|
||||
# Text area (lv_textarea)
|
||||
|
||||
## Overview
|
||||
|
||||
The Text Area is a [Base object](widgets/obj) with a [Label](/widgets/core/label) and a cursor on it.
|
||||
Texts or characters can be added to it.
|
||||
The Text Area is a [Base object](widgets/obj) with a [Label](/widgets/core/label) and a cursor on it.
|
||||
Texts or characters can be added to it.
|
||||
Long lines are wrapped and when the text becomes long enough the Text area can be scrolled.
|
||||
|
||||
One line mode and password modes are supported.
|
||||
@@ -16,9 +16,9 @@ One line mode and password modes are supported.
|
||||
- `LV_PART_MAIN` The background of the text area. Uses all the typical background style properties and the text related style properties including `text_align` to align the text to the left, right or center.
|
||||
- `LV_PART_SCROLLBAR` The scrollbar that is shown when the text is too long.
|
||||
- `LV_PART_SELECTED` Determines the style of the [selected text](/widgets/core/label.html#text-selection). Only `text_color` and `bg_color` style properties can be used. `bg_color` should be set directly on the label of the text area.
|
||||
- `LV_PART_CURSOR` Marks the position where the characters are inserted. The cursor's area is always the bounding box of the current character.
|
||||
A block cursor can be created by adding a background color and background opacity to `LV_PART_CURSOR`'s style. The create line cursor leave the cursor transparent and set a left border.
|
||||
The `anim_time` style property sets the cursor's blink time.
|
||||
- `LV_PART_CURSOR` Marks the position where the characters are inserted. The cursor's area is always the bounding box of the current character.
|
||||
A block cursor can be created by adding a background color and background opacity to `LV_PART_CURSOR`'s style. The create line cursor leave the cursor transparent and set a left border.
|
||||
The `anim_time` style property sets the cursor's blink time.
|
||||
- `LV_PART_TEXTAREA_PLACEHOLDER` Unique to Text Area, allows styling the placeholder text.
|
||||
|
||||
## Usage
|
||||
@@ -40,13 +40,13 @@ A placeholder text can be specified - which is displayed when the Text area is e
|
||||
|
||||
### Delete character
|
||||
|
||||
To delete a character from the left of the current cursor position use `lv_textarea_del_char(textarea)`.
|
||||
To delete a character from the left of the current cursor position use `lv_textarea_del_char(textarea)`.
|
||||
To delete from the right use `lv_textarea_del_char_forward(textarea)`
|
||||
|
||||
### Move the cursor
|
||||
|
||||
The cursor position can be modified directly like `lv_textarea_set_cursor_pos(textarea, 10)`.
|
||||
The `0` position means "before the first characters",
|
||||
The cursor position can be modified directly like `lv_textarea_set_cursor_pos(textarea, 10)`.
|
||||
The `0` position means "before the first characters",
|
||||
`LV_TA_CURSOR_LAST` means "after the last character"
|
||||
|
||||
You can step the cursor with
|
||||
@@ -58,16 +58,16 @@ You can step the cursor with
|
||||
If `lv_textarea_set_cursor_click_pos(textarea, true)` is applied the cursor will jump to the position where the Text area was clicked.
|
||||
|
||||
### Hide the cursor
|
||||
The cursor is always visible, however it can be a good idea to style it to be visible only in `LV_STATE_FOCUSED` state.
|
||||
The cursor is always visible, however it can be a good idea to style it to be visible only in `LV_STATE_FOCUSED` state.
|
||||
|
||||
### One line mode
|
||||
The Text area can be configured to be on a single line with `lv_textarea_set_one_line(textarea, true)`.
|
||||
In this mode the height is set automatically to show only one line, line break characters are ignored, and word wrap is disabled.
|
||||
The Text area can be configured to be on a single line with `lv_textarea_set_one_line(textarea, true)`.
|
||||
In this mode the height is set automatically to show only one line, line break characters are ignored, and word wrap is disabled.
|
||||
|
||||
### Password mode
|
||||
The text area supports password mode which can be enabled with `lv_textarea_set_password_mode(textarea, true)`.
|
||||
The text area supports password mode which can be enabled with `lv_textarea_set_password_mode(textarea, true)`.
|
||||
|
||||
If the `•` ([Bullet, U+2022](http://www.fileformat.info/info/unicode/char/2022/index.htm)) character exists in the font, the entered characters are converted to it after some time or when a new character is entered.
|
||||
If the `•` ([Bullet, U+2022](http://www.fileformat.info/info/unicode/char/2022/index.htm)) character exists in the font, the entered characters are converted to it after some time or when a new character is entered.
|
||||
If `•` not exists, `*` will be used.
|
||||
|
||||
In password mode `lv_textarea_get_text(textarea)` returns the actual text entered, not the bullet characters.
|
||||
@@ -75,28 +75,28 @@ In password mode `lv_textarea_get_text(textarea)` returns the actual text entere
|
||||
The visibility time can be adjusted with `LV_TEXTAREA_DEF_PWD_SHOW_TIME)` in `lv_conf.h`.
|
||||
|
||||
### Accepted characters
|
||||
You can set a list of accepted characters with `lv_textarea_set_accepted_chars(textarea, "0123456789.+-")`.
|
||||
Other characters will be ignored.
|
||||
You can set a list of accepted characters with `lv_textarea_set_accepted_chars(textarea, "0123456789.+-")`.
|
||||
Other characters will be ignored.
|
||||
|
||||
### Max text length
|
||||
The maximum number of characters can be limited with `lv_textarea_set_max_length(textarea, max_char_num)`
|
||||
|
||||
|
||||
### Very long texts
|
||||
If there is a very long text in the Text area (e.g. > 20k characters), scrolling and drawing might be slow.
|
||||
However, by enabling `LV_LABEL_LONG_TXT_HINT 1` in `lv_conf.h` the performance can be hugely improved.
|
||||
This will save some additional information about the label to speed up its drawing.
|
||||
If there is a very long text in the Text area (e.g. > 20k characters), scrolling and drawing might be slow.
|
||||
However, by enabling `LV_LABEL_LONG_TXT_HINT 1` in `lv_conf.h` the performance can be hugely improved.
|
||||
This will save some additional information about the label to speed up its drawing.
|
||||
Using `LV_LABEL_LONG_TXT_HINT` the scrolling and drawing will as fast as with "normal" short texts.
|
||||
|
||||
### Select text
|
||||
Any part of the text can be selected if enabled with `lv_textarea_set_text_selection(textarea, true)`.
|
||||
This works much like when you select text on your PC with your mouse.
|
||||
Any part of the text can be selected if enabled with `lv_textarea_set_text_selection(textarea, true)`.
|
||||
This works much like when you select text on your PC with your mouse.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_INSERT` Sent right before a character or text is inserted.
|
||||
The event parameter is the text about to be inserted. `lv_textarea_set_insert_replace(textarea, "New text")` replaces the text to insert.
|
||||
- `LV_EVENT_INSERT` Sent right before a character or text is inserted.
|
||||
The event parameter is the text about to be inserted. `lv_textarea_set_insert_replace(textarea, "New text")` replaces the text to insert.
|
||||
The new text cannot be in a local variable which is destroyed when the event callback exists. `""` means do not insert anything.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the content of the text area has been changed.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the content of the text area has been changed.
|
||||
- `LV_EVENT_READY` Sent when `LV_KEY_ENTER` is pressed (or sent) to a one line text area.
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
@@ -117,11 +117,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_textarea.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/animimg.md
|
||||
```
|
||||
# Animation Image (lv_animimg)
|
||||
@@ -13,13 +13,13 @@ You can specify a duration and repeat count.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` A background rectangle that uses the typical background style properties and the image itself using the image style properties.
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Image sources
|
||||
To set the image in a state, use the `lv_animimg_set_src(imgbtn, dsc[], num)`.
|
||||
|
||||
|
||||
|
||||
## Events
|
||||
No special events are sent by image objects.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/calendar.md
|
||||
```
|
||||
# Calendar (lv_calendar)
|
||||
@@ -7,8 +7,8 @@
|
||||
## Overview
|
||||
|
||||
The Calendar object is a classic calendar which can:
|
||||
- show the days of any month in a 7x7 matrix
|
||||
- Show the name of the days
|
||||
- show the days of any month in a 7x7 matrix
|
||||
- Show the name of the days
|
||||
- highlight the current day (today)
|
||||
- highlight any user-defined dates
|
||||
|
||||
@@ -45,7 +45,7 @@ The name of the days can be adjusted with `lv_calendar_set_day_names(calendar, d
|
||||
Only the pointer of the day names is saved so the elements should be static, global or constant variables.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent if a date is clicked. `lv_calendar_get_pressed_date(calendar, &date)` set `date` to the date currently being pressed. Returns `LV_RES_OK` if there is a valid pressed date, else `LV_RES_INV`.
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent if a date is clicked. `lv_calendar_get_pressed_date(calendar, &date)` set `date` to the date currently being pressed. Returns `LV_RES_OK` if there is a valid pressed date, else `LV_RES_INV`.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
@@ -66,7 +66,7 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
### Drop-down
|
||||
`lv_calendar_header_dropdown_create(calendar)` creates a header that contains 2 drop-drown lists: one for the year and another for the month.
|
||||
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/chart.md
|
||||
```
|
||||
# Chart (lv_chart)
|
||||
@@ -20,7 +20,7 @@ Charts can have:
|
||||
- `LV_PART_SCROLLBAR` The scrollbar used if the chart is zoomed. See the [Base object](/widgets/obj)'s documentation for details.
|
||||
- `LV_PART_ITEMS` Refers to the line or bar series.
|
||||
- Line chart: The *line* properties are used by the lines. `width`, `height`, `bg_color` and `radius` is used to set the appearance of points.
|
||||
- Bar chart: The typical background properties are used to style the bars.
|
||||
- Bar chart: The typical background properties are used to style the bars.
|
||||
- `LV_PART_INDICATOR` Refers to the points on line and scatter chart (small circles or squares).
|
||||
- `LV_PART_CURSOR` *Line* properties are used to style the cursors. `width`, `height`, `bg_color` and `radius` are used to set the appearance of points.
|
||||
- `LV_PART_TICKS` *Line* and *Text* style properties are used to style the ticks
|
||||
@@ -35,7 +35,7 @@ The following data display types exist:
|
||||
- `LV_CHART_TYPE_BAR` - Draw bars.
|
||||
- `LV_CHART_TYPE_SCATTER` - X/Y chart drawing point's and lines between the points. .
|
||||
|
||||
You can specify the display type with `lv_chart_set_type(chart, LV_CHART_TYPE_...)`.
|
||||
You can specify the display type with `lv_chart_set_type(chart, LV_CHART_TYPE_...)`.
|
||||
|
||||
|
||||
### Data series
|
||||
@@ -49,9 +49,9 @@ You can add any number of series to the charts by `lv_chart_add_series(chart, co
|
||||
|
||||
`axis` tells which axis's range should be used te scale the values.
|
||||
|
||||
`lv_chart_set_ext_y_array(chart, ser, value_array)` makes the chart use an external array for the given series.
|
||||
`lv_chart_set_ext_y_array(chart, ser, value_array)` makes the chart use an external array for the given series.
|
||||
`value_array` should look like this: `lv_coord_t * value_array[num_points]`. The array size needs to be large enough to hold all the points of that series.
|
||||
The array's pointer will be saved in the chart so it needs to be global, static or dynamically allocated.
|
||||
The array's pointer will be saved in the chart so it needs to be global, static or dynamically allocated.
|
||||
Note: you should call `lv_chart_refresh(chart)` after the external data source has been updated to update the chart.
|
||||
|
||||
The value array of a series can be obtained with `lv_chart_get_y_array(chart, ser)`, which can be used with `ext_array` or *normal array*s.
|
||||
@@ -79,22 +79,22 @@ The update mode can be changed with `lv_chart_set_update_mode(chart, LV_CHART_UP
|
||||
|
||||
### Number of points
|
||||
The number of points in the series can be modified by `lv_chart_set_point_count(chart, point_num)`. The default value is 10.
|
||||
Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough.
|
||||
Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough.
|
||||
|
||||
#### Handling large number of points
|
||||
On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective.
|
||||
On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective.
|
||||
If there are, let's say, 10 points to a pixel, LVGL searches the smallest and the largest value and draws a vertical lines between them to ensure no peaks are missed.
|
||||
|
||||
### Vertical range
|
||||
You can specify the minimum and maximum values in y-direction with `lv_chart_set_range(chart, axis, min, max)`.
|
||||
You can specify the minimum and maximum values in y-direction with `lv_chart_set_range(chart, axis, min, max)`.
|
||||
`axis` can be `LV_CHART_AXIS_PRIMARY` (left axis) or `LV_CHART_AXIS_SECONDARY` (right axis).
|
||||
|
||||
The value of the points will be scaled proportionally. The default range is: 0..100.
|
||||
|
||||
### Division lines
|
||||
The number of horizontal and vertical division lines can be modified by `lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)`.
|
||||
The default settings are 3 horizontal and 5 vertical division lines.
|
||||
If there is a visible border on a side and no padding on that side, the division line would be drawn on top of the border and therefore it won't be drawn.
|
||||
The number of horizontal and vertical division lines can be modified by `lv_chart_set_div_line_count(chart, hdiv_num, vdiv_num)`.
|
||||
The default settings are 3 horizontal and 5 vertical division lines.
|
||||
If there is a visible border on a side and no padding on that side, the division line would be drawn on top of the border and therefore it won't be drawn.
|
||||
|
||||
### Override default start point for series
|
||||
If you want a plot to start from a point other than the default which is `point[0]` of the series, you can set an alternative
|
||||
@@ -119,15 +119,15 @@ If `factor` is 256 there is no zoom. 512 means double zoom, etc. Fractional valu
|
||||
|
||||
### Cursor
|
||||
|
||||
A cursor can be added with `lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, color, dir);`.
|
||||
The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or their OR-ed values to tell in which direction(s) should the cursor be drawn.
|
||||
A cursor can be added with `lv_chart_cursor_t * c1 = lv_chart_add_cursor(chart, color, dir);`.
|
||||
The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or their OR-ed values to tell in which direction(s) should the cursor be drawn.
|
||||
|
||||
`lv_chart_set_cursor_pos(chart, cursor, &point)` sets the position of the cursor.
|
||||
`lv_chart_set_cursor_pos(chart, cursor, &point)` sets the position of the cursor.
|
||||
`pos` is a pointer to an `lv_point_t` variable. E.g. `lv_point_t point = {10, 20};`. If the chart is scrolled the cursor will remain in the same place.
|
||||
|
||||
`lv_chart_get_point_pos_by_id(chart, series, id, &point_out)` gets the coordinate of a given point. It's useful to place the cursor at a given point.
|
||||
|
||||
`lv_chart_set_cursor_point(chart, cursor, series, point_id)` sticks the cursor at a point. If the point's position changes (new value or scrolling) the cursor will move with the point.
|
||||
`lv_chart_set_cursor_point(chart, cursor, series, point_id)` sticks the cursor at a point. If the point's position changes (new value or scrolling) the cursor will move with the point.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a new point is clicked pressed. `lv_chart_get_pressed_point(chart)` returns the zero-based index of the pressed point.
|
||||
@@ -135,12 +135,12 @@ The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or th
|
||||
- `LV_CHART_DRAW_PART_DIV_LINE_INIT` Used before/after drawn the div lines to add masks to any extra drawings. The following fields are set:
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `line_dsc`
|
||||
- `LV_CHART_DRAW_PART_DIV_LINE_HOR`, `LV_CHART_DRAW_PART_DIV_LINE_VER` Used for each horizontal and vertical division lines.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `LV_CHART_DRAW_PART_DIV_LINE_HOR`, `LV_CHART_DRAW_PART_DIV_LINE_VER` Used for each horizontal and vertical division lines.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `id`: index of the line
|
||||
- `p1`, `p2`: points of the line
|
||||
- `line_dsc`
|
||||
- `LV_CHART_DRAW_PART_LINE_AND_POINT` Used on line and scatter charts for lines and points.
|
||||
- `LV_CHART_DRAW_PART_LINE_AND_POINT` Used on line and scatter charts for lines and points.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`: index of the point
|
||||
- `value`: value of `id`th point
|
||||
@@ -149,29 +149,29 @@ The possible values of `dir` `LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL` or th
|
||||
- `line_dsc`
|
||||
- `rect_dsc`
|
||||
- `sub_part_ptr`: pointer to the series
|
||||
- `LV_CHART_DRAW_PART_BAR` Used on bar charts for the rectangles.
|
||||
- `LV_CHART_DRAW_PART_BAR` Used on bar charts for the rectangles.
|
||||
- `part`: `LV_PART_ITEMS`
|
||||
- `id`: index of the point
|
||||
- `value`: value of `id`th point
|
||||
- `value`: value of `id`th point
|
||||
- `draw_area`: area of the point
|
||||
- `rect_dsc`:
|
||||
- `sub_part_ptr`: pointer to the series
|
||||
- `LV_CHART_DRAW_PART_CURSOR` Used on cursor lines and points.
|
||||
- `part`: `LV_PART_CURSOR`
|
||||
- `part`: `LV_PART_CURSOR`
|
||||
- `p1`, `p2`: points of the line
|
||||
- `line_dsc`
|
||||
- `rect_dsc`
|
||||
- `draw_area`: area of the points
|
||||
- `LV_CHART_DRAW_PART_TICK_LABEL` Used on tick lines and labels.
|
||||
- `part`: `LV_PART_TICKS`
|
||||
- `part`: `LV_PART_TICKS`
|
||||
- `id`: axis
|
||||
- `value`: value of the tick
|
||||
- `text`: `value` converted to decimal or `NULL` for minor ticks
|
||||
- `line_dsc`,
|
||||
- `label_dsc`,
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/colorwheel.md
|
||||
```
|
||||
# Color wheel (lv_colorwheel)
|
||||
|
||||
## Overview
|
||||
As its name implies *Color wheel* allows the user to select a color. The Hue, Saturation and Value of the color can be selected separately.
|
||||
As its name implies *Color wheel* allows the user to select a color. The Hue, Saturation and Value of the color can be selected separately.
|
||||
|
||||
Long pressing the object, the color wheel will change to the next parameter of the color (hue, saturation or value). A double click will reset the current parameter.
|
||||
|
||||
@@ -17,7 +17,7 @@ Long pressing the object, the color wheel will change to the next parameter of t
|
||||
|
||||
### Create a color wheel
|
||||
|
||||
`lv_colorwheel_create(parent, knob_recolor)` creates a new color wheel. With `knob_recolor=true` the knob's background color will be set to the current color.
|
||||
`lv_colorwheel_create(parent, knob_recolor)` creates a new color wheel. With `knob_recolor=true` the knob's background color will be set to the current color.
|
||||
|
||||
### Set color
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/imgbtn.md
|
||||
```
|
||||
# Image button (lv_imgbtn)
|
||||
@@ -19,7 +19,7 @@ You can set a left, right and center image, and the center image will be repeate
|
||||
|
||||
### Image sources
|
||||
To set the image in a state, use the `lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_center, src_right)`.
|
||||
|
||||
|
||||
The image sources work the same as described in the [Image object](/widgets/core/img) except that "Symbols" are not supported by the Image button.
|
||||
Any of the sources can `NULL`.
|
||||
|
||||
@@ -31,7 +31,7 @@ The possible states are:
|
||||
- `LV_IMGBTN_STATE_CHECKED_PRESSED`
|
||||
- `LV_IMGBTN_STATE_CHECKED_DISABLED`
|
||||
|
||||
If you set sources only in `LV_IMGBTN_STATE_RELEASED`, these sources will be used in other states too.
|
||||
If you set sources only in `LV_IMGBTN_STATE_RELEASED`, these sources will be used in other states too.
|
||||
If you set e.g. `LV_IMGBTN_STATE_PRESSED` they will be used in pressed state instead of the released images.
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/object-types/index.md
|
||||
```
|
||||
# Extra widgets
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
animimg
|
||||
calendar
|
||||
chart
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/keyboard.md
|
||||
```
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
The Keyboard object is a special [Button matrix](/widgets/core/btnmatrix) with predefined keymaps and other features to realize a virtual keyboard to write texts into a [Text area](/widgets/core/textarea).
|
||||
|
||||
## Parts and Styles
|
||||
Similarly to Button matrices Keyboards consist of 2 part:
|
||||
Similarly to Button matrices Keyboards consist of 2 part:
|
||||
- `LV_PART_MAIN` The main part. Uses all the typical background properties
|
||||
- `LV_PART_ITEMS` The buttons. Also uses all typical background properties as well as the *text* properties.
|
||||
|
||||
@@ -43,7 +43,7 @@ The popovers currently are merely a visual effect and don't allow selecting addi
|
||||
### New Keymap
|
||||
You can specify a new map (layout) for the keyboard with `lv_keyboard_set_map(kb, map)` and `lv_keyboard_set_ctrl_map(kb, ctrl_map)`.
|
||||
Learn more about the [Button matrix](/widgets/core/btnmatrix) object.
|
||||
Keep in mind that using following keywords will have the same effect as with the original map:
|
||||
Keep in mind that using following keywords will have the same effect as with the original map:
|
||||
- `LV_SYMBOL_OK` Apply.
|
||||
- `LV_SYMBOL_CLOSE` or `LV_SYMBOL_KEYBOARD` Close.
|
||||
- `LV_SYMBOL_BACKSPACE` Delete on the left.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/led.md
|
||||
```
|
||||
# LED (lv_led)
|
||||
@@ -25,11 +25,11 @@ Use `lv_led_on(led)` and `lv_led_off(led)` to set the brightness to a predefined
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the following types:
|
||||
- `LV_LED_DRAW_PART_RECTANGLE` The main rectangle. `LV_OBJ_DRAW_PART_RECTANGLE` is not sent by the base object.
|
||||
- `LV_LED_DRAW_PART_RECTANGLE` The main rectangle. `LV_OBJ_DRAW_PART_RECTANGLE` is not sent by the base object.
|
||||
- `part`: `LV_PART_MAIN`
|
||||
- `rect_dsc`
|
||||
- `draw_area`: the area of the rectangle
|
||||
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
@@ -48,11 +48,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_led.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/list.md
|
||||
```
|
||||
# List (lv_list)
|
||||
|
||||
## Overview
|
||||
The List is basically a rectangle with vertical layout to which Buttons and Texts can be added
|
||||
The List is basically a rectangle with vertical layout to which Buttons and Texts can be added
|
||||
|
||||
## Parts and Styles
|
||||
|
||||
@@ -45,11 +45,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_list.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/menu.md
|
||||
```
|
||||
# Menu (lv_menu)
|
||||
@@ -31,7 +31,7 @@ The following header modes exist:
|
||||
- `LV_MENU_HEADER_TOP_UNFIXED` Header is positioned at the top and can be scrolled out of view.
|
||||
- `LV_MENU_HEADER_BOTTOM_FIXED` Header is positioned at the bottom.
|
||||
|
||||
You can set header modes with `lv_menu_set_mode_header(menu, LV_MENU_HEADER...)`.
|
||||
You can set header modes with `lv_menu_set_mode_header(menu, LV_MENU_HEADER...)`.
|
||||
|
||||
### Root back button mode
|
||||
The following root back button modes exist:
|
||||
@@ -66,7 +66,7 @@ The following objects can be created so that it is easier to style the menu:
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when a page is shown.
|
||||
- `lv_menu_get_cur_main_page(menu)` returns a pointer to menu page that is currently displayed in main.
|
||||
- `lv_menu_get_cur_sidebar_page(menu)` returns a pointer to menu page that is currently displayed in sidebar.
|
||||
- `LV_EVENT_CLICKED` Sent when a back btn in a header from either main or sidebar is clicked. `LV_OBJ_FLAG_EVENT_BUBBLE` is enabled on the buttons so you can add events to the menu itself.
|
||||
- `LV_EVENT_CLICKED` Sent when a back btn in a header from either main or sidebar is clicked. `LV_OBJ_FLAG_EVENT_BUBBLE` is enabled on the buttons so you can add events to the menu itself.
|
||||
- `lv_menu_back_btn_is_root(menu, btn)` to check if btn is root back btn
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
@@ -85,10 +85,10 @@ Learn more about [Keys](/overview/indev).
|
||||
.. include:: ../../../examples/widgets/menu/index.rst
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
.. doxygenfile:: lv_menu.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/meter.md
|
||||
```
|
||||
# Meter (lv_meter)
|
||||
@@ -8,7 +8,7 @@
|
||||
The Meter widget can visualize data in very flexible ways. In can show arcs, needles, ticks lines and labels.
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The background of the Meter. Uses the typical background properties.
|
||||
- `LV_PART_MAIN` The background of the Meter. Uses the typical background properties.
|
||||
- `LV_PART_TICK` The tick lines a labels using the *line* and *text* style properties.
|
||||
- `LV_PART_INDICATOR` The needle line or image using the *line* and *img* style properties, as well as the background properties to draw a square (or circle) on the pivot of the needles. Padding makes the square larger.
|
||||
- `LV_PART_ITEMS` The arcs using the *arc* properties.
|
||||
@@ -17,7 +17,7 @@ The Meter widget can visualize data in very flexible ways. In can show arcs, nee
|
||||
|
||||
### Add a scale
|
||||
|
||||
First a *Scale* needs to be added to the Meter with `lv_meter_scale_t * scale = lv_meter_add_scale(meter)`.
|
||||
First a *Scale* needs to be added to the Meter with `lv_meter_scale_t * scale = lv_meter_add_scale(meter)`.
|
||||
The Scale has minor and major ticks and labels on the major ticks. Later indicators (needles, arcs, tick modifiers) can be added to the meter
|
||||
|
||||
Any number of scales can be added to Meter.
|
||||
@@ -45,22 +45,22 @@ All the indicator add functions return `lv_meter_indicator_t *`.
|
||||
#### Needle image
|
||||
|
||||
`indic = lv_meter_add_needle_img(meter, scale, img_src, pivot_x, pivot_y)` sets an image that will be used as a needle. `img_src` should be a needle pointing to the right like this `-O--->`.
|
||||
`pivot_x` and `pivot_y` sets the pivot point of the rotation relative to the top left corner of the image.
|
||||
`pivot_x` and `pivot_y` sets the pivot point of the rotation relative to the top left corner of the image.
|
||||
|
||||
`lv_meter_set_indicator_value(meter, inidicator, value)` sets the value of the indicator.
|
||||
|
||||
#### Arc
|
||||
`indic = lv_meter_add_arc(meter, scale, arc_width, arc_color, r_mod)` adds and arc indicator. . By default, the radius of the arc is the same as the scale's radius but `r_mod` changes the radius.
|
||||
|
||||
`lv_meter_set_indicator_start_value(meter, indic, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator.
|
||||
`lv_meter_set_indicator_start_value(meter, indic, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator.
|
||||
|
||||
#### Scale lines (ticks)
|
||||
`indic = lv_meter_add_scale_lines(meter, scale, color_start, color_end, local, width_mod)` adds an indicator that modifies the ticks lines.
|
||||
If `local` is `true` the ticks' color will be faded from `color_start` to `color_end` in the indicator's start and end value range.
|
||||
`indic = lv_meter_add_scale_lines(meter, scale, color_start, color_end, local, width_mod)` adds an indicator that modifies the ticks lines.
|
||||
If `local` is `true` the ticks' color will be faded from `color_start` to `color_end` in the indicator's start and end value range.
|
||||
If `local` is `false` `color_start` and `color_end` will be mapped to the start and end value of the scale and only a "slice" of that color gradient will be visible in the indicator's start and end value range.
|
||||
`width_mod` modifies the width of the tick lines.
|
||||
|
||||
`lv_meter_set_indicator_start_value(meter, inidicator, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator.
|
||||
`lv_meter_set_indicator_start_value(meter, inidicator, value)` and `lv_meter_set_indicator_end_value(meter, inidicator, value)` sets the value of the indicator.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the following types:
|
||||
@@ -85,12 +85,12 @@ If `local` is `false` `color_start` and `color_end` will be mapped to the start
|
||||
- `value`: the value of the line
|
||||
- `text`: `value` converted to decimal or `NULL` on minor lines
|
||||
- `label_dsc`: label draw descriptor or `NULL` on minor lines
|
||||
- `line_dsc`:
|
||||
- `id`: the index of the line
|
||||
|
||||
|
||||
- `line_dsc`:
|
||||
- `id`: the index of the line
|
||||
|
||||
|
||||
See the events of the [Base object](/widgets/obj) too.
|
||||
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
@@ -107,11 +107,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_meter.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/msgbox.md
|
||||
```
|
||||
# Message box (lv_msgbox)
|
||||
|
||||
## Overview
|
||||
The Message boxes act as pop-ups.
|
||||
The Message boxes act as pop-ups.
|
||||
They are built from a background container, a title, an optional close button, a text and optional buttons.
|
||||
|
||||
The text will be broken into multiple lines automatically and the height will be set automatically to include the text and the buttons.
|
||||
@@ -25,13 +25,13 @@ The message box is built from other widgets, so you can check these widgets' doc
|
||||
|
||||
`lv_msgbox_create(parent, title, txt, btn_txts[], add_close_btn)` creates a message box.
|
||||
|
||||
If `parent` is `NULL` the message box will be modal. `title` and `txt` are strings for the title and the text.
|
||||
If `parent` is `NULL` the message box will be modal. `title` and `txt` are strings for the title and the text.
|
||||
`btn_txts[]` is an array with the buttons' text. E.g. `const char * btn_txts[] = {"Ok", "Cancel", NULL}`.
|
||||
`add_close_btn` can be `true` or `false` to add/don't add a close button.
|
||||
|
||||
### Get the parts
|
||||
The building blocks of the message box can be obtained using the following functions:
|
||||
```c
|
||||
```c
|
||||
lv_obj_t * lv_msgbox_get_title(lv_obj_t * mbox);
|
||||
lv_obj_t * lv_msgbox_get_close_btn(lv_obj_t * mbox);
|
||||
lv_obj_t * lv_msgbox_get_text(lv_obj_t * mbox);
|
||||
@@ -42,7 +42,7 @@ lv_obj_t * lv_msgbox_get_btns(lv_obj_t * mbox);
|
||||
`lv_msgbox_close(msgbox)` closes (deletes) the message box.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` is sent by the buttons if one of them is clicked. `LV_OBJ_FLAG_EVENT_BUBBLE` is enabled on the buttons so you can add events to the message box itself.
|
||||
- `LV_EVENT_VALUE_CHANGED` is sent by the buttons if one of them is clicked. `LV_OBJ_FLAG_EVENT_BUBBLE` is enabled on the buttons so you can add events to the message box itself.
|
||||
In the event handler, `lv_event_get_target(e)` will return the button matrix and `lv_event_get_current_target(e)` will return the message box. `lv_msgbox_get_active_btn(msgbox)` and `lv_msgbox_get_active_btn_text(msgbox)` can be used to get the index and text of the clicked button.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
@@ -61,11 +61,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_msgbox.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/span.md
|
||||
```
|
||||
# Span (lv_span)
|
||||
@@ -10,7 +10,7 @@ A spangroup is the object that is used to display rich text. Different from the
|
||||
|
||||
## Parts and Styles
|
||||
- `LV_PART_MAIN` The spangroup has only one part.
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Set text and style
|
||||
@@ -59,7 +59,7 @@ Use `lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP)` to set object
|
||||
Use `lv_spangroup_set_indent(spangroup, 20)` to set the indent of the first line. all modes support pixel units, in addition to LV_SPAN_MODE_FIXED and LV_SPAN_MODE_BREAK mode supports percentage units too.
|
||||
|
||||
## Events
|
||||
No special events are sent by this widget.
|
||||
No special events are sent by this widget.
|
||||
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/spinbox.md
|
||||
```
|
||||
# Spinbox (lv_spinbox)
|
||||
|
||||
## Overview
|
||||
The Spinbox contains a number as text which can be increased or decreased by *Keys* or API functions.
|
||||
The Spinbox contains a number as text which can be increased or decreased by *Keys* or API functions.
|
||||
Under the hood the Spinbox is a modified [Text area](/widgets/core/textarea).
|
||||
|
||||
## Parts and Styles
|
||||
@@ -14,11 +14,11 @@ The parts of the Spinbox are identical to the [Text area](/widgets/core/textarea
|
||||
### Value, range and step
|
||||
`lv_spinbox_set_value(spinbox, 1234)` sets a new value on the Spinbox.
|
||||
|
||||
`lv_spinbox_increment(spinbox)` and `lv_spinbox_decrement(spinbox)` increments/decrements the value of the Spinbox according to the currently selected digit.
|
||||
`lv_spinbox_increment(spinbox)` and `lv_spinbox_decrement(spinbox)` increments/decrements the value of the Spinbox according to the currently selected digit.
|
||||
|
||||
`lv_spinbox_set_range(spinbox, -1000, 2500)` sets a range. If the value is changed by `lv_spinbox_set_value`, by *Keys*,`lv_spinbox_increment/decrement` this range will be respected.
|
||||
|
||||
`lv_spinbox_set_step(spinbox, 100)` sets which digits to change on increment/decrement. Only multiples of ten can be set, and not for example 3.
|
||||
`lv_spinbox_set_step(spinbox, 100)` sets which digits to change on increment/decrement. Only multiples of ten can be set, and not for example 3.
|
||||
|
||||
`lv_spinbox_set_pos(spinbox, 1)` sets the cursor to a specific digit to change on increment/decrement. For example position '0' sets the cursor to the least significant digit.
|
||||
|
||||
@@ -30,7 +30,7 @@ If an encoder is used as input device, the selected digit is shifted to the righ
|
||||
`separator_position` is the number of digits before the decimal point. If 0, no decimal point is displayed.
|
||||
|
||||
### Rollover
|
||||
`lv_spinbox_set_rollover(spinbox, true/false)` enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, the value will change to the other limit. If rollover is disabled the value will remain at the minimum or maximum value.
|
||||
`lv_spinbox_set_rollover(spinbox, true/false)` enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, the value will change to the other limit. If rollover is disabled the value will remain at the minimum or maximum value.
|
||||
|
||||
## Events
|
||||
- `LV_EVENT_VALUE_CHANGED` Sent when the value has changed.
|
||||
@@ -40,9 +40,9 @@ See the events of the [Text area](/widgets/core/textarea) too.
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
- `LV_KEY_LEFT/RIGHT` With *Keypad* move the cursor left/right. With *Encoder* decrement/increment the selected digit.
|
||||
- `LV_KEY_UP/DOWN` With *Keypad* and *Encoder* increment/decrement the value.
|
||||
- `LV_KEY_ENTER` With *Encoder* got the net digit. Jump to the first after the last.
|
||||
- `LV_KEY_LEFT/RIGHT` With *Keypad* move the cursor left/right. With *Encoder* decrement/increment the selected digit.
|
||||
- `LV_KEY_UP/DOWN` With *Keypad* and *Encoder* increment/decrement the value.
|
||||
- `LV_KEY_ENTER` With *Encoder* got the net digit. Jump to the first after the last.
|
||||
|
||||
## Example
|
||||
|
||||
@@ -52,12 +52,12 @@ Learn more about [Events](/overview/event).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_spinbox.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
## Example
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/spinner.md
|
||||
```
|
||||
# Spinner (lv_spinner)
|
||||
|
||||
## Overview
|
||||
The Spinner object is a spinning arc over a ring.
|
||||
The Spinner object is a spinning arc over a ring.
|
||||
|
||||
## Parts and Styles
|
||||
The parts are identical to the parts of [lv_arc](/widgets/core/arc).
|
||||
@@ -38,11 +38,11 @@ Learn more about [Keys](/overview/indev).
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_spinner.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/tabview.md
|
||||
```
|
||||
|
||||
@@ -14,7 +14,7 @@ The Tab view is built from other widgets:
|
||||
- Container for the tabs: [lv_obj](/widgets/obj)
|
||||
- Content of the tabs: [lv_obj](/widgets/obj)
|
||||
|
||||
The tab buttons can be positioned on the top, bottom, left and right side of the Tab view.
|
||||
The tab buttons can be positioned on the top, bottom, left and right side of the Tab view.
|
||||
|
||||
A new tab can be selected either by clicking on a tab button or by sliding horizontally on the content.
|
||||
|
||||
@@ -25,7 +25,7 @@ There are no special parts on the Tab view but the `lv_obj` and `lv_btnnmatrix`
|
||||
|
||||
### Create a Tab view
|
||||
|
||||
`lv_tabview_create(parent, tab_pos, tab_size);` creates a new empty Tab view. `tab_pos` can be `LV_DIR_TOP/BOTTOM/LEFT/RIGHT` to position the tab buttons to a side.
|
||||
`lv_tabview_create(parent, tab_pos, tab_size);` creates a new empty Tab view. `tab_pos` can be `LV_DIR_TOP/BOTTOM/LEFT/RIGHT` to position the tab buttons to a side.
|
||||
`tab_size` is the height (in case of `LV_DIR_TOP/BOTTOM`) or width (in case of `LV_DIR_LEFT/RIGHT`) tab buttons.
|
||||
|
||||
### Add tabs
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/tileview.md
|
||||
```
|
||||
# Tile view (lv_tileview)
|
||||
|
||||
## Overview
|
||||
|
||||
The Tile view is a container object whose elements (called *tiles*) can be arranged in grid form.
|
||||
A user can navigate between the tiles by swiping.
|
||||
Any direction of swiping can be disabled on the tiles individually to not allow moving from one tile to another.
|
||||
The Tile view is a container object whose elements (called *tiles*) can be arranged in grid form.
|
||||
A user can navigate between the tiles by swiping.
|
||||
Any direction of swiping can be disabled on the tiles individually to not allow moving from one tile to another.
|
||||
|
||||
If the Tile view is screen sized, the user interface resembles what you may have seen on smartwatches.
|
||||
|
||||
@@ -21,8 +21,8 @@ The parts and styles work the same as for [lv_obj](/widgets/obj).
|
||||
|
||||
### Add a tile
|
||||
|
||||
`lv_tileview_add_tile(tileview, row_id, col_id, dir)` creates a new tile on the `row_id`th row and `col_id`th column.
|
||||
`dir` can be `LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL` or OR-ed values to enable moving to the adjacent tiles into the given direction by swiping.
|
||||
`lv_tileview_add_tile(tileview, row_id, col_id, dir)` creates a new tile on the `row_id`th row and `col_id`th column.
|
||||
`dir` can be `LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL` or OR-ed values to enable moving to the adjacent tiles into the given direction by swiping.
|
||||
|
||||
The returned value is an `lv_obj_t *` on which the content of the tab can be created.
|
||||
|
||||
@@ -48,11 +48,11 @@ Learn more about [Keys](/overview/indev).
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_tileview.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/extra/win.md
|
||||
```
|
||||
# Window (lv_win)
|
||||
|
||||
## Overview
|
||||
|
||||
The Window is container-like object built from a header with title and buttons and a content area.
|
||||
|
||||
The Window is container-like object built from a header with title and buttons and a content area.
|
||||
|
||||
## Parts and Styles
|
||||
The Window is built from other widgets so you can check their documentation for details:
|
||||
- Background: [lv_obj](/widgets/obj)
|
||||
@@ -25,12 +25,12 @@ The Window is built from other widgets so you can check their documentation for
|
||||
|
||||
### Title and buttons
|
||||
|
||||
Any number of texts (but typically only one) can be added to the header with `lv_win_add_title(win, "The title")`.
|
||||
Any number of texts (but typically only one) can be added to the header with `lv_win_add_title(win, "The title")`.
|
||||
|
||||
Control buttons can be added to the window's header with `lv_win_add_btn(win, icon, btn_width)`. `icon` can be any image source, and `btn_width` is the width of the button.
|
||||
|
||||
The title and the buttons will be added in the order the functions are called. So adding a button, a text and two other buttons will result in a button on the left, a title, and 2 buttons on the right.
|
||||
The width of the title is set to take all the remaining space on the header. In other words: it pushes to the right all the buttons that are added after the title.
|
||||
The width of the title is set to take all the remaining space on the header. In other words: it pushes to the right all the buttons that are added after the title.
|
||||
|
||||
## Get the parts
|
||||
`lv_win_get_header(win)` returns a pointer to the header, `lv_win_get_content(win)` returns a pointer to the content container to which the content of the window can be added.
|
||||
@@ -41,7 +41,7 @@ No special events are sent by the windows, however events can be added manually
|
||||
Learn more about [Events](/overview/event).
|
||||
|
||||
## Keys
|
||||
No *Keys* are handled by the window.
|
||||
No *Keys* are handled by the window.
|
||||
|
||||
Learn more about [Keys](/overview/indev).
|
||||
|
||||
@@ -55,11 +55,11 @@ Learn more about [Keys](/overview/indev).
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
## API
|
||||
|
||||
```eval_rst
|
||||
|
||||
.. doxygenfile:: lv_win.h
|
||||
:project: lvgl
|
||||
|
||||
|
||||
```
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/object-types/index.md
|
||||
```
|
||||
# Widgets
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
|
||||
|
||||
obj
|
||||
core/index
|
||||
extra/index
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
```eval_rst
|
||||
.. include:: /header.rst
|
||||
.. include:: /header.rst
|
||||
:github_url: |github_link_base|/widgets/obj.md
|
||||
```
|
||||
# Base object (lv_obj)
|
||||
@@ -13,7 +13,7 @@ The 'Base Object' implements the basic properties of widgets on a screen, such a
|
||||
- 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.
|
||||
In object-oriented thinking, it is the base class from which all other objects in LVGL are inherited.
|
||||
|
||||
The functions and functionalities of the Base object can be used with other widgets too. For example `lv_obj_set_width(slider, 100)`
|
||||
|
||||
@@ -69,7 +69,7 @@ for(i = 0; i < lv_obj_get_child_cnt(parent); i++) {
|
||||
|
||||
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)`.
|
||||
|
||||
You can change the index of an object in its parent using `lv_obj_move_to_index(obj, index)`.
|
||||
You can change the index of an object in its parent using `lv_obj_move_to_index(obj, index)`.
|
||||
|
||||
You can swap the position of two objects with `lv_obj_swap(obj1, obj2)`.
|
||||
|
||||
@@ -95,10 +95,10 @@ Read the [Event overview](/overview/event) to learn more about events.
|
||||
### Styles
|
||||
Be sure to read the [Style overview](/overview/style). Here only the most essential functions are described.
|
||||
|
||||
A new style can be added to an object with the `lv_obj_add_style(obj, &new_style, selector)` function.
|
||||
A new style can be added to an object with the `lv_obj_add_style(obj, &new_style, selector)` function.
|
||||
`selector` is an ORed combination of part and state(s). E.g. `LV_PART_SCROLLBAR | LV_STATE_PRESSED`.
|
||||
|
||||
The base objects use `LV_PART_MAIN` style properties and `LV_PART_SCROLLBAR` with the typical background style properties.
|
||||
The base objects use `LV_PART_MAIN` style properties and `LV_PART_SCROLLBAR` with the typical background style properties.
|
||||
|
||||
|
||||
### Flags
|
||||
|
||||
Reference in New Issue
Block a user