Arduino应用开发——esp32 lvgl v8.3环境搭建

LVGL (Light and Versatile Graphics Library) 是一个很流行的免费开源嵌入式图形库，可以帮助很多 MCU、MPU 和显示类型创建好看的 UI。它由Gábor Kiss-Vámosi于2016年创建的一个开源项目，目前由来自世界各地的志愿者共同维护和开发。LVGL是用C语言编写的，遵循MIT协议，可以自由地使用和修改。LVGL支持多种操作系统，例如Linux、Windows、RTOS等，也可以在开发板上运行。LVGL还支持多种显示器驱动器和触摸屏驱动器，可以与不同大小和分辨率的显示器兼容。

LVGL还提供了多种语言的绑定，例如Python、Micropython、JavaScript等，以及多种开发工具，例如模拟器、视觉化设计器、字体转换器等。

1 硬件设计

ESP32参数如下：

LCD屏幕参数如下：

ESP32与LCD的接线如下：

2 软件设计

注：本文是基于PlatformIO搭建的Arduino环境，所有软件代码也是基于这个环境编译。不知道怎么搭建的同学自行查阅资料，这个网上教程有很多的。

2.1 新建PlatformIO工程

输入项目名称，选择芯片及开发板，选择arduino架构。

配置项目参数（platformio.ini）。
注：具体的项目参数根据自己的实际情况配置。更多的参数详情及使用方法，可以在下面的链接查看。
https://docs.platformio.org/page/projectconf.html
https://docs.platformio.org/en/latest/platforms/espressif32.html

本文配置的参数如下：

[env:adafruit_metro_esp32s2]
platform = espressif32
board = adafruit_metro_esp32s2
framework = arduino
lib_deps = 
	bodmer/TFT_eSPI@^2.5.43
	lvgl/lvgl@^8.3.11
monitor_speed = 115200
board_build.f_cpu = 240000000L
board_build.f_flash = 80000000L
board_build.flash_mode = qio
board_upload.flash_size = 8MB
board_upload.speed = 921600
board_upload.use_1200bps_touch = true
board_upload.wait_for_upload_port = true
build_flags = 
	-DBOARD_HAS_PSRAM
	-mfix-esp32-psram-cache-issue
	-DARDUINO_USB_CDC_ON_BOOT=1
	-DARDUINO_USB_DFU_ON_BOOT=0
	-DARDUINO_USB_MSC_ON_BOOT=0
	-DCORE_DEBUG_LEVEL=0
lib_ldf_mode = deep+

2.2 添加开源库

在PIO Home界面选择Libraries，搜索需要的库并添加到自己的工程目录下。

注：每个PlatformIO工程的库都是独立的，所以你这里要把库添加到对应的工程，旧工程下载的库并不能直接用于新工程上。

本文需要使用的Arduino库如下：

配置流程大致如下：

添加成功后可以在工程目录下看到已添加的库，platformio.ini文件中也会自动生成依赖库代码。

2.3 配置LCD底层接口

2.3.1 LCD接口配置

TFT_eSPI库集成了很多常用LCD驱动IC的接口，根据自己使用的LCD屏幕参数修改User_Setup.h文件，即可调用底层的接口函数。

注：User_Setup.h定义的参数比较多，我这里就不一个个细说了。我主要讲几个重要的参数。

1）驱动IC

根据自己使用的LCD驱动IC打开对应的宏。注意这些驱动只能选择一个打开，不用的要注释掉。

2）RGB数据格式

RGB格式指的是像素点颜色数据的排列方式，一般就BGR和RGB两种，区别其实就是数据高位在前还是低位在前，这个主要是用于图片显示，要用哪种格式主要是看你要显示的内容是怎么排的，不确定的话可以先不改，调试的时候如果颜色不对的话再换过来就好了。

3）像素

根据自己屏幕的像素修改，也可以先不改，直接在后面应用的时候再改。

4）GPIO

根据自己的电路设置引脚，除了几个必要的引脚，有些引脚可以不配置。

如：RST可以通过硬件和MCU的RST接到一起，软件配置成-1即可。BL背光也可以硬件直接控制。

注意：相同的GPIO定义只能打开一个，默认有些打开了的要注释掉。

特别说明：建议使用2.4.0以上版本，因为之前的版本关于ESP32的引脚定义是分成HSPI和VSPI的，默认使用VSPI，如果要用HSPI要打开USE_HSPI_PORT定义，但是这套框架兼容性不强，不适用于ESP32-S2和ESP32-C2，而2.4.0以上版本取消了这个定义，直接都按引脚号来定义，这样一来就不用区分HSPI和VSPI了。

5）字库

TFT_eSPI自带的这些字库你可以直接用，如果你有自己的字库不用这里的话也可以注释掉。flash空间足够的情况下，这点代码加不加都没关系。

6）SPI通讯速率

SPI通讯速率一般默认即可，默认的这个速率一般是足够了的，如果需要更快的话可以自己修改。

7）ESP32的特殊定义

TFT_eSPI旧版本关于ESP32的SPI接口是分为HSPI和VSPI两种的，默认使用VSPI，如果要用HSPI要打开USE_HSPI_PORT定义，如果你只是用ESP32，那这个框架是没什么问题的。

但是我之前因为项目需要从ESP32改用ESP32-S2，结果发现ESP32-S2就没有HSPI和VSPI，所有接口都是FSPI，于是我就要把底层很多东西都改掉才能正常使用。

不过现在TFT_eSPI库2.4.0以上版本就已经把这个问题改掉了，兼容了ESP32-S2和ESP-C3，取消了USE_HSPI_PORT这个定义，SPI接口都以GPIO引脚号来定义。

所以，我建议都用新版本的库吧，兼容性更好，也不用去考虑用HSPI还是VSPI。

2.3.2 LCD驱动测试

TFT_eSPI库配置好了之后可以先烧录一个简单的程序，验证一下硬件接线和代码是否能正常运行。当然，到了后面把lvgl配置好再一步到位也行。

注意：如果此时已经把lvgl库加入到工程，又没有配置的话，编译会出错（找不到lv_conf.h文件），得把lvgl库删除或者配置好lvgl库再测试。

测试代码如下：

#include <Arduino.h>
#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(); 

void setup() 
{
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
}

void loop()
{
    tft.fillScreen(TFT_RED);
    delay(1000);
    tft.fillScreen(TFT_GREEN);
    delay(1000);
    tft.fillScreen(TFT_BLUE);
    delay(1000);
}

测试结果：

如果能正常运行的话，屏幕每隔1s会依次点亮红绿蓝三种颜色。

2.4 配置lvgl

2.4.1 添加配置文件

复制lv_conf_template.h到同一路径下，并改名为lvgl_conf.h。否则编译会报错（找不到lv_conf.h文件）。

2.4.2 修改lvgl配置

lvgl里面的lvgl_conf.h文件有很多配置参数，具体的我就不一一描述了。需要用到哪些配置，网上都能找到详细的教程。我这里讲几个必须要配置的东西。

1）把下面的宏打开。

2）启用自定义时钟

注意：没有一步的话会导致屏幕停留在第一帧的界面。

3）配置lvgl的显示接口

要把底层的LCD显示接口对接到lvgl这套框架里面，这样lvgl才能控制显示屏。

参考代码：

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = ( area->x2 - area->x1 + 1 );
  uint32_t h = ( area->y2 - area->y1 + 1 );

  tft.startWrite();
  tft.setAddrWindow( area->x1, area->y1, w, h );
  tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
  tft.endWrite();

  lv_disp_flush_ready( disp_drv );
}

4）配置lvgl的触摸接口

注：因为我这里屏幕没有触摸接口，所以我这里把代码注释掉了，如果要用触摸接口的话，这里需要打开。

参考代码：

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_drv, lv_indev_data_t * data )
{
  // uint16_t touchX, touchY;

  // bool touched = tft.getTouch( &touchX, &touchY, 600 );

  // if( !touched )
  // {
  //     data->state = LV_INDEV_STATE_REL;
  // }
  // else
  // {
  //     data->state = LV_INDEV_STATE_PR;

  //     /*Set the coordinates*/
  //     data->point.x = touchX;
  //     data->point.y = touchY;

  //     Serial.print( "Data x " );
  //     Serial.println( touchX );

  //     Serial.print( "Data y " );
  //     Serial.println( touchY );
  // }
}

2.4.3 lvgl代码测试

示例代码：

#include <Arduino.h>
#include <SPI.h>
#include <TFT_eSPI.h>
#include "lvgl.h"

TFT_eSPI tft = TFT_eSPI(); 

static lv_disp_draw_buf_t draw_buf;

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = ( area->x2 - area->x1 + 1 );
  uint32_t h = ( area->y2 - area->y1 + 1 );

  tft.startWrite();
  tft.setAddrWindow( area->x1, area->y1, w, h );
  tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
  tft.endWrite();

  lv_disp_flush_ready( disp_drv );
}

/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_drv, lv_indev_data_t * data )
{
  // uint16_t touchX, touchY;

  // bool touched = tft.getTouch( &touchX, &touchY, 600 );

  // if( !touched )
  // {
  //     data->state = LV_INDEV_STATE_REL;
  // }
  // else
  // {
  //     data->state = LV_INDEV_STATE_PR;

  //     /*Set the coordinates*/
  //     data->point.x = touchX;
  //     data->point.y = touchY;

  //     Serial.print( "Data x " );
  //     Serial.println( touchX );

  //     Serial.print( "Data y " );
  //     Serial.println( touchY );
  // }
}

void lvgl_user_init(void)
{
  lv_init();
  
  /*Set the touchscreen calibration data,
    the actual data for your display can be acquired using
    the Generic -> Touch_calibrate example from the TFT_eSPI library*/
  // uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
  // tft.setTouch( calData );
  
  lv_color_t* buf1 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
  // lv_color_t* buf2 = (lv_color_t*) heap_caps_malloc(240 * 240, MALLOC_CAP_SPIRAM);
  lv_disp_draw_buf_init( &draw_buf, buf1, NULL, 240 * 240);

  /*Initialize the display*/
  static lv_disp_drv_t disp_drv;
  lv_disp_drv_init( &disp_drv );
  /*Change the following line to your display resolution*/
  disp_drv.hor_res = 240;
  disp_drv.ver_res = 240;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.full_refresh = 1;
  disp_drv.draw_buf = &draw_buf;
  lv_disp_drv_register(&disp_drv);

  /*Initialize the (dummy) input device driver*/
  static lv_indev_drv_t indev_drv;
  lv_indev_drv_init(&indev_drv);
  indev_drv.type = LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = my_touchpad_read;
  lv_indev_drv_register(&indev_drv);

  /*Get lvgl version*/
  String LVGL_Arduino = "Hello LVGL! ";
  LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch(); // version
  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); //display
}

void setup() 
{
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);

  lvgl_user_init();
}

void loop()
{
  lv_timer_handler(); /* let the GUI do its work */
  delay(5);
}

测试结果：
代码正常运行，调用lvgl的文本控件，打印lvgl的版本号。

结束语

我这里只是举了一个简单的例子讲解如何搭建lvgl的环境，实际上lvgl还有很多的控件和功能，也有一些demo可以运行测试，这些就留给你们继续探索了。如果还有什么问题，欢迎在评论区留言。

完整工程源码下载链接

想了解更多Arduino的内容，可以关注一下博主，后续我还会继续分享更多的经验给大家。
基于Arduino的开发教程汇总:
https://blog.csdn.net/ShenZhen_zixian/article/details/121659482

如果这篇文章能够帮到你，就…你懂得。