【lvgl】esp32移植lvgl-编程知识

【lvgl】esp32移植lvgl

文章目录

一、环境
二、抓取代码
三、切换分支
四、配置芯片信息
五、编译异常
- 问题1: 未定义宽高
- 问题2: 修改接口
- 问题3: lv_mem_size
- 问题4：头文件命名
- 打开配置
- 问题5：缺少font12
六、配置引脚
- 问题6：显示花屏，字符不清
七、测试demo
八、调整方向

一、环境

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: 修改接口

在这里插入图片描述

    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);

问题3: lv_mem_size

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

在这里插入图片描述

问题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：显示花屏，字符不清

在这里插入图片描述

// #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 画布的大小

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;#elsedriver->hor_res          = 160;driver->ver_res          = 128;#endif // CONFIG_LV_DISPLAY_ORIENTATION_PORTRAIT
}

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

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

在这里插入图片描述

七、测试demo

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

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_BGRLandscape: 0xA8 = ST77XX_MADCTL_MY | ST77XX_MADCTL_MV | ST77XX_MADCTL_BGRRemark: "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);
}