wen/luban-lite-t3e-pro
1
0
Fork 0
mirror of https://gitee.com/Vancouver2017/luban-lite-t3e-pro.git synced 2025-12-17 03:48:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

v1.0.3

Browse Source
This commit is contained in:
刘可亮
2024-01-27 08:47:24 +08:00
parent d3bd993b5f
commit 9f7ba67007
2345 changed files with 74421 additions and 76616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/animimg.md Normal file
View File

@@ -0,0 +1,49 @@
# Animation Image (lv_animimg)
## Overview
The animation image is similar to the normal 'Image' object. The only difference is that instead of one source image, you set an array of multiple source images.
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.
See the events of the Base object too.
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:: ../../../examples/widgets/animimg/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_animimg.h
:project: lvgl
```

82
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/calendar.md Normal file
View File

@@ -0,0 +1,82 @@
# Calendar (lv_calendar)
## 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
- highlight the current day (today)
- highlight any user-defined dates
The Calendar is added to the default group (if it is set). Calendar is an editable object which allow selecting and clicking the dates with encoder navigation too.
To make the Calendar flexible, by default it doesn't show the current year or month. Instead, there are optional "headers" that can be attached to the calendar.
## Parts and Styles
The calendar object uses the [Button matrix](/widgets/core/btnmatrix) object under the hood to arrange the days into a matrix.
- `LV_PART_MAIN` The background of the calendar. Uses all the background related style properties.
- `LV_PART_ITEMS` Refers to the dates and day names. Button matrix control flags are set to differentiate the buttons and a custom drawer event is added modify the properties of the buttons as follows:
- day names have no border, no background and drawn with a gray color
- days of the previous and next month have `LV_BTNMATRIX_CTRL_DISABLED` flag
- today has a thicker border with the theme's primary color
- highlighted days have some opacity with the theme's primary color.
## Usage
Some functions use the `lv_calendar_date_t` type which is a structure with `year`, `month` and `day` fields.
### Current date
To set the current date (today), use the `lv_calendar_set_today_date(calendar, year, month, day)` function. `month` needs to be in 1..12 range and `day` in 1..31 range.
### Shown date
To set the shown date, use `lv_calendar_set_shown_date(calendar, year, month)`;
### Highlighted days
The list of highlighted dates should be stored in a `lv_calendar_date_t` array loaded by `lv_calendar_set_highlighted_dates(calendar, highlighted_dates, date_num)`.
Only the array's pointer will be saved so the array should be a static or global variable.
### Name of the days
The name of the days can be adjusted with `lv_calendar_set_day_names(calendar, day_names)` where `day_names` looks like `const char * day_names[7] = {"Su", "Mo", ...};`
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`.
Learn more about [Events](/overview/event).
## Keys
- `LV_KEY_RIGHT/UP/LEFT/RIGHT` To navigate among the buttons to dates
- `LV_KEY_ENTER` To press/release the selected date
Learn more about [Keys](/overview/indev).
## Headers
**From v8.1 the header is added directly into the Calendar widget and the API of the headers has been changed.**
### Arrow buttons
`lv_calendar_header_arrow_create(calendar)` creates a header that contains a left and right arrow on the sides and a text with the current year and month between them.
### 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
```eval_rst
.. include:: ../../../examples/widgets/calendar/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_calendar.h
:project: lvgl
```

193
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/chart.md Normal file
View File

@@ -0,0 +1,193 @@
# Chart (lv_chart)
## Overview
Charts are a basic object to visualize data points. Currently *Line* charts (connect points with lines and/or draw points on them) and *Bar* charts are supported.
Charts can have:
- division lines
- 2 y axis
- axis ticks and texts on ticks
- cursors
- scrolling and zooming
## Parts and Styles
- `LV_PART_MAIN` The background of the chart. Uses all the typical background and *line* (for the division lines) related style properties. *Padding* makes the series area smaller. For column charts `pad_column` sets the space between the columns of the adjacent indices.
- `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. `pad_column` sets the space between the columns on the same index.
- `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
## Usage
### Chart type
The following data display types exist:
- `LV_CHART_TYPE_NONE` Do not display any data. Can be used to hide the series.
- `LV_CHART_TYPE_LINE` Draw lines between the data points and/or points (rectangles or circles) on the data points.
- `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_...)`.
### Data series
You can add any number of series to the charts by `lv_chart_add_series(chart, color, axis)`. This allocates an `lv_chart_series_t` structure which contains the chosen `color` and an array for the data points.
`axis` can have the following values:
- `LV_CHART_AXIS_PRIMARY_Y` Left axis
- `LV_CHART_AXIS_SECONDARY_Y` Right axis
- `LV_CHART_AXIS_PRIMARY_X` Bottom axis
- `LV_CHART_AXIS_SECONDARY_X` Top axis
`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.
`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.
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.
For `LV_CHART_TYPE_SCATTER` type `lv_chart_set_ext_x_array(chart, ser, value_array)` and `lv_chart_get_x_array(chart, ser)` can be used as well.
### Modify the data
You have several options to set the data of series:
1. Set the values manually in the array like `ser1->points[3] = 7` and refresh the chart with `lv_chart_refresh(chart)`.
2. Use `lv_chart_set_value_by_id(chart, ser, id, value)` where `id` is the index of the point you wish to update.
3. Use the `lv_chart_set_next_value(chart, ser, value)`.
4. Initialize all points to a given value with: `lv_chart_set_all_value(chart, ser, value)`.
Use `LV_CHART_POINT_NONE` as value to make the library skip drawing that point, column, or line segment.
For `LV_CHART_TYPE_SCATTER` type `lv_chart_set_value_by_id2(chart, ser, id, value)` and `lv_chart_set_next_value2(chart, ser, x_valuem y_value)` can be used as well.
### Update modes
`lv_chart_set_next_value` can behave in two ways depending on *update mode*:
- `LV_CHART_UPDATE_MODE_SHIFT` Shift old data to the left and add the new one to the right.
- `LV_CHART_UPDATE_MODE_CIRCULAR` - Add the new data in circular fashion, like an ECG diagram.
The update mode can be changed with `lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_...)`.
### 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.
#### 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.
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)`.
`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.
### 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
index with the function `lv_chart_set_x_start_point(chart, ser, id)` where `id` is the new index position to start plotting from.
Note that `LV_CHART_UPDATE_MODE_SHIFT` also changes the `start_point`.
### Tick marks and labels
Ticks and labels can be added to the axis with `lv_chart_set_axis_tick(chart, axis, major_len, minor_len, major_cnt, minor_cnt, label_en, draw_size)`.
- `axis` can be `LV_CHART_AXIS_X/PRIMARY_Y/SECONDARY_Y`
- `major_len` is the length of major ticks
- `minor_len` is the length of minor ticks
- `major_cnt` is the number of major ticks on the axis
- `minor_cnt` in the number of minor ticks between two major ticks
- `label_en` `true`: enable label drawing on major ticks
- `draw_size` extra size required to draw the tick and labels (start with 20 px and increase if the ticks/labels are clipped)
### Zoom
The chart can be zoomed independently in x and y directions with `lv_chart_set_zoom_x(chart, factor)` and `lv_chart_set_zoom_y(chart, factor)`.
If `factor` is 256 there is no zoom. 512 means double zoom, etc. Fractional values are also possible but < 256 value is not allowed.
### 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.
`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.
## 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.
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` are sent with the following types:
- `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`
- `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.
- `part`: `LV_PART_ITEMS`
- `id`: index of the point
- `value`: value of `id`th point
- `p1`, `p2`: points of the line
- `draw_area`: area of the point
- `line_dsc`
- `rect_dsc`
- `sub_part_ptr`: pointer to the series
- `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
- `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`
- `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`
- `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
No *Keys* are processed by the object type.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/chart/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_chart.h
:project: lvgl
```

55
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/colorwheel.md Normal file
View File

@@ -0,0 +1,55 @@
# 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.
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.
## Parts and Styles
- `LV_PART_MAIN` Only `arc_width` is used to set the width of the color wheel
- `LV_PART_KNOB` A rectangle (or circle) drawn on the current value. It uses all the rectangle like style properties and padding to make it larger than the width of the arc.
## Usage
### 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.
### Set color
The color can be set manually with `lv_colorwheel_set_hue/saturation/value(colorwheel, x)` or all at once with `lv_colorwheel_set_hsv(colorwheel, hsv)` or `lv_colorwheel_set_color(colorwheel, rgb)`
### Color mode
The current color mode can be manually selected with `lv_colorwheel_set_mode(colorwheel, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE)`.
The color mode can be fixed (so as to not change with long press) using `lv_colorwheel_set_mode_fixed(colorwheel, true)`
## Events
- `LV_EVENT_VALUE_CHANGED` Sent if a new color is selected.
Learn more about [Events](/overview/event).
## Keys
- `LV_KEY_UP`, `LV_KEY_RIGHT` Increment the current parameter's value by 1
- `LV_KEY_DOWN`, `LV_KEY_LEFT` Decrement the current parameter's value by 1
- `LV_KEY_ENTER` A long press will show the next mode. Double click to reset the current parameter.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/colorwheel/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_colorwheel.h
:project: lvgl
```

66
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/imgbtn.md Normal file
View File

@@ -0,0 +1,66 @@
# Image button (lv_imgbtn)
## Overview
The Image button is very similar to the simple 'Button' object. The only difference is that it displays user-defined images in each state instead of drawing a rectangle.
You can set a left, right and center image, and the center image will be repeated to match the width of the object.
## Parts and Styles
- `LV_PART_MAIN` Refers to the image(s). If background style properties are used, a rectangle will be drawn behind the image button.
## Usage
### 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`.
The possible states are:
- `LV_IMGBTN_STATE_RELEASED`
- `LV_IMGBTN_STATE_PRESSED`
- `LV_IMGBTN_STATE_DISABLED`
- `LV_IMGBTN_STATE_CHECKED_RELEASED`
- `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 e.g. `LV_IMGBTN_STATE_PRESSED` they will be used in pressed state instead of the released images.
### States
Instead of the regular `lv_obj_add/clear_state()` functions the `lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_...)` functions should be used to manually set a state.
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when the button is toggled.
Learn more about [Events](/overview/event).
## Keys
- `LV_KEY_RIGHT/UP` Go to toggled state if `LV_OBJ_FLAG_CHECKABLE` is enabled.
- `LV_KEY_LEFT/DOWN` Go to non-toggled state if `LV_OBJ_FLAG_CHECKABLE` is enabled.
- `LV_KEY_ENTER` Clicks the button
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/imgbtn/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_imgbtn.h
:project: lvgl
```

27
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/index.md Normal file
View File

@@ -0,0 +1,27 @@
# Extra widgets
```eval_rst
.. toctree::
:maxdepth: 1
animimg
calendar
chart
colorwheel
imgbtn
keyboard
led
list
menu
meter
msgbox
span
spinbox
spinner
tabview
tileview
win
```

92
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/keyboard.md Normal file
View File

@@ -0,0 +1,92 @@
# Keyboard (lv_keyboard)
## Overview
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:
- `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.
## Usage
### Modes
The Keyboards have the following modes:
- `LV_KEYBOARD_MODE_TEXT_LOWER` Display lower case letters
- `LV_KEYBOARD_MODE_TEXT_UPPER` Display upper case letters
- `LV_KEYBOARD_MODE_TEXT_SPECIAL` Display special characters
- `LV_KEYBOARD_MODE_NUMBER` Display numbers, +/- sign, and decimal dot
- `LV_KEYBOARD_MODE_USER_1` through `LV_KEYBOARD_MODE_USER_4` User-defined modes.
The `TEXT` modes' layout contains buttons to change mode.
To set the mode manually, use `lv_keyboard_set_mode(kb, mode)`. The default mode is `LV_KEYBOARD_MODE_TEXT_UPPER`.
### Assign Text area
You can assign a [Text area](/widgets/core/textarea) to the Keyboard to automatically put the clicked characters there.
To assign the text area, use `lv_keyboard_set_textarea(kb, ta)`.
### Key Popovers
To enable key popovers on press, like on common Android and iOS keyboards, use `lv_keyboard_set_popovers(kb, true)`. The default control maps are preconfigured to only show the popovers on keys that produce a symbol and not on e.g. space. If you use a custom keymap, set the `LV_BTNMATRIX_CTRL_POPOVER` flag for all keys that you want to show a popover.
Note that popovers for keys in the top row will draw outside the widget boundaries. To account for this, reserve extra free space on top of the keyboard or ensure that the keyboard is added _after_ any widgets adjacent to its top boundary so that the popovers can draw over those.
The popovers currently are merely a visual effect and don't allow selecting additional characters such as accents yet.
### 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:
- `LV_SYMBOL_OK` Apply.
- `LV_SYMBOL_CLOSE` or `LV_SYMBOL_KEYBOARD` Close.
- `LV_SYMBOL_BACKSPACE` Delete on the left.
- `LV_SYMBOL_LEFT` Move the cursor left.
- `LV_SYMBOL_RIGHT` Move the cursor right.
- `LV_SYMBOL_NEW_LINE` New line.
- *"ABC"* Load the uppercase map.
- *"abc"* Load the lower case map.
- *"1#"* Load the lower case map.
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when the button is pressed/released or repeated after long press. The event data is set to the ID of the pressed/released button.
- `LV_EVENT_READY` - The *Ok* button is clicked.
- `LV_EVENT_CANCEL` - The *Close* button is clicked.
The keyboard has a **default event handler** callback called `lv_keyboard_def_event_cb`, which handles the button pressing, map changing, the assigned text area, etc. You can remove it and replace it with a custom event handler if you wish.
```eval_rst
.. note::
In 8.0 and newer, adding an event handler to the keyboard does not remove the default event handler.
This behavior differs from v7, where adding an event handler would always replace the previous one.
```
Learn more about [Events](/overview/event).
## Keys
- `LV_KEY_RIGHT/UP/LEFT/RIGHT` To navigate among the buttons and select one.
- `LV_KEY_ENTER` To press/release the selected button.
Learn more about [Keys](/overview/indev).
## Examples
```eval_rst
.. include:: ../../../examples/widgets/keyboard/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_keyboard.h
:project: lvgl
```

54
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/led.md Normal file
View File

@@ -0,0 +1,54 @@
# LED (lv_led)
## Overview
The LEDs are rectangle-like (or circle) object whose brightness can be adjusted. With lower brightness the colors of the LED become darker.
## Parts and Styles
The LEDs have only one main part, called `LV_LED_PART_MAIN` and it uses all the typical background style properties.
## Usage
### Color
You can set the color of the LED with `lv_led_set_color(led, lv_color_hex(0xff0080))`.
This will be used as background color, border color, and shadow color.
### Brightness
You can set their brightness with `lv_led_set_bright(led, bright)`. The brightness should be between 0 (darkest) and 255 (lightest).
### Toggle
Use `lv_led_on(led)` and `lv_led_off(led)` to set the brightness to a predefined ON or OFF value. The `lv_led_toggle(led)` toggles between the ON and OFF state.
## 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.
- `part`: `LV_PART_MAIN`
- `rect_dsc`
- `draw_area`: the area of the rectangle
See the events of the [Base object](/widgets/obj) too.
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:: ../../../examples/widgets/led/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_led.h
:project: lvgl
```

51
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/list.md Normal file
View File

@@ -0,0 +1,51 @@
# List (lv_list)
## Overview
The List is basically a rectangle with vertical layout to which Buttons and Texts can be added
## Parts and Styles
**Background**
- `LV_PART_MAIN` The main part of the list that uses all the typical background properties
- `LV_PART_SCROLLBAR` The scrollbar. See the [Base objects](/widgets/obj) documentation for details.
**Buttons and Texts**
See the [Button](/widgets/core/btn)'s and [Label](/widgets/core/label)'s documentation.
## Usage
### Buttons
`lv_list_add_btn(list, icon, text)` adds a full-width button with an icon - that can be an image or symbol - and a text.
The text starts to scroll horizontally if it's too long.
### Texts
`lv_list_add_text(list, text)` adds a text.
## Events
No special events are sent by the List, but sent by the Button as usual.
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:: ../../../examples/widgets/list/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_list.h
:project: lvgl
```

90
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/menu.md Normal file
View File

@@ -0,0 +1,90 @@
# Menu (lv_menu)
## Overview
The menu widget can be used to easily create multi-level menus. It handles the traversal between pages automatically.
## Parts and Styles
The menu widget is built from the following objects:
- Main container: lv_menu_main_cont
- Main header: lv_menu_main_header_cont
- Back btn: [lv_btn](/widgets/core/btn)
- Back btn icon: [lv_img](/widgets/core/img)
- Main page: lv_menu_page
- Sidebar container: lv_menu_sidebar_cont
- Sidebar header: lv_menu_sidebar_header_cont
- Back btn: [lv_btn](/widgets/core/btn)
- Back btn icon: [lv_img](/widgets/core/img)
- Sidebar page: lv_menu_page
## Usage
### Create a menu
`lv_menu_create(parent)` creates a new empty menu.
### Header mode
The following header modes exist:
- `LV_MENU_HEADER_TOP_FIXED` Header is positioned at the top.
- `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...)`.
### Root back button mode
The following root back button modes exist:
- `LV_MENU_ROOT_BACK_BTN_DISABLED`
- `LV_MENU_ROOT_BACK_BTN_ENABLED`
You can set root back button modes with `lv_menu_set_mode_root_back_btn(menu, LV_MENU_ROOT_BACK_BTN...)`.
### Create a menu page
`lv_menu_page_create(menu, title)` creates a new empty menu page.
You can add any widgets to the page.
### Set a menu page in the main area
Once a menu page has been created, you can set it to the main area with `lv_menu_set_page(menu, page)`. NULL to clear main and clear menu history.
### Set a menu page in the sidebar
Once a menu page has been created, you can set it to the sidebar with `lv_menu_set_sidebar_page(menu, page)`. NULL to clear sidebar.
### Linking between menu pages
For instance, you have created a btn obj in the main page. When you click the btn obj, you want it to open up a new page, use `lv_menu_set_load_page_event(menu, obj, new page)`.
### Create a menu container, section, separator
The following objects can be created so that it is easier to style the menu:
`lv_menu_cont_create(parent page)` creates a new empty container.
`lv_menu_section_create(parent page)` creates a new empty section.
`lv_menu_separator_create(parent page)` creates a separator.
## Events
- `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_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.
Learn more about [Events](/overview/event).
## Keys
No keys are handled by the menu widget.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/menu/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_menu.h
:project: lvgl
```

113
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/meter.md Normal file
View File

@@ -0,0 +1,113 @@
# Meter (lv_meter)
## Overview
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_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.
## Usage
### Add a scale
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.
The minor tick lines can be configured with: `lv_meter_set_scale_ticks(meter, scale, tick_count, line_width, tick_length, ctick_olor)`.
To add major tick lines use `lv_meter_set_scale_major_ticks(meter, scale, nth_major, tick_width, tick_length, tick_color, label_gap)`. `nth_major` to specify how many minor ticks to skip to draw a major tick.
Labels are added automatically on major ticks with `label_gap` distance from the ticks with text proportionally to the values of the tick line.
`lv_meter_set_scale_range(meter, scale, min, max, angle_range, rotation)` sets the value and angle range of the scale.
### Add indicators
Indicators need to be added to a Scale and their value is interpreted in the range of the Scale.
All the indicator add functions return `lv_meter_indicator_t *`.
#### Needle line
`indic = lv_meter_add_needle_line(meter, scale, line_width, line_color, r_mod)` adds a needle line to a Scale. By default, the length of the line is the same as the scale's radius but `r_mod` changes the length.
`lv_meter_set_indicator_value(meter, indic, value)` sets the value of the indicator.
#### 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.
`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.
#### 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.
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.
## Events
- `LV_EVENT_DRAW_PART_BEGIN` and `LV_EVENT_DRAW_PART_END` is sent for the following types:
- `LV_METER_DRAW_PART_ARC` The arc indicator
- `part`: `LV_PART_ITEMS`
- `sub_part_ptr`: pointer to the indicator
- `arc_dsc`
- `radius`: radius of the arc
- `p1` center of the arc
- `LV_METER_DRAW_PART_NEEDLE_LINE` The needle lines
- `part`: `LV_PART_ITEMS`
- `p1`, `p2` points of the line
- `line_dsc`
- `sub_part_ptr`: pointer to the indicator
- `LV_METER_DRAW_PART_NEEDLE_IMG` The needle images
- `part`: `LV_PART_ITEMS`
- `p1`, `p2` points of the line
- `img_dsc`
- `sub_part_ptr`: pointer to the indicator
- `LV_METER_DRAW_PART_TICK` The tick lines and labels
- `part`: `LV_PART_TICKS`
- `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
See the events of the [Base object](/widgets/obj) too.
Learn more about [Events](/overview/event).
## Keys
No keys are handled by the Meter widget.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/meter/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_meter.h
:project: lvgl
```

67
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/msgbox.md Normal file
View File

@@ -0,0 +1,67 @@
# Message box (lv_msgbox)
## Overview
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.
The message box can be modal (blocking clicks on the rest of the screen) or not modal.
## Parts and Styles
The message box is built from other widgets, so you can check these widgets' documentation for details.
- Background: [lv_obj](/widgets/obj)
- Close button: [lv_btn](/widgets/core/btn)
- Title and text: [lv_label](/widgets/core/label)
- Buttons: [lv_btnmatrix](/widgets/core/btnmatrix)
## Usage
### Create a message box
`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.
`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
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);
lv_obj_t * lv_msgbox_get_btns(lv_obj_t * mbox);
```
### Close the message box
`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.
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).
## Keys
Keys have effect on the close button and button matrix. You can add them manually to a group if required.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/msgbox/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_msgbox.h
:project: lvgl
```

85
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/span.md Normal file
View File

@@ -0,0 +1,85 @@
# Span (lv_span)
## Overview
A spangroup is the object that is used to display rich text. Different from the label object, `spangroup` can render text styled with different fonts, colors, and sizes into the spangroup object.
## Parts and Styles
- `LV_PART_MAIN` The spangroup has only one part.
## Usage
### Set text and style
The spangroup object uses span to describe text and text style. so, first we need to create `span` descriptor using `lv_span_t * span = lv_spangroup_new_span(spangroup)`. Then use `lv_span_set_text(span, "text")` to set text. The style of the span is configured as with a normal style object by using its `style` member, eg:`lv_style_set_text_color(&span->style, lv_palette_main(LV_PALETTE_RED))`.
If spangroup object `mode != LV_SPAN_MODE_FIXED` you must call `lv_spangroup_refr_mode()` after you have modified `span` style(eg:set text, changed the font size, del span).
### Retrieving a span child
Spangroups store their children differently from normal objects, so normal functions for getting children won't work.
`lv_spangroup_get_child(spangroup, id)` will return a pointer to the child span at index `id`. In addition, `id` can be negative to index from the end of the spangroup where `-1` is the youngest child, `-2` is second youngest, etc.
e.g. `lv_span_t* span = lv_spangroup_get_child(spangroup, 0)` will return the first child of the spangroup. `lv_span_t* span = lv_spangroup_get_child(spangroup, -1)` will return the last (or most recent) child.
### Child Count
Use the function `lv_spangroup_get_child_cnt(spangroup)` to get back the number of spans the group is maintaining.
e.g. `uint32_t size = lv_spangroup_get_child_cnt(spangroup)`
### Text align
like label object, the spangroup can be set to one the following modes:
- `LV_TEXT_ALIGN_LEFT` Align text to left.
- `LV_TEXT_ALIGN_CENTER` Align text to center.
- `LV_TEXT_ALIGN_RIGHT` Align text to right.
- `LV_TEXT_ALIGN_AUTO` Align text auto.
use function `lv_spangroup_set_align(spangroup, LV_TEXT_ALIGN_CENTER)` to set text align.
### Modes
The spangroup can be set to one the following modes:
- `LV_SPAN_MODE_FIXED` fixes the object size.
- `LV_SPAN_MODE_EXPAND` Expand the object size to the text size but stay on a single line.
- `LV_SPAN_MODE_BREAK` Keep width, break the too long lines and auto expand height.
Use `lv_spangroup_set_mode(spangroup, LV_SPAN_MODE_BREAK)` to set object mode.
### Overflow
The spangroup can be set to one the following modes:
- `LV_SPAN_OVERFLOW_CLIP` truncates the text at the limit of the area.
- `LV_SPAN_OVERFLOW_ELLIPSIS` will display an ellipsis(`...`) when text overflows the area.
Use `lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP)` to set object overflow mode.
### first line indent
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.
### lines
Use `lv_spangroup_set_lines(spangroup, 10)` to set the maximum number of lines to be displayed in LV_SPAN_MODE_BREAK mode, negative values indicate no limit.
## Events
No special events are sent by this widget.
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:: ../../../examples/widgets/span/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_span.h
:project: lvgl
```

59
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/spinbox.md Normal file
View File

@@ -0,0 +1,59 @@
# Spinbox (lv_spinbox)
## Overview
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
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_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_cursor_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.
If an encoder is used as input device, the selected digit is shifted to the right by default whenever the encoder button is clicked. To change this behaviour to shifting to the left, the `lv_spinbox_set_digit_step_direction(spinbox, LV_DIR_LEFT)` can be used
### Format
`lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)` sets the number format. `digit_count` is the number of digits excluding the decimal separator and the sign.
`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.
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when the value has changed.
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.
## Example
```eval_rst
.. include:: ../../../examples/widgets/spinbox/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_spinbox.h
:project: lvgl
```
## Example

44
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/spinner.md Normal file
View File

@@ -0,0 +1,44 @@
# Spinner (lv_spinner)
## Overview
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).
## Usage
### Create a spinner
To create a spinner use `lv_spinner_create(parent, spin_time, arc_length)`. `spin time` sets the spin time in milliseconds, `arc_length` sets the length of the spinning arc in degrees.
## Events
No special events are sent to the Spinner.
See the events of the [Arc](/widgets/core/arc) too.
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:: ../../../examples/widgets/spinner/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_spinner.h
:project: lvgl
```

72
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/tabview.md Normal file
View File

@@ -0,0 +1,72 @@
# Tabview (lv_tabview)
## Overview
The Tab view object can be used to organize content in tabs.
The Tab view is built from other widgets:
- Main container: [lv_obj](/widgets/obj))
- Tab buttons: [lv_btnmatrix](/widgets/core/btnmatrix)
- 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.
A new tab can be selected either by clicking on a tab button or by sliding horizontally on the content.
## Parts and Styles
There are no special parts on the Tab view but the `lv_obj` and `lv_btnnmatrix` widgets are used to create the Tab view.
## Usage
### 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.
`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
New tabs can be added with `lv_tabview_add_tab(tabview, "Tab name")`. This will return a pointer to an [lv_obj](/widgets/obj) object where the tab's content can be created.
### Rename tabs
A tab can be renamed with `lv_tabview_rename_tab(tabview, tab_id, "New Name")`.
### Change tab
To select a new tab you can:
- Click on its tab button
- Slide horizontally
- Use `lv_tabview_set_act(tabview, id, LV_ANIM_ON/OFF)` function
### Get the parts
`lv_tabview_get_content(tabview)` returns the container for the tabs, `lv_tabview_get_tab_btns(tabview)` returns the Tab buttons object which is a [Button matrix](/widgets/core/btnmatrix).
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when a new tab is selected by sliding or clicking the tab button. `lv_tabview_get_tab_act(tabview)` returns the zero based index of the current tab.
Learn more about [Events](/overview/event).
## Keys
Keys have effect only on the tab buttons (Button matrix). Add manually to a group if required.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/tabview/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_tabview.h
:project: lvgl
```

54
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/tileview.md Normal file
View File

@@ -0,0 +1,54 @@
# 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.
If the Tile view is screen sized, the user interface resembles what you may have seen on smartwatches.
## Parts and Styles
The Tile view is built from an [lv_obj](/widgets/obj) container and [lv_obj](/widgets/obj) tiles.
The parts and styles work the same as for [lv_obj](/widgets/obj).
## Usage
### 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.
The returned value is an `lv_obj_t *` on which the content of the tab can be created.
### Change tile
The Tile view can scroll to a tile with `lv_obj_set_tile(tileview, tile_obj, LV_ANIM_ON/OFF)` or `lv_obj_set_tile_id(tileviewv, col_id, row_id, LV_ANIM_ON/OFF);`
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when a new tile loaded by scrolling. `lv_tileview_get_tile_act(tabview)` can be used to get current tile.
## Keys
*Keys* are not handled by the Tile view.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/tileview/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_tileview.h
:project: lvgl
```

61
packages/artinchip/lvgl-ui/lvgl/docs/widgets/extra/win.md Normal file
View File

@@ -0,0 +1,61 @@
# Window (lv_win)
## Overview
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)
- Header on the background: [lv_obj](/widgets/obj)
- Title on the header: [lv_label](/widgets/core/label)
- Buttons on the header: [lv_btn](/widgets/core/btn)
- Content area on the background: [lv_obj](/widgets/obj)
## Usage
### Create a Window
`lv_win_create(parent, header_height)` creates a Window with an empty header.
### 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")`.
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.
## 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.
## Events
No special events are sent by the windows, however events can be added manually to the return value of `lv_win_add_btn`.
Learn more about [Events](/overview/event).
## Keys
No *Keys* are handled by the window.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/win/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_win.h
:project: lvgl
```