VS|ESP32 TTGO 1.14寸液晶屏使用 TFT

ESP32 TTGO

1、屏幕显示常用API
- 1.1 初始化
- 1.2 文字相关
- 1.3 图片显示
- 1.4 绘制图形
2、图片转化
3、示例代码
4、显示效果展示：

ESP32 TTGO
开发环境：VS Code (便于查看函数）

??ESP32 TTGO一块高颜值的开发板，自带1.14寸屏幕使用ST7789驱动，使用TFT_eSPI库。
文档链接：https://github.com/Xinyuan-LilyGO/TTGO-T-Display
github下载文件，拷贝到自己的arduino 库文件里面就可以使用了。
下图所示引脚分配：

文章图片

常用RGB565颜色定义：
也可以使用自带的RGB565颜色转换函数自行进行转换。

文章图片

1、屏幕显示常用API 1.1 初始化实例化屏幕：

TFT_eSPI::TFT_eSPI(int16_t w, int16_t h) //设定屏幕大小 TFT_eSPI tft = TFT_eSPI(135, 240);

参数：设置 w,h,屏幕宽和高

以下示例，基于实例化的tft
初始化函数：

tft.init();

设置屏幕方向：

void TFT_Touch::setRotation(byte rotation) //设置屏幕方向 tft.setRotation(1);

参数为：0, 1, 2, 3 分别代表 0°、90°、180°、270°

屏幕反色:
反转显示颜色

void TFT_eSPI::invertDisplay(bool i) // 正常显示 tft.invertDisplay(0);

参数：1反转， 0正常

RGB颜色转RGB565：

uint16_t TFT_eSPI::color565(uint8_t r, uint8_t g, uint8_t b) // 颜色转换 uint16_t yellow = tft.color565(255, 255, 0); tft.setTextColor(yellow); //

清屏函数，填充颜色：

void TFT_eSPI::fillScreen(uint32_t color) //清理屏幕默认颜色 tft.fillScreen(TFT_BLACK);

参数： color 可选颜色定义在头文件 TFT_eSPI.h(参考上图RGB565颜色)

1.2 文字相关设置字体大小：

void TFT_eSPI::setTextSize(uint8_t s) //设置字体大小为2 tft.setTextSize(2);

参数：允许设置大小1-7，大于7默认选择7

设置字体颜色：

void TFT_eSPI::setTextColor(uint16_t c) //字体颜色绿色 tft.setTextColor(TFT_GREEN);

参数： c ,颜色值，定义在头文件 TFT_eSPI.h (参考上图RGB565颜色)

设置开始的光标位置：

void TFT_eSPI::setCursor(int16_t x, int16_t y) //设置文字开始坐标(0,0) tft.setCursor(0, 0);

设置文本位置引用数据：

void TFT_eSPI::setTextDatum(uint8_t d) // 引用数据 tft.setTextDatum(MC_DATUM);

参数：d 定义在头文件 TFT_eSPI.h

绘制字符：

// Any UTF-8 decoding must be done before calling drawChar() int16_t TFT_eSPI::drawChar(uint16_t uniCode, int32_t x, int32_t y, uint8_t font) void TFT_eSPI::drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size)

绘制显示文字居左：

int16_t TFT_eSPI::drawString(const String& string, int32_t poX, int32_t poY)//显示文字 Moonbeam (10,10)位置 tft.drawString("Moonbeam ", 10, 10);

参数：string，poX，poY，分别为输入文字，文字显示坐标

绘制显示文字居中：

int16_t TFT_eSPI::drawCentreString(const String& string, int32_t dX, int32_t poY, uint8_t font) int16_t TFT_eSPI::drawCentreString(const char *string, int32_t dX, int32_t poY, uint8_t font)

绘制显示文字居右：

int16_t TFT_eSPI::drawRightString(const String& string, int32_t dX, int32_t poY, uint8_t font) int16_t TFT_eSPI::drawRightString(const char *string, int32_t dX, int32_t poY, uint8_t font)

绘制数字：

int16_t TFT_eSPI::drawNumber(long long_num, int32_t poX, int32_t poY) int16_t TFT_eSPI::drawNumber(long long_num, int32_t poX, int32_t poY, uint8_t font) //绘制数字20214号字体 tft.drawFloat(2021, 10,10,4);

绘制浮点数：

int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t dp, int32_t poX, int32_t poY) int16_t TFT_eSPI::drawFloat(float floatNumber, uint8_t dp, int32_t poX, int32_t poY, uint8_t font) //浮点数显示 tft.drawFloat(2.56, 4, 10,10,4);

1.3 图片显示 RGB565显示
开启16bit 显示：

void TFT_eSPI::setSwapBytes(bool swap) // 开启显示 tft.setSwapBytes(true);

图片显示：

void TFT_eSPI::pushRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t *data) // 设定图片显示的开始和结束位置，图片文件 tft.pushImage(0, 0,240, 135, ttgo);

BMP图片：

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

发送8bit 数据，可以实现软件复位等：

void TFT_eSPI::writecommand(uint8_t c) // 关闭 DISP tft.writecommand(TFT_DISPOFF);

XBM图片显示：

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

1.4 绘制图形半透明：
a 0 = 100% 背景颜色, a 255 = 100% 透明
颜色效果，配合使用

uint16_t TFT_eSPI::alphaBlend(uint8_t alpha, uint16_t fgc, uint16_t bgc) // 半透明颜色 tft.alphaBlend(a, TFT_RED,TFT_WHITE);

画一条水平画横线：

void TFT_eSPI::drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color) //绘制线 tft.drawFastHLine(204, a, 12, tft.alphaBlend(a, TFT_RED,TFT_WHITE));

参数：x，y画像开始坐标，w线条宽度，color,线条颜色

画点：

void TFT_eSPI::drawPixel(int32_t x, int32_t y, uint32_t color) //画点 tft.drawPixel(204,10,TFT_RED);

画竖线：

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

画空心圆：

void TFT_eSPI::drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color) tft.drawCircle(100,100,50,TFT_RED);

画实心圆：

void TFT_eSPI::fillCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color)

画空心椭圆：

void TFT_eSPI::drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_t color) tft.drawEllipse(100,100,100,60,TFT_GREENYELLOW);

画实心椭圆：

void TFT_eSPI::drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color) tft.drawRect(100,100,100,60,TFT_GREENYELLOW);

画空心矩形：

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

【VS|ESP32 TTGO 1.14寸液晶屏使用 TFT_eSPI库驱动】画实心矩形：

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

画空心圆角矩形：

void TFT_eSPI::drawCircleHelper( int32_t x0, int32_t y0, int32_t r, uint8_t cornername, uint32_t color)

画实心圆角矩形：

void TFT_eSPI::fillCircleHelper(int32_t x0, int32_t y0, int32_t r, uint8_t cornername, int32_t delta, uint32_t color)

画空心三角形：

void TFT_eSPI::drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color)

画实心三角形：

void TFT_eSPI::fillTriangle( int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color)

2、图片转化 TFT显示的图片格式为RGB565，需要将图片转换成RGB565。
Picture2Hex(图片转rgb565格式工具) ，自行下载。

文章图片

在软件的work文件夹下，会生成一个logo.c文件，将logo.c文件改成bmp2.h

文章图片

之后将：

文章图片

修改为：

文章图片

3、示例代码

#include #include "bmp2.h"// TFT Pins has been set in the TFT_eSPI library in the User Setup file TTGO_T_Display.h // #define TFT_MOSI19 // #define TFT_SCLK18 // #define TFT_CS5 // #define TFT_DC16 // #define TFT_RST23 // #define TFT_BL4// Display backlight control pinTFT_eSPI tft = TFT_eSPI(135, 240); void setup() { tft.init(); tft.setRotation(1); tft.fillScreen(TFT_BLACK); tft.setTextSize(2); uint16_t yellow = tft.color565(255, 255, 0); //进行RGB565颜色转换 tft.setTextColor(yellow); tft.setCursor(0, 0); tft.setTextDatum(MC_DATUM); /* tft.setSwapBytes(true); tft.pushImage(0, 0,240, 135, logo); delay(5000); */ //半透明 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)); }tft.drawFastHLine(104, 12, 60,TFT_RED); //画一条红色线}void loop() { tft.drawString("Moonbeam ", 75, 120); delay(2000); }

4、显示效果展示：