ESP32 LVGL8.1 ——bar 进度条 (bar 21)

最新推荐文章于 2024-03-02 14:41:25 发布
最新推荐文章于 2024-03-02 14:41:25 发布
阅读量3.5k 收藏 32
点赞数
分类专栏： LVGL 成长笔记 文章标签： gui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/believe666/article/details/122191450
版权
本文档详细介绍了LVGL库中Bar对象的使用，包括概述、部分和风格、使用方法、值和范围、模式、事件及按键处理。提供了多个示例，展示如何创建基本的进度条、带有动画的加载过程、渐变加载、自定义背景进度条以及进度条方向变换。此外，还展示了如何实现加载动画时标签跟随显示的技巧。
摘要由CSDN通过智能技术生成

提示：本博客作为学习笔记，有错误的地方希望指正

文章目录

一、bar 简介

1.1概述 Overview

  进度条形对象有一个背景和一个指示符。指标的宽度是根据条形图的当前值设置的。如果对象的宽度小于其高度，则可以创建竖条。不仅可以设置结束值，还可以设置开始值，从而改变指示器的开始位置。

1.2部分和风格 Parts and Styles

  LV_PART_MAIN 背景栏和它使用了典型的背景样式属性。添加填充可以使指标变小或变大。如果使用LV_ANIM_ON设置值，anim_time属性将设置动画时间 LV_PART_INDICATOR它还使用了所有典型的背景属性。

1.3使用 Usage

1.3值和范围 Value and range

  可以通过lv_bar_set_value(bar, new_value, LV_ANIM_ON/OFF)设置一个新值。这个值被解释为一个范围(最小值和最大值)，可以用lv_bar_set_range(bar, min, max)修改这个范围。默认范围为1…100。lv_bar_set_value()函数中的新值可以设置或不设置动画，这取决于最后一个参数(LV_ANIM_ON/OFF)。

1.3模式 Modes

  bar可以是以下两种模式之一:
LV_BAR_MODE_NORMAL 如上所述的正常条
LV_BAR_SYMMETRICAL 绘制指示器从零值到当前值。要求负的最小范围和正的最大范围。
LV_BAR_RANGE 允许通过lv_bar_set_start_value(bar, new_value, LV_ANIM_ON/OFF)设置开始值。起始值必须总是小于结束值。

1.4事件 Events

  LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END发送主要和指示部件，以使挂钩的图纸。有关主要部分的更多. 细节，请参阅Base对象的文档。指示符使用以下字段:clip_area, draw_area, rect_dsc, part。

1.5按键 Keys

对象类型不处理任何key。

二、Bar API

lv_obj_t * lv_bar_create(lv_obj_t * parent);								//创建一个bar对象
void lv_bar_set_value(lv_obj_t * obj, int32_t value, lv_anim_enable_t anim);//在栏上设置一个新值
void lv_bar_set_start_value(lv_obj_t * obj, int32_t start_value, lv_anim_enable_t anim);//在工具条上设置一个新的起始值
void lv_bar_set_range(lv_obj_t * obj, int32_t min, int32_t max);			//设置一个bar的最小值和最大值
void lv_bar_set_mode(lv_obj_t * obj, lv_bar_mode_t mode);					//设置栏的类型。
int32_t lv_bar_get_value(const lv_obj_t * obj);								//获取一个bar的值
int32_t lv_bar_get_start_value(const lv_obj_t * obj);						//获取一个条的起始值
int32_t lv_bar_get_min_value(const lv_obj_t * obj);							//获取一个条形图的最小值
int32_t lv_bar_get_max_value(const lv_obj_t * obj);							//获取一个bar的最大值
lv_bar_mode_t lv_bar_get_mode(lv_obj_t * obj);								//获取bar的类型。

三、示例

3.1Bar 基本显示

/*************************************************
 *  函数名称 :  bar_show_1
 *  参    数 ： 无
 *  函数功能 ： 进度条
 *************************************************/
void bar_show_1()
{
   lv_obj_t * bar1 = lv_bar_create(lv_scr_act());  //创建bar对象
   lv_obj_set_size(bar1,200,20);                   //设置尺寸
   lv_obj_center(bar1);                            //居中对象
   lv_bar_set_value(bar1,70,LV_ANIM_OFF);          //设置bar值
}

在这里插入图片描述

3.2实现进度条加载过程

/*************************************************
 *  函数名称 :  bar_show_2
 *  参    数 ： 无
 *  函数功能 ： 进度条
 *************************************************/
void bar_show_2()
{
   static lv_style_t style_bg;            //创建bar背景样式
   static lv_style_t style_indic;         //创建bar指示器样式

   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);     //设置内边距
   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);          //移除样式
   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);  //设置初始值
}

请添加图片描述

3.3实现渐变加载

/*************************************************
 *  函数名称 :  set_temp
 *  参    数 ： 无
 *  函数功能 ： 设置温度
 *************************************************/
static void set_temp(void * bar,int32_t temp)
{
   lv_bar_set_value(bar,temp,LV_ANIM_ON);
}
/*************************************************
 *  函数名称 :  bar_show_3
 *  参    数 ： 无
 *  函数功能 ： 进度条
 *************************************************/
void bar_show_3()
{
   static lv_style_t style_indic;                  //创建bar背景样式
   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());   //设置bar对象
   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);                              //开始动画
}

请添加图片描述

3.4实现自定义背景进度条显示

/*************************************************
 *  函数名称 :  bar_show_4
 *  参    数 ： 无
 *  函数功能 ： 进度条
 *************************************************/
void bar_show_4()
{
   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_img_opa(&style_indic,LV_OPA_30);//设置图片透明度

   lv_obj_t * bar =lv_bar_create(lv_scr_act()); //创建Bar对象
   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);        //设置bar的值
   lv_bar_set_start_value(bar,20,LV_ANIM_OFF);  //设置bar的起始值
}

在这里插入图片描述

3.5示例进度条方向变换显示

/*************************************************
 *  函数名称 :  bar_show_5
 *  参    数 ： 无
 *  函数功能 ： 实现显示加载方向不同
 *************************************************/
void bar_show_5()
{
   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);                //设置初始值
   lv_obj_align(bar_ltr,LV_ALIGN_CENTER,0,-30);             //设置位置

   label = lv_label_create(lv_scr_act());                   //创建bar对象
   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());        //创建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);                //设置初始值
   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);//设置位置
}

在这里插入图片描述

3.6实现bar加载动画label跟随显示

函数API解释

／**
*获取文本大小
*@param size_res指针指向一个'point_t'变量，用来存储结果
* @param文本指针指向一个文本
* @param字体指针的文本字体
* @param letter_space文本的字母空间
* @param txt。文本的行空间
* @param flags设置::lv_text_flag_t的文本
* @param max_width max with the text (break the lines to fit this size)设置CORD_MAX避免
*换行符
*／
Void lv_txt_get_size(lv_point_t * size_res, const char * text, const lv_font_t * font, lv_coord_t letter_space, lv_coord_t line_space, lv_coord_t max_width, lv_text_flag_t flag);

／**
* 写一篇课文
* @param坐标的标签
* @param掩码标签将只绘制在这个区域
* @param DSC指针绘制描述符
* @param TXT ' \0 '终止文本写入
* @param指向变量' lv_draw_label_hint_t '的提示指针。
*它是通过绘制来加速非常长的文本(数千行)的绘制。
*／
LV_ATTRIBUTE_FAST_MEM void lv_draw_label(const lv_area_t * cods, const lv_area_t * mask，Const lv_draw_label_dsc_t * dsc，Const char * txt，lv_draw_label_hint_t *hint);

历程Code

/*************************************************
 *  函数名称 :  bar_set_value
 *  参    数 ： 无
 *  函数功能 ： 回调实现显示值
 *************************************************/
static void bar_set_value(void * bar,int32_t v)
{
   lv_bar_set_value(bar,v,LV_ANIM_OFF);
}
/*************************************************
 *  函数名称 :  bar_event_cb
 *  参    数 ： 无
 *  函数功能 ： 回调处理值
 *************************************************/
static void bar_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));  //将获得的bar的值到打印到buf中
   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(lv_area_get_width(dsc->draw_area) > txt_size.x + 20){ //当获取bar进度条的值大于显示数字的宽度 + 20
      txt_area.x2 = dsc->draw_area->x2 - 5;              //设置x2的位置，就是要在bar内部 获取进度条最右端的值减去5
      txt_area.x1 = txt_area.x2 - txt_size.x + 1;        //更具x2的值减去 获取字体的宽度值 
      label_dsc.color = lv_color_white();                //设置显示字体
   }else{                                                //在bar外部显示
      txt_area.x1 = dsc->draw_area->x2 + 5;              //显示的最左边位置直接显示在进度条的最右端 + 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; //设置字体y1 的位置
   txt_area.y2 = txt_area.y1 + txt_size.y -1;            //设置字体y2的位置
   lv_draw_label(&txt_area,dsc->clip_area,&label_dsc,buf,NULL);   //重绘显示内容
}
/*************************************************
 *  函数名称 :  bar_show_6
 *  参    数 ： 无
 *  函数功能 ： bar显示
 *************************************************/
void bar_show_6()
{
   lv_obj_t * bar = lv_bar_create(lv_scr_act());         //创建bar对象
   lv_obj_add_event_cb(bar,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,bar_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);                                    //开始动画
}

请添加图片描述

请叫我啸鹏
关注
  • 0
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
LVGL---进度条(lv_bar)
weixin_42162924的博客
11-26 618
LVGL---进度条(lv_bar)
esp32Lvgl移植文件
04-23
ESP32 LVGL移植文件是将LVGL图形库适配到ESP32微控制器上的一个项目，主要目标是为ESP32平台提供高效且功能丰富的图形用户界面（GUI）支持。LVGL是一款开源的轻量级图形库，适用于嵌入式系统，其设计简洁、性能优异...
LVGL8.3 --lv_bar 进度条
smicd的博客
01-30 1738
进度条对象有一个背景和一个指示器。指示器的宽度根据进度条的当前值自动设置。如果设置进度条的宽度小于其高度，就可以创建出垂直摆放的进度条。可以通过设置进度条的值，从而改变指标的开始位置。进度条的PART与style都比较简单和明确，本文重点在于对进度条模式mode的理解。
LVGL lv_bar进度条（13）
jiang_2018的博客
01-13 1261
lv_bar 进度条包括背景和指示器（INDIC），高和宽决定是水平还是竖直进度条 样式 /** Bar parts */ enum { LV_BAR_PART_BG, /** Bar background style. */ LV_BAR_PART_INDIC, /** Bar fill area style. */ _LV_BAR_PART_VIRTUAL_LAST }; typedef uint8_t lv_bar_part_t; 例子 void lv_ex_bar_1(v
芯课堂 | LVGL基础知识（三）
SYNWIT的博客
01-05 408
LVGL进度条对象上有一个背景和一个指示器。指示器的宽度根据进度条的当前值进行设置。如果对象的宽度小于其高度，则可以创建垂直进度条。不仅可以设置进度条的结束值，还可以设置进度条的起始值，从而改变指示器的起始位置。LVGL进度条讲解。
LVGL——进度条
weixin_63780683的博客
12-13 868
【代码】LVGL——进度条。
LVGL_基础控件进度条bar
weixin_50183638的博客
10-06 697
【代码】LVGL_基础控件进度条bar。
LVGL学习笔记16 - 进度条Bar
pq的博客
01-11 3695
进度条有一个背景和一个指示器组成，通过lv_bar_create创建对象。进度条默认的范围是 0..100。
【LVGL 学习】进度条（BAR）控件学习
一名嵌入式界的小学生
08-28 3703
【代码】【LVGL 学习】进度条（BAR）控件学习。
在 esp32 上运行 lvgl + freetype
08-29
在ESP32上运行LVGL + FreeType是一个有趣且实用的项目，这涉及到将嵌入式图形库LVGL与字体渲染库FreeType结合使用，以创建具有丰富图形界面的物联网应用。下面我们将深入探讨这两个库的功能、如何在ESP32上集成它们...
ESP32-S3 MicroPython lvgl固件
02-04
ESP32-S3 MicroPython lvgl固件
esp32s3使用lvgl驱动1.69寸电容触摸屏
05-10
在本文中，我们将深入探讨如何利用LVGL图形库在ESP32S3上驱动一块1.69英寸的电容式触摸屏。屏幕采用ST7789显示控制器，而触摸部分则由CST816芯片提供支持。 首先，LVGL（LittleV Graphics Library）是一个开源的、...
esp32 lvgl v8.3环境搭建
02-28
**ESP32 LVGL v8.3环境搭建详解** 在嵌入式开发领域，ESP32因其强大的性能、丰富的外设以及低功耗特性，成为许多IoT项目首选的微控制器。LVGL（LittlevGL）则是一款轻量级、高效的图形库，适合在资源有限的设备上...
ESP32（MicroPython） LVGL进度条显示时间
weixin_74155302的博客
06-26 608
本程序使用进度条显示时间，为了防止文字与进度条重合，日期显示在进度条上方，时间显示在进度条下方。为了方便调整数值，进度条未封装为类。要注意的是，星期显示在进度条上显示的是原始数值，标签则转换为文字进行显示。ESP32　LVGL　进度条显示时间。
基于GUI-Guider的LVGL组件使用教程：【按键与文本，进度条的配合/滑动条与进度条，百分数的配合/开关与灯的配合】
2302_77915576的博客
03-02 3573
在NXP官网搜索GUI-Guider下载GUI-Guider(Windows)版本。最后对其进行稍加美化（主要是背景颜色，大小的变化），一个进度条就搞定了。同理生成另一个按键，名称设置为TempDown，文本设置为down。第二行放置关联函数，将按键变化和文本，进度条联系起来。放置在一起，将滑动条，进度条，进度文本初始值设置为0；将其放置在主界面的旁边，大小设置成一样：我的是。至此，按键控制加减就完成了。
LVGL笔记15–lv_bar进度条
未来可期
02-15 1829
LVGL笔记15–lv_bar进度条 lv_bar 进度条它由背景和指示器俩部分构成,这俩部分的样式都可以被单独设置,然后此进度条会根据它的宽和高的大小来自动决定它是水平进度条还是垂直进度条,可以通过lv_bar_set_range 接口来设置进度条的数值范围,通过 lv_bar_set_value 接口来设置一个新的进度值,与此同时可选一个进度变化的动画效果。默认的进度条样式比较一般，通过设置样式可以把进度条设置的美观一些。 lv_bar进度条主要数据类型 enum { LV_BAR_STYL
LVGL V8学习之进度条（bar控件）
菜鸟攻城狮
03-07 4437
这一篇来研究下LVGL V8下进度条（bar控件）的使用，还是通过codeblock来模拟代码的运行 // bar对象动画回调函数 static void obj_bar_anim_exec_callback(void * bar, int32_t value) { if (bar != NULL) { lv_bar_set_value((lv_obj_t *)bar, value, LV_ANIM_ON); // 设置进度条对象的值
ESP32（MicroPython） LVGL 两个进度条动画
weixin_74155302的博客
06-22 692
本次有两个程序，均采用延时生成动画相同的进度条以实现波浪效果。由于动画速度较快会导致动画不能同步，动画周期增加到2秒。ESP32（MicroPython）LVGL两个进度条动画。（本次的程序传参使用的是距屏幕底部的距离）
基于Springboot和Vue的在线视频教育平台源码 在线视频教育平台代码（高分毕设项目）
最新发布
08-03
在线视频教育平台源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值