【lvgl】esp32移植lvgl

飞鸟厌鱼

已于 2024-03-29 23:23:19 修改

阅读量2.4k

点赞数 11

分类专栏： esp32 文章标签： esp32 lvgl

于 2024-02-05 21:55:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38091632/article/details/136047144

版权

esp32 专栏收录该内容

42 篇文章

订阅专栏

本文详细描述了使用LVGL库在ESP32平台上的开发过程，涉及环境配置、代码抓取、分支切换、芯片信息设置、编译中遇到的未定义宽高等问题的解决方法，以及配置引脚、显示效果调整和色彩校正等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、环境

idf 4.4
lvgl 8.3.11

二、抓取代码

git clone --recurse-submodules git@github.com:lvgl/lv_port_esp32.git

在这里插入图片描述

三、切换分支

cd lv_port_esp32/components/lvgl
git branch -a
git checkout release/v8.3

在这里插入图片描述

四、配置芯片信息

选择端口
芯片信息，合宙esp32是c3
uart串口刷机
在这里插入图片描述
配置完成后试下编译是否通过

五、编译异常

问题1: 未定义宽高

在这里插入图片描述
解决
在components\lvgl_esp32_drivers\lvgl_helpers.h中添加宏定义

#define SPI_HOST_MAX 3
#ifdef CONFIG_LV_DISPLAY_ORIENTATION_PORTRAIT
    #define LV_HOR_RES_MAX 128
    #define LV_VER_RES_MAX 160
#else
    #define LV_HOR_RES_MAX 160
    #define LV_VER_RES_MAX 128
#endif

问题2: 修改接口

在这里插入图片描述
main.c

    static lv_disp_buf_t disp_buf;
    lv_disp_buf_init(&disp_buf, buf1, buf2, size_in_px);
    disp_drv.buffer = &disp_buf;
    lv_obj_t * label1 =  lv_label_create(scr, NULL);
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);

改动后

    static lv_disp_draw_buf_t disp_buf;
    lv_disp_draw_buf_init(&disp_buf, buf1, buf2, size_in_px);
    disp_drv.draw_buf = &disp_buf;
    lv_obj_t * label1 =  lv_label_create(scr);
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);

问题3: lv_mem_size

通过左下角的设置按钮，打开sdk configuration editor快速配置。

在这里插入图片描述

设置为48

问题4：头文件命名

在这里插入图片描述
复制文件，并重名

在这里插入图片描述

打开配置

lv_demo_conf.h打开if否定

#if 1 /*Set it to "1" to enable the content*/

#ifndef LV_DEMO_CONF_H
#define LV_DEMO_CONF_H

问题5：缺少font12

在这里插入图片描述
选中保存并重新编译

这时候可以顺利编译完成。

但是还是需要再结合具体芯片设置引脚

六、配置引脚

选择lcd控制芯片
在这里插入图片描述

在这里插入图片描述

问题6：显示花屏，字符不清

在这里插入图片描述

components\lvgl_esp32_drivers\lvgl_tft\st7735s.h

// #define ST7735_GREENTAB160x80 // For 160 x 80 display (BGR, inverted, 26 / 1 offset)
// #define COLSTART            26
// #define ROWSTART            1
#define COLSTART            0
#define ROWSTART            0

在这里插入图片描述

还是有半边花屏，因为这是适用于160*80的显示，所以还需调整lvgl 画布的大小
components\lvgl\src\hal\lv_hal_disp.c

void lv_disp_drv_init(lv_disp_drv_t * driver)
{
    lv_memset_00(driver, sizeof(lv_disp_drv_t));

    #if defined(CONFIG_LV_DISPLAY_ORIENTATION_PORTRAIT)
        driver->hor_res          = 128;
        driver->ver_res          = 160;
    #else
        driver->hor_res          = 160;
        driver->ver_res          = 128;
    #endif // CONFIG_LV_DISPLAY_ORIENTATION_PORTRAIT
}

可以正常显示全屏了
在这里插入图片描述

但是色彩还有有问题
需要打开swap

在这里插入图片描述

七、测试demo

main.c

static void create_demo_application(void)
{
    /* When using a monochrome display we only show "Hello World" centered on the
     * screen */
#if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME || \
    defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_ST7735S
}

改为

static void create_demo_application(void)
{
    /* When using a monochrome display we only show "Hello World" centered on the
     * screen */
#if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME
}

这样可以测试示例widgets。

在这里插入图片描述

发现色彩很怪，蓝色变成了黄色。
这是因为rgb变为了bgr。

解决方法有两个

lcd驱动中设置色彩类型
通过lvgl color代码调整r和b

components\lvgl_esp32_drivers\lvgl_tft\st7735s.c

static void st7735s_set_orientation(uint8_t orientation)
{
    const char *orientation_str[] = {
        "PORTRAIT", "PORTRAIT_INVERTED", "LANDSCAPE", "LANDSCAPE_INVERTED"
    };

    ESP_LOGD(TAG, "Display orientation: %s", orientation_str[orientation]);

    /*
        Portrait:  0xC8 = ST77XX_MADCTL_MX | ST77XX_MADCTL_MY | ST77XX_MADCTL_BGR
        Landscape: 0xA8 = ST77XX_MADCTL_MY | ST77XX_MADCTL_MV | ST77XX_MADCTL_BGR
        Remark: "inverted" is ignored here
    */
    uint8_t data[] = {0xC8, 0xC8, 0xA8, 0xA8};

    ESP_LOGD(TAG, "0x36 command value: 0x%02X", data[orientation]);

    st7735s_send_cmd(ST7735_MADCTL);
    st7735s_send_data((void *) &data[orientation], 1);
}