LVGL V8之Bar

Simple Bar

void lv_example_bar_1(void)
{
lv_obj_t * bar1 = lv_bar_create(lv_scr_act()); //创建Bar对象
lv_obj_set_size(bar1, 200, 20); //设置宽为200，高为20
lv_obj_center(bar1); //居中显示
lv_bar_set_value(bar1, 70, LV_ANIM_OFF); //设置进度值为70,动画效果为OFF
}

• 运行效果图
  

styling the bar

static void lv_example_bar_2(void)
{
    static lv_style_t style_bg;  //背景style
    static lv_style_t style_indic; //指示器style
    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()); //创建Bar
    lv_obj_remove_style_all(bar); /*To have a clean start*/
    lv_obj_add_style(bar, &style_bg, 0); //添加背景style
    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加指示器style
    lv_obj_set_size(bar, 200, 20); //设置大小
    lv_obj_center(bar); // 居中显示
    lv_bar_set_value(bar, 100, LV_ANIM_ON); //设置进度值为100，开启动画特性
}

• 运行效果
  

Temperature meter

• 动画执行回调

static void set_temp(void* bar, int32_t temp)
{
    lv_bar_set_value(bar, temp, LV_ANIM_ON); //设置Bar进度值
}

• 创建Temperature Bar

static void lv_example_bar_3(void)
{
    static lv_style_t style_indic; //指示器style
    lv_style_init(&style_indic);
    lv_style_set_bg_opa(&style_indic, LV_OPA_COVER); //透明度为LV_OPA_COVER
    lv_style_set_bg_color(&style_indic, lv_palette_main(LV_PALETTE_RED)); //指示器背景为LV_PALETTE_RED
    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_BLUE));//指示器渐变色为LV_PALETTE_BLUE
    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_VER);//渐变色方向为LV_GRAD_DIR_VER
    lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar
    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加style
    lv_obj_set_size(bar, 20, 200);//设置大小
    lv_obj_center(bar); //居中显示
    lv_bar_set_range(bar, -20, 40);／／设置Bar最小值为-20，最大值为40
    lv_anim_t a;
    lv_anim_init(&a); 
    lv_anim_set_exec_cb(&a, set_temp);//设置动画执行回调set_temp
    lv_anim_set_time(&a, 3000); //动画时间为3000毫秒
    lv_anim_set_playback_time(&a, 3000);//回播时间为3000毫秒
    lv_anim_set_var(&a, bar); //设置动画执行对象为bar
    lv_anim_set_values(&a, -20, 40); //动画播放start为-20，end为40
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);//无限重复执行
    lv_anim_start(&a);//启动动画
}

• 运行效果
  

Stripe pattern and range value

static void lv_example_bar_4(void)
{
    LV_IMG_DECLARE(img_skew_strip); //声明image资源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);//设置背景图片为img_skew_strip
    lv_style_set_bg_img_tiled(&style_indic, true);
    lv_style_set_bg_img_opa(&style_indic, LV_OPA_30); //透明度为LV_OPA_30
    lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar对象
    lv_obj_add_style(bar, &style_indic, LV_PART_INDICATOR);//添加style
    lv_obj_set_size(bar, 260, 20); //设置大小
    lv_obj_center(bar); //居中显示
    lv_bar_set_mode(bar, LV_BAR_MODE_RANGE);//设置Bar mode为LV_BAR_MODE_RANGE
    lv_bar_set_value(bar, 90, LV_ANIM_OFF); //设置Bar进度条值为90
    lv_bar_set_start_value(bar, 20, LV_ANIM_OFF); //设置Bar起始值为20
}

• 运行效果图
  

Bar with RTL and RTL base direction

static void lv_example_bar_5(void)
{
    lv_obj_t* label;
    lv_obj_t* bar_ltr = lv_bar_create(lv_scr_act()); //创建左到右对齐使用的Bar对象，默认对齐方式
    lv_obj_set_size(bar_ltr, 200, 20);//设置大小
    lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);//设置进度为70%
    lv_obj_align(bar_ltr, LV_ALIGN_CENTER, 0, -30);//居中垂直向上偏移30对齐屏幕
    label = lv_label_create(lv_scr_act()); //创建Label对象
    lv_label_set_text(label, "Left to Right base direction"); //显示内容Left to Right base direction
    lv_obj_align_to(label, bar_ltr, LV_ALIGN_OUT_TOP_MID, 0, -5);//与bar_ltr对象的外框顶部居中向上偏移5对齐
    lv_obj_t* bar_rtl = lv_bar_create(lv_scr_act());//创建右到左对齐使用的Bar对象
    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); //进度为70%
    lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 0, 30);//与屏幕居中向下偏移30对齐
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Right to Left base direction"); //显示label内容
    lv_obj_align_to(label, bar_rtl, LV_ALIGN_OUT_TOP_MID, 0, -5);//与bar_rtl对象的外框顶部居中向上偏移5对齐
}

• 运行效果图
  

Custom drawr to show the current value

/**
* @brieaf 动画执行回调函数
*/
static void set_value(void* bar, int32_t v)
{
    lv_bar_set_value(bar, v, LV_ANIM_OFF); //设置Bar进度条值
}
/**
* @brieaf 绘制结束回调函数
*/
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); //获取绘制obj对象
    lv_draw_label_dsc_t label_dsc;
    lv_draw_label_dsc_init(&label_dsc); //初时化label绘制描述符
    label_dsc.font = LV_FONT_DEFAULT; //设置默认绘制字体
    char buf[8];
    lv_snprintf(buf, sizeof(buf), "%d", lv_bar_get_value(obj)); //将Bar进度条值格式化成字符串
    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) { //Bar指示器宽度 > 显示字符大小+20个像素点
        txt_area.x2 = dsc->draw_area->x2 - 5;  //计算label位置x2
        txt_area.x1 = txt_area.x2 - txt_size.x + 1;//计算label位置x1
        label_dsc.color = lv_color_white(); //label字体白色
    }
    /*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(); //label黑示字体
    }
    txt_area.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - txt_size.y) / 2;//计算label在Bar中的y1位置
    txt_area.y2 = txt_area.y1 + txt_size.y - 1;//计算label在Bar中y2的位置
    lv_draw_label(&txt_area, dsc->clip_area, &label_dsc, buf, NULL);  //绘制label内容
}

/**
 * Custom drawer on the bar to display the current value
*/
static void lv_example_bar_6(void)
{
    lv_obj_t* bar = lv_bar_create(lv_scr_act()); //创建Bar对象
    lv_obj_add_event_cb(bar, event_cb, LV_EVENT_DRAW_PART_END, NULL); //增加LV_EVENT_DRAW_PART_END回调事件
    lv_obj_set_size(bar, 200, 20); //设置大小
    lv_obj_center(bar); //屏幕居中显示
    lv_anim_t a;
    lv_anim_init(&a);  //初时化动画变量a
    lv_anim_set_var(&a, bar); //关联动画操作对象bar
    lv_anim_set_values(&a, 0, 100); //设置动画值从0~100变化
    lv_anim_set_exec_cb(&a, set_value); //设置动画执行回调函数
    lv_anim_set_time(&a, 2000); //设置动画时间为2000毫秒
    lv_anim_set_playback_time(&a, 2000); //设置动画回播时间为2000毫秒
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE); //动画无限重复
    lv_anim_start(&a); //启动动画
}

• 运行效果图