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

「爱情、让人受尽委屈。」 2022-12-25 14:59 982阅读 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][https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]

# 一、[开发板简介][Link 1] #

# 二、[开发环境搭建 windows][windows] #

# 三、[基础示例][Link 2] #

# 四、**LVGL控件使用示例** #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编写动画回调函数

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

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

[20210214121744199.gif]: /images/20221120/1fa1514ec7d445998f47a62b32ed352e.png
[https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674
[Link 1]: https://blog.csdn.net/cnicfhnui/article/details/108343442
[windows]: https://blog.csdn.net/cnicfhnui/article/details/108405073
[Link 2]: https://hellobug.blog.csdn.net/article/details/108372259
[LVGL_Arc_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _]: https://blog.csdn.net/cnicfhnui/article/details/110482844
[LVGL_Bar_Test_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _Bar]: https://blog.csdn.net/cnicfhnui/article/details/110491549