当前位置：首页 > news >正文

ESP32 + LVGL 开发笔记（一）：点亮屏幕

news 2026/3/26 23:13:12

折腾了几天 lvgl，打算写一个简单的教程来记录一下。教程的最后会实现一下使用 lvgl 显示 lottie 动画的效果，见下图：

环境介绍

硬件：

esp32s3 n16r8核心板
1.47寸 ips lcd彩色屏幕(st7789)
- 分辨率320 x 172，没有触屏功能，色彩位深16
EC11编码器
- 一圈是20刻度
按键、跳线若干
面包板

开发环境：
使用 esp-idf 开发，采用官方移植的 lvgl 库 esp_lvgl_port，esp_lvgl_port 会自动依赖 lvgl，版本分别是：

esp-idf v5.4.0
esp_lvgl_port 2.6.2
lvgl 9.3.0
因为 lottie 组件是从 lvgl9 才引入的，所以如果要实现后续的 lottie 案例，lvgl 版本必须要必须大于 9。

面包板接线

这一步，看着接吧🙄

点亮屏幕

不同屏幕或者不同分辨率，驱动方式可能会有所不同。但是市面上常见 屏幕驱动芯片 都会有 esp 官方驱动，没有官方驱动也可以去 ESP Component Registry 看看有没有相关驱动。
教程第一篇就先使用官方示例来点亮一下 st7789 驱动的屏幕：

1. 创建项目

点击 ESP-IDF 插件，点击 Advanced --> New Project Wizard 创建新项目
选择模板

记得确认 芯片选型 和串口选择(根据自己的串口选择)
![[ESP32 + LVGL 教程（一）：点亮屏幕-1761201459700.png|568x15]]

2. 引入 lvgl 官方移植

espressif/esp_lvgl_port • v2.6.2 • ESP Component Registry
截止到这篇笔记，esp_lvgl_port 版本为 2.6.2，可以根据需求选择不同版本

引入 lvgl 官方依赖
![[ESP32 + LVGL 开发笔记（一）：点亮屏幕-1761303042800.png|700x170]]
相关依赖信息都在 idf_component.yml 中，点击 🔧 构建项目。点击构建会拉取idf_component 中引用的依赖
移植示例代码
删除 /main 下 hello_world_main.c 和 CMakeLists.txt。找到 esp_lvgl_port 2.6.2 有 st7789 的驱动示例，复制 main.c、CMakeLists.txt、/image 到 /main 中。
示例路径为：

managed_components\espressif__esp_lvgl_port\examples\touchscreen\main

3. 修改项目配置

我这个屏幕是没有触屏功能的，所以说触屏相关代码我就暂时都删了，有需要的也可以配置一下(应该配置几个引脚就行了吧，后续会采用 编码器 或按键来控制
注释/删除触屏相关代码后，我列举一下需要修改的配置

分辨率
调整为自己屏幕的大小，我的屏幕是 320 * 172的。
这里还有一点很重要在这里说明一下，这个示例的 "显示高度" 比较长，所以需要 320 来作为高，172 作为宽。
引脚配置
这个根据自己的情况设置，这里简单说明一下相关引脚
- SCLK，时钟引脚
- MOSI / SDA，主输出从输入线
- RST，复位引脚
- DC，数据/命令选择引脚
- CS，SPI 片选引脚
- BL，LCD屏幕背光引脚
  调整完就先进行一下 clean 操作，之后点击 🔥 一键三联看看效果喽🤗🤗🤗
  之所以先 clean 是因为之前 build 并没有生成 logo 的数组文件，需要清除重新构建一下。
  显示效果见👇👇

惊了😲😲，问题大致概述一下的话，都有：

颜色显示不对，logo 是红色才对
显示错位，x 轴错位了一部分
y轴方向错误(板子在我左边放着)，x轴暂时看不出来

接下来的修改会因为屏幕不同，修改参数也不同。这里我给出有哪些值得注意要改的，以及我自己的配置：

分辨率
这部分还是很重要，请确认好屏幕参数

// 横屏显示
// #define EXAMPLE_LCD_H_RES   (320)
// #define EXAMPLE_LCD_V_RES   (172)
// 竖屏显示
#define EXAMPLE_LCD_H_RES   (172)
#define EXAMPLE_LCD_V_RES   (320)

颜色设置
实例中 esp_lcd_panel_dev_config_t 设备配置的默认颜色格式是 BGR，这里需要该成 RGB

    const esp_lcd_panel_dev_config_t panel_config = {.reset_gpio_num = EXAMPLE_LCD_GPIO_RST,
#if ESP_IDF_VERSION < ESP_IDF_VERSION_VAL(6, 0, 0)// TODO: 需要该成 RGB// .rgb_endian = LCD_RGB_ENDIAN_BGR,.rgb_endian = LCD_RGB_ENDIAN_RGB,
#else// .rgb_ele_order = LCD_RGB_ELEMENT_ORDER_BGR,.rgb_ele_order = LCD_RGB_ELEMENT_ORDER_RGB,
#endif.bits_per_pixel = EXAMPLE_LCD_BITS_PER_PIXEL,};

光这么改还不够，编译、烧录你会发现红色的 logo 会显示蓝色。

这是因为 RRRRRGGGGGGBBBBB(RGB565) 显示为了 BBBBBGGGGGGRRRRR，红色和蓝色位置反了。
![[ESP32 + LVGL 开发笔记（一）：点亮屏幕-1761310114817.png|660x197]]

在图示位置添加下面的代码设置颜色反转，颜色就会显示正常。

esp_lcd_panel_invert_color(lcd_panel, true);

x轴错位 && y轴方向错误
这一点来看一下 GPT 的讲解：

ST7789 控制器原生支持的最大逻辑分辨率是 240×320 或 240×240（取决于驱动配置）。
当你设置分辨率为 320×172 时，显然和原生的坐标系不完全匹配，所以屏幕厂家会在模组内部「裁剪」或「偏移」显示窗口。

在刚才反转颜色的代码下添加：

// (240 - 172) / 2 = 34，将 172 替换为你的"宽度"计算一下
esp_lcd_panel_set_gap(lcd_panel, 34, 0);

y轴你可能会想到通过 esp_lcd_panel_mirror 来设置，但是会发现没效果。这是因为下方的 lvgl 设置会覆盖掉你的设置，所以这一块需要到 lvgl_port_display_cfg_t lvgl 显示配置进行修改：

设置 mirror_x、mirror_y 为 false。见现在的显示效果：