未分类 · 2022年10月25日

基于esp32的TFT_eSPI库的自定义开发

TFT_eSPI的库下载地址点击进入

一、起因

最近在做一个温度图像显示的项目,需要用到TFT屏幕显示图像和摄像头图像,在搜索下来发现这个优秀的github库、让复杂的图像处理变得简化
这个库支持非常多的操作,支持多个平台,并且使用c++进行开发



这里我们使用Arduino平台,基于esp32单片机进行开发,由于是arduino平台、开源框架非常多所以操作起来会非常的方便、但是到具体的图像显示还是需要自己搭建。

关于库的安装、配置和使用教程,网上有非常多的教程、这里就不再赘述

TFT_eSPI入门教程——》教程

基于TFT_eSPI库自定义中文字库的制作——》笔记

基于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);
设置背景颜色可以有效的防止数字叠在一起
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)
  1. 绘制字符串(居中)
    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)
  2. 绘制字符串(居右)
    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)
  3. 绘制字符
    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_tsize)
  4. 绘制浮点数
    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);
  5. 绘制数字
    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)

绘制几何图形

  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)
  2. 画空心圆
    tft.drawCircle(100,100,50,TFT_RED);
  3. 画实心圆
    void fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color)
  4. 画空心椭圆
    tft.drawEllipse(100,100,100,60,TFT_GREENYELLOW);
  5. 画实心椭圆
    void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)
  6. 画空心矩形
    void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)
  7. 画实心矩形
    void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)
  8. 画空心圆角矩形
    void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)
  9. 画实心圆角矩形
    void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color)
  10. 画空心三角形
    void drawTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)
  11. 画实心三角形
    void fillTriangle(int32_t x1, int32_t y1, int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint32_t color)

    图片显示相关

  12. 显示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)
  13. XBM
    xbm是一种简单的双色图片位图格式,在早期的cgi中运用较多,目前多用于计数器上在线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)
  14. 显示图片
    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, bo