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

1. 硬件配置

1.1 ESP32 + TFT 彩屏

• 本篇中的 ESP32 和 TFT 彩屏参见前两篇博客：

  • 【物联网初探】- 01 - ESP32 开发环境搭建 (Arduino IDE)
  • 【物联网初探】- 02 - ESP32 利用 SPI 联通 TFT 彩屏 (Arduino IDE)

• 接线也参考上两篇细节。

1.2 触摸屏的参数标定

• 参数标定及触摸屏测试例程见第三篇：
  • 【物联网初探】- 03 - ESP32 结合 TFT_eSPI 库标定 TFT 触摸屏 (Arduino IDE)

1.3 参考资料

• 本篇大量参考该博客 《ESP32 学习笔记》之 Arduino环境下玩转 LVGL-搭建环境 。

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 如下：

  

• 注意这里搜索会出来三个相关的库，第一个是 lvgl 在 arduino 上的专用库，lvgl 的大版本是 7，github 链接在这 - 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 ，再次编译，又报错如下，这回又找不到 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 路径下的 examples 和 demos 两个文件夹拷贝到 lvgl/src 下。

  

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

  

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 文件夹中，把 examples 和 demos 两个文件夹拷贝到 lvgl/src 下。

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

  • 用这句 #include "demos/lv_demos.h" 替换掉 #include
  • LVGL_Arduino 例程第 114 行附近，修改 setup() 函数中 /* Create simple label */ 这句上面的 #if 0 ，改为 #if 1。

• 编译并烧录至 ESP32，注意以上步骤的前提是你的 TFT_eSPI 库已经在 arduino 中配置好了，详见顶部前三篇博客。

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