【FireBeetle 2 ESP32-S3开发板体验】基于GDI接口的高清IPS屏的LVGL使用(方法通用所有支持接口的屏)

显示效果

这次的FireBeetle 2 ESP32-S3开发板不仅提供了CAM(Camera)接口，还提供了GDI接口：

一、GDI接口和显示屏了解

这个GDI接口，是为DFRbot专用GDI显示屏准备的接口，使用18pin-FPC线连接屏幕，连接屏幕更加便捷。

像下面这样类似摄像头，使用FPC连接即可：

GDI显示屏的连接：

GDI

我手头刚好有一个DFRobot的GDI接口显示屏：
productImage

官方介绍如下：

这是一款1.47英寸，分辨率为172×320的彩色高清IPS显示屏。采用驱动芯片ST7789V3、SPI通讯接口，显示屏显示区域占比大，边框宽度仅 1mm，圆弧边角，外形小巧美观，显示效果精细、清晰，还原真实色彩。显示屏上可高清显示各种文字、图像、动画、甚至是视频，基于 Arduino 的图像显示 GDL 库和 LVGL 库，可以做出酷炫的动态效果，适合DIY电子项目。可广泛应用于迷你游戏机、迷你气象站、背包挂件、迷你时钟、迷你视频播放、礼物制作、小型仪表显示等场景。

FireBeetle 2 ESP32-S3开发板的GDI 接口具体定义如下：

这个接口，可以专用于GDI接口的显示屏，也可以用一个FPC转接板，当作普通引脚使用：

在Arduino开发环境中，DFRobot为GDI接口的显示屏，提供了 DFRobot_GDL库专门用于屏幕显示操作。

不过，我更想使用更为通用的LVGL，而且LVGL官方也为Arduino开发环境提供了良好的支持。

二、LVGl环境的扩展库支持

在 FireBeetle 2 ESP32-S3开发板的Arduino开发环境中，要支持LVGL，需要使用如下的Arduino扩展库：

使用上述的 TFT_eSPI 本身已经可以驱动通常的SPI显示屏，是一款较为常用的显示屏支持库。而LVGL是基于TFT_eSPI，来提供运行支持的。

需要注意的是，不要安装上面显示出来的lv_arduino，这个太老了，早已不在提供支持。

安装上述库的时候，如果提示还要安装其他依赖库，选择一并安装即可。

三、TFT_eSPI配置

在在Arduino中充分利用FireBeetle 2 ESP32-S3的16MB Flash做SPIFFS 一文中，曾将详细说过Arduino IDE安装后的相关目录。

TFT_eSPI扩展库安装后，其安装文件为与扩展库目录下，如：

上述目录中，User_Setup_Select.h头文件控制调用哪个配置文件，User_Setups目录中则包含已经做好预配的多种配置文件。

一般对于自己的显示屏，先找找看有没有类似的配置文件，如果有的话，再检查GPIO配置是否一致，如果一致可直接使用，否则可以复制一个，修改为实际使用的。

参考Setup72_ESP32_ST7789_172x320.h，复制为 Setup72_ESP32_ST7789_172x320_GDI.h，参考前面的FireBeetle 2 ESP32-S3开发板的GDI说明，修改对应的GPIO配置：

然后，在Arduino IDE的示例菜单中，选择如下的Demo进行测试：

实测效果如下：

现在，TFT_eSPI已将配置好了，显示屏可以正常使用了。

不过，咱们继续，一鼓作气，把LVGL给整上。

四、LVGL配置

LVGL的配置文件只需要一个lv_conf.h，可以从如下目录，将lvgl/lv_conf_template.h 拷贝出来改名为lc_conf.h即可，具体如下：

其他先不用做任何修改，然后再从示例中打开示例代码 LVGL_Arduino.ino：

修改设置对应的屏幕尺寸：

static const uint16_t screenWidth  = 172;
static const uint16_t screenHeight = 320;

修改旋转方向：

tft.setRotation( 0 );

修改显示的文字：【只能为英文字符，后续再分享中文字体的】

lv_label_set_text( label, "Hello Ardino and LVGL!");

再去掉关于touch的部分：

/*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 );
    }
}

去掉：

uint16_t calData[5] = { 275, 3620, 264, 3532, 1 };
    tft.setTouch( calData );

去掉：

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 );

处理完成后，编译下载运行，具体结果如下：

好了，现在已经能够正常运行LVGL了，可以开始LVGL的学习使用了。

五、LVGL演示的运行

LVGL本身提供了很多演示示例，可以在Arduino+FireBeetle 2 ESP32-S3开发板上运行。

要运行示例，配置文件lc_conf.h，需要参考做如下的修改：

上图左边为配置模版lvgl/lv_conf_template.h，右边为实际使用的配置文件lc_conf.h

然后，按照下图，将对应的demos和examples目录，拷贝到lvgl下的src目录中：

其中：

examples：为各项功能的分项展示
demos：一个具体的项目展示

再修改LVGL_Arduino.ino，添加demo和examples头文件的调用

#include <lvgl.h>
#include "demos/lv_demos.h"
#include "examples/lv_examples.h"
#include <TFT_eSPI.h>

要调用examples中的示例，可以先查看页面，获取对应的示例入口：

LVGL官方examples页面： Examples — LVGL documentation

然后在代码中，如下的位置，添加example入口 lv_example_get_started_1()，具体如下：

/* Try an example. See all the examples
     online: https://docs.lvgl.io/master/examples.html
     source codes: https://github.com/lvgl/lvgl/tree/e7f88efa5853128bf871dde335c0ca8da9eb7731/examples */
  Serial.println( "lv_example:" );
  //lv_example_btn_1();
  lv_example_get_started_1();

  /*Or try out a demo. Don't forget to enable the demos in lv_conf.h. E.g. LV_USE_DEMOS_WIDGETS*/
  // Serial.println( "lv_demo:" );
  // lv_demo_widgets();
  // lv_demo_benchmark();
  // lv_demo_keypad_encoder();
  // lv_demo_music();
  // lv_demo_printer();
  // lv_demo_stress();

编译下载运行，结果如下：

屏幕上运行结果，和官方在线Examples页面展示一致。

同时，右下角还显示了当前的FPS和CPU占用率。这可以通过lc_conf.h的LV_USE_PERF_MONITOR来控制是否呈现。

要调用demos，可以先查看LVGL官方的demos介绍：lvgl/demos at master · lvgl/lvgl (github.com)

然后，修改代码，打开对应的demo入口。

上述demo的入口为 lv_demo_widgets()：

/* Try an example. See all the examples
     online: https://docs.lvgl.io/master/examples.html
     source codes: https://github.com/lvgl/lvgl/tree/e7f88efa5853128bf871dde335c0ca8da9eb7731/examples */
  // Serial.println( "lv_example:" );
  // lv_example_btn_1();
  // lv_example_get_started_1();

  /*Or try out a demo. Don't forget to enable the demos in lv_conf.h. E.g. LV_USE_DEMOS_WIDGETS*/
  Serial.println( "lv_demo:" );
  lv_demo_widgets();
  // lv_demo_benchmark();
  // lv_demo_keypad_encoder();
  // lv_demo_music();
  // lv_demo_printer();
  // lv_demo_stress();

编译下载运行，结果如下：

如果觉得方向不合适的话，可以修改如下几个部分的参数：

static const uint16_t screenWidth  = 320;
static const uint16_t screenHeight = 172;

TFT_eSPI tft = TFT_eSPI(screenHeight, screenWidth);

tft.setRotation( 3 );