代码收藏家技术教程 2023-01-04

使用 ESP8266 控制 TFT 显示屏

1. 准备工作

材料：ESP8266开发板、1.54寸IPS显示屏

开发环境：Arduino

驱动库：TFT_eSPI

连线：

SCK	GPIO14	D5
MOSI	GPIO13	D7
RES	GPIO2	D4
DC	GPIO0	D3
BLK	GPIO5	D1
CS		GND

BLK：控制屏幕亮度

自制驱动板：

2. TFT_eSPI库配置

根据第一步的连线和屏幕的型号进行配置

打开TFT_eSPI库中的User_Setup.h文件进行修改参数，配置结果如下：

①配置驱动

②配置屏幕颜色类型和尺寸 ③配置SPI接线，与前面介绍的连线方式一致

剩下的不用管，测试程序如下：

#include <TFT_eSPI.h>
#define BLK 5

TFT_eSPI tft = TFT_eSPI();

void setup()
{

  pinMode(BLK, OUTPUT);

  tft.init();                           //初始化
  tft.fillScreen(TFT_BLACK);            //屏幕颜色
  tft.setCursor(10, 10, 1);             //设置起始坐标(10, 10)，2 号字体
  tft.setTextColor(TFT_YELLOW);         //设置文本颜色为黄色
  tft.setTextSize(2);                   //设置文字的大小 (1~7)
  tft.println("TFT_Text");              //显示文字
  tft.fillCircle(30, 40, 10, TFT_BLUE); //画圆
  tft.setTextColor(TFT_WHITE);          //设置文字颜色和背景颜色
  tft.setCursor(10, 80, 1);             //设置起始坐标(10, 10)，2 号字体
  tft.println("test1");                 //显示文字
}
void loop()
{
  analogWrite(BLK, 150);
}

运行结果：

3. TFT常用函数

注：横向为X，纵向为Y

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

tft.fillScreen(Color); //color 可用内置的也可以自己设置屏幕颜色

tft.setCursor(X, Y, L);    //设置起始坐标(X, Y)，L号字体 L:0~6

tft.setTextColor(Color);    //设置文本颜色

tft.setTextSize(S);     //设置文字的大小 S:(1~7)

tft.println(Str);     //显示文字字符串，仅可显示英文字符，中文字符后续会出详细教程（需要自建汉字库显示）

tft.fillCircle(X,Y,R,Color);     //画圆 以(X，Y)为圆心，R为半径。

tft.drawLine(X1,Y1, X2, Y2, Color);    //画线，起点（X1，Y1），终点（X2，Y2）。

tft.drawPixel(X,Y,Color);    //画点 （X，Y）

tft.setTextColor(fg,bg);     //设置文字颜色fg和背景颜色bg。

常用函数与U8G2库类似

4. TFT显示中文汉字

新建一个字库文件MyFont.h用来存储汉字字模数据，将每个汉字转换成对应的16进制数，就可以显示任意中文词语或句子。将这些数据定义为const类型，在硬件上会被保存到ROM中（程序存储器），因为用于计算的RAM随机存储器空间比较小。

定义每个汉字的显示大小为16*16像素

打开字体取模软件PCtoLCD2002.exe，选项进行如下设置：

pgmspace.h是将数据保存在程序存储器中的相关函数，有了这个头文件，你可以定义一个数组，把这个数组保存在ROM中，而不是RAM中。

(1)Myfont.h

#include <pgmspace.h>
const unsigned char hz_han [] =
{
0x00,0x00,0x27,0xF8,0x12,0x08,0x12,0x08,0x82,0x08,0x41,0x10,0x49,0x10,0x09,0x10,
0x10,0xA0,0x10,0xA0,0xE0,0x40,0x20,0x40,0x20,0xA0,0x21,0x10,0x22,0x08,0x0C,0x06,/*"汉",0*/
};
const unsigned char hz_zi [] =
{
0x02,0x00,0x01,0x00,0x7F,0xFE,0x40,0x02,0x80,0x04,0x1F,0xE0,0x00,0x40,0x00,0x80,
0x01,0x00,0xFF,0xFE,0x01,0x00,0x01,0x00,0x01,0x00,0x01,0x00,0x05,0x00,0x02,0x00,/*"字",1*/
};
const unsigned char hz_ce [] =
{
0x00,0x04,0x27,0xC4,0x14,0x44,0x14,0x54,0x85,0x54,0x45,0x54,0x45,0x54,0x15,0x54,
0x15,0x54,0x25,0x54,0xE5,0x54,0x21,0x04,0x22,0x84,0x22,0x44,0x24,0x14,0x08,0x08,/*"测",2*/
};
const unsigned char hz_shi [] =
{
	0x00,0x28,0x20,0x24,0x10,0x24,0x10,0x20,0x07,0xFE,0x00,0x20,0xF0,0x20,0x17,0xE0,
  0x11,0x20,0x11,0x10,0x11,0x10,0x15,0x10,0x19,0xCA,0x17,0x0A,0x02,0x06,0x00,0x02,/*"试",3*/
};
//定义结构数组
struct FNT_HZ // 汉字字模数据结构
{
  char  Index[4];	// 汉字内码索引,如"中",在UTF-8编码下，每个汉字占3个字节，第四个是结束符0
  const unsigned char* hz_Id;  // 点阵码数据，存放内码后对应的点阵序列每个字需要32个字节的点阵序列
  unsigned char hz_width;    //序列长度
};

//数组hanzi[]  数组元素是FNT_HZ
const FNT_HZ hanzi[] =
{
  {"汉", hz_han,16}, {"字", hz_zi,16}, {"测", hz_ce,16}, {"试", hz_shi,16}
};

（2）主函数

#include <TFT_eSPI.h>
#include "Myfont.h"
#define BLK 5

TFT_eSPI tft = TFT_eSPI();

//导入字模，在屏幕上显示的方法
/*******************单个汉字显示****************/
void showMyFont(int32_t x, int32_t y, const char c[3], uint32_t color) { 
  for (int k = 0; k < 25; k++)// 根据字库的字数调节循环的次数
    if (hanzi[k].Index[0] == c[0] && hanzi[k].Index[1] == c[1] && hanzi[k].Index[2] == c[2])
    { 
        tft.drawBitmap(x, y, hanzi[k].hz_Id, hanzi[k].hz_width, 16, color);
    }
}
/*******************整句汉字显示****************/
 void showMyFonts(int32_t x, int32_t y, const char str[], uint32_t color) { //显示整句汉字，字库比较简单，上下、左右输出是在函数内实现
  int x0 = x;
  for (int i = 0; i < strlen(str); i += 3) {
    showMyFont(x0, y, str+i, color);
    x0 += 17;
  }
} 
void setup()
{
  pinMode(BLK, OUTPUT);
  tft.init();                           //初始化
  tft.fillScreen(TFT_BLACK);            //屏幕颜色
  showMyFonts(40,50,"汉字测试",TFT_GREENYELLOW);
}
void loop()
{
  analogWrite(BLK, 150);
}

（3）运行结果：

5. TFT显示图片

新建一个pic.h文件，将图片取模的数据存进去，在进行图片取模前，要设置好图片的大小

主程序：

#include <TFT_eSPI.h>
//#include "pic.h"
#include "pic1.h"
#define BLK 5
TFT_eSPI tft = TFT_eSPI();

void setup()
{
  pinMode(BLK, OUTPUT);
  tft.init();                //初始化
  tft.fillScreen(TFT_BLACK); //屏幕颜色
}

void loop()
{
  analogWrite(BLK, 150);
  tft.setSwapBytes(true); //使图片颜色由RGB->BGR
  tft.pushImage(30, 40, 200, 112, pic1);
}

运行结果：

6.显示动态图片

与上面类似，只是最后需要把所有数据放在一个指针数组里，每次运行loop显示一帧图片并延时，就可以完成动态照片的显示。

主程序：

#include <TFT_eSPI.h>
//#include "pic.h"
#include "Connect.h"
//#include "As.h"
#define BLK 5
int i = 0;

TFT_eSPI tft = TFT_eSPI();

void setup()
{
  pinMode(BLK, OUTPUT);
  tft.init();                //初始化
  tft.fillScreen(TFT_BLACK); //屏幕颜色
}

void loop()
{
  analogWrite(BLK, 150);
  tft.setSwapBytes(true); //使图片颜色由RGB->BGR
  tft.pushImage(10, 20, 64, 64, ConnectWifi[i]);
  delay(100); 
  i += 1;
  if(i>5)
  {
    i=0;
  }
}