Arduino TFT LCD Touchscreen Tutorial – Stap-voor-Stap Handleiding

In deze Arduino touchscreen tutorial leer je hoe je een TFT LCD Touchscreen kunt gebruiken met Arduino. Bekijk de video of lees de geschreven tutorial hieronder.

Overzicht

Voor deze tutorial heb ik drie voorbeelden samengesteld. Het eerste voorbeeld is afstandsmeting met een ultrasone sensor. De gemeten afstand wordt op het scherm getoond en via de touchscreen kun je de eenheid kiezen: centimeters of inches.

Arduino TFT LCD Touchscreen Tutorial – Stap-voor-Stap Handleiding

Het tweede voorbeeld is het besturen van een RGB LED met drie RGB schuifbalken. Als je de blauwe schuifbalk verschuift, brandt de LED blauw en wordt helderder naarmate je naar de maximumwaarde gaat. De schuifbalken lopen van 0 tot 255 en met hun combinatie kun je elke kleur instellen, hoewel de LED de kleuren niet perfect kan weergeven.

Het derde voorbeeld is een spel: een nabootsing van de populaire Flappy Bird game voor smartphones. Je kunt het spel spelen met de drukknop of de touchscreen zelf.

Nu gaan we elk voorbeeld stap voor stap doorlopen en de code uitleggen.

Benodigde onderdelen voor deze Arduino Touchscreen

Als voorbeeld gebruik ik een 3,2" TFT Touchscreen in combinatie met een TFT LCD Arduino Mega Shield. Een shield is nodig omdat de touchscreen op 3,3V werkt en de Arduino Mega 5V uitgangen heeft. Voor het eerste voorbeeld gebruik ik de HC-SR04 ultrasone sensor, voor het tweede een RGB LED met drie weerstanden en een drukknop voor het spel. Ik moest ook een aangepaste pinheader maken door pinheaders te solderen en er een te buigen zodat ze tussen de Arduino en de TFT Shield passen.

Je kunt deze componenten verkrijgen via:

3,2″ TFT Touch Display
TFT Display Mega Shield
Arduino Board
Ultrasonische Module HC-SR04

Hier is het schakelschema. We gebruiken de GND pin, digitale pinnen 8 tot 13, en pin 14. Omdat de 5V pinnen al door het TFT scherm worden gebruikt, gebruik ik pin 13 als VCC door deze direct hoog te zetten in de setup.

Arduino Touchscreen Code

Omdat de code wat langer is, post ik deze in secties met uitleg per sectie. Aan het einde van het artikel vind je de complete broncode.

Ik gebruik de UTFT en URTouch bibliotheken van Henning Karlsen. Een grote dank aan hem voor zijn geweldige werk. Deze bibliotheken maken het heel eenvoudig om TFT schermen te gebruiken en werken met veel verschillende formaten, shields en controllers. Je kunt ze downloaden van zijn website RinkyDinkElectronics.com, waar je ook demo-voorbeelden en gedetailleerde documentatie vindt.

Na het includeren van de bibliotheken maken we UTFT en URTouch objecten aan. De parameters hangen af van het model van je TFT scherm en shield; deze details vind je in de documentatie.

Vervolgens definiëren we de fonts die bij de bibliotheken horen en enkele variabelen. In de setup initialiseren we het scherm en de touch, stellen de pinmodes in voor de aangesloten sensor, LED en knop, en roepen we de aangepaste functie drawHomeScreen() aan die het startscherm tekent.

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

//==== Objecten aanmaken
UTFT myGLCD(SSD1289,38,39,40,41); // Parameters aanpassen aan jouw Display/Shield model
URTouch myTouch( 6, 5, 4, 3, 2);

//==== Variabelen definiëren
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;

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

// RGB LEDs
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() {
  // Initiële setup
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);

  // Pin modes definiëren
  pinMode(VCC, OUTPUT);
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pin 13 als VCC
  drawHomeScreen(); // Tekent startscherm
  currentPage = '0'; // Geeft aan dat we op startscherm zijn
  selectedUnit = '0'; // Geselecteerde eenheid voor eerste voorbeeld (cm of inches)
}

Nu leg ik uit hoe we het startscherm maken. Met setBackColor() stellen we de achtergrondkleur van de tekst in (zwart). Dan stellen we de kleur in op wit, kiezen het grote font en printen we "Arduino TFT Tutorial" gecentreerd op 10 pixels vanaf de bovenkant. Vervolgens tekenen we een rode lijn onder de tekst. Daarna printen we "by HowToMechatronics.com" met klein font en "Selecteer Voorbeeld" met groot font.

Voor de knoppen (afstandssensor, RGB LED besturing, Flappy Bird) tekenen we afgeronde rechthoeken met een kleur en een witte rand. De tekst op de knoppen krijgt dezelfde achtergrondkleur als de knop zelf.

// drawHomeScreen - Aangepaste functie
void drawHomeScreen() {
  // Titel
  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("Selecteer Voorbeeld", CENTER, 64);

  // Knop - Afstandssensor
  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("AFSTANDSENSOR", CENTER, 102);

  // Knop - RGB LED Besturing
  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 BESTURING", CENTER, 152);

  // Knop - Flappy Bird (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 SPEL", CENTER, 202);
}

Nu moeten de knoppen functioneel gemaakt worden. In de setup staat currentPage op '0' (startscherm). Als het scherm wordt aangeraakt, lezen we de X en Y coördinaten. Als die binnen het gebied van een knop vallen, roepen we de bijbehorende tekenfunctie aan (drawDistanceSensor(), drawLedControl(), of starten we het spel) en passen we currentPage aan. De functie drawFrame() markeert de ingedrukte knop kort.

//========== De loop sectie ========
void loop() {
  // Startscherm
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX();
      y=myTouch.getY();

      // Afstandssensor knop
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130);
        currentPage = '1';
        myGLCD.clrScr();
        drawDistanceSensor();
      }
      // RGB LED knop
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }
      // Flappy Bird knop
      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);
      }
    }
  }

  // Afstandssensor Voorbeeld
  if (currentPage == '1') {
    getDistance();
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX(); y=myTouch.getY();
      // Centimeters knop
      if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) selectedUnit = '0';
      // Inches knop
      if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) selectedUnit = '1';
      // Terug knop
      if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
        drawFrame(10, 10, 60, 36);
        currentPage = '0';
        myGLCD.clrScr();
        drawHomeScreen();
      }
    }
  }

  // RGB LED Besturing
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
      myTouch.read(); x=myTouch.getX(); y=myTouch.getY();
      // Terug knop
      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);
      }
    }
  }

  // Flappy Bird spel (uitgebreid in volgende tutorial)
  if (currentPage == '3') {
    // Spel logica...
  }
}

De functie drawDistanceSensor() wordt één keer aangeroepen om de grafische elementen te tekenen. De functie getDistance() wordt herhaaldelijk aangeroepen om de meest recente metingen weer te geven.

//===== getDistance() - Aangepaste functie
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);
}

Bij het RGB LED voorbeeld wordt drawLedControl() één keer aangeroepen voor de grafiek, en setLedColor() herhaaldelijk. In deze functie gebruiken we de touchscreen om de waarden van de drie schuifbalken (0-255) in te stellen. De X-coördinaten van de schuifbalken (38-310 pixels) worden gemapt naar PWM waarden (0-255). De rest van de code tekent de schuifbalken en hun positie-indicatoren.

//============= setLedColor() - Aangepaste functie
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read(); x=myTouch.getX(); y=myTouch.getY();
    // Rood schuifbalk gebied
    if( (y>=130) && (y<=156)) {
      xR=x;
      if (xR<=38) xR=38;
      if (xR>=303) xR=303;
    }
    // Groen schuifbalk gebied
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) xG=38;
      if (xG>=303) xG=303;
    }
    // Blauw schuifbalk gebied
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) xB=38;
      if (xB>=303) xB=303;
    }
  }
  // Map X-waarden (38-310) naar 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);
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);

  // Teken kleurvoorbeeld en schuifbalk positie-indicatoren
  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);
}

Het Flappy Bird voorbeeld (Birduino) bespreek ik in de volgende tutorial omdat het complexer is.

Complete broncode van het programma

Om de code te laten werken en compileren, moet je een extra .c bestand in dezelfde map als de Arduino sketch plaatsen. Dit bestand bevat de bitmap van de vogel voor het spel. Meer details vind je in de specifieke tutorial. Hier kun je dat bestand downloaden:

Arduino TFT Tutorial Bestanden

1 bestand(en) 6,07 KB Download

Hier is de complete broncode:

/* Arduino TFT Tutorial
 * Programma gemaakt door Dejan Nedelkovski,
 * www.HowToMechatronics.com
 */
/* Dit programma gebruikt de UTFT en URTouch bibliotheken
 * gemaakt door Henning Karlsen.
 * Je kunt ze vinden en downloaden op:
 * www.RinkyDinkElectronics.com
 */
#include <UTFT.h>
#include <URTouch.h>
//==== Objecten aanmaken
UTFT myGLCD(SSD1289,38,39,40,41);
URTouch myTouch( 6, 5, 4, 3, 2);
//==== Variabelen definiëren
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];
extern unsigned int bird01[0x41A];
int x, y;
char currentPage, selectedUnit;
// ... (rest van de code zoals hierboven weergegeven)