移植LVGL8到esp32的踩坑记录

移植LVGL8到esp32的踩坑记录

---

前言

硬件：ESP32 WROOM 开发板 + 1.8寸spi彩色液晶（st7735s）
液晶是这种：

开发环境： vscode

一、vscode环境搭建

一开始在旧电脑安装配置很简单，没出什么问题，直接在vscode的扩展搜索Espressif IDF安装，然后打开这个插件，按提示在线安装esp-idf仓库和相关工具就可以了。只要注意网络能，下载github上的文件不失败就行了。
但第二次在新的电脑安装，最后一步配置python虚拟环境总失败，想想应该是没有前置安装python、cmake等环境导致的。所以新电脑，建议先安装git、python、cmake，再去vscode配置环境

1.安装git

选择对应的最新版本

2.安装python

我直接安装Anaconda，安装个人版就可以了

3.安装cmake

下载msi安装文件

以上3个都是无脑next点击下一步就可以了。但注意Anaconda和cmake需要选择将程序加入到环境路径里面，借用一下网上的图：

4.配置vscode

安装好Espressif IDF插件后，第一次打开会出现插件配置页面，如果后面想再打开，可以按下ctrl+shift+p键打开命令面板，输入搜索“Configure ESP-IDF extension”找到再次打开
感觉下面几样选项没什么大的区别，如果网络不好的可以网上搜搜相关离线下载再指定配置的方法。我为了省事，直接联网下载的，只要前面的几个工具是安装正确的，应该整个配置都能成功

配置成功后，会出现这样的提示，应该就可以了

打开一个esp32的idf工程，或者用命令面板搜索“show example”，来从esp-idf的例程里面创建一个新的工程（这个功能还是很方便的），就可以尝试编译工程、烧录固件来检验环境是否搭建正常了。

二、移植LVGL8

这里偷懒，直接使用了这位兄弟搭好的仓库，clone下来，在vscode中打开文件夹就行了，很方便。
blog地址
他移植好的仓库源码地址

这里要注意一下，clone下来后，里面还有一层目录，用vscode打开文件夹时，要打开里面lvgl_v8_esp32-main这个文件夹，不然会提示没有cmakelists.txt文件的

1.配置lvgl

点一下vscode界面最下一栏的齿轮配置图标，打开sdk的menuconfig图形配置界面，修改液晶相关配置
针对我的液晶，关键配置如下：


最后的Display Pin Assignments引脚配置，根据实际硬件连线填就行了。这个仓库已经修复了st7735的驱动报错问题，如果是直接用官方的lv_port_esp32仓库移植的话，会出现编译报错，需要修改一下\components\lvgl_esp32_drivers\lvgl_tft\目录下st7735s.c这个文件，参考这里

2.修改代码

有两处要修改：
一处是\components\lvgl_esp32_drivers\lvgl_tft\st7735s.h，我的屏幕xy坐标偏移都是0

// Defines are taken from
//      https://raw.githubusercontent.com/m5stack/M5StickC/master/src/utility/ST7735_Defines.h
// and are modified to fit to the M5StickC device, and are taken from
//      https://github.com/adafruit/Adafruit-ST7735-Library
//
#define ST7735_GREENTAB160x80 // For 160 x 80 display (BGR, inverted, 26 / 1 offset)
#define COLSTART            0
#define ROWSTART  			0

一处是main.c，将gui_task(void *arg)函数里面的驱动初始化分辨率改成我屏幕对应的

static void gui_task(void *arg)
{
   xGuiSemaphore = xSemaphoreCreateMutex();
   lv_init();          //lvgl内核初始化
   lvgl_driver_init(); //lvgl显示接口初始化

   /* Example for 1) */
   static lv_disp_draw_buf_t draw_buf;
   lv_color_t *buf1 = heap_caps_malloc(DLV_HOR_RES_MAX * DLV_VER_RES_MAX * sizeof(lv_color_t), MALLOC_CAP_DMA);
   lv_color_t *buf2 = heap_caps_malloc(DLV_HOR_RES_MAX * DLV_VER_RES_MAX * sizeof(lv_color_t), MALLOC_CAP_DMA);

   lv_disp_draw_buf_init(&draw_buf, buf1, buf2, DLV_HOR_RES_MAX * DLV_VER_RES_MAX); /*Initialize the display buffer*/

   static lv_disp_drv_t disp_drv;         /*A variable to hold the drivers. Must be static or global.*/
   lv_disp_drv_init(&disp_drv);           /*Basic initialization*/
   disp_drv.draw_buf = &draw_buf;         /*Set an initialized buffer*/
   disp_drv.flush_cb = disp_driver_flush; /*Set a flush callback to draw to the display*/
   disp_drv.hor_res = 128;                /*Set the horizontal resolution in pixels*/
   disp_drv.ver_res = 160;                /*Set the vertical resolution in pixels*/
   lv_disp_drv_register(&disp_drv);       /*Register the driver and save the created display objects*/

保存后，就可以编译工程了。

3.踩坑

烧录固件后，lvgl8的demo应该跑起来了。虽然显示方向、位置都是正确的，但唯独颜色不对，感觉是红蓝反了。

经过一番查找和调试后，终于发现这里st7735s的驱动关于MADCTL寄存器的配置对于我的屏是不适用的

需要对\components\lvgl_esp32_drivers\lvgl_tft\st7735s.c的 st7735s_set_orientation做修改，将方向旋转和rgb模式改正

    /*
        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};
	uint8_t data[] = {0xC0, 0x00, 0xA0, 0x60};	// modify to RGB color filter panel

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

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

再次编译后，颜色和屏幕方向配置都正确了

三、总结

其实环境搭建和移植都不难，网络好基本就成功大部分了，移植本就是拿来主义。这次最头疼的还是屏幕驱动的适配，不同厂家的屏幕可能略有差异，希望能给遇到相似问题的小伙伴一个参考思路。