1. 开发环境

  • 开发环境搭建

见《Ubuntu构建ESP32 ESP-IDF开发环境》

  • 版本

esp32点亮板载RGB esp32 ledcsetup_esp32点亮板载RGB

 

2. 开发板和显示屏

2.1 ESP32开发板

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

esp32点亮板载RGB esp32 ledcsetup_LVGL_02

 

2.2 TFT LCD显示屏

2.4寸240*320 TFT LCD液晶显示屏幕ST7789驱动SPI 4线串口。

esp32点亮板载RGB esp32 ledcsetup_LVGL_03

3. ESP32 LVGL下载移植

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

4. 用VSCode打开项目

见《在VSCode中打开远程主机上的ESP-IDF项目》

查看版本:

~/esp/lv_port_esp32/README.md

- Version of LVGL used: 7.9.

- Version of lv_examples used: 7.9.

5. 构建项目

  • 进入lv_port_esp32目录
  • cd ~/esp/lv_port_esp32/
  • 刷新esp-idf环境

get_idf

  • 设定目标芯片

idf.py set-target esp32

  • 配置项目

idf.py menuconfig

1) 将闪存设置为4MB

esp32点亮板载RGB esp32 ledcsetup_ST7789_04

2) 选择显示屏控制芯片

esp32点亮板载RGB esp32 ledcsetup_esp32点亮板载RGB_05

3) SPI总线选择

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_06

默认是HSPI。有关ESP32 SPI的说明见《ESP32 ESP-IDF TFT-LCD(ST7735 128x160) LVGL演示》

LCD没有使用MISO,所以接线空着。

4) 定义引脚

接线表:

LCD ST7789      ESP32

GND                   GND

VCC                    3V3

SCL                     IO14(CLK)

SDA                     IO13(MOSI)

RES                     IO17

DC                       IO16(DC)

CS                       IO18

BLK                     IO27

esp32点亮板载RGB esp32 ledcsetup_esp32点亮板载RGB_07

 

5) 使能Set IRAM as LV_ATTRIBUTE_FAST_MEM提高帧率

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_08

 

6) 屏幕方向

竖屏

esp32点亮板载RGB esp32 ledcsetup_ESP32_09

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_10

 横屏

esp32点亮板载RGB esp32 ledcsetup_ST7789_11

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_12

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

7) 对于SPI接口需要交换RGB565的2个字节

esp32点亮板载RGB esp32 ledcsetup_ESP32_13

 

8) 平滑线和园,更好的显示效果

esp32点亮板载RGB esp32 ledcsetup_LVGL_14

 

9) 设置时钟频率

esp32点亮板载RGB esp32 ledcsetup_ESP32_15

 

10) 设置显示字体

esp32点亮板载RGB esp32 ledcsetup_ESP32_16

 

默认都是16。

11) 启用亚像素渲染

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_17

 

更好的显示效果,增加计算量,会降低帧率。

12) 显示资源使用情况

esp32点亮板载RGB esp32 ledcsetup_ST7789_18

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

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

13) 是否自动滑动演示

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_19

 

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

保存,退出。

  • 编译项目

idf.py build

编译速度比WSL快多了。

  • 烧写项目

查看USB转串口的设备:

esp32点亮板载RGB esp32 ledcsetup_esp32点亮板载RGB_20

 

修改/dev/ttyUSB0设备权限:

sudo chmod 777 /dev/ttyUSB0

esp32点亮板载RGB esp32 ledcsetup_ESP32_21

 

烧写:

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

  • 启用监视器

idf.py monitor -p /dev/ttyUSB0

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

esp32点亮板载RGB esp32 ledcsetup_ESP32_22

 

6. 演示

6.1 默认DEMO(控件演示)

esp32点亮板载RGB esp32 ledcsetup_ESP32_23

6.2 反转颜色(黑底)

esp32点亮板载RGB esp32 ledcsetup_LVGL_24

 

6.3 定制demo中可展示的元素

esp32点亮板载RGB esp32 ledcsetup_LVGL_25

 

6.4 选择其他的DEMO

项目中4个Demo,通过配置选择使用哪一个。

esp32点亮板载RGB esp32 ledcsetup_ESP32_26

 

  • Show demo widgets控件演示。
  • Demonstrate the usage of encoder and keyboard触摸屏和拖拽控件演示。
  • Benchmark your system测试系统性能
  • Stress test for LVGL压力测试

7. 演示lv_demo_music

  • 更多例子

在~/esp/lv_port_esp32/components/lv_examples/lv_examples/src/目录下还有几个更炫的例子:

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_27

 

对比~/esp/lv_port_esp32/main/main.c

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_28

 

可知,默认只启用了4个例程。下面我们启用lv_demo_music

  • 在main.c中添加头文件lv_demo_music.h

esp32点亮板载RGB esp32 ledcsetup_ST7789_29

 

  • 在main.c的create_demo_application函数中添加lv_demo_music();

esp32点亮板载RGB esp32 ledcsetup_LVGL_30

 

  • 在/home/ccdc/esp/lv_port_esp32/components/lv_examples/lv_ex_conf.h中添加对Music选项定义

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_31

 

  • 在~/esp/lv_port_esp32/components/lv_examples/Kconfig中添加Music选项

esp32点亮板载RGB esp32 ledcsetup_LVGL_32

 

  • 配置

例子选项中多了Music demo for LVGL,选择它:

esp32点亮板载RGB esp32 ledcsetup_TFT LCD_33

 

配置Music要使用的字体

esp32点亮板载RGB esp32 ledcsetup_ESP32_34

  • 编译、烧写、运行

esp32点亮板载RGB esp32 ledcsetup_ST7789_35

 

其他扩展例子仿照上面的方法就可以演示。

参考文档

  1. esp32-lvgl-(st7789/ILI9341)(基于esp-idf框架)