ESP32开发：5分钟之内添加ST7735驱动构建LVGL模板工程

esp32 添加lvgl 流程

- [1. 在ESP32组件仓库中，找到需要安装的lvgl版本](#1. 在ESP32组件仓库中，找到需要安装的lvgl版本)
- [2. 选择lvgl 组件和 esp_lvgl_port](#2. 选择lvgl 组件和 esp_lvgl_port)
- [3. 选择模板工程](#3. 选择模板工程)
- [4. 编译工程](#4. 编译工程)
- [5. 适配TFT ST7735驱动](#5. 适配TFT ST7735驱动)
- - [1. 新增驱动文件](#1. 新增驱动文件)
- [6. 屏幕颜色调整](#6. 屏幕颜色调整)
- [7. 横屏竖屏调整](#7. 横屏竖屏调整)
- - [1. 开启横屏（交换 X/Y）](#1. 开启横屏（交换 X/Y）)
  - [2. 根据你的屏幕，调整镜像](#2. 根据你的屏幕，调整镜像)
  - [3. 四种组合:](#3. 四种组合:)
  - [4. 在lvgl中软件横屏](#4. 在lvgl中软件横屏)
- [8. 问题？](#8. 问题？)

1. 在ESP32组件仓库中，找到需要安装的lvgl版本

Ctrl + Shift + P 调出 VS Code 全局命令面板，找到 ESP32 组件仓库，添加所需要的组件。

2. 选择lvgl 组件和 esp_lvgl_port

添加这两个组件：

添加成功之后，在vscode 目录下可以看到添加的组件，同时组件清单中也能看到对应的组件版本。

3. 选择模板工程

在esp_lvgl_port 组件中，找到要使用的模板工程，此处我们使用屏幕LCD是SPI接口的，其驱动芯片是ST7735 / ST7735S，因此我们选择touchscreen 例程。

使用touchscreen 例程中的下面三个文件，替换 hello_world 例程中的文件，并删除原来的hello_world_main.c 函数。

在改例程中，使用了触摸屏，为了编译通过，可以在组件配置文件中，添加对应的触摸屏驱动组件，之后文件夹如下图所示。

4. 编译工程

可以设置目标芯片为 ESP32S3，否则由于例程中SPI 管脚问题，编译会失败。

5. 适配TFT ST7735驱动

1. 新增驱动文件

在 ESP-IDF 组件中，找到 ST7789 的驱动程序，复制粘贴并将源文件中ST7789更改名字为 ST7735。

更改过后，把源文件添加到项目工程中，示例如下：

在 main 函数中，添加 esp_lcd_panel_st7735.h 头文件，根据实际需要，修改TFT屏幕像素，修改 SPI 驱动管脚和 LCD 的控制管脚，把 esp_lcd_new_panel_st7789 更改为 esp_lcd_new_panel_st7735。

ST7735 和 ST7789 驱动，在初始化时控制指令不同，所以只需要更改对应的驱动指令即可。

根据驱动手册找到对应的初始化指令，更改为：

c 复制代码

static esp_err_t panel_st7735_init(esp_lcd_panel_t *panel)
{
    st7735_panel_t *st7735 = __containerof(panel, st7735_panel_t, base);
    esp_lcd_panel_io_handle_t io = st7735->io;
    // LCD goes into sleep mode and display will be turned off after power on reset, exit sleep mode first
    ESP_RETURN_ON_ERROR(esp_lcd_panel_io_tx_param(io, LCD_CMD_SLPOUT, NULL, 0), TAG,
                        "io tx param failed");
    vTaskDelay(pdMS_TO_TICKS(100));

    // Configure initial commands based on the manufacturer's demo.
    // Frame Rate
    esp_lcd_panel_io_tx_param(io, 0xB1, (uint8_t[]){0x05, 0x3C, 0x3C}, 3);
    esp_lcd_panel_io_tx_param(io, 0xB2, (uint8_t[]){0x05, 0x3C, 0x3C}, 3);
    esp_lcd_panel_io_tx_param(io, 0xB3, (uint8_t[]){0x05, 0x3C, 0x3C, 0x05, 0x3C, 0x3C}, 6);
    // Power Sequence
    esp_lcd_panel_io_tx_param(io, 0xB4, (uint8_t[]){0x03}, 1);
    esp_lcd_panel_io_tx_param(io, 0xC0, (uint8_t[]){0x28, 0x08, 0x04}, 3);
    esp_lcd_panel_io_tx_param(io, 0xC1, (uint8_t[]){0XC0}, 1);
    esp_lcd_panel_io_tx_param(io, 0xC2, (uint8_t[]){0x0D, 0x00}, 2);

    esp_lcd_panel_io_tx_param(io, 0xC3, (uint8_t[]){0x8D, 0x2A}, 2);//When using ST7735S, comment out it. 
    esp_lcd_panel_io_tx_param(io, 0xC4, (uint8_t[]){0x8D, 0xEE}, 2);//When using ST7735S, comment out it. 

    // VCOM
    esp_lcd_panel_io_tx_param(io, 0xC5, (uint8_t[]){0x1A}, 1);

    // Gamma Sequence
    esp_lcd_panel_io_tx_param(io, 0xE0, (uint8_t[]){0x04, 0x22, 0x07, 0x0A, 0x2E, 0x30, 0x25, 0x2A, //
                                                    0x28, 0x26, 0x2E, 0x3A, 0x00, 0x01, 0x03, 0x13},
                              16);
    esp_lcd_panel_io_tx_param(io, 0xE1, (uint8_t[]){0x04, 0x16, 0x06, 0x0D, 0x2D, 0x26, 0x23, 0x27, //
                                                    0x27, 0x25, 0x2D, 0x3B, 0x00, 0x01, 0x04, 0x13},
                              16);
    esp_lcd_panel_io_tx_param(io, LCD_CMD_MADCTL, (uint8_t[]){st7735->madctl_val,
                                                  },
                              1);
    esp_lcd_panel_io_tx_param(io, LCD_CMD_COLMOD, (uint8_t[]){st7735->colmod_val,
                                                  },
                              1);
    // turn on display
    // esp_lcd_panel_io_tx_param(io, LCD_CMD_DISPON, NULL, 0);
    return ESP_OK;
}

支持，ST7735 驱动程序已经添加完成。

6. 屏幕颜色调整

c 复制代码

ESP_LOGD(TAG, "Install LCD driver");
    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)
        .rgb_endian = LCD_RGB_ENDIAN_RGB,
#else
        .rgb_ele_order = LCD_RGB_ELEMENT_ORDER_BGR,
#endif
        .bits_per_pixel = EXAMPLE_LCD_BITS_PER_PIXEL,
    };

rgb_endian 和 rgb_ele_order 功能完全一样，只是 ESP-IDF 版本改名，可以直接修改这里调整颜色至正常。

7. 横屏竖屏调整

1. 开启横屏（交换 X/Y）

c 复制代码

// 开启横屏：交换 X 和 Y 轴
esp_lcd_panel_swap_xy(lcd_panel, true);

2. 根据你的屏幕，调整镜像

c 复制代码

esp_lcd_panel_mirror(lcd_panel, true, false);

3. 四种组合:

竖屏

c 复制代码

esp_lcd_panel_swap_xy(lcd_panel, false);
esp_lcd_panel_mirror(lcd_panel, false, false);

横屏（常用 90°）

c 复制代码

esp_lcd_panel_swap_xy(lcd_panel, true);
esp_lcd_panel_mirror(lcd_panel, true, false);

竖屏 180°

c 复制代码

esp_lcd_panel_swap_xy(lcd_panel, false);
esp_lcd_panel_mirror(lcd_panel, true, true);

横屏 180°

c 复制代码

esp_lcd_panel_swap_xy(lcd_panel, true);
esp_lcd_panel_mirror(lcd_panel, false, true);

4. 在lvgl中软件横屏

使用lvgl API 软件旋转屏幕：

c 复制代码

lv_disp_set_rotation(lvgl_disp, LV_DISPLAY_ROTATION_90);

LVGL 在把图像传给 LCD 之前，先在内存里把整个界面旋转 。

8. 问题？

在横屏，竖屏切换中，发现不管怎么设置：

c 复制代码

esp_lcd_panel_swap_xy(lcd_panel, false);
esp_lcd_panel_mirror(lcd_panel, false, false);

屏幕显示都一直是竖屏？什么原因呢？