ESP32驱动TFT屏幕：从入门到精通
ESP32驱动TFT屏幕：从入门到精通
本教程将详细介绍如何使用ESP32开发板驱动TFT屏幕，包括基础显示功能、触摸功能以及使用LVGL图形库实现更复杂的GUI界面。通过本教程，你将掌握在VSCode中使用PlatformIO开发环境进行嵌入式开发的基本技能。
一、模块介绍
TFT屏幕（薄膜晶体管屏幕）是一种先进的液晶显示（LCD）技术，提供高分辨率和鲜艳色彩的显示效果。
下面是模块的一些参数信息：
还有更多详细的信息可以查看他的一些手册。
二、基础功能
本文章使用的是ESP32 + VSCode，接下来讲述一下如何通过VSCode驱动TFT屏幕
首先，打开VScode，在VSCode拓展搜索PlatformIO，下载下面这个插件
下载完打开PlatformIO，会看到下面这个界面，点击新建文件夹
- 根据相关提示，填写信息
注意：第一次下载可能会比较慢，请耐心等待，也可以挂个梯子可能会更快
点击看一下主函数，可以看到基本的arduino框架
接下来去到PIO Home，搜索相关的TFT库，将他添加到工程文件中
- 添加完后，就可以在我们工程文件夹中，看到这个TFT库
- 接下来，使用官方给的例子，来实现我们TFT屏幕的显示
将范例里的代码Alt + A 复制粘贴到主函数里面
接着，我们需要去配置TFT屏幕的一些引脚
在下面这个头文件里面，选择你的TFT屏幕对应驱动的头文件，将它解除注释
打开头文件，看一下里面有什么东西
根据头文件的定义，完成ESP32跟TFT屏幕的接线，只需要一一对应就可以，其中LED引脚连接到ESP32的EN引脚
VCC 3V3
GND GND
CS D15
RESET D4
DC D2
SDI(MOSI) D23
SCK D18
LED EN
SDO(MISO) D19
将函数下载并且上传到ESP32上面
- 最后，我们就可以看到TFT屏幕成功显示了
三、进阶功能—触摸功能
如果你的屏幕带有触摸功能的话，可以继续往下看下去
在TFT_eSPI库中，带有触摸的相应功能及函数，接下来让我们来开启这个功能
首先去到上面我们TFT驱动的头文件里面，将触摸功能的引脚打开
然后在TFT_eSPI库里面找一个官方的触摸例子，我这里找的是键盘的例子
将这个例子全部复制到主函数里面
其中，在setup函数前面加上三句函数注释
void status(const char *msg);
void touch_calibrate();
void drawKeypad();
- 接下来是接线的问题，因为TFT显示跟TFT触摸功能使用的都是SPI协议
SPI协议的通信接线方式如下：
不同的设备通过CS片选线来选择主机跟哪个从设备进行通信
所以为了解决显示功能跟触摸功能的同时使用，我们只需要将主设备的SCK、MISO、MOSI引脚引出，然后将多个从设备的SCK、MISO、MOSI引脚分别接在引出的三条对应的线路上，最后通过程序设置CS引脚来分时的选通从设备，就可以在这里实现对触摸显示屏的正常驱动。
具体的接线如下图所示：
VCC 3V3
GND GND
CS D15
RESET D4
DC D2
SDI(MOSI) D23
SCK D18
LED EN
SDO(MISO) 不接
T_CLK（SCK） D18
T_CS D5
T_DIN（MOSI） D19
T_DO（MISO） D23
- 最后编译下载代码，观看效果
四、超进阶学习—LVGL
LVGL（Light and Versatile Graphics Library）是一个免费的开源图形库，用于嵌入式系统和微控制器上的图形用户界面（GUI）开发。它提供了丰富的功能和组件，使开发人员能够轻松地创建高度自定义和响应式的用户界面。
太多的介绍就不在这里赘述了，可以移步到LVGL的文档去阅读
欢迎来到LVGL中文文档 — LVGL_Chinese_Documents 文档
下面，讲解在VSCode中怎么移植LVGL库
在Platform IO中，将LVGL库添加到工程中
将LVGL文件夹下将lv_conf_template.h重命名为lv_conf.h
紧接着，更改里面的内容
使能lv_conf.h文件
使能ESP32内部时钟心跳包
使能我们后面要用到的例子
接着将lvgl/demos文件移动到lvgl/src/demos
编写一下主函数
#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>
#include <demos/lv_demos.h>
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ 320 * 10 ];
TFT_eSPI tft = TFT_eSPI(240,320);
/* Display flushing */
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( ( uint16_t * )&color_p->full, w * h, true );
tft.endWrite();
lv_disp_flush_ready( disp );
}
/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
uint16_t touchX, touchY;
bool touched = tft.getTouch( &touchX, &touchY, 600 );
if( !touched )
{
data->state = LV_INDEV_STATE_REL;
}
else
{
data->state = LV_INDEV_STATE_PR;
/*Set the coordinates*/
data->point.x = touchX;
data->point.y = touchY;
Serial.print( "Data x " );
Serial.println( touchX );
Serial.print( "Data y " );
Serial.println( touchY );
}
}
//TFT屏幕校准
void touch_calibrate()
{
uint16_t calData[5];
uint8_t calDataOK = 0;
// Calibrate
tft.fillScreen(TFT_BLACK);
tft.setCursor(20, 0);
tft.setTextFont(2);
tft.setTextSize(1);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.println("Touch corners as indicated");
tft.setTextFont(1);
tft.println();
tft.calibrateTouch(calData, TFT_MAGENTA, TFT_BLACK, 15);
Serial.println(); Serial.println();
Serial.println("// Use this calibration code in setup():");
Serial.print(" uint16_t calData[5] = ");
Serial.print("{ ");
for (uint8_t i = 0; i < 5; i++)
{
Serial.print(calData[i]);
if (i < 4) Serial.print(", ");
}
Serial.println(" };");
Serial.print(" tft.setTouch(calData);");
Serial.println(); Serial.println();
tft.fillScreen(TFT_BLACK);
tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.println("Calibration complete!");
tft.println("Calibration code sent to Serial port.");
delay(4000);
}
void setup() {
lv_init();
Serial.begin(115200);
tft.begin();
tft.setRotation(3);
touch_calibrate();
uint16_t calData[5] = {539, 3379, 378, 3384, 5};
tft.setTouch(calData);
lv_disp_draw_buf_init( &draw_buf, buf, NULL, 320 * 10 );
/*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 = 320;
disp_drv.ver_res = 240;
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register( &disp_drv );
/*Initialize the input display*/
static lv_indev_drv_t indev_drv;
lv_indev_drv_init( &indev_drv );
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = my_touchpad_read;
lv_indev_drv_register(&indev_drv);
//在这里放不同demo函数
lv_demo_widgets();
}
void loop() {
lv_timer_handler(); /* let the GUI do its work */
delay( 1 );
}
最后，编译下载代码，观看一下效果