LiJie/MXC-A36-Demo
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

demo工程暂存 优化菜单界面UI和功能

Browse Source
This commit is contained in:
Li Jie
2024-04-29 16:32:24 +08:00
commit 330cd25cf1
3310 changed files with 2163318 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
Demo/lvgl/docs/widgets/extra/calendar.md Normal file
View File

@ -0,0 +1,85 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/extra/calendar.md
```
# Calendar (lv_calendar)
## Overview
The Calendar object is a classic calendar which can:
- 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). Besides the Calendar is an editable object to 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 area external "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. It uses all the background related style properties.
- `LV_PART_ITEMS` Refers to the dates and day names. Button matrix control flags are set the to differentiate the buttons and a custom drawer event is added modify the properties of the buttons
- 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 ticker border with the themes primary color
- highlighted day have some opacity with the themes primary color.
## Usage
Some functions uses 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 arrays 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 is a data is clicked. `lv_calendar_get_pressed_date(calendar, &date)` tells which day is currently being pressed. Returns `LV_RES_OK` if theres is valid pressed data, else `LV_RES_INV`.
Learn more about [vent](/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
### Arrow buttons
`lv_calendar_header_arrow_create(parent, calendar, button_size)` 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(parent, calendar)` creates a header that contains 2 drop-drown lists: one for the year and an other for the month.
## Example
```eval_rst
.. include:: ../../../examples/widgets/calendar/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_calendar.h
:project: lvgl
```

169
Demo/lvgl/docs/widgets/extra/chart.md Normal file
View File

@ -0,0 +1,169 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/extra/chart.md
```
# Chart (lv_chart)
## Overview
Charts are a basic object to visualize data points.
They support *Line* charts (connect points with lines and/or draw points on them) and *Bar* charts.
Charts also support:
- 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. It uses all the typical background related style properties and *line* properties for the division lines. *Padding* makes the series area smaller.
- `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.
- `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` is 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. It 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)`.
It allocates data for a `lv_chart_series_t` structure which contains the chosen `color` and an array for the data points.
`axis` can ha 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.
With `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 get by `lv_chart_get_y_array(chart, ser)`. It can be use 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, value, id)` 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_DEF` 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` - Circularly add the new data (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 point a pixel, LVGL searches the smallest and the greatest value and draws a vertical lines between them. It ensures to not miss any peaks.
### 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 the there is visible border on a side and there is not padding on that side the division line would be drawn on top the border, therefore on it won't be drawn.
### Override default start point for series
If you wish 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 zoom 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 on the same place.
`lv_chart_get_point_pos_by_id(chart, series, id, &point_out)` tells the coordinate of a given point. It's useful to place the cursor to given point.
`lv_chart_set_cursor_point(chart, cursor, series, point_id)` sticks the cursor the 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 perssed. `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 for multiple parts. The fields of `lv_obj_draw_part_dsc_t` is set as the followings:
- `LV_PART_ITEMS` (the series)
- *Line chart* `clip_area`, `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), `part`
- *Bar chart* `clip_area`, `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), `part`
- `LV_PART_TICKS` (major tick lines and label) `clip_area`, `id` (axis), `value` (scaled value of the tick), `text` (`value` converted to decimal), `line_dsc`, `label_dsc`, `part`
- `LV_PART_CURSOR` Te events are send for 3 times:
- vertical line `clip_area`, `p1`, `p2` (points of the line), `line_dsc`, `part`
- horizontal line `clip_area`, `p1`, `p2` (points of the line), `line_dsc`, `part`
- point `clip_area`, `draw_area` (points of the line), `rect_dsc`, `part`
- `LV_PART_MAIN` (the division lines) `clip_area`, `id` (index of the line), `p1`, `p2` (points of the line), `line_dsc`, `part`
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
```

60
Demo/lvgl/docs/widgets/extra/colorwheel.md Normal file
View File

@ -0,0 +1,60 @@
```eval_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 to select color. The Hue, Saturation and Value of the color can be selected after each other.
Long pressing the object, the color wheel will change to the next parameter of the color (hue, saturation or value).
Besides, 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_color_mode(colorwheel, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE)`.
The color mode be fixed (do not change with long press) using `lv_colorwheel_set_color_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 by 1
- `LV_KEY_ENTER` By long press the next mode will be shown. By double click the current parameter will be reset.
Learn more about [Keys](/overview/indev).
## Example
```eval_rst
.. include:: ../../../examples/widgets/colorwheel/index.rst
```
## API
```eval_rst
.. doxygenfile:: lv_colorwheel.h
:project: lvgl
```

65
Demo/lvgl/docs/widgets/extra/imgbtn.md Normal file
View File

@ -0,0 +1,65 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/imgbtn.md
```
# 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 works 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 the sources only in `LV_IMGBTN_STATE_RELEASED`, the 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.
## 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_CHECHABLE` is enabled.
- `LV_KEY_LEFT/DOWN` Go to non-toggled state if `LV_OBJ_FLAG_CHECHABLE` 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
```

29
Demo/lvgl/docs/widgets/extra/index.md Normal file
View File

@ -0,0 +1,29 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/object-types/index.md
```
# Extra widgets
```eval_rst
.. toctree::
:maxdepth: 1
calendar
chart
colorwheel
imgbtn
keyboard
led
list
meter
msgbox
span
spinbox
spinner
tabview
tileview
win
```

84
Demo/lvgl/docs/widgets/extra/keyboard.md Normal file
View File

@ -0,0 +1,84 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/keyboard.md
```
# 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 and uses all the typical background properties
- `LV_PART_ITEMS` The buttons and it also uses all typical background properties and 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_NUM` Display numbers, +/- sign, and decimal dot.
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)`.
### 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`.
It 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.
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
```

51
Demo/lvgl/docs/widgets/extra/led.md Normal file
View File

@ -0,0 +1,51 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/led.md
```
# LED (lv_led)
## Overview
The LEDs are rectangle-like (or circle) object. It's brightness can be adjusted. With lower brightness the 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
No special event are sent by the LED object.
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
```

55
Demo/lvgl/docs/widgets/extra/list.md Normal file
View File

@ -0,0 +1,55 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/list.md
```
# 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 its too long.
### Texts
`lv_list_add_text(list, icon, 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
```

92
Demo/lvgl/docs/widgets/extra/meter.md Normal file
View File

@ -0,0 +1,92 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/extra/meter.md
```
# 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 and it 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, plus 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
For 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 tick. Later indicators (needles, arcs, tick modifiers) can be added to the meter
Any number of scaled 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` tells 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 needs to be added to a Scale and their value is interpreted in the range of the Scale.
All the indicator add functions returns `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` is 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 tick labels to allow overwriting the texts. The following fields of `lv_obj_draw_part_dsc_t` is set:
`clip_area`, `part` (to `LV_PART_TICK`), `id` (the index of the major tick line), `value` (the value of the tick line), `label_dsc`, `text` (value converted to decimal)
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
```

71
Demo/lvgl/docs/widgets/extra/msgbox.md Normal file
View File

@ -0,0 +1,71 @@
```eval_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.
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 involve the text and the buttons.
The message box can be a modal (block clicks on the rest of the screen) or not modal.
## Parts and Styles
The mesasge box is built from other widgets so you can check these widget's 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 messaeg 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 a 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_colse_btn` can be `true` or `false` to add/don't add a close button.
### Get the parts
The building block of the message box can be get with 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 `lv_event_get_target(e)` will give the button matrix, `lv_event_get_current_target(e)` will give the message box. `lv_msgbox_get_active_btn_text(msgbox)` can be used to get the 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
```

74
Demo/lvgl/docs/widgets/extra/span.md Normal file
View File

@ -0,0 +1,74 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/span.md
```
# Span (lv_span)
## Overview
A spangroup is the object that is used to display rich text. different from the label object, `spangroup` can automatically organize text of different fonts, colors, and sizes into the spangroup obj.
## Parts and Styles
- `LV_PART_MAIN` The spangroup has only the part.
## Usage
### Set text and style
spangroup object uses span to describe text and text style. so, first we need to create `span` descriptor use function `lv_span_t * span = lv_spangroup_new_span(spangroup)`.then use `lv_span_set_text(span, "text")` to set text.The style of the modified text is the same as the normal style used,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).
### Text align
like label object, The spangroup can be 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 one the following modes:
- `LV_SPAN_MODE_FIXED` fixed the obj size.
- `LV_SPAN_MODE_EXPAND` Expand the object size to the text size. only one line.
- `LV_SPAN_MODE_BREAK` Keep width, break the too long lines and auto expand height.
use function `lv_spangroup_set_mode(spangroup, LV_SPAN_MODE_BREAK)` to set obj mode.
### Overflow
The spangroup can be one the following modes:
- `LV_SPAN_OVERFLOW_CLIP` truncate the text at the limit of the area.
- `LV_SPAN_OVERFLOW_ELLIPSIS` This mode value will display an ellipsis(`...`) when text overflow the area.
use function `lv_spangroup_set_overflow(spangroup, LV_SPAN_OVERFLOW_CLIP)` to set obj Overflow.
### first line indent
use function `lv_spangroup_set_indent(spangroup, 20)` to set text indent of first line.
## 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
```

58
Demo/lvgl/docs/widgets/extra/spinbox.md Normal file
View File

@ -0,0 +1,58 @@
```eval_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.
Under the hood the Spinbox is a modified [Text area](/widgets/core/textarea).
## Parts and Styles
The parts of the Spinbox are identiacl 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 10^n values values can be set, and not for example 3.
### Format
`lv_spinbox_set_digit_format(spinbox, digit_count, separator_position)` sets the number format. `digit_count` is the number of digit excluding the decimal separator and the sign.
`separator_position` is the number of digit before the decimal point. If 0, decimal point is not
### Rollover
`lv_spinbox_set_rollover(spinbox, true/false)` enables/disabled rolloiver mode. If the minimum or maximum values is reached with rollover the value will change to the other limit.
If not enabled the value will be reamain at the minimum or maximum value.
## Events
- `LV_EVENT_VALUE_CHANGED` Sent when the value has changed.
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

46
Demo/lvgl/docs/widgets/extra/spinner.md Normal file
View File

@ -0,0 +1,46 @@
```eval_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.
## Parts and Styles
The parts are identical to the parts of [lv_arc](/widgets/core/arc).
## Usage
### Create a spinner
To create spinner use `lv_spinner_create(parent, spin_time, arc_length)`. `spin time` set the spin time in milliseconds, `arc_length` sets the length of the spinning arc in degrees.
## Events
No special events are sent the the Spinner.
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
Demo/lvgl/docs/widgets/extra/tabview.md Normal file
View File

@ -0,0 +1,72 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/extra/tabview.md
```
# Tabview (lv_tabview)
## Overview
The Tab view object can be used to organize content in tabs.
The Tab view is built from other widgets like this:
- 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 topn, bottom, left and right side of teh Tab view.
A new tab can be selected either clicking on a tab button or 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 build up 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")`. It will return with a pointer to an [lv_obj](/widgets/obj) object where the tab's content can be created.
### 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)` return the container for the tabs, `lv_tabview_get_tab_btns(tabview)` returns the Tab buttons 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). You can add it 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
```

58
Demo/lvgl/docs/widgets/extra/tileview.md Normal file
View File

@ -0,0 +1,58 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/tileview.md
```
# Tile view (lv_tileview)
## Overview
The Tile view is a container object where its elements (called *tiles*) can be arranged in a grid form.
By swiping the user can navigate between the tiles.
Any direction of swiping can be disabled on the tiles individually to not allow moving from tile to an other.
If the Tile view is screen sized it gives a user interface you might have seen on the smartwatches.
## Parts and Styles
The Tile view is build from an [lv_obj](/widgets/obj) container and also [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 with 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 either with 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
```

65
Demo/lvgl/docs/widgets/extra/win.md Normal file
View File

@ -0,0 +1,65 @@
```eval_rst
.. include:: /header.rst
:github_url: |github_link_base|/widgets/win.md
```
# Window (lv_win)
## Overview
The Window is container-like objects built from a header with title and button and a content area.
## Parts and Styles
The Window is built from other widgets so you can check these widget's 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 am empty header.
### Title and buttons
Any number of text's (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_right(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 of the functions are called. So adding a button, a text and two other buttons will result in a button on the left, a title, ant 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 the buttons to the right added after the title.
## Get the parts
`lv_win_get_header(win)` return 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_right`.
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
```