ESP8266-Arduino编程实例-ILI9341-TFT LCD驱动（基于TFT_eSPI库）

ILI9341-TFT LCD驱动（基于TFT_eSPI库）

液晶显示器 (LCD) 是一种平板显示器或其他电子调制光学设备，它利用液晶与偏振器的光调制特性。液晶不直接发光，而是使用背光或反射器来产生彩色或单色图像。LCD 可用于显示任意图像（如在通用计算机显示器中）或具有低信息内容的固定图像，可以显示或隐藏。例如：预设的文字、数字和七段显示器，如数字时钟，都是具有这些显示器的设备的好例子。它们使用相同的基本技术，除了任意图像由小像素矩阵组成，而其他显示器具有更大的元素。 LCD 可以正常开启（正）或关闭（负），具体取决于偏振器的排列。例如，带有背光的字符正型 LCD 将在背景上带有黑色字母，这是背光的颜色，而字符负型 LCD 将具有黑色背景，字母与背光颜色相同。滤光片被添加到蓝色 LCD 上的白色中，以赋予它们独特的外观。

本次实例使用的2.8’’LCD是基于ILI9341芯片驱动的。通过配置TFT_eSPI库即可驱动LCD。

在这里插入图片描述

2、硬件准备

  • ESP8266 NodeMCU开发板一块
  • LCD(ILI9341)模块一个
  • 面板板一个
  • 杜邦线若干
  • 数据线一条

硬件接线如下：

LCD模块引脚 ESP8266开发板引脚
TFT_RST D2
TFT_DC D3
TFT_CS D4
TFT_SDA/MOSI D7
TFT_SCK D5

3、软件准备

  • Arduino IDE或VSCode + PlatformIO

在前面的文章中，对如何搭建ESP8266开发环境做了详细的介绍，请参考：

ESP8266 NodeMCU的引脚介绍在前面的文章中做了详细的介绍，请参考：

4、代码实现

本次实例使用到驱动库如下：

TFT_eSPI库运行多种MCU，因此需要针对指定MCU进行配置。TFT_eSPI库的配置主要涉及以下三个文件：

第一步，选择TFT LCD的驱动IC。在User_Setup_Select.h文件中进行配置，本次配置如下：

1
2
#include <User\_Setups/Setup1\_ILI9341.h>

第二步，配置MCU开发板的引脚映射。MCU开发板引脚配置在User_Setup_Select.h文件中定义。本次使用的WeMOS D1 R1 ESP8266开发板，TFT_eSPI库的默认引脚映射不能与开发板匹配，因此，在这里，将其默认引脚映射注释掉，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/\*
// These are the pins for ESP8266 boards
// Name GPIO NodeMCU Function
#define PIN\_D0 16 // GPIO16 WAKE
#define PIN\_D1 5 // GPIO5 User purpose
#define PIN\_D2 4 // GPIO4 User purpose
#define PIN\_D3 0 // GPIO0 Low on boot means enter FLASH mode
#define PIN\_D4 2 // GPIO2 TXD1 (must be high on boot to go to UART0 FLASH mode)
#define PIN\_D5 14 // GPIO14 HSCLK
#define PIN\_D6 12 // GPIO12 HMISO
#define PIN\_D7 13 // GPIO13 HMOSI RXD2
#define PIN\_D8 15 // GPIO15 HCS TXD0 (must be low on boot to enter UART0 FLASH mode)
#define PIN\_D9 3 // RXD0
#define PIN\_D10 1 // TXD0

#define PIN\_MOSI 8 // SD1 FLASH and overlap mode
#define PIN\_MISO 7 // SD0
#define PIN\_SCLK 6 // CLK
#define PIN\_HWCS 0 // D3

#define PIN\_D11 9 // SD2
#define PIN\_D12 10 // SD4
\*/

第三步，在User_Setup.h文件中，配置LCD接线引脚，本次配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ###### EDIT THE PIN NUMBERS IN THE LINES FOLLOWING TO SUIT YOUR ESP8266 SETUP ######

// For NodeMCU - use pin numbers in the form PIN\_Dx where Dx is the NodeMCU pin designation
//#define TFT\_CS PIN\_D4 // Chip select control pin D8
//#define TFT\_DC PIN\_D3 // Data Command control pin
//#define TFT\_RST PIN\_D2 // Reset pin (could connect to NodeMCU RST, see next line)
//#define TFT\_RST -1 // Set TFT\_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V
#define TFT\_CS D4
#define TFT\_DC D3
#define TFT\_RST D2
#define TFT\_MOSI D7
#define TFT\_MISO D6
#define TFT\_CLK D5

第四步，由于第二步中将默认引脚映射删除了，因此需要在TFT_eSPI库目录下的User_Setups/Setup1_ILI9341.h重新配置TFT LCD引脚，本次配置如下：

1
2
3
4
5
6
7
8
9
/\*
#define TFT\_CS PIN\_D8 // Chip select control pin D8
#define TFT\_DC PIN\_D3 // Data Command control pin
#define TFT\_RST PIN\_D4 // Reset pin (could connect to NodeMCU RST, see next line)\*/
//#define TFT\_RST -1 // Set TFT\_RST to -1 if the display RESET is connected to NodeMCU RST or 3.3V
#define TFT\_CS D4
#define TFT\_DC D3
#define TFT\_RST D2

经过以上四个步骤，TFT_eSPI针对WeMOS D1 R1 ESP8266开发板配置完成。下面为演示代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
// Demo based on:
// UTFT\_Demo\_320x240 by Henning Karlsen
// web: http://www.henningkarlsen.com/electronics
//
/\*

 This sketch uses the GLCD and font 2 only.
 
 Make sure all the display driver and pin connections are correct by
 editing the User\_Setup.h file in the TFT\_eSPI library folder.

 #########################################################################
 ###### DON'T FORGET TO UPDATE THE User\_Setup.h FILE IN THE LIBRARY ######
 #########################################################################
 \*/

#include "SPI.h"

#include "TFT\_eSPI.h"

#define TFT\_GREY 0x7BEF

TFT_eSPI myGLCD = TFT\_eSPI();       // Invoke custom library

unsigned long runTime = 0;
void setup()
{
  randomSeed(analogRead(A0));
// Setup the LCD
  myGLCD.init();
  myGLCD.setRotation(1);
}

void loop()
{
  randomSeed(millis());
  //randomSeed(1234); // This ensure test is repeatable with exact same draws each loop
  int buf[318];
  int x, x2;
  int y, y2;
  int r;
  runTime = millis();
// Clear the screen and draw the frame
  myGLCD.fillScreen(TFT_BLACK);


  myGLCD.fillRect(0, 0, 319, 14,TFT_RED);

  myGLCD.fillRect(0, 226, 319, 14,TFT_GREY);

  myGLCD.setTextColor(TFT_BLACK,TFT_RED);
  myGLCD.drawCentreString("\* TFT\_eSPI \*", 160, 4, 1);
  myGLCD.setTextColor(TFT_YELLOW,TFT_GREY);
  myGLCD.drawCentreString("Adapted by Bodmer", 160, 228,1);

  myGLCD.drawRect(0, 14, 319, 211, TFT_BLUE);

// Draw crosshairs
  myGLCD.drawLine(159, 15, 159, 224,TFT_BLUE);
  myGLCD.drawLine(1, 119, 318, 119,TFT_BLUE);
  for (int i=9; i<310; i+=10)
    myGLCD.drawLine(i, 117, i, 121,TFT_BLUE);
  for (int i=19; i<220; i+=10)
    myGLCD.drawLine(157, i, 161, i,TFT_BLUE);

// Draw sin-, cos- and tan-lines 
  myGLCD.setTextColor(TFT_CYAN);
  myGLCD.drawString("Sin", 5, 15,2);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(sin(((i\*1.13)\*3.14)/180)\*95),TFT_CYAN);
  }
  myGLCD.setTextColor(TFT_RED);
  myGLCD.drawString("Cos", 5, 30,2);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(cos(((i\*1.13)\*3.14)/180)\*95),TFT_RED);
  }
  myGLCD.setTextColor(TFT_YELLOW);
  myGLCD.drawString("Tan", 5, 45,2);
  for (int i=1; i<318; i++)
  {
    myGLCD.drawPixel(i,119+(tan(((i\*1.13)\*3.14)/180)),TFT_YELLOW);
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

  myGLCD.drawLine(159, 15, 159, 224,TFT_BLUE);
  myGLCD.drawLine(1, 119, 318, 119,TFT_BLUE);
int col = 0;
// Draw a moving sinewave
  x=1;
  for (int i=1; i<(317\*20); i++) 
  {
    x++;
    if (x==318)
      x=1;
    if (i>318)
    {
      if ((x==159)||(buf[x-1]==119))
        col = TFT_BLUE;
      else
      myGLCD.drawPixel(x,buf[x-1],TFT_BLACK);
    }
    y=119+(sin(((i\*1.1)\*3.14)/180)\*(90-(i / 100)));
    myGLCD.drawPixel(x,y,TFT_BLUE);
    buf[x-1]=y;
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some filled rectangles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        col = TFT_MAGENTA;
        break;
      case 2:
        col = TFT_RED;
        break;
      case 3:
        col = TFT_GREEN;
        break;
      case 4:
        col = TFT_BLUE;
        break;
      case 5:
        col = TFT_YELLOW;
        break;
    }
    myGLCD.fillRect(70+(i\*20), 30+(i\*20), 60, 60,col);
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some filled, rounded rectangles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        col = TFT_MAGENTA;
        break;
      case 2:
        col = TFT_RED;
        break;
      case 3:
        col = TFT_GREEN;
        break;
      case 4:
        col = TFT_BLUE;
        break;
      case 5:
        col = TFT_YELLOW;
        break;
    }
    myGLCD.fillRoundRect(190-(i\*20), 30+(i\*20), 60,60, 3,col);
  }
  
  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some filled circles
  for (int i=1; i<6; i++)
  {
    switch (i)
    {
      case 1:
        col = TFT_MAGENTA;
        break;
      case 2:
        col = TFT_RED;
        break;
      case 3:
        col = TFT_GREEN;
        break;
      case 4:
        col = TFT_BLUE;
        break;
      case 5:
        col = TFT_YELLOW;
        break;
    }
    myGLCD.fillCircle(100+(i\*20),60+(i\*20), 30,col);
  }
  
  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some lines in a pattern

  for (int i=15; i<224; i+=5)
  {
    myGLCD.drawLine(1, i, (i\*1.44)-10, 223,TFT_RED);
  }

  for (int i=223; i>15; i-=5)
  {
    myGLCD.drawLine(317, i, (i\*1.44)-11, 15,TFT_RED);
  }

  for (int i=223; i>15; i-=5)
  {
    myGLCD.drawLine(1, i, 331-(i\*1.44), 15,TFT_CYAN);
  }

  for (int i=15; i<224; i+=5)
  {
    myGLCD.drawLine(317, i, 330-(i\*1.44), 223,TFT_CYAN);
  }
  
  delay(0);


  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some random circles
  for (int i=0; i<100; i++)
  {
    x=32+random(256);
    y=45+random(146);
    r=random(30);
    myGLCD.drawCircle(x, y, r,random(0xFFFF));
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some random rectangles
  for (int i=0; i<100; i++)
  {
    x=2+random(316);
    y=16+random(207);
    x2=2+random(316);
    y2=16+random(207);
    if (x2<x) {
      r=x;x=x2;x2=r;
    }
    if (y2<y) {
      r=y;y=y2;y2=r;
    }
    myGLCD.drawRect(x, y, x2-x, y2-y,random(0xFFFF));
  }

  delay(0);


  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

// Draw some random rounded rectangles
  for (int i=0; i<100; i++)
  {
    x=2+random(316);
    y=16+random(207);
    x2=2+random(316);
    y2=16+random(207);
    // We need to get the width and height and do some window checking
    if (x2<x) {
      r=x;x=x2;x2=r;
    }
    if (y2<y) {
      r=y;y=y2;y2=r;
    }
    // We need a minimum size of 6
    if((x2-x)<6) x2=x+6;
    if((y2-y)<6) y2=y+6;
    myGLCD.drawRoundRect(x, y, x2-x,y2-y, 3,random(0xFFFF));
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

 //randomSeed(1234);
 int colour = 0;
 for (int i=0; i<100; i++)
  {
    x=2+random(316);
    y=16+random(209);
    x2=2+random(316);
    y2=16+random(209);
    colour=random(0xFFFF);
    myGLCD.drawLine(x, y, x2, y2,colour);
  }

  delay(0);

  myGLCD.fillRect(1,15,317,209,TFT_BLACK);

  // This test has been modified as it takes more time to calculate the random numbers
  // than to draw the pixels (3 seconds to produce 30,000 randoms)!
  for (int i=0; i<10000; i++)
  {
    myGLCD.drawPixel(2+random(316), 16+random(209),random(0xFFFF));
  }

  // Draw 10,000 pixels to fill a 100x100 pixel box
  // use the coords as the colour to produce the banding
  //byte i = 100;
  //while (i--) {
  // byte j = 100;
  // while (j--) myGLCD.drawPixel(i+110,j+70,i+j);
  // //while (j--) myGLCD.drawPixel(i+110,j+70,0xFFFF);
  //}
  delay(0);

  myGLCD.fillScreen(TFT_BLUE);
  myGLCD.fillRoundRect(80, 70, 239-80,169-70, 3,TFT_RED);
  
  myGLCD.setTextColor(TFT_WHITE,TFT_RED);
  myGLCD.drawCentreString("That's it!", 160, 93,2);
  myGLCD.drawCentreString("Restarting in a", 160, 119,2);
  myGLCD.drawCentreString("few seconds...", 160, 132,2);

  runTime = millis()-runTime;
  myGLCD.setTextColor(TFT_GREEN,TFT_BLUE);
  myGLCD.drawCentreString("Runtime: (msecs)", 160, 210,2);
  myGLCD.setTextDatum(TC_DATUM);
  myGLCD.drawNumber(runTime, 160, 225,2);
  delay (5000);
}

运行结果：

在这里插入图片描述

文章来源: https://iotsmart.blog.csdn.net/article/details/127058086