我们用到的库 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)