【物联网初探】- 04 - ESP32 结合 LVGL 库开发环境搭建 (Arduino IDE)

文章目录

1. 硬件配置

1.1 ESP32 + TFT 彩屏

1.2 触摸屏的参数标定

1.3 参考资料

2. LVGL 开发环境

最好的指南就是官方文档 https://docs.lvgl.io/master/get-started/arduino.html#get-the-lvgl-arduino-library

2.1 LVGL 在 Arduino 中安装

  • 可以参考官方步骤,目前 Arduino 库中的 lvgl 已经是 v8.2 版本,这里我直接从 Arduino 中安装。

  • 在 Library Manager 中搜索 lvgl 如下:

    【物联网初探】- 04 - ESP32 结合 LVGL 库开发环境搭建 (Arduino IDE)

  • 注意这里搜索会出来三个相关的库,第一个是 lvgl 在 arduino 上的专用库,lvgl 的大版本是 7github 链接在这 - lv_arduino,官方声明这个库已经过时了,如果想使用 7.X 版本的 lvgl 也可以用这个,本文直接用最下面的 lvgl 并选择 version 8.2.0 进行安装。

2.2 配置 LVGL 参数头文件 lv_conf.h

  • 在 home/Arduino/libraries 下进入 lvgl 文件夹,将 lv_conf_template.h 拷贝到文件夹外,并重命名为 lv_conf.h ,打开该文件将第15行的 #if 0 改为 #if 1

  • 第 27 行,根据设备设置颜色深度 #define LV_COLOR_DEPTH 16

  • 第 88 行,改为 #define LV_TICK_CUSTOM 1

  • 最后 lv_conf.h 的文件应跟其他库并列

    arduino
     |-libraries
       |-lvgl
       |-other_lib_1
       |-other_lib_2
       |-lv_conf.h
    
  • 注意 lv_conf.h 中第 672 ~ 694 行 是 lvgl 例子相关的设置,如果设为 1 方可编译该例子,详见下一小节。

2.3 测试 LVGL 基本例程

  • File - Examples - lvgl - arduino 中选择 LVGL_Arduino 例程,该程序中集合 lvgl 自带的很多例程,与其他库一个个独立的例程不用,该例程中通过调用已经定义好的例程函数来测试不同特性,关键代码如下:

    void setup()
    {
        Serial.begin( 115200 ); /* prepare for possible serial debug */
    	// 中间省略
    
    #if 0
        /* Create simple label */
        lv_obj_t *label = lv_label_create( lv_scr_act() );
        lv_label_set_text( label, LVGL_Arduino.c_str() );
        lv_obj_align( label, LV_ALIGN_CENTER, 0, 0 );
    #else
        
        //lv_example_btn_1();
        //lv_example_anim_1();
        lv_example_get_started_3();
        // uncomment one of these demos
        //lv_demo_widgets();            // OK
        // lv_demo_benchmark();          // OK
        // lv_demo_keypad_encoder();     // works, but I haven't an encoder
        // lv_demo_music();              // NOK
        // lv_demo_printer();
         //lv_demo_stress();             // seems to be OK
    #endif
        Serial.println( "Setup done" );
    }
    
  • 上述代码为 LVGL_Arduino 例程中的 setup() 函数,其中 #if 0 如果设为 1 可以测试 lvgl 最基础的标签例子,下面我们先将其设为 1 进行编译测试。点击编译后提示如下错误,找不到 lv_demo.h 这个文件。

    LVGL_Arduino:9:21: fatal error: lv_demo.h: No such file or directory
    
  • 然而 lvgl 源码里没有这个文件,但是在 demos 路径下有一个 lv_demos.h 多一个 s ,该路径下的 README.md 中解释到,如果编译器没有添加所有源文件,那么需要自己手动 include 一下这个 lv_demos.h

    //If your development environment or toolchain does not add source files inside '***lvgl***' folder automatically, ensure the `demos` folder is included for compilation.  
    //Include "***demos/lv_demos.h***" in your application source file, for example:
    #include "lvgl.h"
    #include "demos/lv_demos.h"
    
  • 我们用这句 #include "demos/lv_demos.h" 替换掉 #include <lv_demo.h>,再次编译,又报错如下,这回又找不到 demos/lv_demos.h 文件。

    LVGL_Arduino:9:28: fatal error: demos/lv_demos.h: No such file or directory
    
  • 实际上,这是 arduino 编译器的问题,在 lvgl 官方文档 Arduino 篇的 Use the examples and demos 这部分,官方特意强调了一点如下。也就是说需要把 lvgl 路径下的 examplesdemos 两个文件夹拷贝到 lvgl/src 下。

    【物联网初探】- 04 - ESP32 结合 LVGL 库开发环境搭建 (Arduino IDE)

  • 执行一下拷贝工作后再次编译,这次编译没有报错,直接烧录程序(别忘了给串口权限),最终显示效果如下:

    【物联网初探】- 04 - ESP32 结合 LVGL 库开发环境搭建 (Arduino IDE)

3. 简洁版 lvgl 配置流程 (Arduino)

  • 在 arduino 的 Library Manager 中搜索 lvgl 并安装 v8.x 最新版。

  • home/Arduino/libraries 下进入 lvgl 文件夹,将 lv_conf_template.h 拷贝到文件夹外,并重命名为 lv_conf.h ,打开该文件:

    • 第 15 行, #if 0 改为 #if 1
    • 第 27 行,根据设备设置颜色深度 ``#define LV_COLOR_DEPTH 16`。
    • 第 88 行,改为 #define LV_TICK_CUSTOM 1
  • 仍然在 lvgl 文件夹中,把 examplesdemos 两个文件夹拷贝到 lvgl/src 下。

  • File - Examples - lvgl - arduino 中选择 LVGL_Arduino 例程,修改顶部的包含代码:

    • 用这句 #include "demos/lv_demos.h" 替换掉 #include <lv_demo.h>
    • LVGL_Arduino 例程第 114 行附近,修改 setup() 函数中 /* Create simple label */ 这句上面的 #if 0 ,改为 #if 1
  • 编译并烧录至 ESP32,注意以上步骤的前提是你的 TFT_eSPI 库已经在 arduino 中配置好了,详见顶部前三篇博客。

  • LVGL 库中自带了很多例子,需要在LVGL_Arduino 例程中打开相应函数的注释,下一篇博客记录测试不同例子的流程。

上一篇:照方抓药 - 重构 React 组件的实用清单


下一篇:双LOOP循环的性能优化