ESP32 开发笔记(四）littleVGL LVGL 控件学习 Arc 弧形控件

「爱情、让人受尽委屈。」 2022-12-25 14:59 1056阅读 0赞

先看效果，创建了两个Arc 弧形控件，一个可触摸拖动的默认风格，一个动画控制的自定义风格的弧形控件
ESP-IDF版本：V4.2
littleVGL版本：V7.10.0

20210214121744199.gif

开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674

一、开发板简介

二、开发环境搭建 windows

三、基础示例

四、LVGL控件使用示例

  1. [LVGL\_Arc\_Test                                  圆弧指示器通过触摸动态改变值][LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]  
  2. [LVGL\_Bar\_Test                                  通过动画方式动态演示Bar进度条的使用方法][LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Bar]  
  3. LVGL\_Button\_Test                             通过5种不同动态效果的按钮学习按钮的创建与使用  
  4. LVGL\_ButtonMatrix\_Test                   创建一个计算器布局来演示矩阵按钮控件的使用  
  5. LVGL\_Calendar\_Test                         日历控件的创建和使用  
  6. LVGL\_Canvas\_Test                           透明画布和画一个圆角过渡色矩形并旋转角度学习画布的使用  
  7. LVGL\_Chart\_Test                               通过创建三个不同风格的图表来学习图表控件的使用  
  8. LVGL\_Checkbox\_Test                        学习复选框控件的创建和使用  
  9. LVGL\_ColorPicker\_Test                     创建一个颜色选择器并动态显示当前颜色的RGB值  
  10. LVGL\_Container\_Test                        在内容控件上动态创建三个文本标签学习内容控件的自适应布局  
  11. LVGL\_Drop\_down\_List\_Test              创建三个不同类型的下拉选择控件  
  12. LVGL\_Gauge\_Test                             创建一个动态仪表和静态多指针仪表  
  13. LVGL\_Image\_Test                              通过四个滑动条控件控制图片颜色的变化来学习图像控件的使用  
  14. LVGL\_ImageButton\_Test                  创建一个图片背景的图像按钮  
  15. LVGL\_Keyboard\_Test                       通过一个文本输入框控件还学习键盘控件的调用关闭设置  
  16. LVGL\_Label\_Test                              创建内容颜色可变，长文本滚动展示，带阴影3D效果三个标签控件  
  17. LVGL\_LED\_Test                                创建三个LED，学习LED控件的调光，颜色，开关的设置  
  18. LVGL\_Line\_Test                                通过二维数组创建一段折线来演示线控件的使用  
  19. LVGL\_LineMeter\_Test                      创建两个不同的线段弧形指示器动态展示数据  
  20. LVGL\_List\_Test                                 创建一个带图标的列表控件  
  21. LVGL\_MessageBox\_Test                  创建一个带按钮的消息框控件  
  22. LVGL\_ObjectMask\_Test                    创建一个变幻色的文本学习蒙版遮罩效果  
  23. LVGL\_Page\_Test                            学习页面控件的使用  
  24. LVGL\_Roller\_Test                           通过示例学习滑动列表选择器控件  
  25. LVGL\_Slider\_Test                           创建一个单向和一个双向滑动条控件  
  26. LVGL\_Spinbox\_Test                        学习微调控件的使用  
  27. LVGL\_Spinner\_Test                        创建三个不同的环形加载器  
  28. LVGL\_Switch\_Test                          创建两个不同的开关控件  
  29. LVGL\_Table\_Test                            创建一个简单的表格  
  30. LVGL\_Tabview\_Test                       实现三页的页面切换学习Tabview控件  
  31. LVGL\_Textarea\_Test                       长按实现打字机效果的Textarea控件  
  32. LVGL\_Tileview\_Test                        实现四面环形触摸切换的Tileview控件  
  33. LVGL\_Window\_Test                        创建一个窗口，带设置子窗口学习窗口控件的使用

ESP32应用例程
Bluetooth_RGBLight Android手机通过蓝牙控制RGB灯变色
Bluetooth_Sensor Android手机通过蓝牙读取开发板姿态和温度湿度参数
Bluetooth_Test Android手机通过蓝牙与开发板通讯
Encryption_MD5 MD5加密
Encryption_SHA1 SHA1加密
Encryption_SHA256 SHA256加密
EncryptionDecrypt_AES_CBC AES_CBC加密
EncryptionDecrypt_AES_ECB AES_ECB加密
ESP32_SmartConfig 通过Android手机配置WIFI连网
HTTP_GET_Request_Weather HTTP Get请求天气预报
JSON_Package 创建JSON数据包
JSON_Parsing 解析JSON数据包
LCD JPEG_Effect 解码JGEG图片特效显示
MQTT MQTT通讯测试
Android（安卓）工具源码 ESP32_Bluetooth_Chat Android通过蓝牙与开发板通讯测试
ESP32_Bluetooth_RGBLight Android通过蓝牙控制开发板RGB灯
ESP32_Bluetooth_Sensor Android通过蓝牙读取开发板3D姿态和温度湿度数据
ESP32_SmartConfig Android手机配置WIFI配网
MQTT_Test Android与开发板通过MQTT协议通讯
TCP_Client Android作为TCP客户端与开发板通讯
UDP_Client Android通过UDP协议与开发板通讯
PC(Visual Studio 2013 C++ MFC)工具源码
MQTT_调试助手 PC通过MQTT与开发板通讯
TCP 调试助手 PC通过TCP服务器/客户端与开发板通讯
UDP 调试助手 PC通过UDP与开发板通讯

1、Arc控件简介

弧（lv_arc）
弧控件由背景弧和前景弧组成。 两者都可以具有起始角度和终止角度以及厚度。

可以作为传感器参数指示（无触控）或一些限值的调整（带触控）

2、Arc控件成员函数

创建Arc控件

lv_obj_t * lv_arc_create（lv_obj_t * par，constlv_obj_t * copy）
返回参数：指向创建好的弧控件的对象指针
参数：par：指向对象的指针，它将是新弧的父对象，比如在主屏幕上创建则写主屏幕的对象指针，在一个Page控件上创建一个Arc那就填Page对象指针
copy：这里的意思是从指定对象复制创建继承对象的参数设置，如果创建多个相同设置的控件可以直接以copy方式创建，就不会再设置参数了，如果没有直接写NULL

设置起始角度

注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针
void lv_arc_set_start_angle（lv_obj_t * arc，uint16_t start）
参数：arc：指向弧对象的指针
start：开始角度

设置结束角度

注意：0度：在右边，就是正向13点方向，90度在正向6点方向，就是从1点钟方向顺时针
void lv_arc_set_end_angle（lv_obj_t * arc，uint16_t end）
参数：arc：指向弧对象的指针
end：开始角度

设置起始结束角度

void lv_arc_set_angles（lv_obj_t * arc，uint16_t start，uint16_t end）
参数：arc：指向弧对象的指针
start：开始角度
end：结束角度

设置弧形背景的起始角度

void lv_arc_set_bg_start_angle（lv_obj_t * arc，uint16_t start）
参数：arc：指向弧对象的指针
start：开始角度

设置弧形背景的结束角度

void lv_arc_set_bg_end_angle（lv_obj_t * arc，uint16_t end）
参数：arc：指向弧对象的指针
end：结束角度

设置弧形背景的开始和结束角度

void lv_arc_set_bg_angles（lv_obj_t * arc，uint16_t start，uint16_t end）
参数：arc：指向弧对象的指针
start：开始角度
end：结束角度

设置整个圆弧的旋转角度

void lv_arc_set_rotation（lv_obj_t * arc，uint16_t rotation_angle）
参数：arc：指向弧对象的指针
rotation_angle：旋转角度

设置圆弧的类型

void lv_arc_set_type（lv_obj_t * arc，lv_arc_type_ttype）
参数：arc：指向弧对象的指针
type：弧形类型
弧形类型包括：
LV_ARC_TYPE_NORMAL
LV_ARC_TYPE_SYMMETRIC
LV_ARC_TYPE_REVERSE

在圆弧上设置一个值

void lv_arc_set_value（lv_obj_t * arc，int16_t value）
参数：arc：指向弧对象的指针
value：值

设置圆弧的值范围

void lv_arc_set_range（lv_obj_t * arc，int16_t min，int16_t max）
参数：arc：指向弧对象的指针
min：最小值
max：最大值

设置圆弧旋转增量位置的阈值

void lv_arc_set_chg_rate（lv_obj_t * arc，uint16_t threshold）
参数：arc：指向弧对象的指针
threshold：增量阈值

设置圆弧是否可调

void lv_arc_set_adjustable（lv_obj_t * arc，bool adjustable）
参数：arc：指向弧对象的指针
adjustable：圆弧是否触控拖动改变角度

获取圆弧的起始角度

uint16_t lv_arc_get_angle_start（lv_obj_t * arc）
返回：起始角度[0..360]
参数：arc：指向弧对象的指针

获取圆弧的结束角度

uint16_t lv_arc_get_angle_end（lv_obj_t * arc）
返回：结束角度[0..360]
参数：arc：指向弧对象的指针

获取弧形背景的起始角度

uint16_t lv_arc_get_bg_angle_start（lv_obj_t * arc）
返回：起始角度[0..360]
参数：arc：指向弧对象的指针

获取弧形背景的结束角度

uint16_t lv_arc_get_bg_angle_end（lv_obj_t * arc）
返回：结束角度[0..360]
参数：arc：指向弧对象的指针

获取圆弧的类型

lv_arc_type_t lv_arc_get_type（constlv_obj_t * arc）
返回：弧形类型，具体看上面的“设置圆弧的类型”
参数：arc：指向弧对象的指针

获取圆弧的当前值

int16_t lv_arc_get_value（constlv_obj_t * arc）
返回：弧的当前值
参数：arc：指向弧对象的指针

获得圆弧的最小值

int16_t lv_arc_get_min_value（constlv_obj_t * arc）
返回：圆弧的最小值
参数：arc：指向弧对象的指针

获取圆弧的最大值

int16_t lv_arc_get_max_value（constlv_obj_t * arc）
返回：圆弧的最大值
参数：arc：指向弧对象的指针

获取圆弧是否正在拖动

bool lv_arc_is_dragged（constlv_obj_t * arc）
返回：true：正在拖动false：没拖动
参数：arc：指向弧对象的指针

获取圆弧是否触控拖动可调

bool lv_arc_get_adjustable（lv_obj_t * arc）
返回：圆弧是否可以拖动
参数：arc：指向弧对象的指针

3、代码编写

创建一个普通可拖动改变其值的Arc控件

  1. //
  2.     创建一个触摸拖动改变其值的Arc弧形控件
  3.     //
  4.     lv_obj_t * scr = lv_disp_get_scr_act(NULL);            // 返回屏幕的对象指针
  5.     lv_obj_t * arc1 = lv_arc_create(scr, NULL);            // 在屏幕上创建一个Arc控件
  6.     //lv_arc_set_start_angle(arc1, 170);                // 设置Arc1控件前景开始角度        Arc 3点钟方向为0点 顺时针起
  7.     //lv_arc_set_end_angle(arc1, 180);                    // 设置Arc1控件前景停止角度
  8.     lv_arc_set_angles(arc1,135,10);                        // 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_angle
  9.     lv_obj_set_size(arc1, 150, 150);                    // 设置Arc1控件大小
  10.     lv_obj_align(arc1, NULL, LV_ALIGN_CENTER, -75, 0);    // 对齐到屏幕中心，X偏移-75，靠左，Y偏移0
  11.     lv_arc_set_adjustable(arc1,true);                    // 设置控件可触摸调整结束角度
  12.     //lv_arc_set_bg_start_angle(arc1, 135);                // 设置Arc1控件背景开始角度        Arc 3点钟方向为0点 顺时针起
  13.     //lv_arc_set_bg_end_angle(arc1, 45);                // 设置Arc1控件背景停止角度    
  14.     lv_arc_set_bg_angles(arc1,135,45);                    // 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle
  16.     lv_obj_t * arc1_label = lv_label_create(arc1, NULL);    // 在Arc1控件上创建一个标签
  17.     lv_obj_align(arc1_label, arc1, LV_ALIGN_CENTER, 0, 0);    // 标签对齐到Arc1控件中心
  18.     lv_label_set_text(arc1_label, "Arc1");                    // 设置标签文本
  20.     lv_obj_set_event_cb(arc1, arc_event_handler);        // 为Arc1控件创建一个事件回调

触摸调整控件的值事件回调函数

  1. // Arc事件回调函数
  2. static void arc_event_handler(lv_obj_t * obj, lv_event_t event)
  3. {
  4.     int angle = 0;                                            // 改变的角度值
  5.     if(event == LV_EVENT_CLICKED) {                            // 控件上单击事件
  6.         ESP_LOGI(TAG, "arc_event_handler->Arc Clicked\n");
  7.     }else if(event == LV_EVENT_VALUE_CHANGED) {                // 角度改变事件，手触摸/拖动进度条
  8.         angle = lv_arc_get_angle_end(obj);                    // 获取事件对象改变的角度
  9.         static char buf[8];
  10.         lv_snprintf(buf, sizeof(buf), "Arc %d", angle);        // 将值变为字符串
  11.         lv_obj_t * label = lv_obj_get_child(obj, NULL);        // 获取事件对象的标签子对象
  12.         lv_label_set_text(label, buf);                        // 设置标签文本
  13.         lv_obj_align(label, obj, LV_ALIGN_CENTER, 0, 0);    // 标签文件有改变要重新设置对齐
  14.         ESP_LOGI(TAG, "arc_event_handler->Value_Changed:%d\n",angle);
  15.     }
  16. }

再创建一个通过动画动态改变值的Arc弧形控件
先创建一个动画，并初始化

  1. // 创建一个动画
  2.     lv_anim_t anim;
  3.     lv_anim_init(&anim);                                // 初始化动画
  4.     lv_anim_set_time(&anim, 4000);                        // 设置动画时间4秒
  5.     lv_anim_set_playback_time(&anim, 1000);                // 设置动画回放时间1秒
  6.     lv_anim_set_repeat_count(&anim, LV_ANIM_REPEAT_INFINITE);    // 设置动画无限重复

创建一风格，用来改变弧形控件的颜色等样式

  1. // 给arc2创建一个风格改变它的颜色
  2.     static lv_style_t style_arc;                                                // 定义一个风格
  3.     lv_style_init(&style_arc);                                                    // 初始化风格
  4.     lv_style_set_line_color(&style_arc, LV_STATE_DEFAULT, LV_COLOR_ORANGE);        // 弧形背景色
  5.     lv_style_set_line_width(&style_arc, LV_STATE_DEFAULT, 20);                    // 弧形背景宽度
  6.     lv_style_set_line_rounded(&style_arc, LV_STATE_DEFAULT, 1);                    // 线头是否圆头结束
  7.     lv_style_set_line_opa(&style_arc, LV_STATE_DEFAULT, LV_OPA_30);                // 弧形背景色透明度

创建一个弧形控件，并在控件中心创建一个标签用来显示其值

  1. // 创建弧形控件
  2.     lv_obj_t * arc2 = lv_arc_create(scr, NULL);            // 在屏幕上创建一个Arc控件
  3.     lv_arc_set_angles(arc2,45,315);                        // 设置Arc1控件进度开始结束角度 同lv_arc_set_start_angle/lv_arc_set_end_angle
  4.     lv_obj_set_size(arc2, 150, 150);                    // 设置Arc1控件大小
  5.     lv_obj_align(arc2, NULL, LV_ALIGN_CENTER, 75, 0);    // 对齐到屏幕中心，X偏移75，靠右，Y偏移0
  6.     lv_arc_set_adjustable(arc2,false);                    // 设置控件不可触摸调整结束角度
  7.     lv_arc_set_bg_angles(arc2,45,315);                    // 设置Arc1控件背景进度开始结束角度 lv_arc_set_bg_start_angle/lv_arc_set_bg_end_angle
  8.     lv_arc_set_rotation(arc2,90);
  10.     lv_obj_t * arc2_label = lv_label_create(arc2, NULL);    // 在Arc1控件上创建一个标签
  11.     lv_obj_align(arc2_label, arc2, LV_ALIGN_CENTER, 0, 0);    // 标签对齐到Arc1控件中心
  12.     lv_label_set_text(arc2_label, "Arc2");                    // 设置标签文本

给弧形控件添加刚刚创建的样式，并应用本地样式修改控件的弧形颜色

  1. lv_obj_add_style(arc2, LV_BTN_PART_MAIN, &style_arc);    // 为弧形控件添加上面创建的风格效果
  2.     lv_obj_set_style_local_line_color(arc2, LV_ARC_PART_INDIC,LV_STATE_DEFAULT , LV_COLOR_ORANGE);// 设置弧形控件前景色颜色

设置动画的动画对象，回调函数，设置动画值范围并开始动画

  1. // 设置动画参数
  2.     lv_anim_set_var(&anim, arc2);                                // 设置动画对象为arc2
  3.     lv_anim_set_exec_cb(&anim, (lv_anim_exec_xcb_t)arc_anim);    // 设置动画回调函数
  4.     lv_anim_set_values(&anim, 45, 315);                            // 设置动画值范围
  5.     lv_anim_start(&anim);                                        // 开始动画

编写动画回调函数

  1. // 动画回调事件处理函数：回调控件对象，动画的值
  2. static void arc_anim(lv_obj_t * arc, lv_anim_value_t value)
  3. {
  4.     lv_arc_set_end_angle(arc, value);                    // 设置弧形控件的结束角度
  5.     static char buf[64];
  6.     lv_snprintf(buf, sizeof(buf), "%d", value);            // 字符化数值
  7.     lv_obj_t * label = lv_obj_get_child(arc, NULL);        // 获取弧形控件中的子对象，即label对象
  8.     lv_label_set_text(label, buf);                        // 设置label控件的文本显示
  9.     lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0);    // 重新对齐label控件到弧形控件中心，因为值长度有变化
  10. }

觉得文章写的不错，欢迎大家点赞，关注，一键三连，你们的支持是我写下去的动力

发表评论

表情：
评论列表 （有 0 条评论，1056人围观）

还没有评论，来说两句吧...

相关阅读