Arduino开发板使用TFT LCD液晶显示屏的终极新手入门指南

风筝

在本篇文章中，您将学习到如何通过Arduino开发板使用TFT LCD液晶屏。这里介绍了从基础命令到专业的设计和技术的全部内容。在文章结束时，您将可以学到：

●    使用用您想要的字体写一些文本和数字。

●    绘制圆形、三角形、正方形等形状。

●    在液晶屏上显示.bmp图像。

●    更改屏幕参数，例如旋转和反转颜色。

●    在Arduino开发板上显示动画。

显示屏

在电子项目中，在用户和系统之间建立某种连接方式非常重要。可以通过显示有用的数据、菜单和易于访问来创建该界面。漂亮的设计也很重要。

有几个组件可以实现这一目标。 LED、7段数码管、字符和图形显示，以及全彩TFT LCD。项目的正确组件取决于要显示的数据量、用户交互类型和处理器容量。

TFT LCD是液晶显示屏的一种变体，它使用薄膜晶体管（TFT）技术来改善图像质量，例如可寻址性和对比度。 TFT LCD是有源矩阵LCD，与无源矩阵LCD或具有少量段的简单直接驱动LCD相比。

在基于Arduino的项目中，处理器频率很低。因此无法显示复杂的高清图像和高速运动。因此，全彩色TFT LCD只能用于显示简单的数据和命令。

在本文中，我们使用库和高级技术以专业设计显示数据、图表、菜单等。这可以将您的项目演示文稿移到更高的级别。

使用什么尺寸？哪个控制器？

显示大小会影响项目参数。更大的显示并不总是更好。如果要显示高分辨率图像和标志，则应选择分辨率更高的大尺寸显示器。但它会降低处理速度，需要更多空间并且还需要更多电流才能运行。

因此，首先，您应该检查分辨率、运动速度、项目图像、文本和数字的颜色和大小细节。

我们建议使用常见尺寸的Arduino显示屏，如3.5英寸480×320、2.8英寸400×240、2.4英寸320×240和1.8英寸220×176。

选择正确的显示屏后，是时候选择合适的控制器了。如果要显示字符，测试、数字和静态图像以及显示速度并不重要，Atmega328 Arduino板是一个合适的选择。如果代码的大小很大，UNO板可能还不够。您可以使用Arduino Mega2560代替。如果你想高速显示高分辨率图像和动画，你应该使用ARM内核的Arduino开发板，如Arduino DUE。

驱动和库文件

在电子/计算机硬件中，显示驱动器通常是半导体集成电路（但也可以包括由分立逻辑和其他组件构成的状态机），其提供微处理器、微控制器、ASIC或通用外围接口和特定类型的显示设备（例如LCD、LED、OLED、ePaper、CRT、真空荧光灯或数码相机）之间的接口功能。

显示驱动程序通常使用行业标准的通用串行或并行接口（如TTL、CMOS、RS232、SPI、I2C等）接受命令和数据，并生成具有适当电压、电流、定时和多路分解的信号显示屏显示所需的文字或图像。

LCD制造商在其产品中使用不同的驱动器。其中一些更受欢迎，其中一些是非常未知的。要轻松运行显示屏，您应该使用Arduino LCD库并将其添加到您的代码中。否则运行显示屏可能非常困难。您可以在互联网上找到许多免费库，但关于库的重点是它们与LCD驱动程序的兼容性。您的液晶显示器的驱动程序必须为您的库文件所知。在本文中，我们使用Adafruit GFX库和MCUFRIEND KBV库和示例代码。

解压缩MCUFRIEND KBV并打开MCUFRIEND_kbv.CPP。您可以看到MCUFRIEND库支持的驱动程序列表。

打开示例文件夹。 Arduino可以运行几个示例代码。连接液晶显示屏并测试一些示例。

代码

您需要添加库文件，然后上载代码。如果这是您是第一次运行Arduino开发板，请不要担心。只需按以下步骤操作：

●    访问www.arduino.cc/en/Main/Software并下载操作系统的软件。按照说明安装IDE软件。

●    运行Arduino IDE并清除文本编辑器，然后在文本编辑器中复制以下代码。

●    导航到草图并包含库。现在单击添加ZIP库并添加库

●    在tools and boards菜单中选择您使用的Arduino电路板。

●    将Arduino连接到PC，然后在tools and port中设置COM端口。

●    按上传（箭头符号）按钮。

●    现在都准备好了！

上传示例代码后，是时候学习如何在LCD上创建图像了。

打开一个新的Sketch，以及必要的代码，如以下部分所述。

库文件

1. #include "Adafruit_GFX.h"
   
2. #include "MCUFRIEND_kbv.h"

复制代码

第一行添加了显示屏核心图形库（由Adafruit编写）。

第二个添加了一个库，支持MCUFRIEND Arduino显示扩展板的驱动程序。

1. #include "TouchScreen.h" // only when you want to use touch screen
   
2. #include "bitmap_mono.h" // when you want to display a bitmap image from library
   
3. #include "bitmap_RGB.h" // when you want to display a bitmap image from library
   
4. #include "Fonts/FreeSans9pt7b.h"    // when you want other fonts
   
5. #include "Fonts/FreeSans12pt7b.h" // when you want other fonts
   
6. #include "Fonts/FreeSerif12pt7b.h" // when you want other fonts
   
7. #include "FreeDefaultFonts.h" // when you want other fonts
   
8. #include "SPI.h"  // using sdcard for display bitmap image
   
9. #include "SD.h"

复制代码

这些库暂时不是必需的，但您可以添加它们。

风筝

基础命令

类和对象

1. //(int CS=A3, int RS=A2, int WR=A1, int RD=A0, int RST=A4)
   
2. MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);

复制代码

上述代码从MCUFRIEND_kbv类创建一个名为TFT的对象，并在LCD和Arduino之间提供SPI通信。

运行液晶显示屏

1. uint16_t ID = tft.readID();
   
2. tft.begin(ID);

复制代码

tft.readID函数从液晶显示屏中读取ID并将其放入ID变量中。然后tft.begin函数获取ID，然后LCD准备好。

显示屏的分辨率

1. tft.width(); //int16_t width(void);
   
2. tft.height(); //int16_t height(void);

复制代码

通过这两个函数，您可以得知显示器的分辨率。只需将它们添加到代码中，并将输出放在uint16_t变量中。首先在setup()中添加Serial.begin(9600);。然后通过Serial.println();从串口读取这些数据。

显示屏的颜色

1. tft.fillScreen(t); //fillScreen(uint16_t t);

复制代码

fillScreen函数将液晶屏颜色更改为t颜色。 t应该是包含UTFT颜色代码的16位变量。

1. #define BLACK 0x0000
   
2. #define NAVY 0x000F
   
3. #define DARKGREEN 0x03E0
   
4. #define DARKCYAN 0x03EF
   
5. #define MAROON 0x7800
   
6. #define PURPLE 0x780F
   
7. #define OLIVE 0x7BE0
   
8. #define LIGHTGREY 0xC618
   
9. #define DARKGREY 0x7BEF
   
10. #define BLUE 0x001F

复制代码

您可以将这些代码行添加到代码的顶部，在函数中只需使用颜色名称即可。

填充像素

1. tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y, uint16_t t)
   
2. tft.readPixel(x,y); //uint16_t readPixel(int16_t x, int16_t y)

复制代码

drawPixel函数用t颜色填充x和y位置的像素。

readPixel函数读取x和y位置的像素颜色。

绘制直线

1. tft.drawFastVLine(x,y,h,t);
   
2. //drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t t)
   
3. tft.drawFastHLine(x,y,w,t);
   
4. //drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t t)
   
5. tft.drawLine(xi,yi,xj,yj,t);
   
6. //drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)

复制代码

drawFastVLine函数绘制一条从x、y位置开始的垂直线，其长度为h像素，颜色为t。

drawFastHLine函数绘制一条从x、y位置开始的水平线，其长度为w像素，颜色为t。

drawLine函数绘制一条以xi和yi开头的行，locationends在xj和yj中，颜色为t。

1. for (uint16_t a=0; a<5; a++)
   
2. {    tft.drawFastVLine(x+a, y, h, t);}   
   
3. for (uint16_t a=0; a<5; a++)
   
4. {    tft.drawFastHLine(x, y+a, w, t);}
   
5. for (uint16_t a=0; a<5; a++)
   
6. {    tft.drawLine(xi+a, yi, xj+a, yj, t);}
   
7. for (uint16_t a=0; a<5; a++)
   
8. {    tft.drawLine(xi, yi+a, xj, yj+a, t);}

复制代码

这三个代码块像前面的代码一样绘制线条，厚度为5像素。

1. tft.fillRect(x,y,w,h,t);
   
2. //fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
   
3. tft.drawRect(x,y,w,h,t);
   
4. //drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
   
5. tft.fillRoundRect(x,y,w,h,r,t);
   
6. //fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)
   
7. tft.drawRoundRect(x,y,w,h,r,t);
   
8. //drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)

复制代码

fillRect函数在x和y位置绘制一个填充的矩形。 w是宽度，h是高度，t是rextangle的颜色

drawRect函数在x和y位置绘制一个矩形，其宽度为w，高度为h，颜色为t。

fillRoundRect函数绘制一个填充的矩形，其中x和y位置具有r半径圆角，w宽度和h高度和t颜色。

drawRoundRect函数绘制一个矩形，在x和y位置具有r半径圆角，w宽度和h高度和t颜色。

绘制圆圈

1. tft.drawCircle(x,y,r,t); //drawCircle(int16_t x, int16_t y, int16_t r, uint16_t t)
   
2. tft.fillCircle(x,y,r,t); //fillCircle(int16_t x, int16_t y, int16_t r, uint16_t t)

复制代码

drawCircle函数在x和y位置使用r radius和t color中绘制一个圆。

fillCircle函数在x和y位置使用r radius和t color中绘制一个实心圆。

1. for (int p = 0; p < 4000; p++)
   
2. {  j = 120 * (sin(PI * p / 2000));
   
3.    i = 120 * (cos(PI * p / 2000));  
   
4.    j2 = 60 * (sin(PI * p / 2000));  
   
5.    i2 = 60 * (cos(PI * p / 2000));  
   
6.   tft.drawLine(i2 + 160, j2 + 160, i + 160, j + 160, col[n]);
   
7. }

复制代码

通过此代码，您可以绘制弧形。将“for”更改为0到4000之间。

绘制三角形

1. tft.drawTriangle(x1,y1,x2,y2,x3,y3,t);
   
2. //drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)
   
3. tft.fillTriangle(x1,y1,x2,y2,x3,y3,t);
   
4. //fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)

复制代码

drawTriangle函数绘制一个三角形位置x、y和z以及t颜色的三角形。

fillTriangle函数绘制一个三角形位置x、y和z以及t颜色的填充三角形。

显示文字

1. tft.setCursor(x,y); //setCursor(int16_t x, int16_t y)

复制代码

此代码将光标位置设置为x和y

1. tft.setTextColor(t); //setTextColor(uint16_t t)
   
2. tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t b)

复制代码

第一行设置文本的颜色。下一行设置文本的颜色及其背景。

1. tft.setTextSize(s); //setTextSize(uint8_t s)

复制代码

此代码按s设置文本大小。 s是1到5之间的数字。

1. tft.write(c); //write(uint8_t c)

复制代码

此代码显示一个字符。

1. tft.println("www.Electropeak.com");
   
2. tft.print("www.Electropeak.com");

复制代码

第一个函数显示一个字符串并将光标移动到下一行。

第二个函数只显示字符串。

1. showmsgXY(x,y,sz,&FreeSans9pt7b,"www.Electropeak.com");
   
2. //void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
   
3. void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
   
4. {  uint16_t x1, y1;  
   
5.    uint16_t wid, ht;  
   
6.    tft.setFont(f);  
   
7.    tft.setCursor(x, y);  
   
8.    tft.setTextColor(0x0000);  
   
9.    tft.setTextSize(sz);  
   
10.    tft.print(msg);

复制代码

该函数可更改文本的字体。您应该添加该函数和字体库。

1. for (int j = 0; j < 20; j++) {
   
2. tft.setCursor(145, 290);
   
3. int color = tft.color565(r -= 12, g -= 12, b -= 12);
   
4. tft.setTextColor(color);
   
5. tft.print("www.Electropeak.com");
   
6. delay(30);
   
7. }

复制代码

该代码可以淡化您的文本。您可以将它添加到您的代码中。

旋转屏幕

1. tft.setRotation(r); //setRotation(uint8_t r)

复制代码

此代码旋转屏幕。 0 = 0,1 = 90,2 = 180,3 = 270。

反转屏幕颜色

1. tft.invertDisplay(i); //invertDisplay(boolean i)

复制代码

此代码反转屏幕的颜色。

1. tft.color565(r,g,b); //uint16_t color565(uint8_t r, uint8_t g, uint8_t b)

复制代码

此代码提供RGB代码并获取UTFT颜色代码。

滚动屏幕

1. for (uint16_t i = 0; i < maxscroll; i++) {
   
2. tft.vertScroll(0, maxscroll, i);
   
3. delay(10);}

复制代码

此代码滚动屏幕。 Maxroll是滚动的最大高度。

复位

1. tft.reset();

复制代码

此代码重置液晶屏。

显示单色图像

1. static const uint8_t name[] PROGMEM =
   
2. {    //Add image code here.
   
3. }
   
4. tft.drawBitmap(x, y, name, sx, sy, 0x0000);

复制代码

首先，您应该将图像转换为十六进制代码。从以下链接下载该软件。如果您不想更改软件的设置，则必须反转图像的颜色并使图像水平镜像并逆时针旋转90度。现在将其添加到软件并进行转换。打开导出的文件并将十六进制代码复制到Arduino IDE。 x和y是图像的位置。 sx和sy是图像的大小。您可以在最后一个输入中更改图像的颜色。

RGB彩色图像显示

1. const uint16_t name[] PROGMEM = {
   
2. //Add image code here.
   
3. }
   
4. tft.drawRGBBitmap(x, y, name, sx, sy);

复制代码

首先，您应该将图像转换为代码。使用此链接转换图像：

http://www.rinkydinkelectronics.com/t_imageconverter565.php

上传您的图像并下载UTFT库可以处理的转换后的文件。现在将十六进制代码复制到Arduino IDE。 x和y是图像的位置。 sx和sy是图像的大小。

风筝

预先设计的模板

载入中

在这个模板中，我们只使用了一个字符串和8个填充圆圈，按顺序改变颜色。 要在静态点周围绘制圆圈，可以使用sin(); 和cos();函数。您需要定义PI数字。 要更改颜色，可以使用color565(); 函数并替换您的RGB代码。

1. #include "Adafruit_GFX.h"
   
2. #include "MCUFRIEND_kbv.h"
   
3. MCUFRIEND_kbv tft;
   
4. #include "Fonts/FreeSans9pt7b.h"
   
5. #include "Fonts/FreeSans12pt7b.h"
   
6. #include "Fonts/FreeSerif12pt7b.h"
   
7. #include "FreeDefaultFonts.h"
   
8. #define PI 3.1415926535897932384626433832795
   
9. int col[8];
   
10. void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
    
11. {
    
12. int16_t x1, y1;
    
13. uint16_t wid, ht;
    
14. tft.setFont(f);
    
15. tft.setCursor(x, y);
    
16. tft.setTextColor(0x0000);
    
17. tft.setTextSize(sz);
    
18. tft.print(msg);
    
19. }
    
20. void setup() {
    
21. tft.reset();
    
22. Serial.begin(9600);
    
23. uint16_t ID = tft.readID();
    
24. tft.begin(ID);
    
25. tft.setRotation(1);
    
26. tft.invertDisplay(true);
    
27. tft.fillScreen(0xffff);
    
28. showmsgXY(170, 250, 2, &FreeSans9pt7b, "Loading...");
    
29. col[0] = tft.color565(155, 0, 50);
    
30. col[1] = tft.color565(170, 30, 80);
    
31. col[2] = tft.color565(195, 60, 110);
    
32. col[3] = tft.color565(215, 90, 140);
    
33. col[4] = tft.color565(230, 120, 170);
    
34. col[5] = tft.color565(250, 150, 200);
    
35. col[6] = tft.color565(255, 180, 220);
    
36. col[7] = tft.color565(255, 210, 240);
    
37. }
    
38. void loop() {
    
39. for (int i = 8; i > 0; i--) {
    
40. tft.fillCircle(240 + 40 * (cos(-i * PI / 4)), 120 + 40 * (sin(-i * PI / 4)), 10, col[0]); delay(15);
    
41. tft.fillCircle(240 + 40 * (cos(-(i + 1)*PI / 4)), 120 + 40 * (sin(-(i + 1)*PI / 4)), 10, col[1]); delay(15);
    
42. tft.fillCircle(240 + 40 * (cos(-(i + 2)*PI / 4)), 120 + 40 * (sin(-(i + 2)*PI / 4)), 10, col[2]); delay(15);
    
43. tft.fillCircle(240 + 40 * (cos(-(i + 3)*PI / 4)), 120 + 40 * (sin(-(i + 3)*PI / 4)), 10, col[3]); delay(15);
    
44. tft.fillCircle(240 + 40 * (cos(-(i + 4)*PI / 4)), 120 + 40 * (sin(-(i + 4)*PI / 4)), 10, col[4]); delay(15);
    
45. tft.fillCircle(240 + 40 * (cos(-(i + 5)*PI / 4)), 120 + 40 * (sin(-(i + 5)*PI / 4)), 10, col[5]); delay(15);
    
46. tft.fillCircle(240 + 40 * (cos(-(i + 6)*PI / 4)), 120 + 40 * (sin(-(i + 6)*PI / 4)), 10, col[6]); delay(15);
    
47. tft.fillCircle(240 + 40 * (cos(-(i + 7)*PI / 4)), 120 + 40 * (sin(-(i + 7)*PI / 4)), 10, col[7]); delay(15);
    
48. }
    
49. }

复制代码

徽标演示

在这个模板中，我们将a.jpg图像转换为.c文件并添加到代码中，写入一个字符串并使用淡入淡出代码进行显示。 然后我们使用滚动代码向左移动屏幕。 下载.h文件并将其添加到Arduino sketch的文件夹中。

1. #include "Adafruit_GFX.h"    // Core graphics library
   
2. #include "MCUFRIEND_kbv.h"   // Hardware-specific library
   
3. MCUFRIEND_kbv tft;
   
4. #include "Ard_Logo.h"
   
5. #define BLACK   0x0000
   
6. #define RED     0xF800
   
7. #define GREEN   0x07E0
   
8. #define WHITE   0xFFFF
   
9. #define GREY    0x8410
   
10. #include "Fonts/FreeSans9pt7b.h"
    
11. #include "Fonts/FreeSans12pt7b.h"
    
12. #include "Fonts/FreeSerif12pt7b.h"
    
13. #include "FreeDefaultFonts.h"
    
14. void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
    
15. {
    
16. int16_t x1, y1;
    
17. uint16_t wid, ht;
    
18. tft.setFont(f);
    
19. tft.setCursor(x, y);
    
20. tft.setTextSize(sz);
    
21. tft.println(msg);
    
22. }
    
23. uint8_t r = 255, g = 255, b = 255;
    
24. uint16_t color;
    
25. void setup()
    
26. {
    
27. Serial.begin(9600);
    
28. uint16_t ID = tft.readID();
    
29. tft.begin(ID);
    
30. tft.invertDisplay(true);
    
31. tft.setRotation(1);
    
32. }
    
33. void loop(void)
    
34. {
    
35. tft.invertDisplay(true);
    
36. tft.fillScreen(WHITE);
    
37. tft.drawRGBBitmap(100, 50, Logo, 350, 200);
    
38. delay(1000);
    
39. tft.setTextSize(2);
    
40. for (int j = 0; j < 20; j++) {
    
41.    color = tft.color565(r -= 12, g -= 12, b -= 12);
    
42.    tft.setTextColor(color);
    
43.    showmsgXY(95, 280, 1, &FreeSans12pt7b, "ELECTROPEAK PRESENTS");
    
44.    delay(20);
    
45. }
    
46. delay(1000);
    
47. for (int i = 0; i < 480; i++) {
    
48.    tft.vertScroll(0, 480, i);
    
49.    tft.drawFastVLine(i, 0, 320, 0xffff); // vertical line
    
50.    delay(5);}
    
51.    while (1);
    
52. }

复制代码

点状图

在这个模板中，我们使用了绘制线、实心圆和字符串显示函数。

1. #include "Adafruit_GFX.h"
   
2. #include "MCUFRIEND_kbv.h"
   
3. MCUFRIEND_kbv tft;
   
4. uint16_t ox=0,oy=0;
   
5. int ave=0, avec=0, avet=0;
   
6. ////////////////////////////////////////////////////////////////
   
7. void aveg(void)
   
8. {int z=0;
   
9. Serial.println(ave);
   
10. Serial.println(avec);
    
11.    avet=ave/avec;
    
12.    Serial.println(avet);
    
13.    avet=avet*32;
    
14.    for (int i=0; i<24; i++){
    
15.    for (uint16_t a=0; a<3; a++){
    
16.    tft.drawLine(avet+a, z, avet+a, z+10, 0xFB21);} // thick
    
17.    for (uint16_t a=0; a<2; a++){ tft.drawLine(avet-a, z, avet-a, z+10, 0xFB21);} delay(100); z=z+20; } } ////////////////////////////////////////////////////////////////// void dchart_10x10(uint16_t nx,uint16_t ny) { ave+=nx; avec++; nx=nx*32; ny=ny*48; tft.drawCircle(nx, ny, 10, 0x0517); tft.drawCircle(nx, ny, 9, 0x0517); tft.fillCircle(nx, ny, 7, 0x0517); delay (100); ox=nx; oy=ny; } /////////////////////////////////////////////////////////////////////// void dotchart_10x10(uint16_t nx,uint16_t ny) { ave+=nx; avec++; nx=nx*32; ny=ny*48; int plus=0; float fplus=0; int sign=0; int y=0,x=0; y=oy; x=ox; float xmines, ymines; xmines=nx-ox; ymines=ny-oy; if (ox>nx)
    
18. {xmines=ox-nx;
    
19. sign=1;}
    
20. else
    
21. sign=0;
    
22. for (int a=0; a<(ny-oy); a++)
    
23.   {
    
24.    fplus+=xmines/ymines;
    
25.    plus=fplus;
    
26.    if (sign==1)
    
27.    tft.drawFastHLine(0, y, x-plus, 0xBFDF);
    
28.    else
    
29.    tft.drawFastHLine(0, y, x+plus, 0xBFDF);
    
30.    y++;
    
31.    delay(5);}  
    
32.      for (uint16_t a=0; a<2; a++){
    
33.     tft.drawLine(ox+a, oy, nx+a, ny, 0x01E8);} // thick
    
34.     for (uint16_t a=0; a<2; a++){
    
35.     tft.drawLine(ox, oy+a, nx, ny+a, 0x01E8);}   
    
36.    ox=nx;
    
37.    oy=ny;
    
38. }
    
39. ////////////////////////////////////////////////////////////////////
    
40. void setup() {
    
41. tft.reset();
    
42. Serial.begin(9600);
    
43. uint16_t ID = tft.readID();
    
44. tft.begin(ID);
    
45. }
    
46. void loop() {
    
47. tft.invertDisplay(true);
    
48. tft.fillScreen(0xffff);
    
49. dotchart_10x10(3, 0);
    
50. dotchart_10x10(2, 1);
    
51. dotchart_10x10(4, 2);
    
52. dotchart_10x10(4, 3);
    
53. dotchart_10x10(5, 4);
    
54. dotchart_10x10(3, 5);
    
55. dotchart_10x10(6, 6);
    
56. dotchart_10x10(7, 7);
    
57. dotchart_10x10(9, 8);
    
58. dotchart_10x10(8, 9);
    
59. dotchart_10x10(10, 10);
    
60. dchart_10x10(3, 0);
    
61. dchart_10x10(2, 1);
    
62. dchart_10x10(4, 2);
    
63. dchart_10x10(4, 3);
    
64. dchart_10x10(5, 4);
    
65. dchart_10x10(3, 5);
    
66. dchart_10x10(6, 6);
    
67. dchart_10x10(7, 7);
    
68. dchart_10x10(9, 8);
    
69. dchart_10x10(8, 9);
    
70. dchart_10x10(10, 10);
    
71. tft.setRotation(1);
    
72. tft.setTextSize(2);
    
73. tft.setTextColor(0x01E8);
    
74. tft.setCursor(20, 20);
    
75. tft.print("Average");
    
76. int dl=20;
    
77. for (int i=0;i<6;i++){            
    
78. for (uint16_t a=0; a<3; a++){
    
79.    tft.drawLine(dl, 40+a, dl+10, 40+a, 0xFB21);}
    
80.    dl+=16;}  
    
81. tft.setRotation(0);
    
82.    aveg();
    
83. while(1);
    
84. }

复制代码

屏幕保护

在这个模板中，我们只是通过RGBbitmap和位图函数显示一些图像。 只需为触摸屏制作代码并使用此模板即可。 下载.h文件并将其添加到Arduino sketch的文件夹中。

1. #include "Adafruit_GFX.h"    // Core graphics library
   
2. #include "MCUFRIEND_kbv.h"   // Hardware-specific library
   
3. MCUFRIEND_kbv tft;
   
4. #define BLACK   0x0000
   
5. #define RED     0xF800
   
6. #define GREEN   0x07E0
   
7. #define WHITE   0xFFFF
   
8. #define GREY    0x8410
   
9. #include "images.h"
   
10. #include "Fonts/FreeSans9pt7b.h"
    
11. #include "Fonts/FreeSans12pt7b.h"
    
12. #include "Fonts/FreeSerif12pt7b.h"
    
13. #include "FreeDefaultFonts.h"
    
14. int a = 3000;
    
15. int b = 4000;
    
16. int j, j2;
    
17. int i, i2;
    
18. void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)
    
19. {
    
20.    int16_t x1, y1;
    
21.    uint16_t wid, ht;
    
22.   // tft.drawFastHLine(0, y, tft.width(), 0xffff);
    
23.    tft.setFont(f);
    
24.    tft.setCursor(x, y);
    
25.    tft.setTextColor(WHITE);
    
26.    tft.setTextSize(sz);
    
27.    tft.print(msg);
    
28.    delay(1000);
    
29. }
    
30. void setup()
    
31. {
    
32. Serial.begin(9600);
    
33. uint16_t ID = tft.readID();
    
34. tft.begin(ID);
    
35. tft.invertDisplay(true);
    
36. tft.setRotation(1);
    
37. }
    
38. void loop(void)
    
39. {
    
40. tft.invertDisplay(true);
    
41. tft.fillScreen(BLACK);
    
42. tft.drawRGBBitmap(0, 0, test, 480, 320);
    
43. tft.drawBitmap(20, 20, Line1, 45, 45, 0xffff);//battery
    
44. tft.drawBitmap(65, 20, Line2, 45, 45, 0xffff);//wifi
    
45. tft.drawBitmap(125, 25, Line3, 45, 45, 0xffff);//mail
    
46. tft.drawBitmap(185, 25, Line4, 45, 45, 0xffff);//instagram
    
47. tft.drawBitmap(245, 25, Line6, 45, 45, 0xffff);//power
    
48. tft.drawBitmap(20, 260, Line5, 45, 45, 0xffff);//twitter
    
49. tft.drawBitmap(410, 140, Line7, 45, 45, 0xffff);//rain
    
50. tft.setTextSize(6);
    
51. tft.setTextColor(0xffff);
    
52. tft.setCursor(280, 210);
    
53. tft.print("20:45");
    
54.    tft.setTextSize(2);
    
55. tft.setTextColor(0xffff);
    
56. showmsgXY(330, 280, 1, &FreeSans12pt7b, "Saturday");
    
57. showmsgXY(300, 305, 1, &FreeSans12pt7b, "6 October 2018");
    
58. while (1);
    
59. }

复制代码

一些注意事项

●    所有GIF文件播放的速度都进行了编辑，我们使它们更快或更慢，以便更好地理解。 运动速度取决于处理器的速度或代码类型或代码中元素的大小和厚度。

●    您可以在main函数页面中添加图像代码，但它会填充所有main页面。 因此，您可以创建a.h文件并添加到草图的文件夹中。

●    如果您在包含库时遇到问题，请将“”符号更改为<>。

您也可以在ElectroPeak的官方网站上阅读这个项目：

https://electropeak.com/learn/guides/absolute-beginners-guide-to-tft-lcd-displays-by-arduino/

木骁宵

您好，我也是用Arduino 和tft显示屏制作了一个控制面板，在检测信号的时候遇到了点问题，能请教一下吗？谢谢

kakaker

大佬您好，请问arduino UNO与TFT  LCD连接的引脚定义文件是哪一个？？
在“Arduino开发板使用TFT LCD液晶显示屏的终极新手入门指南”这个帖子里看见的库文件都下好了，pin_shield_1.h这个吗？
不知道引脚定义在哪里，望指教

风筝

kakaker 发表于 2020-2-1 12:34
大佬您好，请问arduino UNO与TFT  LCD连接的引脚定义文件是哪一个？？
在“Arduino开发板使用TFT LCD液晶显 ...

引脚定义是声明类对象时定义的

类和对象

//(int CS=A3, int RS=A2, int WR=A1, int RD=A0, int RST=A4)
MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);
复制代码
上述代码从MCUFRIEND_kbv类创建一个名为TFT的对象，并在LCD和Arduino之间提供SPI通信。

kakaker

风筝 发表于 2020-2-1 15:58
引脚定义是声明类对象时定义的

谢谢大佬。
现在我按库里面的文件把引脚（模拟引脚的5根，数剧引脚按照arduino库管理里面下载的，Adafruit_TFTLCD_Library库里pin_magic.h的连接好了8根）
能够正确读出驱动ID = 0x9341
但是我在使用MCUFRIEND KBV库里的示例文件GLUE_Demo_320x240时，无法显示出图像，始终白屏。
也改过    UTFTGLUE myGLCD(0,A2,A1,A3,A4); //all dummy args   里的，模型参数改的0x9341，和模拟引脚
但是始终白屏，求大佬指教啊

风筝

kakaker 发表于 2020-2-4 18:49
谢谢大佬。
现在我按库里面的文件把引脚（模拟引脚的5根，数剧引脚按照arduino库管理里面下载的，Adafrui ...

首先，确认显示屏是不是坏掉了，然后，确认显示屏的硬件连接，电源供电，复位等。查一下驱动文件是否和使用的显示屏硬件匹配

kakaker

风筝 发表于 2020-2-5 12:03
首先，确认显示屏是不是坏掉了，然后，确认显示屏的硬件连接，电源供电，复位等。查一下驱动文件是否和使 ...

这？？？能亮背光，能读ID
我该怎么检查好坏啊

kakaker

会不会是因为我没有使用扩展版，，，我直连uno的，虽然能读出id