Arduino TFT LCD Touchscreen Tutorial – Schritt-für-Schritt Anleitung

Übersicht

In diesem Tutorial lernen Sie, wie Sie einen TFT LCD Touchscreen mit Arduino verwenden. Drei praktische Beispiele werden vorgestellt:

1. Entfernungsmessung mit Ultraschallsensor (HC-SR04) – Einheit wählbar per Touch (cm/Zoll)
2. RGB-LED-Steuerung über drei Touch-Schieberegler (0–255)
3. „Birduino“ Spiel – ein Flappy-Bird-Klon, spielbar per Touch oder Taster

Benötigte Komponenten

• 3,2″ TFT Touch Display
• TFT Display Mega Shield (wichtig: 3,3 V Logik, Arduino Mega 5 V)
• Arduino Board (Mega empfohlen)
• Ultraschallmodul HC-SR04
• RGB-LED + 3 Widerstände
• Taster für Spiel-Beispiel
• Benutzerdefinierter Pin-Header (gelötet, gebogen für Zwischensteckung)

Schaltplan

Verwendete Pins: GND, digitale Pins 8–13, Pin 14. Da die 5V-Pins vom TFT-Shield belegt sind, wird Pin 13 als VCC für den Ultraschallsensor genutzt (im Setup auf HIGH gesetzt).

Software & Bibliotheken

Verwendet werden die UTFT und URTouch Bibliotheken von Henning Karlsen (RinkyDinkElectronics.com). Diese unterstützen viele TFT-Modelle, Shields und Controller.

Code-Struktur

Der Code ist modular aufgebaut: Haupt-Schleife verwaltet Seiten (Startbildschirm, Beispiel 1–3), benutzerdefinierte Funktionen zeichnen GUIs und behandeln Touch-Events.

Hauptprogramm (Ausschnitt)

#include <UTFT.h>
#include <URTouch.h>

// Objekte erstellen - Parameter an Ihr Display/Shield anpassen!
UTFT myGLCD(SSD1289, 38, 39, 40, 41);
URTouch myTouch(6, 5, 4, 3, 2);

// Fonts & Variablen
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];

int x, y;
char currentPage, selectedUnit;

// Ultraschallsensor
const int VCC = 13;
const int trigPin = 11;
const int echoPin = 12;
long duration;
int distanceInch, distanceCm;

// RGB LED
const int redLed = 10, greenLed = 9, blueLed = 8;
int xR = 38, xG = 38, xB = 38;

// Birduino Spiel
int xP = 319, yP = 100, 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';
}

Startbildschirm zeichnen

Die Funktion drawHomeScreen() erstellt die GUI mit drei Buttons (Distanzsensor, RGB LED, Birduino Spiel). Buttons werden als gefüllte abgerundete Rechtecke mit Rahmen und Text gezeichnet.

Touch-Event-Handling

Im Loop wird geprüft, welche Seite aktiv ist (currentPage). Bei Touch-Eingabe werden Koordinaten ausgelesen und geprüft, ob sie in einem Button-Bereich liegen. Entsprechende Zeichnungs-Funktionen werden aufgerufen und currentPage aktualisiert.

Beispiel 1: Entfernungsmessung

drawDistanceSensor() zeichnet die GUI einmalig. getDistance() wird zyklisch aufgerufen, liest den HC-SR04 aus und zeigt den Wert in cm oder Zoll (SevenSegNumFont) an. Touch-Buttons für Einheitenwahl und Zurück.

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

Beispiel 2: RGB LED Steuerung

drawLedControl() zeichnet drei Schieberegler (R, G, B). setLedColor() liest Touch-Koordinaten, begrenzt sie auf Slider-Bereiche, mapped X-Werte (38–310) auf PWM (0–255) und aktualisiert LED und Anzeige.

Beispiel 3: Birduino Spiel

Flappy-Bird-Klon mit Physik (Schwerkraft, Kollisionserkennung, Score). Steuerung per Touch (ganzer Bildschirm) oder Taster. Code im vollständigen Listing enthalten, wird in separatem Tutorial detailiert erklärt.

Vollständiger Quellcode

Für das Spiel wird eine zusätzliche .c Datei (Bitmap des Vogels) benötigt. Download-Link im Originalartikel.

/* Arduino TFT Tutorial
 * by Dejan Nedelkovski, www.HowToMechatronics.com
 * Uses UTFT & URTouch libraries by Henning Karlsen (RinkyDinkElectronics.com)
 */
// ... vollständiger Code wie im Original, alle Funktionen enthalten:
// drawHomeScreen, drawFrame, drawDistanceSensor, getDistance,
// drawLedControl, setLedColor, drawGround, drawPilars, drawBird,
// gameOver, restartGame