玩转 ESP32 + Arduino(二十八) TFT_eSPI库驱动ST7789(SPI接口)

我们用到的库 TFT_eSPI

一. 硬件接线

这里我们使用了中景园的ST7789

一般屏幕的引脚定义如下:

接线: 我们直接用VSPI接线

ESP32引脚 ST7789引脚 功能
GND GND 接地
3V3 VCC 电源
(VCLK)18 SCL SPI时钟线
(VMOSI)23 SDA SPI主出从入线
26 RES 复位引脚
27 DC 数据/命令选择线
(VCS0)5 CS SPI片选线
没接 BLK 背光控制线

如何在TFT_eSPI中设置引脚??

首先, 我们打开 User_Setup.h, 具体位置在(platformIO平台):

然后根据文件中的提示设置就可以了, 对于ESP32 + ST7789来说, 具体修改了如下内容:

第一步: 修改自定义驱动文件

在众多的驱动文件中,选择适合自己屏幕的, 注释掉不用的

设置宽高

对ST7789 ST7735 ILI9163来说, 要设置宽高

第二步: 引脚定义

注释掉其他的定义, 定义自己的引脚

第三步.第四步保持默认, 需要时再修改就可以

第三步是配置字库, ESP32内存足够, 不用配置了,都带着就行
第四步是 配置SPI的频率 / 配置用VSPI(默认)还是HSPI /

额外的一步: User_Setup_Select.h中选择用户自定义配置

因为上面我们的设置是自定义设置, 所以在User_Setup_Select.h中, 应启用自定义配置, 注释其他配置文件

二. 颜色和字体

1.关于颜色

关于颜色值, TFT一般都使用16位的RGB565颜色,在本库中, 典型颜色已经定义好了:

/***************************************************************************************
*                         Section 6: Colour enumeration
***************************************************************************************/
// Default color definitions
#define TFT_BLACK       0x0000      /*   0,   0,   0 */
#define TFT_NAVY        0x000F      /*   0,   0, 128 */
#define TFT_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define TFT_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define TFT_MAROON      0x7800      /* 128,   0,   0 */
#define TFT_PURPLE      0x780F      /* 128,   0, 128 */
#define TFT_OLIVE       0x7BE0      /* 128, 128,   0 */
#define TFT_LIGHTGREY   0xD69A      /* 211, 211, 211 */
#define TFT_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define TFT_BLUE        0x001F      /*   0,   0, 255 */
#define TFT_GREEN       0x07E0      /*   0, 255,   0 */
#define TFT_CYAN        0x07FF      /*   0, 255, 255 */
#define TFT_RED         0xF800      /* 255,   0,   0 */
#define TFT_MAGENTA     0xF81F      /* 255,   0, 255 */
#define TFT_YELLOW      0xFFE0      /* 255, 255,   0 */
#define TFT_WHITE       0xFFFF      /* 255, 255, 255 */
#define TFT_ORANGE      0xFDA0      /* 255, 180,   0 */
#define TFT_GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define TFT_PINK        0xFE19      /* 255, 192, 203 */ //Lighter pink, was 0xFC9F      
#define TFT_BROWN       0x9A60      /* 150,  75,   0 */
#define TFT_GOLD        0xFEA0      /* 255, 215,   0 */
#define TFT_SILVER      0xC618      /* 192, 192, 192 */
#define TFT_SKYBLUE     0x867D      /* 135, 206, 235 */
#define TFT_VIOLET      0x915C      /* 180,  46, 226 */

2. RGB颜色转565颜色 tft.color565()

uint16_t red =    tft.color565(255, 0, 0);
uint16_t green =  tft.color565(0, 255, 0);
uint16_t blue =   tft.color565(0, 0, 255);
uint16_t yellow = tft.color565(255, 255, 0);
tft.fillScreen(tft.color565(128, 0, 128));  //使用

3. 关于半透明 tft.alphaBlend()

在填入颜色的地方填入此函数可以开启alpha半透明通道

  for (uint16_t a = 0; a < 255; a++) // Alpha 0 = 100% background, alpha 255 = 100% foreground
  {
    //tft.drawFastHLine(192, a, 12, tft.alphaBlend(a, TFT_BLACK, TFT_WHITE));
    tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_RED,   TFT_WHITE));
    tft.drawFastHLine(216, a, 12, tft.alphaBlend(a, TFT_GREEN, TFT_WHITE));
    tft.drawFastHLine(228, a, 12, tft.alphaBlend(a, TFT_BLUE,  TFT_WHITE));
  }

4. 关于默认字体

编号范围是 1、2、4、6、7、8，不同的编号代表不同的字体, 不同的字体由于分辨率不同, 基本大小不同

// Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_GLCD

// Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT2

// Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT4

// Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT6

// Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT7

// Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8

// Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
//#define LOAD_FONT8N

// FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
#define LOAD_GFXFF

// 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

5. 关于自定义字体

TFT_eSPI自带了很多自定义库, 而且也可以自己去生成新的自定义库.

默认的自定义字体库在:

如果想学习自定义字库用法, 请参看例程:

三. 相关API

1. tft.init(); //初始化

初始化屏幕, 如果是ST7735,可以往里面传一个参数, 具体用到时再看

2. tft.fillScreen(TFT_BLACK); //填充全屏幕

填充全屏幕, 后面是颜色值,

tft.fillScreen(uint32_t color);

3. 屏幕旋转

// 设置屏幕显示的旋转角度，参数为：0, 1, 2, 3
// 分别代表 0°、90°、180°、270°
void setRotation(uint8_t r);

4. 屏幕反色

//反转显示颜色i = 1反转，i = 0正常
tft.invertDisplay(bool i);

四. 文字相关API

1. tft.setCursor(20, 10, 4); //设置打字起始坐标位置和字号

 // 设置文本显示坐标，默认以文本左上角为参考点，可以改变参考点
void setCursor(int16_t x, int16_t y);

// 设置文本显示坐标，和文本的字体
void setCursor(int16_t x, int16_t y, uint8_t font);

2. tft.setTextColor(2); //设置字体颜色

// 设置文本颜色
void setTextColor(uint16_t color);

// 设置文本颜色与背景色
void setTextColor(uint16_t fgcolor, uint16_t bgcolor);

设置背景颜色可以有效的防止数字叠在一起

3. tft.setTextSize(2); //设置字体大小

设置文本大小可以放大字体的显示,但是字体的"分辨率"是不会变的

// 设置文本大小，文本大小范围为 1~7 的整数
void setTextSize(uint8_t size);

4. tft.print("Hello World!"); // 显示字体

tft.print("Hello World!");

5. tft.printf, tft.println //显示字体

特别注意: 字库7是仿7段数码屏的样式

五. 绘制文字相关API

1. 绘制字符串(居左)

int16_t drawString(const String &string, int32_t x, int32_t y)
int16_t drawString(const char *string, int32_t x, int32_t y)
int16_t drawString(const String &string, int32_t x, int32_t y, uint8_t font)
int16_t drawString(const char *string, int32_t x, int32_t y, uint8_t font)

2. 绘制字符串(居中)

int16_t drawCentreString(const char *string, int32_t x, int32_t y, uint8_t font)
int16_t drawCentreString(const String &string, int32_t x, int32_t y, uint8_t font)

3. 绘制字符串(居右)

int16_t drawRightString(const char *string, int32_t x, int32_t y, uint8_t font)
int16_t drawRightString(const String &string, int32_t x, int32_t y, uint8_t font)

4. 绘制字符

int16_t drawChar(uint16_t uniCode, int32_t x, int32_t y)
int16_t drawChar(uint16_t uniCode, int32_t x, int32_t y, uint8_t font)
void drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size)

5. 绘制浮点数

int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y)
int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y, uint8_t font)

  tft.drawFloat(3.124, 4, 0,0,4);

6. 绘制数字

int16_t drawNumber(long intNumber, int32_t x, int32_t y)
int16_t drawNumber(long intNumber, int32_t x, int32_t y, uint8_t font)

7. 绘制

六. 绘制几何图形

1. 画点

void drawPixel(int32_t x, int32_t y, uint32_t color)

2.画线

void drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color)

3.画横线(快速)

void drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color)

4.画竖线(快速)

void drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color)

5. 画空心圆

tft.drawCircle(100,100,50,TFT_RED);

6. 画实心圆

void fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color)

7. 画空心椭圆

tft.drawEllipse(100,100,100,60,TFT_GREENYELLOW);

8. 画实心椭圆

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

9. 画空心矩形

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

10. 画实心矩形

void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)

11. 画空心圆角矩形

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)

12. 画实心圆角矩形

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)

13. 画空心三角形

void drawTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)

14. 画实心三角形

void fillTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)

七. 图片显示相关

1. 显示BMP图片

void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor)
void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor, uint16_t bgcolor)

2. XBM

xbm是一种简单的双色图片位图格式,在早期的cgi中运用较多，目前多用于计数器上

这里TFT_eSPI推荐了一个在线XBM制作工具:
https://www.online-utility.org/image/convert/to/XBM
实测非常好用

void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor)
void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t fgcolor, uint16_t bgcolor)

3. 显示图片

void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, const uint16_t *data, uint16_t transparent)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data, uint16_t transparent)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint8_t *data, bool bpp8 = true, uint16_t *cmap = (uint16_t *)nullptr)
void pushImage(int32_t x, int32_t y, int32_t w, int32_t h, uint8_t *data, uint8_t transparent, bool bpp8 = true, uint16_t *cmap = (uint16_t *)nullptr)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343