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

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

ESP32 + LVGL 教程（一）：点亮屏幕-1761203963450

环境介绍

硬件：

  • 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. 创建项目

  1. 点击 ESP-IDF 插件，点击 Advanced --> New Project Wizard 创建新项目
    image
  2. 选择模板
    image
    记得确认 芯片选型 和 串口选择(根据自己的串口选择)
    ![[ESP32 + LVGL 教程（一）：点亮屏幕-1761201459700.png|568x15]]
    image

2. 引入 lvgl 官方移植

  1. 引入 lvgl 官方依赖
    ![[ESP32 + LVGL 开发笔记（一）：点亮屏幕-1761303042800.png|700x170]]
    相关依赖信息都在 idf_component.yml 中，点击 🔧 构建项目。点击构建会拉取idf_component 中引用的依赖
  2. 移植示例代码
    删除 /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

image

3. 修改项目配置

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

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

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

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

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

  1. 分辨率
    这部分还是很重要，请确认好屏幕参数
// 横屏显示
// #define EXAMPLE_LCD_H_RES   (320)
// #define EXAMPLE_LCD_V_RES   (172)
// 竖屏显示
#define EXAMPLE_LCD_H_RES   (172)
#define EXAMPLE_LCD_V_RES   (320)
  1. 颜色设置
    实例中 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 会显示 蓝色。
image

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

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

esp_lcd_panel_invert_color(lcd_panel, true);
  1. 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 显示配置进行修改：
image
设置 mirror_x、mirror_y 为 false。见现在的显示效果：
image

好，现在大功告成，成功完美点亮一颗屏幕😎😎

屏幕相关设置也可以自己改一改看看效果，这种代码调整调整、看看效果很快就会熟练了🥳

参考连接

lvgl移植组件仓库

posted @ 2025-11-18 20:16  嗜睡河豚  阅读(14)  评论(0)    收藏  举报