Arduino TFT LCD触摸屏教程：分步指南

在本Arduino触摸屏教程中，我们将学习如何使用TFT LCD触摸屏配合Arduino。您可以观看以下视频或阅读下方的文字教程。

概述

本教程包含三个示例。第一个示例是使用超声波传感器测距，测量结果显示在屏幕上，并可通过触摸屏选择单位（厘米或英寸）。

第二个示例是使用三个RGB滑块控制RGB LED。例如滑动蓝色滑块，LED会亮起蓝光并随滑块位置增强亮度。滑块范围0-255，组合可设置任意颜色，但LED显色准确度有限。

第三个示例是一个游戏，复刻了智能手机上流行的Flappy Bird游戏。可使用按钮或触摸屏直接游玩。

下面我们将逐步讲解每个示例背后的代码。

所需组件

本教程以3.2英寸TFT触摸屏配合TFT LCD Arduino Mega扩展板为例。由于TFT屏工作电压3.3V而Arduino Mega输出5V，故需扩展板。第一个示例需HC-SR04超声波模块，第二个需RGB LED及三个电阻，第三个需按钮。我还制作了一个自定义排针，焊接并弯曲其中一根以便插在Arduino与TFT扩展板之间。

您可以从以下网站获取组件：

• 3.2″ TFT触摸显示屏………………..
• TFT显示屏Mega扩展板………………
• Arduino开发板……………………………
• 超声波模块HC-SR04………..

电路原理图如下。我们将使用GND引脚、数字引脚8-13以及引脚14。因5V引脚已被TFT屏占用，我将引脚13设为VCC，在setup()中直接置高。

Arduino触摸屏代码

代码较长，为便于理解，我将分段发布并附带说明。文末提供完整源代码。

使用Henning Karlsen编写的UTFT和URTouch库。感谢他的杰出工作，这些库让TFT屏幕使用变得非常简单，支持多种尺寸、扩展板和控制器。可从其网站RinkyDinkElectronics.com下载，那里也有大量演示示例和详细文档。

包含库后，需创建UTFT和URTouch对象，参数取决于TFT屏幕和扩展板型号，详见库文档。接着定义库自带的字体及程序所需变量。在setup()中初始化屏幕和触摸，设置连接传感器、LED和按钮的引脚模式，并初始调用drawHomeScreen()自定义函数绘制主界面。

#include <UTFT.h>
#include <URTouch.h>
//==== 创建对象
UTFT myGLCD(SSD1289,38,39,40,41); // 参数需根据您的显示屏/扩展板型号调整
URTouch myTouch( 6, 5, 4, 3, 2);
//==== 定义变量
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// 超声波传感器
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;
// RGB LED
const int redLed = 10;
const int greenLed = 9;
const int blueLed = 8;
int xR=38; int xG=38; int xB=38;
// Floppy Bird游戏
int xP = 319; int yP = 100; int yB = 30;
int fallRateInt = 0; float fallRate =0; int score=0;
const int button = 14; int buttonState = 0;

void setup() {
  // 初始化设置
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);
  // 定义引脚模式
  pinMode(VCC, OUTPUT);  // VCC
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH);  // +5V - 引脚13作为VCC
  drawHomeScreen();  // 绘制主界面
  currentPage = '0';  // 表示在主界面
  selectedUnit = '0';  // 表示第一个示例选择的单位，厘米或英寸
}

下面解释如何制作主界面。用setBackColor()设置文本背景色为黑色，setColor()设置前景色为白色，setFont(BigFont)设置大字体，用print()在屏幕中心偏下10像素处打印"Arduino TFT Tutorial"。然后设置红色画一条红线。再设白色，用小字体打印"by HowToMechatronics.com"，大字体打印"Select Example"。

接着绘制三个按钮：测距传感器、RGB LED控制、Birduino游戏。每个按钮先用fillRoundRect()画填充圆角矩形，再用drawRoundRect()画同位置无填充圆角矩形形成边框效果，最后在按钮上用对应背景色打印文字。

// drawHomeScreen - 自定义函数
void drawHomeScreen() {
  // 标题
  myGLCD.setBackColor(0,0,0);
  myGLCD.setColor(255, 255, 255);
  myGLCD.setFont(BigFont);
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10);
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawLine(0,32,319,32);
  myGLCD.setColor(255, 255, 255);
  myGLCD.setFont(SmallFont);
  myGLCD.print("by HowToMechatronics.com", CENTER, 41);
  myGLCD.setFont(BigFont);
  myGLCD.print("Select Example", CENTER, 64);
  // 测距传感器按钮
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 90, 285, 130);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 90, 285, 130);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("DISTANCE SENSOR", CENTER, 102);
  // RGB LED控制按钮
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 140, 285, 180);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 140, 285, 180);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("RGB LED CONTROL", CENTER, 152);
  // Birduino游戏按钮
  myGLCD.setColor(16, 167, 103);
  myGLCD.fillRoundRect (35, 190, 285, 230);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (35, 190, 285, 230);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(16, 167, 103);
  myGLCD.print("BIRDUINO GAME", CENTER, 202);
}

现在让按钮具有功能：按下时跳转到相应示例。setup()中currentPage设为'0'表示主界面。若为'0'且检测到触摸，获取触摸坐标(x,y)。若坐标落在第一个按钮区域，调用drawFrame()高亮按钮，currentPage设为'1'，清屏并调用drawDistanceSensor()绘制第一个示例界面。同理处理另外两个按钮。

//========== loop主循环 ========
void loop() {
  // 主界面
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      // 按下测距传感器按钮
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130);
        currentPage = '1';
        myGLCD.clrScr();
        drawDistanceSensor();
      }
      // 按下RGB LED控制按钮
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }
      // 按下Birduino游戏按钮
      if ((x>=35) && (x<=285) && (y>=190) && (y<=230)) {
        drawFrame(35, 190, 285, 230);
        currentPage = '3';
        myGLCD.clrScr();
        myGLCD.setColor(114, 198, 206);
        myGLCD.fillRect(0,0,319,239);
        drawGround();
        drawPilars(xP,yP);
        drawBird(30);
        delay(1000);
      }
    }
  }
  // 测距传感器示例
  if (currentPage == '1') {
    getDistance();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      // 厘米按钮
      if ((x>=10) && (x<=135) && (y>=90) && (y<=163)) {
        selectedUnit = '0';
      }
      // 英寸按钮
      if ((x>=10) && (x<=135) && (y>=173) && (y<=201)) {
        selectedUnit = '1';
      }
      // 返回按钮
      if ((x>=10) && (x<=60) && (y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
      }
    }
  }
  // RGB LED控制
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();
      // 返回按钮
      if ((x>=10) && (x<=60) && (y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
        analogWrite(redLed, 0);
        analogWrite(greenLed, 0);
        analogWrite(blueLed, 0);
      }
    }
  }
  //==== 游戏示例代码在下一教程详细解释
  // Birduino游戏
  if (currentPage == '3') {
    // ... 游戏逻辑代码省略 ...
  }
  // 通用返回按钮检测
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();
    if ((x>=10) && (x<=60) && (y>=10) && (y<=36)) {
      drawFrame(10, 10, 60, 36);
      currentPage = '0';
      myGLCD.clrScr();
      drawHomeScreen();
      analogWrite(redLed, 0);
      analogWrite(greenLed, 0);
      analogWrite(blueLed, 0);
    }
  }
}

drawDistanceSensor()仅在按钮按下时调用一次以绘制界面，而getDistance()需在循环中反复调用以实时更新测距结果。

getDistance()函数使用超声波传感器计算距离，并用SevenSegNumFont绿色字体显示厘米或英寸值。超声波传感器详细原理可参考我的专门教程。loop()中处理单位选择和返回按钮。

//===== getDistance() - 自定义函数
void getDistance() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  duration = pulseIn(echoPin, HIGH);
  distanceCm= duration*0.034/2;
  distanceInch= distanceCm/2.53;
  // 显示厘米
  if (selectedUnit == '0' && distanceCm <=400) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceCm,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("cm ", 235, 178);
  }
  // 显示英寸
  if (selectedUnit == '1' && distanceCm <=160) {
    myGLCD.setFont(SevenSegNumFont);
    myGLCD.setColor(0, 255, 0);
    myGLCD.setBackColor(0, 0, 0);
    myGLCD.printNumI(distanceInch,130, 145, 3,'0');
    myGLCD.setFont(BigFont);
    myGLCD.print("inch", 235, 178);
  }
  delay(10);
}

RGB LED控制示例：按下第二个按钮调用drawLedControl()一次绘制界面，setLedColor()反复调用处理触摸滑块。通过触摸屏设置三个滑块(0-255)，用if限定各滑块触摸区域，获取X坐标并映射为0-255的PWM值控制LED。RGB LED详细用法可参考我的Arduino RGB教程。loop()中仅处理返回按钮（同时关闭LED）。

//============= setLedColor() - 自定义函数
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX(); y=myTouch.getY();
    // 红色滑块区域
    if( (y>=130) && (y<=156)) {
      xR=x;
      if (xR<=38) xR=38;
      if (xR>=303) xR=303;
    }
    // 绿色滑块区域
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) xG=38;
      if (xG>=303) xG=303;
    }
    // 蓝色滑块区域
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) xB=38;
      if (xB>=303) xB=303;
    }
  }
  // 映射X轴值(38-310)到PWM(0-255)
  int xRC = map(xR,38,310,0,255);
  int xGC = map(xG,38,310,0,255);
  int xBC = map(xB,38,310,0,255);
  // 输出PWM信号
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  // 绘制当前颜色矩形
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  // 绘制滑块指示器
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xR,139,(xR+4),147);
  myGLCD.setColor(xRC, 0, 0);
  myGLCD.fillRect(31, 139, (xR-1), 147);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xR+5), 139, 309, 147);
  // 绿色滑块指示器
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xG,179,(xG+4),187);
  myGLCD.setColor(0, xGC, 0);
  myGLCD.fillRect(31, 179, (xG-1), 187);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xG+5), 179, 309, 187);
  // 蓝色滑块指示器
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xB,219,(xB+4),227);
  myGLCD.setColor(0, 0, xBC);
  myGLCD.fillRect(31, 219, (xB-1), 227);
  myGLCD.setColor(0, 0, 0);
  myGLCD.fillRect((xB+5), 219, 309, 227);
}

Arduino游戏示例留待下一教程详细讲解，因其逻辑较复杂。

完整程序源代码

代码需在Arduino草图同目录下包含一个额外的".c"文件（第三个游戏示例用的鸟位图）。详情请参考我的专门教程。下载链接：

Arduino TFT教程文件

完整源代码：

/* Arduino TFT教程
 * 作者：Dejan Nedelkovski
 * www.HowToMechatronics.com
 */
/* 使用Henning Karlsen的UTFT和URTouch库
 * 下载地址：www.RinkyDinkElectronics.com
 */
#include <UTFT.h>
#include <URTouch.h>
//==== 创建对象
UTFT myGLCD(SSD1289,38,39,40,41);
URTouch myTouch( 6, 5, 4, 3, 2);
//==== 定义变量
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// 超声波传感器
const int VCC = 13; const int trigPin = 11; const int echoPin = 12;
long duration; int distanceInch, distanceCm;
// RGB LED
const int redLed = 10; const int greenLed = 9; const int blueLed = 8;
int xR=38; int xG=38; int xB=38;
// Floppy Bird
int xP = 319; int yP = 100; int yB = 30;
int fallRateInt = 0; float fallRate =0; int score=0;
const int button = 14; int buttonState = 0;

void setup() {
  myGLCD.InitLCD(); myGLCD.clrScr();
  myTouch.InitTouch(); myTouch.setPrecision(PREC_MEDIUM);
  pinMode(VCC, OUTPUT); pinMode(trigPin, OUTPUT); pinMode(echoPin, INPUT);
  pinMode(redLed, OUTPUT); pinMode(greenLed, OUTPUT); pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH);
  drawHomeScreen();
  currentPage = '0'; selectedUnit = '0';
}

void loop() {
  // ... 完整循环代码省略，与上述分段代码逻辑相同 ...
}

// ====== 自定义函数 ======
// drawHomeScreen, drawFrame, drawDistanceSensor, getDistance, drawLedControl, setLedColor,
// drawGround, drawPilars, drawBird, gameOver, restartGame 等函数定义
// 完整代码请见原文或下载文件