Bar (lv_bar)
Overview
The bar object has a background and an indicator on it. The width of the indicator is set according to the current value of the bar.
Vertical bars can be created if the width of the object is smaller than its height.
Not only the end, but also the start value of the bar can be set, which changes the start position of the indicator.
Parts and Styles
LV_PART_MAIN
The background of the bar and it uses the typical background style properties. Adding padding makes the indicator smaller or larger. Theanim_time
style property sets the animation time if the values set withLV_ANIM_ON
.LV_PART_INDICATOR
The indicator itself; also uses all the typical background properties.
Usage
Value and range
A new value can be set by
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 changes to the opposite direction.
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 aboveLV_BAR_MODE_SYMMETRICAL
Draw the indicator from the zero value to current value. Requires a negative minimum range and positive maximum range.LV_BAR_MODE_RANGE
Allows setting the start value too bylv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)
. The start value always has to be smaller than the end value.
Events
See the events of the Base object too.
Learn more about Events.
Keys
No Keys are processed by the object type.
Learn more about Keys.
Example
Simple Bar
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
void lv_example_bar_1(void)
{
lv_obj_t * bar1 = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar1, 200, 20);
lv_obj_center(bar1);
lv_bar_set_value(bar1, 70, LV_ANIM_OFF);
}
#endif
Styling a bar
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Example of styling the bar
*/
void lv_example_bar_2(void)
{
static lv_style_t style_bg;
static lv_style_t style_indic;
lv_style_init(&style_bg);
lv_style_set_border_color(&style_bg, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_width(&style_bg, 2);
lv_style_set_pad_all(&style_bg, 6); /*To make the indicator smaller*/
lv_style_set_radius(&style_bg, 6);
lv_style_set_anim_duration(&style_bg, 1000);
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_radius(&style_indic, 3);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_remove_style_all(bar); /*To have a clean start*/
lv_obj_add_style(bar, &style_bg, 0);
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 200, 20);
lv_obj_center(bar);
lv_bar_set_value(bar, 100, LV_ANIM_ON);
}
#endif
Temperature meter
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
static void set_temp(void * bar, int32_t temp)
{
lv_bar_set_value(bar, temp, LV_ANIM_ON);
}
/**
* A temperature meter example
*/
void lv_example_bar_3(void)
{
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_opa(&style_indic, LV_OPA_COVER);
lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 20, 200);
lv_obj_center(bar);
lv_bar_set_range(bar, -20, 40);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_exec_cb(&a, set_temp);
lv_anim_set_duration(&a, 3000);
lv_anim_set_playback_duration(&a, 3000);
lv_anim_set_var(&a, bar);
lv_anim_set_values(&a, -20, 40);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
}
#endif
Stripe pattern and range value
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with stripe pattern and ranged value
*/
void lv_example_bar_4(void)
{
LV_IMAGE_DECLARE(img_skew_strip);
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_image_src(&style_indic, &img_skew_strip);
lv_style_set_bg_image_tiled(&style_indic, true);
lv_style_set_bg_image_opa(&style_indic, LV_OPA_30);
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);
lv_obj_set_size(bar, 260, 20);
lv_obj_center(bar);
lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);
lv_bar_set_value(bar, 90, LV_ANIM_OFF);
lv_bar_set_start_value(bar, 20, LV_ANIM_OFF);
}
#endif
Bar with LTR and RTL base direction
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with LTR and RTL base direction
*/
void lv_example_bar_5(void)
{
lv_obj_t * label;
lv_obj_t * bar_ltr = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar_ltr, 200, 20);
lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);
lv_obj_align(bar_ltr, LV_ALIGN_CENTER, 0, -30);
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Left to Right base direction");
lv_obj_align_to(label, bar_ltr, LV_ALIGN_OUT_TOP_MID, 0, -5);
lv_obj_t * bar_rtl = lv_bar_create(lv_screen_active());
lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_RTL, 0);
lv_obj_set_size(bar_rtl, 200, 20);
lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF);
lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 0, 30);
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Right to Left base direction");
lv_obj_align_to(label, bar_rtl, LV_ALIGN_OUT_TOP_MID, 0, -5);
}
#endif
Custom drawer to show the current value
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
#define MAX_VALUE 100
#define MIN_VALUE 0
static void set_value(void * bar, int32_t v)
{
lv_bar_set_value(bar, v, LV_ANIM_OFF);
}
static void event_cb(lv_event_t * e)
{
lv_obj_t * obj = lv_event_get_target(e);
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.font = LV_FONT_DEFAULT;
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d", (int)lv_bar_get_value(obj));
lv_point_t txt_size;
lv_text_get_size(&txt_size, buf, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, LV_COORD_MAX,
label_dsc.flag);
lv_area_t txt_area;
txt_area.x1 = 0;
txt_area.x2 = txt_size.x - 1;
txt_area.y1 = 0;
txt_area.y2 = txt_size.y - 1;
lv_area_t indic_area;
lv_obj_get_coords(obj, &indic_area);
lv_area_set_width(&indic_area, lv_area_get_width(&indic_area) * lv_bar_get_value(obj) / MAX_VALUE);
/*If the indicator is long enough put the text inside on the right*/
if(lv_area_get_width(&indic_area) > txt_size.x + 20) {
lv_area_align(&indic_area, &txt_area, LV_ALIGN_RIGHT_MID, -10, 0);
label_dsc.color = lv_color_white();
}
/*If the indicator is still short put the text out of it on the right*/
else {
lv_area_align(&indic_area, &txt_area, LV_ALIGN_OUT_RIGHT_MID, 10, 0);
label_dsc.color = lv_color_black();
}
label_dsc.text = buf;
label_dsc.text_local = true;
lv_layer_t * layer = lv_event_get_layer(e);
lv_draw_label(layer, &label_dsc, &txt_area);
}
/**
* Custom drawer on the bar to display the current value
*/
void lv_example_bar_6(void)
{
lv_obj_t * bar = lv_bar_create(lv_screen_active());
lv_bar_set_range(bar, MIN_VALUE, MAX_VALUE);
lv_obj_set_size(bar, 200, 20);
lv_obj_center(bar);
lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_MAIN_END, NULL);
lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_var(&a, bar);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_exec_cb(&a, set_value);
lv_anim_set_duration(&a, 4000);
lv_anim_set_playback_duration(&a, 4000);
lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a);
}
#endif
Bar with opposite direction
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES
/**
* Bar with opposite direction
*/
void lv_example_bar_7(void)
{
lv_obj_t * label;
lv_obj_t * bar_tob = lv_bar_create(lv_screen_active());
lv_obj_set_size(bar_tob, 20, 200);
lv_bar_set_range(bar_tob, 100, 0);
lv_bar_set_value(bar_tob, 70, LV_ANIM_OFF);
lv_obj_align(bar_tob, LV_ALIGN_CENTER, 0, -30);
label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "From top to bottom");
lv_obj_align_to(label, bar_tob, LV_ALIGN_OUT_TOP_MID, 0, -5);
}
#endif