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. The anim_time style property sets the animation time if the values set with LV_ANIM_ON.

• LV_PART_INDICATOR The indicator itself; also also uses all the typical background properties.

• LV_PART_MAIN 进度条的背景，它使用典型的背景样式属性。 添加填充会让指示器变小或变大。 如果值设置为 LV_ANIM_ON ，则可以继续通过设置 anim_time 样式属性设置动画的时间。

• LV_PART_INDICATOR 指示器本身； 也是使用所有典型的背景属性。

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.

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).

可以通过lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF) 设置新值。 该值在可以使用 lv_bar_set_range(bar, min, max) 修改的范围（最小值和最大值）内进行解释。 进度条默认的范围是 0..100。

使用 lv_bar_set_value 设置的新值可以通过其最后的一个参数 (LV_ANIM_ON/OFF) 设置生效新值时的过渡动画。

Modes（模式）

查看原文

The bar can be one the following modes:

• LV_BAR_MODE_NORMAL A normal bar as described above

• LV_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 by lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF). The start value always has to be smaller than the end value.

进度条可以是以下模式之一：

• LV_BAR_MODE_NORMAL 像上文所说的普通进度条(默认)

• LV_BAR_MODE_SYMMETRICAL 这个模式下可以指定负的最小范围。但是只能从零值到当前值绘制指示器。

• LV_BAR_MODE_RANGE 这个模式下也可以指定负的最小范围。这样进度条的起始值可以不是0，而是你指定的数值(参考示例)，但是这样设置的起始值(lv_bar_set_start_value)必须小于结束值(lv_bar_set_value)。

Events（事件）

查看原文

• LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END are sent for the following parts:

  • LV_BAR_DRAW_PART_INDICATOR The indicator of the bar

    • part: LV_PART_INDICATOR

    • draw_area: area of the indicator

    • rect_dsc

See the events of the Base object too.

Learn more about Events.

• LV_EVENT_DRAW_PART_BEGIN 和 LV_EVENT_DRAW_PART_END 会因为下面这些部分而触发：

  • LV_BAR_DRAW_PART_INDICATOR 进度条的指示器

    • 部分：LV_PART_INDICATOR

    • draw_area：指示器的区域

    • rect_dsc

也就是说我们可以继续通过 LV_EVENT_DRAW_PART_BEGIN 和 LV_EVENT_DRAW_PART_END 修改进度条的样式。

参见 Base object 的事件。

详细了解 事件。

Keys（按键）

查看原文

No Keys are processed by the object type.

Learn more about Keys.

进度条不处理 Keys ，也就是不能通过触摸或者按键控制进度条。

了解有关 Keys 的更多信息。

Example

Simple Bar

C code  

 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_scr_act());
    lv_obj_set_size(bar1, 200, 20);
    lv_obj_center(bar1);
    lv_bar_set_value(bar1, 70, LV_ANIM_OFF);
}

#endif

MicroPython code  

 GitHub Simulator

bar1 = lv.bar(lv.scr_act())
bar1.set_size(200, 20)
bar1.center()
bar1.set_value(70, lv.ANIM.OFF)

---

Styling a bar

C code  

 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_time(&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_scr_act());
    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

MicroPython code  

 GitHub Simulator

#
# Example of styling the bar
#
style_bg = lv.style_t()
style_indic = lv.style_t()

style_bg.init()
style_bg.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
style_bg.set_border_width(2)
style_bg.set_pad_all(6)            # To make the indicator smaller
style_bg.set_radius(6)
style_bg.set_anim_time(1000)

style_indic.init()
style_indic.set_bg_opa(lv.OPA.COVER)
style_indic.set_bg_color(lv.palette_main(lv.PALETTE.BLUE))
style_indic.set_radius(3)

bar = lv.bar(lv.scr_act())
bar.remove_style_all()   # To have a clean start
bar.add_style(style_bg, 0)
bar.add_style(style_indic, lv.PART.INDICATOR)

bar.set_size(200, 20)
bar.center()
bar.set_value(100, lv.ANIM.ON)

---

Temperature meter

C code  

 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_scr_act());
    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_time(&a, 3000);
    lv_anim_set_playback_time(&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

MicroPython code  

 GitHub Simulator

def set_temp(bar, temp):
    bar.set_value(temp, lv.ANIM.ON)

#
# A temperature meter example
#


style_indic = lv.style_t()

style_indic.init()
style_indic.set_bg_opa(lv.OPA.COVER)
style_indic.set_bg_color(lv.palette_main(lv.PALETTE.RED))
style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE.BLUE))
style_indic.set_bg_grad_dir(lv.GRAD_DIR.VER)

bar = lv.bar(lv.scr_act())
bar.add_style(style_indic, lv.PART.INDICATOR)
bar.set_size(20, 200)
bar.center()
bar.set_range(-20, 40)

a = lv.anim_t()
a.init()
a.set_time(3000)
a.set_playback_time(3000)
a.set_var(bar)
a.set_values(-20, 40)
a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
a.set_custom_exec_cb(lambda a, val: set_temp(bar,val))
lv.anim_t.start(a)

---

Stripe pattern and range value

C code  

 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_IMG_DECLARE(img_skew_strip);
    static lv_style_t style_indic;

    lv_style_init(&style_indic);
    lv_style_set_bg_img_src(&style_indic, &img_skew_strip);
    lv_style_set_bg_img_tiled(&style_indic, true);
    lv_style_set_bg_img_opa(&style_indic, LV_OPA_30);

    lv_obj_t * bar = lv_bar_create(lv_scr_act());
    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

MicroPython code  

 GitHub Simulator

#
# get an icon
#
def get_icon(filename,xres,yres):
    try:
        sdl_filename = "../../assets/" + filename + "_" + str(xres) + "x" + str(yres) + "_argb8888.fnt"
        print("file name: ", sdl_filename)
        with open(sdl_filename,'rb') as f:
            icon_data = f.read()
    except:
        print("Could not find image file: " + filename) 
        return None
    
    icon_dsc = lv.img_dsc_t(
        {
            "header": {"always_zero": 0, "w": xres, "h": yres, "cf": lv.img.CF.TRUE_COLOR_ALPHA},
            "data": icon_data,
            "data_size": len(icon_data),
        }
    )
    return icon_dsc

#
# Bar with stripe pattern and ranged value
#

img_skew_strip_dsc = get_icon("img_skew_strip",80,20)
style_indic = lv.style_t()

style_indic.init()
style_indic.set_bg_img_src(img_skew_strip_dsc)
style_indic.set_bg_img_tiled(True)
style_indic.set_bg_img_opa(lv.OPA._30)

bar = lv.bar(lv.scr_act())
bar.add_style(style_indic, lv.PART.INDICATOR)

bar.set_size(260, 20)
bar.center()
bar.set_mode(lv.bar.MODE.RANGE)
bar.set_value(90, lv.ANIM.OFF)
bar.set_start_value(20, lv.ANIM.OFF)


    

---

Bar with LTR and RTL base direction

C code  

 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_scr_act());
    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_scr_act());
    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_scr_act());
    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_scr_act());
    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

MicroPython code  

 GitHub Simulator

#
# Bar with LTR and RTL base direction
#

bar_ltr = lv.bar(lv.scr_act())
bar_ltr.set_size(200, 20)
bar_ltr.set_value(70, lv.ANIM.OFF)
bar_ltr.align(lv.ALIGN.CENTER, 0, -30)

label = lv.label(lv.scr_act())
label.set_text("Left to Right base direction")
label.align_to(bar_ltr, lv.ALIGN.OUT_TOP_MID, 0, -5)

bar_rtl = lv.bar(lv.scr_act())
bar_rtl.set_style_base_dir(lv.BASE_DIR.RTL,0)
bar_rtl.set_size(200, 20)
bar_rtl.set_value(70, lv.ANIM.OFF)
bar_rtl.align(lv.ALIGN.CENTER, 0, 30)

label = lv.label(lv.scr_act())
label.set_text("Right to Left base direction")
label.align_to(bar_rtl, lv.ALIGN.OUT_TOP_MID, 0, -5)

---

Custom drawer to show the current value

C code  

 GitHub

#include "../../lv_examples.h"
#if LV_USE_BAR && LV_BUILD_EXAMPLES

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_draw_part_dsc_t * dsc = lv_event_get_param(e);
    if(dsc->part != LV_PART_INDICATOR) return;

    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_txt_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;
    /*If the indicator is long enough put the text inside on the right*/
    if(lv_area_get_width(dsc->draw_area) > txt_size.x + 20) {
        txt_area.x2 = dsc->draw_area->x2 - 5;
        txt_area.x1 = txt_area.x2 - txt_size.x + 1;
        label_dsc.color = lv_color_white();
    }
    /*If the indicator is still short put the text out of it on the right*/
    else {
        txt_area.x1 = dsc->draw_area->x2 + 5;
        txt_area.x2 = txt_area.x1 + txt_size.x - 1;
        label_dsc.color = lv_color_black();
    }

    txt_area.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - txt_size.y) / 2;
    txt_area.y2 = txt_area.y1 + txt_size.y - 1;

    lv_draw_label(dsc->draw_ctx, &label_dsc, &txt_area, buf, NULL);
}

/**
 * Custom drawer on the bar to display the current value
 */
void lv_example_bar_6(void)
{
    lv_obj_t * bar = lv_bar_create(lv_scr_act());
    lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_PART_END, NULL);
    lv_obj_set_size(bar, 200, 20);
    lv_obj_center(bar);

    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_time(&a, 2000);
    lv_anim_set_playback_time(&a, 2000);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);

}

#endif

MicroPython code  

 GitHub Simulator

def set_value(bar, v):
    bar.set_value(v, lv.ANIM.OFF)

def event_cb(e):
    dsc = lv.obj_draw_part_dsc_t.__cast__(e.get_param())
    if dsc.part != lv.PART.INDICATOR:
        return

    obj= e.get_target()

    label_dsc = lv.draw_label_dsc_t()
    label_dsc.init()
    # label_dsc.font = LV_FONT_DEFAULT;

    value_txt = str(obj.get_value())
    txt_size = lv.point_t()
    lv.txt_get_size(txt_size, value_txt, label_dsc.font, label_dsc.letter_space, label_dsc.line_space, lv.COORD.MAX, label_dsc.flag)

    txt_area = lv.area_t()
    # If the indicator is long enough put the text inside on the right
    if dsc.draw_area.get_width() > txt_size.x + 20:
        txt_area.x2 = dsc.draw_area.x2 - 5
        txt_area.x1 = txt_area.x2 - txt_size.x + 1
        label_dsc.color = lv.color_white()
    # If the indicator is still short put the text out of it on the right*/
    else:
        txt_area.x1 = dsc.draw_area.x2 + 5
        txt_area.x2 = txt_area.x1 + txt_size.x - 1
        label_dsc.color = lv.color_black()

    txt_area.y1 = dsc.draw_area.y1 + (dsc.draw_area.get_height() - txt_size.y) // 2
    txt_area.y2 = txt_area.y1 + txt_size.y - 1

    dsc.draw_ctx.label(label_dsc, txt_area, value_txt, None)

#
# Custom drawer on the bar to display the current value
#

bar = lv.bar(lv.scr_act())
bar.add_event_cb(event_cb, lv.EVENT.DRAW_PART_END, None)
bar.set_size(200, 20)
bar.center()

a = lv.anim_t()
a.init()
a.set_var(bar)
a.set_values(0, 100)
a.set_custom_exec_cb(lambda a,val: set_value(bar,val))
a.set_time(2000)
a.set_playback_time(2000)
a.set_repeat_count(lv.ANIM_REPEAT.INFINITE)
lv.anim_t.start(a)

---

API

Typedefs

typedef uint8_t lv_bar_mode_t

Enums

enum [anonymous]

Values:

enumerator LV_BAR_MODE_NORMAL

enumerator LV_BAR_MODE_SYMMETRICAL

enumerator LV_BAR_MODE_RANGE

enum lv_bar_draw_part_type_t

type field in lv_obj_draw_part_dsc_t if class_p = lv_bar_class Used in LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END

Values:

enumerator LV_BAR_DRAW_PART_INDICATOR

The indicator

Functions

lv_obj_t *lv_bar_create(lv_obj_t *parent)

Create a bar object

参数

parent -- pointer to an object, it will be the parent of the new bar

返回

pointer to the created bar

void lv_bar_set_value(lv_obj_t *obj, int32_t value, lv_anim_enable_t anim)

Set a new value on the bar

参数

• bar -- pointer to a bar object

• value -- new value

• anim -- LV_ANIM_ON: set the value with an animation; LV_ANIM_OFF: change the value immediately

void lv_bar_set_start_value(lv_obj_t *obj, int32_t start_value, lv_anim_enable_t anim)

Set a new start value on the bar

参数

• obj -- pointer to a bar object

• value -- new start value

• anim -- LV_ANIM_ON: set the value with an animation; LV_ANIM_OFF: change the value immediately

void lv_bar_set_range(lv_obj_t *obj, int32_t min, int32_t max)

Set minimum and the maximum values of a bar

参数

• obj -- pointer to the bar object

• min -- minimum value

• max -- maximum value

void lv_bar_set_mode(lv_obj_t *obj, lv_bar_mode_t mode)

Set the type of bar.

参数

• obj -- pointer to bar object

• mode -- bar type from ::lv_bar_mode_t

int32_t lv_bar_get_value(const lv_obj_t *obj)

Get the value of a bar

参数

obj -- pointer to a bar object

返回

the value of the bar

int32_t lv_bar_get_start_value(const lv_obj_t *obj)

Get the start value of a bar

参数

obj -- pointer to a bar object

返回

the start value of the bar

int32_t lv_bar_get_min_value(const lv_obj_t *obj)

Get the minimum value of a bar

参数

obj -- pointer to a bar object

返回

the minimum value of the bar

int32_t lv_bar_get_max_value(const lv_obj_t *obj)

Get the maximum value of a bar

参数

obj -- pointer to a bar object

返回

the maximum value of the bar

lv_bar_mode_t lv_bar_get_mode(lv_obj_t *obj)

Get the type of bar.

参数

obj -- pointer to bar object

返回

bar type from ::lv_bar_mode_t

Variables

const lv_obj_class_t lv_bar_class

struct _lv_bar_anim_t

Public Members

lv_obj_t *bar

int32_t anim_start

int32_t anim_end

int32_t anim_state

struct lv_bar_t

Public Members

lv_obj_t obj

int32_t cur_value

Current value of the bar

int32_t min_value

Minimum value of the bar

int32_t max_value

Maximum value of the bar

int32_t start_value

Start value of the bar

lv_area_t indic_area

Save the indicator area. Might be used by derived types

_lv_bar_anim_t cur_value_anim

_lv_bar_anim_t start_value_anim

lv_bar_mode_t mode

Type of bar