折腾了几天 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 创建新项目
![image]()
- 选择模板
![image]()
记得确认 芯片选型 和 串口选择(根据自己的串口选择)
![[ESP32 + LVGL 教程（一）：点亮屏幕-1761201459700.png|568x15]]
![image]()
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 作为宽。
![image]()
- 引脚配置
这个根据自己的情况设置，这里简单说明一下相关引脚- SCLK，时钟引脚
- MOSI / SDA，主输出从输入线
- RST，复位引脚
- DC，数据/命令选择引脚
- CS，SPI 片选引脚
- BL，LCD屏幕 背光引脚
调整完就先进行一下 clean 操作，之后点击 🔥 一键三联看看效果喽🤗🤗🤗
之所以先 clean 是因为之前 build 并没有生成 logo 的数组文件，需要清除重新构建一下。
显示效果见👇👇
![image]()
惊了😲😲，问题大致概述一下的话，都有：
- 颜色显示不对，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。见现在的显示效果：
好，现在大功告成，成功完美点亮一颗屏幕😎😎
屏幕相关设置也可以自己改一改看看效果，这种代码调整调整、看看效果很快就会熟练了🥳
参考连接
lvgl移植组件仓库
- espressif/esp_lvgl_port • v2.6.2 • ESP Component Registry
代码参考 - diudiusloth/esp_lvgl_simple_tutorail: esp_lvgl 简单教程的示例代码
