这篇文章将成为一个教程–关于如何在Arduino框架下ESP32移植LVGL（Light and Versatile Graphics Library）。学习之余，在此写下我的学习笔记。
关于LVGL
简而言之，LVGL是一个具有广泛功能的轻量图形库。基本上适用于所有的显示器，因为其本身不是LCD驱动库—它依赖于其他额外的库来驱动显示器。此外，它还是一个开源库，在此附上开源链接。
硬件软件
硬件：
· ESP32开发板
· 带有SPI接口的LCD
· USB供电线
软件：
· Platform IO（也可以使用Arduino IDE，本教程中使用前者）
· TFT_eSPI或其他显示屏驱动库（例如Adafruit GFX Library）
开发环境
对于本教程，我将使用PlatformIO开发环境。该IDE相较于Arduino IDE，个人使用感觉更加便捷容易。
要开始使用 PlatformIO，首先，你需要下载它。实际上，它是 Visual Studio Code 的一个附加组件——可扩展的文本编辑器。
安装后，可以创建你的第一个项目。使用方法在此就不赘述。 
硬件设置
本教程中，使用是的1.44寸TFT屏模块/SPI，驱动IC是ST7735，连接ESP32开发板如下
在移植LVGL前驱动LCD
首先，你需要一个在 LVGL 之外工作的显示器——只有它的驱动程序库。根据显示类型（SPI、I2C、并行），有多种选择。如果你使用 Adafruit 的（或具有相同驱动器 IC 的类似 LCD）显示器，则可以使用 Adafruit 库。你还可以使用基于 Adafruit 库的Bodmer 的 TFT_eSPI库。如果你已经熟悉 eSPi 库，则可以使用它。你还可以为显示器编写你自己的几个驱动程序函数——这样你将节省一些程序内存，因为 LVGL 只需要上述库中的一些函数。本教程中使用的是TFT_eSPI。
TFT_eSPI驱动TFT显示屏
你可以在PlatformIO中直接下载，或从GithubTFT_eSPI获取，也可以直接获取本教程的驱动代码。
将库文件添加至工程后，需要编辑修改User_Setup.h文件以满足你的要求。以下代码为本教程
#define USER_SETUP_INFO "User_Setup"
#define ST7735_DRIVER // Define additional parameters below for this display
#define TFT_WIDTH 128
#define TFT_HEIGHT 128
#define ST7735_GREENTAB128 // For 128 x 128 display
#define TFT_MOSI 13 // In some display driver board, it might be written as "SDA" and so on.15
#define TFT_SCLK 14 //14
#define TFT_CS 15 // Chip select control pin
#define TFT_DC 27 // Data Command control pin
#define TFT_RST 4 // Reset pin (could connect to Arduino RESET pin)
#define TFT_BL 26 // LED back-ligh t
#define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2 // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4 // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6 // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7 // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8 // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT
#define SPI_FREQUENCY 40000000
#define SPI_READ_FREQUENCY 20000000
// #define SPI_TOUCH_FREQUENCY 2500000
此外，还需实例化一个tft对象并初始化
static const uint16_t screenWidth = 128;
static const uint16_t screenHeight = 128;
TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */
/* TFT init */
tft.init(ST7735_BLACK);
tft.setRotation(0);
至此，LCD屏幕驱动完成。
移植LVGL
当LCD屏幕启动并运行时，下一步就是使LVGL适配你的显示设置。首先，下载LVGL至你的PlatformIO工程中，下载方法同上TFT_eSPI。本教程使用的@8.2.0版本。
ps：并非本教程中所有内容对不同版本的lvgl完全适用。
编辑配置文件
一开始我们需要配置一些 LVGL 库。转到项目中的 LVGL 文件夹，找到“lv_conf_template.h”文件。将其重命名为“lv_conf.h”。然后，打开它进行编辑。在里面你会发现一行告诉你
/*
* Copy this file as `lv_conf.h`
* 1. simply next to the `lvgl` folder
* 2. or any other places and
* - define `LV_CONF_INCLUDE_SIMPLE`
* - add the path as include path
*/
“将这个文件复制并重命名为 lv_conf.h并放至lvgl文件夹”。
首先，您应该将第一个定义更改为如下所示：
#if 1
然后，找到一行：
#define LV_TICK_CUSTOM 0
使用 Arduino 时，您需要将其值更改为 1：
#define LV_TICK_CUSTOM 1
虽然此文件中有更多设置，但需要更改这两行才能在 Arduino 系统上启动一个简单的 LVGL 示例。此外，如果你将 LV_TICK_CUSTOM 的值保留为 0，则屏幕不会定期更新或在屏幕触摸后更新。
编辑main.cpp文件
包含LVGL库
#include "../lvgl/src/lvgl.h"
注意到上面的 include 中有一条很长的路径。通常它应该像这样工作：
#include "lvgl.h"
但有时 PlatformIO 决定不查找所需的头文件，你将不得不从当前文件编写一个相对路径。
接下来，让我们创建一些变量：
static lv_disp_draw_buf_t draw_buf; //初始化显示缓冲区
static lv_color_t buf_1[screenWidth * screenHeight];//用于LVGL使用的缓冲区
lv_obj_t *screenMain; //指向所用屏幕的实例化对象
lv_obj_t *labelName;
lv_obj_t *labelTime;
lv_obj_t *labelLocation;
lv_obj_t *labelWeather;
lv_obj_t *labelTemperature;
编写回调函数
编写回调函数，用于将缓冲区的内容复制到显示器的特定区域。
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
uint32_t w = (area->x2 - area->x1 + 1);
uint32_t h = (area->y2 - area->y1 + 1);
tft.startWrite();
tft.setAddrWindow(area->x1, area->y1, w, h);
tft.pushColors(&color_p->full, w * h, true);
tft.endWrite();
lv_disp_flush_ready(disp);
}
设置功能
当我们完成以上步骤后，需要将所需代码添加至setup()函数中：
/* TFT init */
tft.init(ST7735_BLACK);
tft.setRotation(0);
/*初始化显示*/
lv_init(); //初始化lvgl库
lv_disp_draw_buf_init(&draw_buf, buf_1, NULL, screenWidth * screenHeight); //开启双缓冲
/*Initialize the display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
/*Change the following line to your display resolution*/
disp_drv.hor_res = screenWidth;
disp_drv.ver_res = screenHeight;
disp_drv.flush_cb = my_disp_flush; /*Set your driver function*/
disp_drv.draw_buf = &draw_buf; /*Assign the buffer to the display*/
lv_disp_drv_register(&disp_drv); //注册显示屏
screenMain = lv_obj_create(NULL); //创建一个实际的屏幕对象
labelName = lv_label_create(screenMain);
// labelFans = lv_label_create(screenMain);
labelTime = lv_label_create(screenMain);
labelLocation = lv_label_create(screenMain);
labelWeather = lv_label_create(screenMain);
labelTemperature = lv_label_create(screenMain);
// imgHeadPhoto = lv_img_create(screenMain);
while(1)
{
lv_label_set_long_mode(labelName, LV_LABEL_LONG_WRAP);
lv_label_set_text(labelName, "Hello! Yogurt");
lv_obj_set_size(labelName, 120, 20);
lv_obj_align(labelName, LV_ALIGN_DEFAULT, 0, 0);
lv_obj_set_style_text_font(labelName,&lv_font_chinese_14, 0);
lv_label_set_long_mode(labelLocation, LV_LABEL_LONG_WRAP);
lv_label_set_text_fmt(labelLocation, "城市: %s", location);
lv_obj_set_size(labelLocation, 120, 20);
lv_obj_align(labelLocation, LV_ALIGN_DEFAULT, 0, 40);
lv_obj_set_style_text_font(labelLocation,&lv_font_chinese_14, 0);
lv_label_set_long_mode(labelWeather, LV_LABEL_LONG_WRAP);
lv_label_set_text_fmt(labelWeather, "天气: %s",weather);
lv_obj_set_size(labelWeather, 120, 20);
lv_obj_align(labelWeather, LV_ALIGN_DEFAULT, 0, 60);
lv_obj_set_style_text_font(labelWeather,&lv_font_chinese_14, 0);
lv_label_set_long_mode(labelTemperature, LV_LABEL_LONG_WRAP);
lv_label_set_text_fmt(labelTemperature, "气温: %s度",temperature);
lv_obj_set_size(labelTemperature, 120, 20);
lv_obj_align(labelTemperature, LV_ALIGN_DEFAULT, 0, 80);
lv_obj_set_style_text_font(labelTemperature,&lv_font_chinese_14, 0);
// lv_img_set_src(imgHeadPhoto, &head_photo);
// lv_obj_align(imgHeadPhoto, LV_ALIGN_CENTER, 64, 64);
// lv_obj_set_size(imgHeadPhoto, 60, 60);
lv_scr_load(screenMain);
lv_task_handler();
vTaskDelay(1);
}
编译代码并烧录，至此，我们的LVGL移植完毕。
教程源码链接及其他
教程源码链接:https://github.com/Yogurt-994/MyESP32Project/tree/master/NODEMCU-32_LVGL_JSON
LVGL 官方网站：https://lvgl.io/
百问网韦东山LVGL 中文站：http://lvgl.100ask.net/8.2/index.html
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
