esp32屏幕驱动 esp32驱动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库。

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)
//绘制数字2021   4号字体
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)

画实心矩形：

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 <TFT_eSPI.h>
#include "bmp2.h"

// TFT Pins has been set in the TFT_eSPI library in the User Setup file TTGO_T_Display.h
// #define TFT_MOSI            19
// #define TFT_SCLK            18
// #define TFT_CS              5
// #define TFT_DC              16
// #define TFT_RST             23
// #define TFT_BL              4   // Display backlight control pin

TFT_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、显示效果展示：