ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL演示

陈拓 2022/08/30-2022/09/01

1. 开发板和显示屏

上网看看你就会发现在同等尺寸的情况下彩色显示屏的价格已经低于单色屏。用彩色屏代替单色屏可以提高产品的档次，并降低成本。

彩色屏的使用比单色屏复杂，在软件开发时通常要借助于驱动库，本文介绍用LVGL库驱动基于ST7735控制芯片的TFT LCD显示屏。ST7735的分辨率为132x162或者128x160，我们用的显示屏是128x160的。

1.1 esp32开发板

市面上最常见的esp32开发板。

1.2 TFT LCD显示屏

显示屏细节见《用MicroPython开发ESP32-用TFT-LCD(ST7735S)显示图像》

https://blog.csdn.net/chentuo2000/article/details/126598546?spm=1001.2014.3001.5502

2. LVGL

2.1 概述

LVGL的作者是来自匈牙利的Gabor Kiss-Vamosikisvegabor。

LVGL是一个C语言编写的免费的开源图形库，其提供了用于嵌入式GUI的各种元素。用户可以利用丰富的图形库资源，在消耗极低内存的情况下构建视觉效果丰富多彩的GUI。LVGL可以驱动单色OLED、彩色TFT显示器、监视器或任何其他显示器。

2.2 LVGL官方ESP32项目

ESP-IDF的官方例程虽然支持LVGL，但不直接支持st7735这样的小屏，所以我们使用LVGL官方的ESP32项目。

https://github.com/lvgl/lv_port_esp32

这是一个ESP32演示项目，展示了支持多个显示控制器和触摸控制器的LVGL v7。演示应用程序是来自lv_examples存储库（https://github.com/lvgl/lv_demos）的lv_demo_widgets项目。

ESP-IDF版本需要4.2以上。
使用的LVGL版本：7.9。
使用的lv_examples版本：7.9。

2.3 下载LVGL项目

cd ~/esp/

带--recurse-submodules（递归子模块）参数克隆该项目

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

3. 代码修改

修改st7735s.h以适合我们的显示屏。

~/esp/lv_port_esp32/components/lvgl_esp32_drivers/lvgl_tft/st7735s.h

#define ST7735_GREENTAB160x80 // For 160 x 80 display (BGR, inverted, 26 / 1 offset)
#define COLSTART            0 //26
#define ROWSTART            0 //1

原来的参数是针对160x80写的，要将COLSTART和ROWSTART都改为0。

其他地方都不用动。

4. 构建项目

cd ~/esp/lv_port_esp32/

刷新esp-idf环境

get_idf

设定目标芯片

idf.py set-target esp32

配置项目

idf.py menuconfig

1) 将闪存设置为4MB

2) 选择显示屏控制芯片

3) SPI总线选择

默认是HSPI。

ESP32有4组SPI外设。

SPI0和SPI1在内部用于访问ESP32所连接的闪存。

SPI2和SPI3是通用SPI控制器，分别称为HSPI和VSPI。它们向用户开放。

SPI2和SPI3的默认引脚：

这些引脚是可以重新映射的，所以下面我们的接线和默认并不相同。

在我们的实验中没有使用MISO，所以下面的接线空着。

4) 定义引脚

接线表：

LCD ST7735 ESP32

GND GND

VCC 3V3

SCL IO14(CLK)

SDA IO13(MOSI)

RES IO17

DC IO16(DC)

CS1 IO18

BLK 空

5) 启用M5StickC开发板的AXP192电池管理单元

虽然我们不用AXP192，但是如果不开启这个选项编译通不过。以后在正式项目中可以删除不用的代码。

6) 屏幕方向

竖屏

横屏

注意：横竖屏转换时两个选项要同时修改。我们使用横屏。

7) 设置显示字体

因为屏幕小我们选用更小的字体，默认都是16。

8) 是否自动滑动演示

默认时启用以动画方式自动滑动演示。

9) 显示资源使用情况

你可以选择Show CPU and FPS count in the right bottom corner

在屏幕的右下角显示CUP和的占用和动画帧率。

保存，退出。

编译项目

idf.py build

烧写项目

查看USB转串口的COM口号：

烧写：

idf.py -p /dev/ttyS3 -b 115200 flash

启用监视器

idf.py monitor -p /dev/ttyS3

当示例正常运行时，将观察到以下输出：

有3行关于AXP192的错误，因为我们并没有该芯片，忽略这些错误。

5. 演示效果

5.1 基本演示效果

只显示了Hello world。

我们怎么能看到其他的演示效果呢？

5.2 高级效果

在文件/home/ccdc/esp/lv_port_esp32/components/lvgl_esp32_drivers/lvgl_tft/Kconfig中可以看到：

    config LV_TFT_DISPLAY_USER_CONTROLLER_ST7735Sbool "ST7735S"select LV_TFT_DISPLAY_CONTROLLER_ST7735Sselect LV_TFT_DISPLAY_PROTOCOL_SPI

只要选择了ST7735S控制器就会选择LV_TFT_DISPLAY_CONTROLLER_ST7735S

在代码里对应defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_ST7735S

#if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME || \defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_ST7735S

在main.c文件的create_demo_application函数中将这个条件去掉：

static void create_demo_application(void)
{/* When using a monochrome display we only show "Hello World" centered on the* screen */
#if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME/* use a pretty small demo for monochrome displays *//* Get the current screen  */lv_obj_t * scr = lv_disp_get_scr_act(NULL);/*Create a Label on the currently active screen*/lv_obj_t * label1 =  lv_label_create(scr, NULL);/*Modify the Label's text*/lv_label_set_text(label1, "Hello\nworld");/* Align the Label to the center* NULL means align on parent (which is the screen now)* 0, 0 at the end means an x, y offset after alignment*/lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);
#else/* Otherwise we show the selected demo */#if defined CONFIG_LV_USE_DEMO_WIDGETSlv_demo_widgets();#elif defined CONFIG_LV_USE_DEMO_KEYPAD_AND_ENCODERlv_demo_keypad_encoder();#elif defined CONFIG_LV_USE_DEMO_BENCHMARKlv_demo_benchmark();#elif defined CONFIG_LV_USE_DEMO_STRESSlv_demo_stress();#else#error "No demo application selected."#endif
#endif
}

lv_demo_widgets()、lv_demo_keypad_encoder()、lv_demo_benchmark()和lv_demo_stress()4个函数对应配置选项中的4个演示例子：

在配置中选择4个演示之一，重新编译构建烧写项目，演示是动画的。

你可以改变设置观看其他的演示，这是演示的截图：

5.3 更炫酷的DEMO

如果你有更大的显示屏可以试试https://github.com/lvgl/lv_demos中更炫酷的例子：

Widgets

Music player

6. 在ESP-IDF项目中使用lvgl_esp32_drivers

为了能够在ESP-IDF项目中使用lvgl_esp32_drivers需要将lvgl库放在ESP-IDF的components目录中。

6.1 直接复制

简单的方法就是直接复制~/esp/lv_port_esp32/components/下的3个目录：

cp -r ~/esp/lv_port_esp32/components/lv* ~/esp/esp-idf/components/

这样就可以在ESP-IDF的其他例程中使用LVGL了。

6.2 从github上克隆

你也可以用README.md中的方法：

用 git submodule add https://github.com/lvgl/lvgl.git components/lvgl在components目录中克隆lvgl存储库
用git submodule add https://github.com/lvgl/lvgl_esp32_drivers.git components/lvgl_esp32_drivers命令在components目录中克隆lvgl_esp32_drivers存储库
lv_demos

如果要使用lv_demos还需要克隆https://github.com/lvgl/lv_demos

lv_demos目录应位于项目中的lvgl目录旁边。

参考文档

[教程] esp32平台下运行lvgl，使用屏幕st7735s 128*128详细配置
https://www.bilibili.com/read/cv14795850
esp32-lvgl-(st7789/ILI9341)(基于esp-idf框架)
https://blog.csdn.net/qq_37429313/article/details/122085869