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:控制屏幕亮度

自制驱动板:

esp8266 显示器驱动 esp8266驱动tft屏幕_单片机

 

esp8266 显示器驱动 esp8266驱动tft屏幕_单片机_02

2. TFT_eSPI库配置

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

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

①配置驱动

esp8266 显示器驱动 esp8266驱动tft屏幕_esp8266 显示器驱动_03

②配置屏幕颜色类型和尺寸

esp8266 显示器驱动 esp8266驱动tft屏幕_综合资源_04

 ③配置SPI接线,与前面介绍的连线方式一致

esp8266 显示器驱动 esp8266驱动tft屏幕_硬件工程_05

 剩下的不用管,测试程序如下:

#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);
}

 运行结果:

esp8266 显示器驱动 esp8266驱动tft屏幕_综合资源_06

 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库类似

esp8266 显示器驱动 esp8266驱动tft屏幕_综合资源_07

 4. TFT显示中文汉字

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

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

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

esp8266 显示器驱动 esp8266驱动tft屏幕_单片机_08

 

esp8266 显示器驱动 esp8266驱动tft屏幕_esp8266 显示器驱动_09

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)运行结果:

esp8266 显示器驱动 esp8266驱动tft屏幕_esp8266 显示器驱动_10

5. TFT显示图片

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

esp8266 显示器驱动 esp8266驱动tft屏幕_综合资源_11

主程序:

#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);
}

 运行结果:

esp8266 显示器驱动 esp8266驱动tft屏幕_硬件工程_12

6.显示动态图片

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

esp8266 显示器驱动 esp8266驱动tft屏幕_综合资源_13

 主程序:

#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;
  }
}