Funpack2-3基于ESP32-E的LVGL 的ESP-IDF展示

内容介绍

项目描述

按照官方给出的题目要求，我选择任务2：

用FireBeetle-E开发板作为控制单元，搭配显示屏移植lvgl图形库，动态显示任意一个及以上传感器采集到的数据，或者使用触摸屏对执行器进行控制。

建议搭配：温湿度传感器/CO2传感器/CO传感器/PM2.5 等一个及以上传感器 + 屏幕等硬件配合完成。

选择这个题目，也是对LVGL的一个实践掌握吧，正好平时工作会接触一些LVGL相关的demo。

这边我采用的是ESP-IDF的编译环境，也正好对这个环境比较熟悉。

硬件介绍

这款是DFROBOT公司出品的名为Firebeetle的开发板，用的是ESP-WROOM-32E的模组，这个具有WIFI和蓝牙，板载RGB灯，内部有4M flash，可玩性非常棒，还是一款双核的芯片。可以arduino，micropython等。ESP32支持的平台有很多种，基本可玩性非常好。其他性能就不多说了，见视频即可。

设计思路

这次主要是需要完成LVGL的实现，完成LVGL的实现，之后再完成界面的设计即可。

ESP-IDF 编译环境搭建

ESP-IDF编译环境比较复杂，这边我尝试了很多种方法，最简单的方法，用官方OFFLINE 的esp-idf的安装包，手动安装，这个是成功概率最大的，之后就可以用idf.py 来构建工程，想要更方便的，可以安装ESP-IDF vscode插件。插件配置的时候，选择本地的idf的路径。

点亮屏幕

那要完成LVGL，我们要先点亮屏幕，我手上的是一块ST7789V2的一个240*240的屏幕，首先我们要让它点亮，证明屏幕是ok的。

找了很久终于找到了一个example，如下所示

https://github.com/espressif/esp-idf/tree/master/examples/peripherals/lcd/tjpgd

基于这个example，首先将屏幕点亮。按照这个example来接线，证明屏幕是ok的。

LVGL 初步验证

根据LVGL 官方文档我们需要用仓库lv_port_esp32

通过命令下载

git clone --recurse-submodules https://github.com/lvgl/lv_port_esp32.git

下载之后，继续按照readme来配置一下参数

FgCw1u7xGGNKR2zytcCfSW0jU8YR

还有个引脚配置MOSI(23) SCL(18) CS(14) DC(25) RESET(26)

Fme6wurkC2vBfGUCa-Rvb4YEyvSF

可以选择一个demo来选择一个demo来验证，设置长宽为240*240

Fh5T7cN8_mYvk-5gMcOzOkp8lQ35

修改旋转角度和颜色

FngmkvHW0eKORt47PBorASvgz7E_

这个时候就可以看到屏幕亮了如果屏幕还不亮，检查一下接线是否ok

设计界面

LVGL 有一个很大的优势，就是设计界面非常方便，有很多种方法，这边我推荐NXP的gui guider

这个可以算一个非常隐蔽的小技巧，去官网NXP网站下载GUI GUIDER

https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER

先选择一个demo试下

FgSq07GRYq73mcaCIT9JQ8PXcvyv

这里生成的工程下面的generated 文件夹放到lvgl的demos文件夹下面，编译错误修改好，可以编译通过。

之后就可以用这个工具来设计相关的工程了

这边我设计的界面如下所示：

FomjEmf7TTyNdEWITDtNj_o2GU74

所有代码已经上传到github上，大家可以下载参考一下

https://github.com/supperthomas/esp32_lvgl

代码讲解 LVGL 代码讲解

LVGL 的代码都是用GUI GUIDER 生成的

最后调用ui工具, 初始化的时候调用该函数

static void create_demo_application(void)
{
    //lv_demo_music();
    setup_ui(&guider_ui);
    events_init(&guider_ui);
}

DH11 的采集

通过将IO4和DH11的data相连接，读取数据

static void dhTask(void *pvParameter)
{
    char dh11_str[10] ={0};

    DHT11_init(GPIO_NUM_4);
    while(1)
    {
        dh11_temperature = DHT11_read().temperature;
        dh11_humidity = DHT11_read().humidity;
        sprintf(dh11_str,"%d",dh11_temperature);
        
        printf("Temperature:%d*C ", dh11_temperature);
        printf("Humidity:%d%%\n", dh11_humidity);
        setup_ui(&guider_ui);
        sleep(2);
    }
}

功能展示及说明

LVGL 界面显示

FgKoD2HHLyGDE6kKrr4BALdxbHnf

DH11

显示

FpE3QTyV9NTVJTn1ReefKV_wKjtZ

Fmo3SZVAWJyHYFkpZpzEZ_dAdXST

对本活动的心得体会

我已经将代码放到github上面，感兴趣的小伙伴可以尝试，一起来维护。一开始做的时候比较慌张，屏幕一直点不亮，可能由于之前经验不足，导致屏幕一直不亮，就很着急。问了几个小伙伴之后，自己也尝试了一些其他方法，之后找对方法就很好的移植了，这次我采用GUI GUIDER的方式，希望能帮助到大家

github地址https://github.com/supperthomas/esp32_lvgl

建议：可能感觉大家都喜欢自己做自己的，缺少了交流，也缺少团队合作。当然自己做出了更好。