feat(docs): batch 4 of proofread/edited docs (#7207)

Co-authored-by: Liam <30486941+liamHowatt@users.noreply.github.com>
This commit is contained in:
Victor Wheeler 2024-11-07 04:48:14 -07:00 committed by GitHub
parent 234ce5ef36
commit a875298f7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 346 additions and 189 deletions

View File

@ -7,18 +7,22 @@ Calendar (lv_calendar)
Overview
********
The Calendar Widget 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 Widget is a classic calendar which can:
The Calendar is added to the default group (if it is set). Calendar is
- 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 one is set). Calendar is
an editable Widget which allow selecting and clicking the dates with
encoder navigation as well.
encoder or keyboard navigation as well as pointer-type input devices.
To make the Calendar flexible, by default it doesn't show the current
To make the Calendar flexible, by default it does not show the current
year or month. Instead, there are optional "headers" that can be
attached to the calendar.
.. _lv_calendar_parts_and_styles:
Parts and Styles
@ -27,14 +31,15 @@ Parts and Styles
The calendar Widget uses the :ref:`Button Matrix <lv_buttonmatrix>`
Widget under the hood to arrange the days into a matrix.
- :cpp:enumerator:`LV_PART_MAIN` The background of the calendar. Uses all the background related style properties.
- :cpp:enumerator:`LV_PART_ITEMS` Refers to the dates and day names. Button matrix control flags are set to differentiate the
- :cpp:enumerator:`LV_PART_MAIN` Calendar background. Uses all the background-related style properties.
- :cpp:enumerator:`LV_PART_ITEMS` Refers to 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 :cpp:enumerator:`LV_BUTTONMATRIX_CTRL_DISABLED` flag
- day names have no border, no background and are drawn with a gray color
- days of the previous and next month have the :cpp:enumerator:`LV_BUTTONMATRIX_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.
.. _lv_calendar_usage:
Usage
@ -50,37 +55,41 @@ To set the current date (today), use the
:cpp:expr:`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
----------
Month shown
-----------
To set the shown date, use
:cpp:expr:`lv_calendar_set_shown_date(calendar, year, month)`
:cpp:expr:`lv_calendar_set_showed_date(calendar, year, month)`
Highlighted days
----------------
The list of highlighted dates should be stored in a
:cpp:struct:`lv_calendar_date_t` array loaded by
:cpp:struct:`lv_calendar_date_t` array and applied to the Calendar by calling
:cpp:expr:`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.
Only the array's pointer will be saved so the array should be have static or
global scope.
Name of the days
----------------
Names of days
-------------
The name of the days can be adjusted with
The names of the days can be adjusted with
:cpp:expr:`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.
pointer of the day names is saved so the array should have static or
global scope.
Custom year list
----------------
Sets a custom year list with :cpp:expr:`lv_calendar_header_dropdown_set_year_list(calendar, years_list)`
Set a custom year list with :cpp:expr:`lv_calendar_header_dropdown_set_year_list(calendar, years_list)`
where ``years_list`` is a pointer to the custom years list. It can be a constant string
like ``static const char * years = "2023\n2022\n2021\n2020\n2019";``,
or can be generated dynamically into a buffer as well.
or can be generated dynamically into a buffer as well. Calendar stores these in a
Drop-Down List Widget via :cpp:func:`lv_dropdown_set_options` so the passed string
pointer can be supplied by a local variable or buffer and does not need to persist
beyond the call.
Chinese calendar
----------------
@ -105,9 +114,9 @@ Events
******
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent if a date is clicked.
:cpp:expr:`lv_calendar_get_pressed_date(calendar, &date)` set ``date`` to the
:cpp:expr:`lv_calendar_get_pressed_date(calendar, &date)` to set ``date`` to the
date currently being pressed. Returns :cpp:enumerator:`LV_RESULT_OK` if there is a
valid pressed date, else :cpp:enumerator:`LV_RESULT_INVALID`.
valid pressed date; otherwise it returns :cpp:enumerator:`LV_RESULT_INVALID`.
.. admonition:: Further Reading
@ -137,21 +146,21 @@ Keys
Headers
*******
**From v8.1 the header is added directly into the Calendar widget and
**From LVGL v8.1 onward, the header is added directly into the Calendar Widget and
the API of the headers has been changed.**
Arrow buttons
-------------
:cpp:expr:`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.
contains a left and right arrow on the sides and text between the arrows showing the
current year and month.
Drop-down
---------
:cpp:expr:`lv_calendar_header_dropdown_create(calendar)` creates a header that
contains 2 drop-drown lists: one for the year and another for the month.
contains 2 Drop-Drown List Widgets for the year and month.
.. _lv_calendar_example:

View File

@ -4,15 +4,108 @@
Chart (lv_chart)
================
Overview
********
Charts are a basic Widget to visualize data points. Currently *Line*
charts (connect points with lines and/or draw points on them) and *Bar*
charts are supported.
Charts Widget are used to visualize data.
Charts have:
- 0 or more background division lines (horizontal and vertical),
- 4 internal axes, any of which can be used to specify scale for a data series,
- a ``point_count`` (default 10) that applies to all data series added,
- 0 or more data series (you can add or remove them at any time),
- 0 or more cursors (you can add or remove them at any time),
- update mode (modifies behavior of :cpp:func:`lv_chart_set_next_value` if you use it).
Charts can:
- display flexible axes with ticks and text
- show precise locations of points or other locations on chart with cursors
- show or hide individual data series
- show or hide individual data points
- show or hide cursors
- scroll and zoom
Chart Basics
************
Each chart has the following attributes (over and above attributes found in
:ref:`all Widgets <base_widget>`):
Type (governs how a chart's data series are drawn)
- Can be LINE (default), BAR, SCATTER, or none.
- You can change the chart's type at any point during it's life.
Horizontal and Vertical division lines
- default 3 and 5 respectively
- can be any non-negative value including 0
2 Y axes and 2 X axes (the latter are used with SCATTER charts)
- All 4 axes come with each chart automatically (they do not have to be created).
- Their default ranges are [0..100]. If you need a different range, set it before
chart is drawn.
- You "use" an axis by associating it with a data series, which happens when the
data series is created (more on this below). More than one data series can be
associated with each axis.
Point count (number of data points in all data series added to the chart)
- default 10
- If you provide your own data-value arrays, each array so provided must contain
at least this number of values.
- For LINE- and BAR-charts, this is the number of points on the X axis.
- LINE- and BAR-charts require only one data-value array to supply Y-values for each data point.
- For SCATTER charts, this is the number of scatter-points in the data series.
- SCATTER charts have separate data-value arrays for both X-values and Y-values.
Any number of data series
- After a chart is created, it initially contains no data series. You have to add them.
- You can add and remove data series at any time during a chart's life.
- When a data series is created, it comes with pre-allocated values array(s)
based on its chart type and ``point_count``. (All chart types use an array of
Y-values. SCATTER-type charts also use an array of X-values.). All Y-values so
allocated are set to :c:macro:`LV_CHART_POINT_NONE`, which causes that point to be hidden.
- To get points to be drawn on the chart, you must set their Y-values to something
other than :c:macro:`LV_CHART_POINT_NONE`.
- You can hide a point by setting its Y-value to :c:macro:`LV_CHART_POINT_NONE`.
- If desired, you can tell a data series to instead use a value array you
provide. If you do:
- Pre-allocated value arrays are automatically freed.
- That data series will continue to use *your* array from that time onward.
- The values in your array must remain available through the life of that data series.
- You must ensure each array provided contains at least ``point_count`` ``int32_t`` elements.
- Management of the life any value arrays you provide is up to you.
Any number of cursors
- After a chart is created, it initially contains no cursors. You have to add them
if you want to use them.
- You can add, show, hide or remove cursors at any time during a chart's life.
Update mode
- :ref:`See below <chart_update_modes>`
Chart layers
------------
When a chart is drawn, certain things appear on top of other things, in this
oder, from back to front:
- The chart's background (with optional division lines)
- Each data series:
- Earliest data series added appears on top.
- For a SCATTER chart, within each series, points later in the sequence will appear
on top of points earlier in the sequence when there is overlap.
- Each cursor (if there are any):
- The most recent cursor added appears on top.
Charts can have: - division lines - 2 y axis - axis ticks and texts on
ticks - cursors - scrolling and zooming
.. _lv_chart_parts_and_styles:
@ -20,94 +113,132 @@ Parts and Styles
****************
- :cpp:enumerator:`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.
- :cpp:enumerator:`LV_PART_SCROLLBAR` The scrollbar used if the chart is zoomed. See
background and *line* (for division lines) related style
properties. *Padding* makes the series area smaller. For BAR
charts ``pad_column`` sets the space between bars in the same data series.
- :cpp:enumerator:`LV_PART_SCROLLBAR` A scrollbar used if the chart is zoomed. See
:ref:`base_widget`'s documentation for details.
- :cpp:enumerator:`LV_PART_ITEMS` Refers to the line or bar series.
- :cpp:enumerator:`LV_PART_ITEMS` Refers to the LINE or BAR data 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.
- LINE chart: *line* properties are used by lines.
``width``, ``height``, ``bg_color`` and ``radius`` are used to set
the appearance of points on the line.
- Bar chart: The typical background properties are used to style the
bars. ``pad_column`` sets the space between the columns on the
same index.
bars. ``pad_column`` sets the space between columns in the same data series.
- :cpp:enumerator:`LV_PART_INDICATOR` Refers to the points on line and scatter chart
(small circles or squares).
- :cpp:enumerator:`LV_PART_CURSOR` *Line* properties are used to style the cursors.
- :cpp:enumerator:`LV_PART_INDICATOR` Refers to points on LINE- and SCATTER-charts
(small circles or squares [with possibly-rounded corners]).
- :cpp:enumerator:`LV_PART_CURSOR` *Line* properties are used to style cursors.
``width``, ``height``, ``bg_color`` and ``radius`` are used to set
the appearance of points.
the appearance of the cursor's "point" showing its location. If either ``width``
or ``height`` are set to 0, only the cursor's lines are drawn.
.. _lv_chart_usage:
Usage
*****
.. _lv_chart_details:
Details
*******
Chart type
----------
The following data display types exist:
A chart can be one of the following types:
- :cpp:enumerator:`LV_CHART_TYPE_NONE`: Do not display any data. Can be used to hide the series.
- :cpp:enumerator:`LV_CHART_TYPE_LINE`: Draw lines between the data points and/or points (rectangles or circles) on the data points.
- :cpp:enumerator:`LV_CHART_TYPE_NONE`: Do not display any data. Can be used to hide chart's data.
- :cpp:enumerator:`LV_CHART_TYPE_LINE`: Draw lines between data points. Data points
can also be illustrated if their ``width``, ``height``, ``bg_color`` and ``radius``
styles (for :cpp:enumerator:`LV_PART_ITEMS`) are set and both ``width`` and
``height`` have non-zero values.
- :cpp:enumerator:`LV_CHART_TYPE_BAR`: Draw bars.
- :cpp:enumerator:`LV_CHART_TYPE_SCATTER`: X/Y chart drawing point's and lines between the points. .
- :cpp:enumerator:`LV_CHART_TYPE_SCATTER`: X/Y chart drawing point's and optionally
lines between the points if line-width style values for
:cpp:enumerator:`LV_PART_ITEMS` is a non-zero value, and the point's Y-value is
something other than :c:macro:`LV_CHART_POINT_NONE`. (Drawing of individual points on a
SCATTER chart can be suppressed if their Y-values are set to :c:macro:`LV_CHART_POINT_NONE`.)
You can specify the display type with
Charts start their life as LINE charts. You can change a chart's type with
:cpp:expr:`lv_chart_set_type(chart, LV_CHART_TYPE_...)`.
Data series
-----------
You can add any number of series to the charts by
:cpp:expr:`lv_chart_add_series(chart, color, axis)`. This allocates an
:cpp:expr:`lv_chart_series_t` structure which contains the chosen ``color`` and
an array for the data points. ``axis`` can have the following values:
You can add any number of data series to a chart by using
:cpp:expr:`lv_chart_add_series(chart, color, axis)`.
This allocates (and returns a pointer to) an :cpp:expr:`lv_chart_series_t` structure
which remembers the ``color`` and ``axis`` you specified, and comes pre-allocated
with an array of ``chart->point_cnt`` ``int32_t`` Y-values, all set to
:c:macro:`LV_CHART_POINT_NONE`. (A SCATTER chart also comes with a pre-allocated array of
the same number of X-values.)
``axis`` specifies which axis is used to scale its values, and may be one of the following:
- :cpp:enumerator:`LV_CHART_AXIS_PRIMARY_Y`: Left axis
- :cpp:enumerator:`LV_CHART_AXIS_SECONDARY_Y`: Right axis
- :cpp:enumerator:`LV_CHART_AXIS_PRIMARY_X`: Bottom axis
- :cpp:enumerator:`LV_CHART_AXIS_SECONDARY_X`: Top axis
``axis`` tells which axis's range should be used to scale the values.
When adding a data series to a SCATTER chart, bit-wise OR your selected Y axis
(primary or secondary) with one of the X-axis values.
:cpp:expr:`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: ``int32_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
:cpp:expr:`lv_chart_refresh(chart)` after the external data source has been
updated to update the chart.
If you wish to have the chart use your own Y-value array instead of the one provided,
you can do so with
The value array of a series can be obtained with
:cpp:expr:`lv_chart_get_y_array(chart, ser)`, which can be used with
``ext_array`` or *normal array*\ s.
:cpp:expr:`lv_chart_set_ext_y_array(chart, series, value_array)`.
For :cpp:enumerator:`LV_CHART_TYPE_SCATTER` type
:cpp:expr:`lv_chart_set_ext_x_array(chart, ser, value_array)` and
:cpp:expr:`lv_chart_get_x_array(chart, ser)` can be used as well.
You are responsible for ensuring the array you provide contains at least
``chart->point_cnt`` elements in it.
Modify the data
---------------
``value_array`` should look like this: ``int32_t * value_array[num_points]``. Only
the array's pointer is saved in the series so its contents need to remain available
for the life of the series, i.e. the array needs to be global, static or dynamically
allocated.
You have several options to set the data of series:
.. note::
Call :cpp:expr:`lv_chart_refresh(chart)` when a chart's data has changed to
signal that the chart should be re-rendered next time a display refresh occurs.
You do not need to do this if you are using the provided value array(s) and
setting values with ``lv_chart_set_...value_...()`` functions. See below
for more information about these functions.
1. Set the values manually in the array like ``ser1->points[3] = 7`` and refresh the chart with :cpp:enumerator:`lv_chart_refresh(chart)`.
2. Use :cpp:expr:`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 :cpp:expr:`lv_chart_set_next_value(chart, ser, value)`.
4. Initialize all points to a given value with :cpp:expr:`lv_chart_set_all_value(chart, ser, value)`.
A pointer to the Y-value array of a series can be obtained with
:cpp:expr:`lv_chart_get_y_array(chart, series)`. This is true whether you are using
the provided Y-value array or provided your own.
Use :cpp:enumerator:`LV_CHART_POINT_NONE` as value to make the library skip drawing
that point, column, or line segment.
For SCATTER-type charts,
For :cpp:enumerator:`LV_CHART_TYPE_SCATTER` type
:cpp:expr:`lv_chart_set_value_by_id2(chart, ser, id, value)` and
:cpp:expr:`lv_chart_set_next_value2(chart, ser, x_value, y_value)` can be used
as well.
- :cpp:expr:`lv_chart_set_ext_x_array(chart, series, value_array)` and
- :cpp:expr:`lv_chart_get_x_array(chart, series)`
can be used as well.
Modifying data
--------------
You have several options to set the Y-values for a data series:
1. Set the values programmatically in the array like ``ser1->points[3] = 7`` and refresh the
chart with :cpp:enumerator:`lv_chart_refresh(chart)`.
2. Use :cpp:expr:`lv_chart_set_value_by_id(chart, series, id, value)` where ``id`` is
the zero-based index of the point you wish to update.
3. Use :cpp:expr:`lv_chart_set_next_value(chart, series, value)`.
(See `Update modes`_ below.)
4. Set all points to a single Y-value with :cpp:expr:`lv_chart_set_all_value(chart, series, value)`.
Use :c:macro:`LV_CHART_POINT_NONE` as value to make the library skip drawing
that point, column, or scatter-point.
For SCATTER-type charts,
- :cpp:expr:`lv_chart_set_value_by_id2(chart, series, id, x_value, y_value)` and
- :cpp:expr:`lv_chart_set_next_value2(chart, series, x_value, y_value)`
can be used as well.
.. _chart_update_modes:
.. _update modes:
Update modes
------------
@ -126,14 +257,14 @@ Number of points
The number of points in the series can be modified by
:cpp:expr:`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 affects the number of points processed when an external
value array is assigned to a series, so you also need to be sure any external
array so provided contains at least ``point_num`` elements.
Handling large number of points
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Handling large numbers of points
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
On line charts, if the number of points is greater than the pixels
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
@ -142,10 +273,10 @@ 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
You can specify the minimum and maximum values in Y-direction with
:cpp:expr:`lv_chart_set_range(chart, axis, min, max)`. ``axis`` can be
:cpp:enumerator:`LV_CHART_AXIS_PRIMARY` (left axis) or :cpp:enumerator:`LV_CHART_AXIS_SECONDARY`
(right axis).
:cpp:enumerator:`LV_CHART_AXIS_PRIMARY_Y` (left Y axis) or
:cpp:enumerator:`LV_CHART_AXIS_SECONDARY_Y` (right Y axis).
The value of the points will be scaled proportionally. The default range
is: 0..100.
@ -157,15 +288,16 @@ The number of horizontal and vertical division lines can be modified by
:cpp:expr:`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.
would be drawn on top of the border and in this case it is not drawn so
as not to hide the chart border.
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 :cpp:expr:`lv_chart_set_x_start_point(chart, ser, id)` where ``id`` is
the new index position to start plotting from.
function :cpp:expr:`lv_chart_set_x_start_point(chart, series, id)` where ``id`` is
the new zero-based index position to start plotting from.
Note that :cpp:enumerator:`LV_CHART_UPDATE_MODE_SHIFT` also changes the
``start_point``.
@ -173,34 +305,47 @@ Note that :cpp:enumerator:`LV_CHART_UPDATE_MODE_SHIFT` also changes the
Tick marks and labels
---------------------
With the help of :ref:`Scale <lv_scale>`, vertical and horizontal scales can be added in a very flexible way.
See the example below to learn more.
With the help of :ref:`Scale <lv_scale>`, vertical and horizontal scales can be added
in a very flexible way. See the `examples 2 <#axis-ticks-and-labels-with-scrolling>`_
below to learn more.
Zoom
----
To zoom the chart all you need to is wrapping it into a parent container and set the chart's width or height
to larger value. This way the chart will be scrollable on its parent.
To zoom the chart all you need to do is wrap it in a parent container and set the
chart's width and/or height to a larger value. Doing this will cause the the chart
to be scrollable in its parent --- the parent container provides the scrollable "view
window".
Cursor
------
A new cursor is initially given position :c:macro:`LV_CHART_POINT_NONE` which causes
it to be hidden. To show the cursor, its location must be set by you
programmatically using one of the functions below.
You can hide a cursor without removing it from the chart by using
:cpp:func:`lv_chart_set_cursor_point` by passing :c:macro:`LV_CHART_POINT_NONE` as
the point id.
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.
The possible values of ``dir`` are the enumeration values of :cpp:type:`lv_dir_t`:
``LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL`` or their bit-wise OR-ed values to tell
the chart which direction(s) to draw its lines.
:cpp:expr:`lv_chart_set_cursor_pos(chart, cursor, &point)` sets the position of
the cursor. ``pos`` is a pointer to an :cpp:struct:`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.
the cursor to an arbitrary point on the chart. ``&point`` is a pointer to an
:cpp:struct:`lv_point_t` variable. E.g. ``lv_point_t point = {10, 20}``. If the chart
is scrolled, the cursor moves with it.
:cpp:expr:`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.
coordinate of a given point on the chart. This is useful to place the cursor on
that data point.
:cpp:expr:`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.
:cpp:expr:`lv_chart_set_cursor_point(chart, cursor, series, point_id)` places the
cursor on the specified data point on the chart. If the point's position changes
(via a new value or via scrolling), the cursor moves with the point.
See an example of using this function `here <#show-cursor-on-the-clicked-point>`_.
@ -209,7 +354,7 @@ scrolling) the cursor will move with the point.
Events
******
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when a new point is clicked pressed.
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when a new point on the chart is pressed.
:cpp:expr:`lv_chart_get_pressed_point(chart)` returns the zero-based index of
the pressed point.

View File

@ -10,20 +10,22 @@ Overview
The Checkbox Widget is created from a "tick box" and a label. When the
Checkbox is clicked the tick box is toggled.
.. _lv_checkbox_parts_and_styles:
Parts and Styles
****************
- :cpp:enumerator:`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
- :cpp:enumerator:`LV_PART_MAIN` Background of Checkbox and it uses
the text- and all the typical background-style properties.
``pad_column`` adjusts spacing between tickbox and label
- :cpp:enumerator:`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 one is set).
.. _lv_checkbox_usage:
@ -33,27 +35,27 @@ Usage
Text
----
The text can be modified with the
:cpp:expr:`lv_checkbox_set_text(cb, "New text")` function and will be
The text can be modified with
:cpp:expr:`lv_checkbox_set_text(cb, "New text")` and will be
dynamically allocated.
To set a static text, use :cpp:expr:`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.
To set static text, use :cpp:expr:`lv_checkbox_set_text_static(cb, txt)`. This
way, only a pointer to ``txt`` will be stored. The provided text buffer must remain
available for the life of the Checkbox.
Check, uncheck, disable
-----------------------
You can manually check, un-check, and disable the Checkbox by using the
You can programmatically check, un-check, and disable the Checkbox by using the
common state add/clear function:
.. code-block:: c
lv_obj_add_state(cb, LV_STATE_CHECKED); /* Make the checkbox checked */
lv_obj_remove_state(cb, LV_STATE_CHECKED); /* Make the checkbox unchecked */
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /* Make the checkbox checked and disabled */
lv_obj_add_state(cb, LV_STATE_CHECKED); /* Make Checkbox checked */
lv_obj_remove_state(cb, LV_STATE_CHECKED); /* Make Checkbox unchecked */
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /* Make Checkbox checked and disabled */
To get whether the checkbox is checked or not use:
To find out whether the Checkbox is checked use
:cpp:expr:`lv_obj_has_state(cb, LV_STATE_CHECKED)`.
@ -63,7 +65,7 @@ To get whether the checkbox is checked or not use:
Events
******
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when the checkbox is toggled.
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when Checkbox is toggled.
.. admonition:: Further Reading
@ -78,10 +80,11 @@ Events
Keys
****
The following *Keys* are processed by the 'Buttons': -
``LV_KEY_RIGHT/UP`` Go to toggled state if toggling is enabled -
``LV_KEY_LEFT/DOWN`` Go to non-toggled state if toggling is enabled -
:cpp:enumerator:`LV_KEY_ENTER` Clicks the checkbox and toggles it
The following *Keys* are processed by Checkbox:
- ``LV_KEY_RIGHT/UP`` Go to CHECKED state if Checkbox is enabled
- ``LV_KEY_LEFT/DOWN`` Go to non-CHECKED state if Checkbox is enabled
- :cpp:enumerator:`LV_KEY_ENTER` Clicks the Checkbox and toggles its value.
Note that, as usual, the state of :cpp:enumerator:`LV_KEY_ENTER` is translated to
``LV_EVENT_PRESSED/PRESSING/RELEASED`` etc.

View File

@ -7,92 +7,92 @@ Drop-Down List (lv_dropdown)
Overview
********
The drop-down list allows the user to select one value from a list.
The Drop-Down List allows the user to select a 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. When the user
The Drop-Down List is closed by default and displays a single value or
predefined text. When activated (by click on the Drop-Down List), a list
is created from which the user may select one item. 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 Widget to allow selecting an option
with encoder navigation as well.
The Drop-down list is added to the default group (if one is set).
The Drop-down list is an editable Widget allowing list-item selection via
encoder or keyboard navigation as well.
.. _lv_dropdown_parts_and_styles:
Parts and Styles
****************
The Dropdown widget is built from the elements: "button" and "list"
(both not related to the button and list widgets)
The Drop-Down List Widget is built from the elements: "button" and "list"
(lightweight versions of the Button and List Widgets).
Button
------
- :cpp:enumerator:`LV_PART_MAIN` The background of the button. Uses the typical
background properties and text properties for the text on it.
- :cpp:enumerator:`LV_PART_INDICATOR` Typically an arrow symbol that can be an image
or a text (:cpp:enumerator:`LV_SYMBOL`).
- :cpp:enumerator:`LV_PART_MAIN` Background of button, uses the typical
background- and text-properties for its text.
- :cpp:enumerator:`LV_PART_INDICATOR` Typically an arrow symbol that can be an Image
or text (e.g. :cpp:enumerator:`LV_SYMBOL`).
The button goes to :cpp:enumerator:`LV_STATE_CHECKED` when it's opened.
List
----
- :cpp:enumerator:`LV_PART_MAIN` The list itself. Uses the typical background
- :cpp:enumerator:`LV_PART_MAIN` The list itself; uses the typical background
properties. ``max_height`` can be used to limit the height of the
list.
- :cpp:enumerator:`LV_PART_SCROLLBAR` The scrollbar background, border, shadow
properties and width (for its own width) and right padding for the
spacing on the right.
- :cpp:enumerator:`LV_PART_SELECTED` Refers to the currently pressed, checked or
pressed+checked option. Also uses the typical background properties.
pressed+checked option. Also uses the typical background properties.
The list is hidden/shown on open/close. To add styles to it use
:cpp:expr:`lv_dropdown_get_list(dropdown)` to get the list Widget. For example:
The list is shown/hidden on open/close. To add styles to it use
:cpp:expr:`lv_dropdown_get_list(dropdown)` to get the list object. Example:
.. code-block:: c
lv_obj_t * list = lv_dropdown_get_list(dropdown) /*Get the list*/
lv_obj_add_style(list, &my_style, selector) /*Add the styles to the list*/
lv_obj_t * list = lv_dropdown_get_list(dropdown) /* Get list */
lv_obj_add_style(list, &my_style, selector) /* Add styles to list */
Alternatively the theme can be extended with new styles.
Alternatively the theme can be extended with the new styles.
.. _lv_dropdown_usage:
Usage
*****
.. _lv_dropdown_options:
Options
*******
.. _lv_dropdown_list_items:
Set options
-----------
List items
----------
Options are passed to the drop-down list as a string with
:cpp:expr:`lv_dropdown_set_options(dropdown, options)`. Options should be
separated by ``\n``. For example: ``"First\nSecond\nThird"``. This
string will be saved in the drop-down list, so it can in a local
variable.
The list items are passed to the Drop-Down List as a newline-separated list in a string
as the ``options`` argument to :cpp:expr:`lv_dropdown_set_options(dropdown, options)`.
Each list item should be separated by ``\n``. Example: ``"First\nSecond\nThird"``.
This string is copied by the Drop-Down List, so its contents do not need to remain
available beyond this call.
The :cpp:expr:`lv_dropdown_add_option(dropdown, "New option", pos)` function
inserts a new option to ``pos`` index.
inserts a new option at index ``pos``.
To save memory the options can set from a static(constant) string as well
with :cpp:expr:`lv_dropdown_set_static_options(dropdown, options)`. In this case
the options string should be alive while the drop-down list exists and
:cpp:func:`lv_dropdown_add_option` can't be used
To save memory the options can be set from a static (const) string as well
with :cpp:expr:`lv_dropdown_set_options_static(dropdown, options)`. In this case
the options string's contents must remain available for the life of the Drop-Down
List and :cpp:func:`lv_dropdown_add_option` cannot be used.
You can select an option manually with
You can select an option programmatically with
:cpp:expr:`lv_dropdown_set_selected(dropdown, id)`, where ``id`` is the index of
an option.
the target option.
Get selected option
-------------------
The get the *index* of the selected option, use
To get the *index* of the selected option, use
:cpp:expr:`lv_dropdown_get_selected(dropdown)`.
:cpp:expr:`lv_dropdown_get_selected_str(dropdown, buf, buf_size)` copies the
@ -102,7 +102,7 @@ Direction
---------
The list can be created on any side. The default :cpp:enumerator:`LV_DIR_BOTTOM` can
be modified by :cpp:expr:`lv_dropdown_set_dir(dropdown, LV_DIR_LEFT)` function.
be modified using :cpp:expr:`lv_dropdown_set_dir(dropdown, LV_DIR_LEFT)`.
If the list would be vertically out of the screen, it will be aligned to
the edge.
@ -110,25 +110,25 @@ the edge.
Symbol
------
A symbol (typically an arrow) can be added to the dropdown list with
A symbol (typically an arrow) can be added to the Drop-Down List with
:cpp:expr:`lv_dropdown_set_symbol(dropdown, LV_SYMBOL_...)`
If the direction of the drop-down list is :cpp:enumerator:`LV_DIR_LEFT` the symbol
If the direction of the Drop-Down List is :cpp:enumerator:`LV_DIR_LEFT` the symbol
will be shown on the left, otherwise on the right.
Show selected
-------------
The main part can either show the selected option or a static text. If a
The main part can either show the selected item or static text. If
static is set with :cpp:expr:`lv_dropdown_set_text(dropdown, "Some text")` it
will be shown regardless to th selected option. If the text is ``NULL``
will be shown regardless of the selected item. If the text is ``NULL``
the selected option is displayed on the button.
Manually open/close
-------------------
Programmatically open/close
---------------------------
To manually open or close the drop-down list the
``lv_dropdown_open/close(dropdown)`` function can be used.
To programmatically open or close the Drop-Down List use
:cpp:expr:`lv_dropdown_open(dropdown)` or :cpp:expr:`lv_dropdown_close(dropdown)`.
@ -137,9 +137,9 @@ To manually open or close the drop-down list the
Events
******
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when the new option is selected or the list is opened/closed.
- :cpp:enumerator:`LV_EVENT_CANCEL` Sent when the list is closed
- :cpp:enumerator:`LV_EVENT_READY` Sent when the list is opened
- :cpp:enumerator:`LV_EVENT_VALUE_CHANGED` Sent when a new option is selected or the list is opened/closed.
- :cpp:enumerator:`LV_EVENT_CANCEL` Sent when list is closed.
- :cpp:enumerator:`LV_EVENT_READY` Sent when list is opened.
.. admonition:: Further Reading
@ -154,10 +154,10 @@ Events
Keys
****
- ``LV_KEY_RIGHT/DOWN`` Select the next option.
- ``LV_KEY_LEFT/UP`` Select the previous option.
- :cpp:enumerator:`LV_KEY_ENTER` Apply the selected option (Sends
:cpp:enumerator:`LV_EVENT_VALUE_CHANGED` event and closes the drop-down list).
- ``LV_KEY_RIGHT/DOWN`` Select next list item.
- ``LV_KEY_LEFT/UP`` Select previous list item.
- :cpp:enumerator:`LV_KEY_ENTER` Apply selected list item (sends
:cpp:enumerator:`LV_EVENT_VALUE_CHANGED` event and closes Drop-Down List).
.. admonition:: Further Reading