Bar (lv_bar)

The Bar Widget has a background and an indicator. The length of the indicator against the background indicates the Bar's current value.

Overview

The Bar Widget has a background and an indicator. The length of the indicator against the background indicates the Bar's current value.

Both the start and end values of the Bar can be set. Changing the start value to a value other than the minimum value in its range adjusts the start position of the indicator.

Parts and Styles

• LV_PART_MAIN The Bar's background. It uses the typical background style properties. Adding padding makes the indicator smaller or larger. The anim_time style property sets the animation time if the values set with LV_ANIM_ON.
• LV_PART_INDICATOR The Bar's indicator; also uses the typical background style properties.

Usage

Orientation and size

• for orientation, width and height, simply set width and height style properties;

• lv_bar_set_orientation(bar, orientation) to override orientation caused by width and height. Valid values for orientation are:

  • LV_BAR_ORIENTATION_AUTO
  • LV_BAR_ORIENTATION_HORIZONTAL
  • LV_BAR_ORIENTATION_VERTICAL

Value and range

A new value can be set with lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF). The value is interpreted in a range (minimum and maximum values) which can be modified with lv_bar_set_range(bar, min, max). The default range is 0..100, and the default drawing direction is from left to right in horizontal mode and bottom to top in vertical mode. If the minimum value is greater than the maximum value, like 100..0, the drawing direction is reversed.

The new value in lv_bar_set_value can be set with or without an animation depending on the last parameter (LV_ANIM_ON/OFF).

Modes

The Bar can be one of the following modes:

• LV_BAR_MODE_NORMAL A normal Bar as described above
• LV_BAR_MODE_SYMMETRICAL Draws indicator from zero value to current value. Requires a negative minimum value and positive maximum value, e.g. [-100..100].
• LV_BAR_MODE_RANGE Allows setting the start value as well with lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF). The start value must be smaller than the end value.

Data binding

To get familiar with observers, subjects, and data bindings in general visit the Observer page.

This method of subscribing to an integer Subject affects a Bar Widget's integer value directly. Note that this is a one-way binding (Subject ==> Widget) so when the subject changes the Bar will be updated too.

It supports integer and float subjects.

• lv_bar_bind_value(bar, &subject)

Events

No special events are sent by Bar Widgets.

Keys

No Keys are processed by Bar Widgets.

Examples

Simple Bar

Styling a bar

Temperature meter

Stripe pattern and range value

Bar with LTR and RTL base direction

Custom drawer to show the current value

Bar with opposite direction

API