Arduino Touch Screen Tutorial | TFT LCD

In this Arduino touch screen tutorial we will learn how to use TFT LCD Touch Screen with Arduino. You can watch the following video or read the written tutorial below.

Overview

For this tutorial I composed three examples. The first example is distance measurement using ultrasonic sensor. The output from the sensor, or the distance is printed on the screen and using the touch screen we can select the units, either centimeters or inches.

Arduino-TFT-LCD-Touch-Sceen-Tutorial-Example-01

The next example is controlling an RGB LED using these three RGB sliders. For example if we start to slide the blue slider, the LED will light up in blue and increase the light as we would go to the maximum value. So the sliders can move from 0 to 255 and with their combination we can set any color to the RGB LED,  but just keep in mind that the LED cannot represent the colors that much accurate.

Arduino-TFT-LCD-Tutorial-Example-02

The third example is a game. Actually it’s a replica of the popular Flappy Bird game for smartphones. We can play the game using the push button or even using the touch screen itself.

Arduino-TFT-LCD-Touch-Sceen-Tutorial-Example-03

Now we will go through each of these examples and step by step explain the codes behind them.

Parts needed for this Arduino Touch Screen

As an example I am using a 3.2” TFT Touch Screen in a combination with a TFT LCD Arduino Mega Shield. We need a shield because the TFT Touch screen works at 3.3V and the Arduino Mega outputs are 5 V. For the first example I have the HC-SR04 ultrasonic sensor, then for the second example an RGB LED with three resistors and a push button for the game example. Also I had to make a custom made pin header like this, by soldering pin headers and bend on of them so I could insert them in between the Arduino Board and the TFT Shield.

You can get these components from any of the sites below:

Disclosure: These are affiliate links. As an Amazon Associate I earn from qualifying purchases.

Arduino-TFT-LCD-Touch-Sceen-Tutorial-Parts-needed

Here’s the circuit schematic. We will use the GND pin, the digital pins from 8 to 13, as well as the pin number 14. As the 5V pins are already used by the TFT Screen I will use the pin number 13 as VCC, by setting it right away high in the setup section of code.

Arduino-TFT-LCD-Screenn-Tutorial-Circuit-Schematica

Arduino Touch Screen Code

As the code is a bit longer and for better understanding I will post the source code of the program in sections with description for each section. And at the end of this article I will post the complete source code.

I will use the UTFT and URTouch libraries made by Henning Karlsen. Here I would like to say thanks to him for the incredible work he has done. The libraries enable really easy use of the TFT Screens, and they work with many different TFT screens sizes, shields and controllers. You can download these libraries from his website, RinkyDinkElectronics.com and also find a lot of demo examples and detailed documentation of how to use them.

After we include the libraries we need to create UTFT and URTouch objects. The parameters of these objects depends on the model of the TFT Screen and Shield and these details can be also found in the documentation of the libraries.

Next we need to define the fonts that are coming with the libraries and also define some variables needed for the program. In the setup section we need to initiate the screen and the touch, define the pin modes for the connected sensor, the led and the button, and initially call the drawHomeSreen() custom function, which will draw the home screen of the program.

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

//==== Creating Objects
UTFT    myGLCD(SSD1289,38,39,40,41); //Parameters should be adjusted to your Display/Schield model
URTouch  myTouch( 6, 5, 4, 3, 2);

//==== Defining Variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];

extern unsigned int bird01[0x41A];

int x, y;

char currentPage, selectedUnit;

//Ultrasonic 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() {
// Initial setup
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);

  // Defining Pin Modes
  pinMode(VCC, OUTPUT); // VCC
  pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
  pinMode(echoPin, INPUT); // Sets the echoPin as an Input
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pin 13 as VCC

  drawHomeScreen();  // Draws the Home Screen
  currentPage = '0'; // Indicates that we are at Home Screen
  selectedUnit = '0'; // Indicates the selected unit for the first example, cms or inches
}Code language: Arduino (arduino)

So now I will explain how we can make the home screen of the program. With the setBackColor() function we need to set the background color of the text, black one in our case. Then we need to set the color to white, set the big font and using the print() function, we will print the string “Arduino TFT Tutorial” at the center of the screen and 10 pixels  down the Y – Axis of the screen. Next we will set the color to red and draw the red line below the text. After that we need to set the color back to white, and print the two other strings, “by HowToMechatronics.com” using the small font and “Select Example” using the big font.

Next is the distance sensor button. First we need to set the color and then using the fillRoundRect() function we will draw the rounded rectangle. Then we will set the color back to white and using the drawRoundRect() function we will draw another rounded rectangle on top of the previous one, but this one will be without a fill so the overall appearance of the button looks like it has a frame. On top of the button we will print the text using the big font and the same background color as the fill of the button. The same procedure goes for the two other buttons.

// drawHomeScreen - Custom Function
void drawHomeScreen() {
  // Title
  myGLCD.setBackColor(0,0,0); // Sets the background color of the area where the text will be printed to black
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.setFont(BigFont); // Sets font to big
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Prints the string on the screen
  myGLCD.setColor(255, 0, 0); // Sets color to red
  myGLCD.drawLine(0,32,319,32); // Draws the red line
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.setFont(SmallFont); // Sets the font to small
  myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Prints the string
  myGLCD.setFont(BigFont);
  myGLCD.print("Select Example", CENTER, 64);
  
  // Button - Distance Sensor
  myGLCD.setColor(16, 167, 103); // Sets green color
  myGLCD.fillRoundRect (35, 90, 285, 130); // Draws filled rounded rectangle
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.drawRoundRect (35, 90, 285, 130); // Draws rounded rectangle without a fill, so the overall appearance of the button looks like it has a frame
  myGLCD.setFont(BigFont); // Sets the font to big
  myGLCD.setBackColor(16, 167, 103); // Sets the background color of the area where the text will be printed to green, same as the button
  myGLCD.print("DISTANCE SENSOR", CENTER, 102); // Prints the string
  
  // Button - RGB LED Control
  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);

  // Button - 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);
}Code language: Arduino (arduino)

Now we need to make the buttons functional so that when we press them they would send us to the appropriate example. In the setup section we set the character ‘0’ to the currentPage variable, which will indicate that we are at the home screen. So if that’s true, and if we press on the screen this if statement would become true and using these lines here we will get the X and Y coordinates where the screen has been pressed. If that’s the area that covers the first button we will call the drawDistanceSensor() custom function which will activate the distance sensor example. Also we will set the character ‘1’ to the variable currentPage which will indicate that we are at the first example. The drawFrame() custom function is used for highlighting the button when it’s pressed. The same procedure goes for the two other buttons.

//========== The loop section ========
void loop() { 
  // Home Screen
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX(); // X coordinate where the screen has been pressed
      y=myTouch.getY(); // Y coordinates where the screen has been pressed
      // If we press the Distance Sensor Button 
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130); // Custom Function -Highlighs the buttons when it's pressed
        currentPage = '1'; // Indicates that we are the first example
        myGLCD.clrScr(); // Clears the screen
        drawDistanceSensor(); // It is called only once, because in the next iteration of the loop, this above if statement will be false so this funtion won't be called. This function will draw the graphics of the first example.
      }
      // If we press the RGB LED Control Button 
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }  
      // If we press the Birduino Game Button
      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);
      }
    }
  }
  // Distance Sensor Example
  if (currentPage == '1') {    
      getDistance(); // Gets distance from the sensor and this function is repeatedly called while we are at the first example in order to print the lasest results from the distance sensor
      if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
       
        // If we press the Centimeters Button
        if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
          selectedUnit = '0';
        }
        // If we press the Inches Button
        if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
          selectedUnit = '1';
        }
        // If we press the Back Button
        if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
          drawFrame(10, 10, 60, 36);
          currentPage = '0'; // Indicates we are at home screen
          myGLCD.clrScr();
          drawHomeScreen(); // Draws the home screen
        }
      }
  }
  
  // RGB LED Control 
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
        
        //Back button
        if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
          drawFrame(10, 10, 60, 36);
          currentPage = '0';
          myGLCD.clrScr();
          drawHomeScreen();
          // Turns the LED off
          analogWrite(redLed, 0);
          analogWrite(greenLed, 0);
          analogWrite(blueLed, 0);
        }
    }
  }
//==== This section of the code, for the game example, is explained in my next tutorial
  // Birduino Game
  if (currentPage == '3') {
    //delay(1);
    xP=xP-3;
    drawPilars(xP, yP);
    
    yB+=fallRateInt;
    fallRate=fallRate+0.4;
    fallRateInt= int(fallRate);
    if (yB>=220) {
      yB=220;
    }
    if(yB>=180 || yB<=0){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB<=yP-2)){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB>=yP+60)){
      restartGame();
    }
    drawBird(yB);
    
    if (xP<=-51){
      xP=319;
      yP = rand() % 100+20;
      score++;
    }
    if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
        if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
          fallRate=-5;
        }
    }
    buttonState = digitalRead(button);
    if (buttonState == HIGH) {
      fallRate=-5;
      }
  }
    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);
        }
    }
}Code language: Arduino (arduino)

So the drawDistanceSensor() custom function needs to be called only once when the button is pressed in order to draw all the graphics of this example in similar way as we described for the home screen. However, the getDistance() custom function needs to be called repeatedly in order to print the latest results of the distance measured by the sensor.

Here’s that function which uses the ultrasonic sensor to calculate the distance and print the values with SevenSegNum font in green color, either in centimeters or inches. If you need more details how the ultrasonic sensor works you can check my particular tutorial for that. Back in the loop section we can see what happens when we press the select unit buttons as well as the back button.

//===== getDistance() - Custom Function
void getDistance() {
  // Clears the trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Sets the trigPin on HIGH state for 10 micro seconds
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Reads the echoPin, returns the sound wave travel time in microseconds
  duration = pulseIn(echoPin, HIGH);
  // Calculating the distance
  distanceCm= duration*0.034/2;
  distanceInch= distanceCm/2.53;
  // Prints the distance in centimeters
  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);
  
  }
  // Prints the distance in inches
  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);
}Code language: Arduino (arduino)

Ok next is the RGB LED Control example. If we press the second button, the drawLedControl() custom function will be called only once for drawing the graphic of that example and the setLedColor() custom function will be repeatedly called. In this function we use the touch screen to set the values of the 3 sliders from 0 to 255. With the if statements we confine the area of each slider and get the X value of the slider. So the values of the X coordinate of each slider are from 38 to 310 pixels and we need to map these values into values from 0 to 255 which will be used as a PWM signal for lighting up the LED. If you need more details how the RGB LED works you can check my particular tutorial for that. The rest of the code in this custom function is for drawing the sliders. Back in the loop section we only have the back button which also turns off the LED when pressed.

//============= setLedColor() - Custom Funtion
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();        
    // Area of the Red color slider
    if( (y>=130) && (y<=156)) {
      xR=x; // Stores the X value where the screen has been pressed in to variable xR
      if (xR<=38) { // Confines the area of the slider to be above 38 pixels
        xR=38;
      }
      if (xR>=303){ /// Confines the area of the slider to be under 310 pixels
        xR=303;
      }
    }
    // Area of the Green color slider
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) {
        xG=38;
      }
      if (xG>=303){
        xG=303;
      }
    }
    // Area of the Blue color slider
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) {
        xB=38;
      }
      if (xB>=303){
        xB=303;
      }
    }    
  }
  // Maps the values of the X - Axis from 38 to 0 and 310 to 255, because we need values from 0 to 255 for turning on the led
  int xRC = map(xR,38,310,0,255);
  int xGC = map(xG,38,310,0,255);
  int xBC = map(xB,38,310,0,255);
  
  // Sends PWM signal to the pins of the led
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  
  // Draws a rectangle with the latest color combination 
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  
  // Draws the positioners
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xR,139,(xR+4),147); // Positioner
  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);
}Code language: Arduino (arduino)

Next is the Arduino Game Example but I will leave that one for my next tutorial so that we can better understand it as it’s a bit more complex.

Complete source code of program

In order the code to work and compile you will have to include an addition “.c” file in the same directory with the Arduino sketch. This file is for the third game example and it’s a bitmap of the bird. For more details how this part of the code work  you can check my particular tutorial. Here you can download that file:

Here’s the complete source code of the program:

/*  Arduino TFT Tutorial
 *  Program made by Dejan Nedelkovski,
 *  www.HowToMechatronics.com 
 */
 
/*  This program uses the UTFT and URTouch libraries
 *  made by Henning Karlsen. 
 *  You can find and download them at:
 *  www.RinkyDinkElectronics.com
 */

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

//==== Creating Objects
UTFT    myGLCD(SSD1289,38,39,40,41); //Parameters should be adjusted to your Display/Schield model
URTouch  myTouch( 6, 5, 4, 3, 2);

//==== Defining Variables
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];

extern unsigned int bird01[0x41A];

int x, y;

char currentPage, selectedUnit;

//Ultrasonic 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() {
// Initial setup
  myGLCD.InitLCD();
  myGLCD.clrScr();
  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);

  // Defining Pin Modes
  pinMode(VCC, OUTPUT); // VCC
  pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
  pinMode(echoPin, INPUT); // Sets the echoPin as an Input
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  pinMode(blueLed, OUTPUT);
  pinMode(button, INPUT);
  digitalWrite(VCC, HIGH); // +5V - Pin 13 as VCC

  drawHomeScreen();  // Draws the Home Screen
  currentPage = '0'; // Indicates that we are at Home Screen
  selectedUnit = '0'; // Indicates the selected unit for the first example, cms or inches
}

void loop() { 
  // Home Screen
  if (currentPage == '0') {
    if (myTouch.dataAvailable()) {
      myTouch.read();
      x=myTouch.getX(); // X coordinate where the screen has been pressed
      y=myTouch.getY(); // Y coordinates where the screen has been pressed
      // If we press the Distance Sensor Button 
      if ((x>=35) && (x<=285) && (y>=90) && (y<=130)) {
        drawFrame(35, 90, 285, 130); // Custom Function -Highlighs the buttons when it's pressed
        currentPage = '1'; // Indicates that we are the first example
        myGLCD.clrScr(); // Clears the screen
        drawDistanceSensor(); // It is called only once, because in the next iteration of the loop, this above if statement will be false so this funtion won't be called. This function will draw the graphics of the first example.
      }
      // If we press the RGB LED Control Button 
      if ((x>=35) && (x<=285) && (y>=140) && (y<=180)) {
        drawFrame(35, 140, 285, 180);
        currentPage = '2';
        myGLCD.clrScr();
        drawLedControl();
      }  
      // If we press the Birduino Game Button
      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);
      }
    }
  }
  // Distance Sensor Example
  if (currentPage == '1') {    
      getDistance(); // Gets distance from the sensor and this function is repeatedly called while we are at the first example in order to print the lasest results from the distance sensor
      if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
       
        // If we press the Centimeters Button
        if ((x>=10) && (x<=135) &&(y>=90) && (y<=163)) {
          selectedUnit = '0';
        }
        // If we press the Inches Button
        if ((x>=10) && (x<=135) &&(y>=173) && (y<=201)) {
          selectedUnit = '1';
        }
        // If we press the Back Button
        if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
          drawFrame(10, 10, 60, 36);
          currentPage = '0'; // Indicates we are at home screen
          myGLCD.clrScr();
          drawHomeScreen(); // Draws the home screen
        }
      }
  }
  
  // RGB LED Control 
  if (currentPage == '2') {
    setLedColor();
    if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
        
        //Back button
        if ((x>=10) && (x<=60) &&(y>=10) && (y<=36)) {
          drawFrame(10, 10, 60, 36);
          currentPage = '0';
          myGLCD.clrScr();
          drawHomeScreen();
          // Turns the LED off
          analogWrite(redLed, 0);
          analogWrite(greenLed, 0);
          analogWrite(blueLed, 0);
        }
    }
  }
//==== This section of the code, for the game example, is explained in my next tutorial
  // Birduino Game
  if (currentPage == '3') {
    //delay(1);
    xP=xP-3;
    drawPilars(xP, yP);
    
    yB+=fallRateInt;
    fallRate=fallRate+0.4;
    fallRateInt= int(fallRate);
    if (yB>=220) {
      yB=220;
    }
    if(yB>=180 || yB<=0){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB<=yP-2)){
      restartGame();
    }
    if((xP<=85) && (xP>=30) && (yB>=yP+60)){
      restartGame();
    }
    drawBird(yB);
    
    if (xP<=-51){
      xP=319;
      yP = rand() % 100+20;
      score++;
    }
    if (myTouch.dataAvailable()) {
        myTouch.read();
        x=myTouch.getX();
        y=myTouch.getY();
        if ((x>=0) && (x<=319) &&(y>=50) && (y<=239)) {
          fallRate=-5;
        }
    }
    buttonState = digitalRead(button);
    if (buttonState == HIGH) {
      fallRate=-5;
      }
  }
    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);
        }
    }
}

// ====== Custom Funtions ======
// drawHomeScreen - Custom Function
void drawHomeScreen() {
  // Title
  myGLCD.setBackColor(0,0,0); // Sets the background color of the area where the text will be printed to black
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.setFont(BigFont); // Sets font to big
  myGLCD.print("Arduino TFT Tutorial", CENTER, 10); // Prints the string on the screen
  myGLCD.setColor(255, 0, 0); // Sets color to red
  myGLCD.drawLine(0,32,319,32); // Draws the red line
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.setFont(SmallFont); // Sets the font to small
  myGLCD.print("by HowToMechatronics.com", CENTER, 41); // Prints the string
  myGLCD.setFont(BigFont);
  myGLCD.print("Select Example", CENTER, 64);
  
  // Button - Distance Sensor
  myGLCD.setColor(16, 167, 103); // Sets green color
  myGLCD.fillRoundRect (35, 90, 285, 130); // Draws filled rounded rectangle
  myGLCD.setColor(255, 255, 255); // Sets color to white
  myGLCD.drawRoundRect (35, 90, 285, 130); // Draws rounded rectangle without a fill, so the overall appearance of the button looks like it has a frame
  myGLCD.setFont(BigFont); // Sets the font to big
  myGLCD.setBackColor(16, 167, 103); // Sets the background color of the area where the text will be printed to green, same as the button
  myGLCD.print("DISTANCE SENSOR", CENTER, 102); // Prints the string
  
  // Button - RGB LED Control
  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);

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

// Highlights the button when pressed
void drawFrame(int x1, int y1, int x2, int y2) {
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawRoundRect (x1, y1, x2, y2);
  while (myTouch.dataAvailable())
    myTouch.read();
    myGLCD.setColor(255, 255, 255);
    myGLCD.drawRoundRect (x1, y1, x2, y2);
}
//====================================================
void drawDistanceSensor() {
  myGLCD.setColor(100, 155, 203);
  myGLCD.fillRoundRect (10, 10, 60, 36);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 10, 60, 36);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(100, 155, 203);
  myGLCD.print("<-", 18, 15);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Back to Main Menu", 70, 18);
  myGLCD.setFont(BigFont);
  myGLCD.print("Ultrasonic Sensor", CENTER, 50);
  myGLCD.print("HC-SR04", CENTER, 76);
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawLine(0,100,319,100);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setColor(255, 255, 255);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Select Unit", 10, 114);
  myGLCD.setFont(BigFont);
  myGLCD.print("Distance:", 130, 120);
  myGLCD.setColor(223, 77, 55);
  myGLCD.fillRoundRect (10, 135, 90, 163);
  myGLCD.setColor(225, 255, 255);
  myGLCD.drawRoundRect (10, 135, 90, 163);
  myGLCD.setBackColor(223, 77, 55);
  myGLCD.setColor(255, 255, 255);
  myGLCD.print("cm", 33, 140);
  myGLCD.setColor(223, 77, 55);
  myGLCD.fillRoundRect (10, 173, 90, 201);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 173, 90, 201);
  myGLCD.setBackColor(223, 77, 55);
  myGLCD.setColor(255, 255, 255);
  myGLCD.print("inch", 17, 180);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Source code at: HowToMechatronics.com", CENTER, 220);  
}
//====================================================
//===== getDistance - Custom Function
void getDistance() {
  // Clears the trigPin
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  // Sets the trigPin on HIGH state for 10 micro seconds
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
  // Reads the echoPin, returns the sound wave travel time in microseconds
  duration = pulseIn(echoPin, HIGH);
  // Calculating the distance
  distanceCm= duration*0.034/2;
  distanceInch= distanceCm/2.53;
  // Prints the distance in centimeters
  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);
  
  }
  // Prints the distance in inches
  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);
}
//====================================================
void drawLedControl() {
  myGLCD.setColor(100, 155, 203);
  myGLCD.fillRoundRect (10, 10, 60, 36);
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRoundRect (10, 10, 60, 36);
  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(100, 155, 203);
  myGLCD.print("<-", 18, 15);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(SmallFont);
  myGLCD.print("Back to Main Menu", 70, 18);
  myGLCD.setFont(BigFont);
  myGLCD.print("RGB LED Control", CENTER, 50);
  myGLCD.print("LED Color:", 10, 95);
  myGLCD.print("R", 10, 135);
  myGLCD.print("G", 10, 175);
  myGLCD.print("B", 10, 215);
  myGLCD.setColor(255, 0, 0);
  myGLCD.drawLine(0,75,319,75); 
  myGLCD.setColor(255, 255, 255);
  myGLCD.drawRect(30, 138, 310, 148); // R - Slider
  myGLCD.drawRect(30, 178, 310, 188);
  myGLCD.drawRect(30, 218, 310, 228);  
}
//====================================================
//============= setLedColor() - Custom Funtion
void setLedColor() {
  if (myTouch.dataAvailable()) {
    myTouch.read();
    x=myTouch.getX();
    y=myTouch.getY();        
    // Area of the Red color slider
    if( (y>=130) && (y<=156)) {
      xR=x; // Stores the X value where the screen has been pressed in to variable xR
      if (xR<=38) { // Confines the area of the slider to be above 38 pixels
        xR=38;
      }
      if (xR>=303){ /// Confines the area of the slider to be under 310 pixels
        xR=303;
      }
    }
    // Area of the Green color slider
    if( (y>=170) && (y<=196)) {
      xG=x;
      if (xG<=38) {
        xG=38;
      }
      if (xG>=303){
        xG=303;
      }
    }
    // Area of the Blue color slider
    if( (y>=210) && (y<=236)) {
      xB=x;
      if (xB<=38) {
        xB=38;
      }
      if (xB>=303){
        xB=303;
      }
    }    
  }
  // Maps the values of the X - Axis from 38 to 0 and 310 to 255, because we need values from 0 to 255 for turning on the led
  int xRC = map(xR,38,310,0,255);
  int xGC = map(xG,38,310,0,255);
  int xBC = map(xB,38,310,0,255);
  
  // Sends PWM signal to the pins of the led
  analogWrite(redLed, xRC);
  analogWrite(greenLed, xGC);
  analogWrite(blueLed, xBC);
  
  // Draws a rectangle with the latest color combination 
  myGLCD.setColor(xRC, xGC, xBC);
  myGLCD.fillRoundRect(175, 87, 310, 119);
  
  // Draws the positioners
  myGLCD.setColor(255, 255, 255);
  myGLCD.fillRect(xR,139,(xR+4),147); // Positioner
  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);
}
//====================================================
void drawGround() {
  myGLCD.setColor(221,216,148);
  myGLCD.fillRect(0, 215, 319, 239);
  myGLCD.setColor(47,175,68);
  myGLCD.fillRect(0, 205, 319, 214);
  myGLCD.setColor(0, 0, 0);
  myGLCD.setBackColor(221, 216, 148);
  myGLCD.setFont(BigFont);
  myGLCD.print("Score:",5,220);
  myGLCD.setFont(SmallFont);
  myGLCD.print("HowToMechatronics.com", 140, 220); 
}
void drawPilars(int x, int y) {
   
    if (x>=270){
      myGLCD.setColor(0, 200, 20);
      myGLCD.fillRect(318, 0, x, y-1);
      myGLCD.setColor(0, 0, 0);
      myGLCD.drawRect(319, 0, x-1, y);

      myGLCD.setColor(0, 200, 20);
      myGLCD.fillRect(318, y+81, x, 203);
      myGLCD.setColor(0, 0, 0);
      myGLCD.drawRect(319, y+80, x-1, 204); 
    }
    else if( x<=268) {
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x+51, 0, x+53, y);
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(x+49, 1, x+1, y-1);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(x+50, 0, x, y);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x-1, 0, x-3, y);

    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x+51, y+80, x+53, 204);
    myGLCD.setColor(0, 200, 20);
    myGLCD.fillRect(x+49, y+81, x+1, 203);
    myGLCD.setColor(0, 0, 0);
    myGLCD.drawRect(x+50, y+80, x, 204);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRect(x-1, y+80, x-3, 204);
  }
  myGLCD.setColor(0, 0, 0);
  myGLCD.setBackColor(221, 216, 148);
  myGLCD.setFont(BigFont);
  myGLCD.printNumI(score, 100, 220);
}
//====================================================
void drawBird(int y) {
  if(y<=219) {
    myGLCD.drawBitmap (50, y, 35, 30, bird01);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRoundRect(50,y,85,y-6);
    myGLCD.fillRoundRect(50,y+30,85,y+36);
  }
  else if(y>=200) {
    myGLCD.drawBitmap (50, 200, 35, 30, bird01);
    myGLCD.setColor(114, 198, 206);
    myGLCD.fillRoundRect(50,200,85,200-6);
    myGLCD.fillRoundRect(50,200+30,85,200+36);
  }
}
void gameOver() {
  myGLCD.clrScr();
  myGLCD.setColor(255, 255, 255);
  myGLCD.setBackColor(0, 0, 0);
  myGLCD.setFont(BigFont);
  myGLCD.print("GAME OVER", CENTER, 40);
  myGLCD.print("Score:", 100, 80);
  myGLCD.printNumI(score,200, 80);
  myGLCD.print("Restarting...", CENTER, 120);
  myGLCD.setFont(SevenSegNumFont);
  myGLCD.printNumI(2,CENTER, 150);
  delay(1000);
  myGLCD.printNumI(1,CENTER, 150);
  delay(1000);
  myGLCD.setColor(114, 198, 206);
  myGLCD.fillRect(0,0,319,239);
  drawBird(30);
  drawGround();
  delay(1000);
}
//====================================================
void restartGame() {
  delay(1000);
  gameOver();
  xP=319;
  yB=30;
  fallRate=0;
  score=0;
}
Code language: Arduino (arduino)

163 thoughts on “Arduino Touch Screen Tutorial | TFT LCD”

  1. Greetings
    I have a Display 3.2 SPI Touch and I’m having trouble calibrating the touch screen. The display works correctly and I set the pins with Arduino Mega like this:

    UTFT myGLCD (ILI9341_S5P, 51, 52, 10, 9, 8); // UTFT myGLCD (Model, SDI, SCK, CS, RST, DC);
    URTouch myTouch (6, 5, 4, 3, 2); // T_CLK, T_CS, T_DIN, T_DO, T_IRQ

    Remembering that I am using a CD4050BE as a voltage divider, including all touch pins (6, 5, 4, 3, 2) but, I am not getting success on the touch screen. Any tips, please? Thank you

    Reply
  2. I also bought 3.2 inch ILI9341 TFT from banggood from your link. LCD is working ok, but touch part not ok. Touch does not hit right places. Calibration seems not to help. Also at examples touch does not go to right places.
    Maybe links are to wrong components as also in code You have different display model? Is there any fix for touch problem available?

    Reply
    • Sorry about that. It’s true I’ve used different display for the tutorial, but I tried to find the exact model from Banggood to much with the one I used. The problem is the driver. Try the UTFT + URTouch + ILI9341_16. Note it’s the “R” for the touch.

      Reply
  3. 3.2 Inch ILI9341 TFT LCD Display i brought by bangood.com prefer your link. i want this to connect arduino mega without display shield. can tell me how i connect the display pin to arduino mega

    Reply
  4. Hi Dejan,

    I am using this screen for my project and I don’t know how to update just one value like you did for your distance sensor example. I want to update only one value without clearing the screen and reloading the entire screen. When I print the value again it displays it on top of the old value then it gets messy.

    Reply
    • Hey, I guess it gets messy when you have value with 3 characters, then a value with 2 characters, so the third one from the previous print stays on the screen. You could try to print a small rectangle in that area, with the color of the background, just before printing the value. It’s the same concept of clearing the screen but in this case you won’t lose some much time for printing all pixels.

      Reply
  5. Hallo Dejan!
    thanks for the beautiful project!!!
    I have a question please, I cant see how do you use the I/O pins since the shield blocks them. canyou explain that please?
    Thanks a lot , Rafi

    Reply
      • Hello Dejan,

        First, Thank a lot for your tutorial,
        I’ve got some issue with the touch part;

        I’ve got the same items as you, ILI9341 controler.
        It works perfectly for the display part, but it didn’t work at all for the touch part.
        Can you please help me about it?

        Thank you,

        Reply
  6. Hi Dejan, nice work!
    I have just bought the screen and shield you suggested, and after realized that they are no more supported by the library author: woukd you mind to share the old library version you used in your project? Thanks!

    Reply
    • Thanks and I’m sorry to hear that. From which website did you buy them, Amazon or Banggood? Please let me know so I can take a look at them.
      What specific problem do you get? Did you try to solve your problem with a solution that can be found through the comments of this article?

      Reply
  7. Hi Dejan:
    myGLCD.print(“Arduino TFT Tutorial”, CENTER, 10);

    the statement above shows the error (warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]), same to all the printed statements. May I know how to get rid of this error? Thank you.

    Reply
  8. Hi , Thanks for this excellent website.
    I try your tuto and take the same product as you .
    But I have a problem, the screem stay alway white

    Reply
  9. Thank you for a great ardunio projects and good tutorials
    I been using your TFT LCD Touch Screen with Arduino awesome project. Works well on my mega with shield and screen ILI9341_16
    I have a question about your RGB sliders for the leds, they work great
    I would like to use your screen sliders to work 3v to 12v Dc Motors
    I am a big fan of model railways and would like to drive my trains using your slider software
    As a train motor can use PWM I thought it could fit in your RGB led section
    Also your Ultrasonic Module HC-SR04 works so well it could be used to detect a train for all manner of uses (stop and reverse)
    ect. ect
    Now the big question are you able to wright the code for this
    as my code knowledge is poor
    I can if you wish supply you with a small N-Gauge train and a circular track for your trouble
    thank you for fantastic web site

    Reply
  10. Hello Dejan
    After uploading the sketch I got only white screen.Then I got clue from Alex Xander reply (Sept 6,2016) and made the following changes

    UTFT myGLCD(ILI 1941_16,38,39,40,41);
    with the above change front was displayed but the touch function is not working.
    Touch function is not working with URTouch_Button test example given in the library.
    Can you guide me what my be the reason.

    Thanks

    Reply
      • Hi Rajiv, Hi Dejan,

        I’ve got the same problem than Rajiv, the display part is working, but not the touch part.
        Do you find a solution?

        Thanks a lot!

        PS: Wonderful tutorial Dejan, thaks for this work!

        Reply
  11. Hi Dejan,
    I find this occasion to comment here in this post, to thank you for this great website that saved me lot of time to get started in this Arduino world.
    To keep it short, the HC-SR04 pins Trig and Echo, 11 and 12 are inverted, if you see the diagram (yellow and white wires).

    Reply
  12. hi, I’m following your youtube channel, and I’d like to make a remote thermostat. for now i’m trying this project, with the ILI9341. the lcd is working, and showing the home page, but the touch is not responding, is there a way to test if the touch it’s working properly?
    thanx

    Reply
  13. hey..
    I am working with 2.4 inch ARduino TFT touch. i wanted to know that is this code will also work for 2.4 inch panel also other than the resolution of the screen and the size of the screen .

    Thank You in advance

    Reply
    • Well if your 2.4 inch tft display is supported by the libraries I’m using in this tutorial, everything shown as example will work, of course you would have to adjust the code, the resolution to your screen.

      Reply
  14. Hello Dejan , I am new to these touch screens and was very happy when I found you excellent tutorial for beginners like me. Thank you for this.

    without including the two files your sketch says to include (#include
    #include ) the sketch loads perfectly on my mega2560.

    My question is will this work on a Nextion 3.5 inch touchscreen? That’s the one I have and as just a beginner I cannot afford to buy every screen everyone recommends.

    Thank you
    Jim

    Reply
  15. Hello again sir, does this code work on lcds? because I bought a touch screen, and I am afraid that the seller have mistaken it with a display only lcd, I tried running the code there was an error in drawbird and bird01 so I deleted them, but not the touch itself is not working, the compiler most of the time shows me error status5 or error status 1 for no reason even if the code is working….can you please advise on what to do?

    Reply
  16. dear Nedelkovski

    thanks a lot for submitting a nice project.
    can you please help me if i want to use the screen with the arduino direct without the shield, need the wiring connection between Arduino and the screen.
    thanks a lot.
    khalid

    Reply
  17. Hi, I am trying to build an automation system interface using some ideas used in your tutorial which was a great one by the way, I wanted to ask since I have 0 experience with the arduino and its mechanism or any but the fact that it is a microcontroller with a specific language, the question is is inserting an sd card gives me area for the code?

    Reply
      • Thanks, well I searched for the LCD TFT touch panel everywhere I can and I couldnt find any original real thing there was the ili9488 and some others with unclear specifications, the real products do not deliver here in UAE so do you have any idea about a specific lcd touch module which works the same? again thanks alot.

        Reply
  18. I ordered the display and shield you listed. Installed on an Arduino Mega 2560 (admittedly, a clone by IEIK). Nothing works. Backlight comes on, but no display. Examples from URTouch and UTFT libraries also don’t work. No idea even where to begin. Are there settings I should adjust?

    Reply
  19. Hi,

    I don’t understand how you connect the pin header? In the circuit schematic i can’t see it.
    Why do you need do modulated a pin header?
    Can you explane how the pins are connected between the Arduino Board and the TFT Shield?
    Thank you.
    Leon (the Netherlands)

    Reply
  20. Hi! first of all I want to thank you for this amazing tutorial! I’ve bought the very same products in order to make a project but I had a problem, My lcd only shows a white background and nothing else. already search a lot trying to solve this but nothing yet, could you please help me? starting to run out of attempts 🙁
    thank you in advanced!

    Reply
      • thank you for the quick repply! unfortunately I already changed the controller on the arduino code by the recommended ones like ILI9327, TFT01_22SP and several others but they just don´t make a difference.
        anything else I could try?

        thank you again!

        Reply
  21. How can i do this without “TFT Display Mega Shield” ? I want Just Display some image from sd card and drow some points in LCD display.

    Reply
    • It’s all up to the display you will be using. There are many different displays that can be used without a shield. The particular display that I used in this tutorial must goes with a shield because it works on a 3.3V, while the Arduino outputs are 5V, so you might burn the display.

      Reply
  22. On your Arduino TFT LCD Touch Screen Tutorial it looked as if you could see in real time the screen as you were writing the code. Is that specific software you are using, or was that just video editing? I am completely new and like the idea of instantly knowing if my code fits what I’m trying to do.

    Reply
  23. Hi Dejan,
    thanks a lot for your project, this is help me in my work.
    but i dont have many reference about tft touchscreen.
    could you help me? i want to show my result for current sensor in tft but i can’t. and i wanna ask you, how to hold the function still “on” if i back to previous page?
    thanks

    Reply
    • Hi there,
      Well the point of this tutorial is to give you the basic knowledge of connecting and working with the TFT Display. When it comes to designing your own program there can be millions ideas and ways to solve problems but I don’t see how I can help you as I don’t for on users custom codes.

      Reply
  24. It is a very neat example with a good structure and plenty of comments which is great for people like me with limited understanding of software writting. Unfortunately I cannot make the Arduino IDE (version 1.6.9) to compile the sketch. First go at compiling the example gives an an error “exit status 1 ‘drawHomeScreen()’ was not declared in this scope”. If I comment out that routine it will do the same for another routine e.g. “getdistance()” and so on. I have copied the ino file and the bird01.c file to a folder “Arduino_TFT_Tutorial_Example_01” i.e with the same name as the ino file in the examples folder of the Arduino installation. Any ideas?

    Reply
    • I am replying to myself and to avoid people wasting time thinking about my compiling problem. I had a fresh look at the problem and thought it might be the sequence of the functions in the code. I moved void setup() and void loop() to the end and the code is now compiling and running fine.

      Reply
  25. Hello,
    First thank you for your proyect. It is just the one that I need for mine. The only different is that I need many pins free for sensors.
    1.- Could you tell me how much pins are free with this touch screen and the shield?
    2.- Do you know some other touch screen at the same price that use less pins?

    Reply
      • Hi there! You have done a great job. I used your sketch in order to get some personnal projects done and it works as a charm. However for a project I need a lot of digital outputs (12). I would like to know (if there are any), which are the digital pins that are not used by the screen and that I can freely use in my other application. I cheked the .h and .ccp files of both libraries but I’m not quite sure I understand everything. Thank you for your help! (All my analog inputs are already taken, so I can’t use them as digital pins) . In reality I have pin from 8 to 12 free so I need only 7 other digital pins. I would really appreciate your help. Can you point me those 16 available free pins?

        Reply
        • Hey, thanks! Well maybe you could use a multiplexer like the CD74HC4067 which is 16 channel multiplexer. Using only 4 digital pins you could get 16 outputs.

          Reply
  26. I see that just the Amazon link remains, too bad I still can’t tell what the model number is. You would think they would do a lot better in their marketing if they told you what you are buying. Now that I have paid the price (twice) to learn how important is is to know what you are getting.
    Thanks for the help.
    My third order was for a Mega and TFT (without touchscreen) packaged together from Banggood. The TFT was made to directly plug in the Mega (5V interface) and I will use a keypad for input. Too bad, but buying it three times was getting a little irritating.

    Reply
  27. Wow, I really appreciate it, Dejan, you are really helpful. This will help a lot of people, as the Banggood TFT ILI9341 is a very nice unit and about $4-5 less that the others I could find. And if they are giving you a commission too all the better.

    BTW the price through your link and the price directly to Banggood are the same, so you guys out there can get a bargain, and support your favorite Arduino TFT guy!

    Reply
    • I got answer from Erik and here it is:


      The ILI9327 (defined as 1 in UTFT.H) driver works, but it’s a 400 pixel wide display. This gives you the partly filled screen with our 320 pixel display. To fix this:

      In the file UTFT.CPP I have changed index 1 in dsy[] from 399 (400 pixel wide) to 319 (320 pixel)

      UTFT::UTFT(byte model, int RS, int WR, int CS, int RST, int SER)
      {
      word dsx[] = {239, 239, 239, 239, 239, 239, 175, 175, 239, 127, 127, 239, 271, 479, 239, 239, 239, 0, 0, 239, 479, 319, 239, 175, 127, 239, 239, 319, 319, 799, 127, 127};
      // word dsy[] = {319, 399, 319, 319, 319, 319, 219, 219, 399, 159, 127, 319, 479, 799, 319, 319, 319, 0, 0, 319, 799, 479, 319, 219, 159, 319, 319, 479, 479, 479, 159, 159}; Original line
      word dsy[] = {319, 319, 319, 319, 319, 319, 219, 219, 399, 159, 127, 319, 479, 799, 319, 319, 319, 0, 0, 319, 799, 479, 319, 219, 159, 319, 319, 479, 479, 479, 159, 159};

      ……………..
      In my program I create my display object as:
      UTFT myGLCD(ILI9327,38,39,40,41);

      Let me know if this will work for you too.

      As for the prices of the components, they are the same for the buyer no matter he would go directly to their website or through my links. It’s just that I got a little commission of 4%-6% if you buy the components through my affiliate links.

      Reply
      • I will try what you say, thank you for getting this from Erik. It will take me a little time, but I will report back right away.
        It is odd that it is a 400 pixel display, as Banggood says in the site it is 320. Oh well, all the better!

        I hope all understands that ordering through your links provides a small remuneration to you at no cost to the buyer, nice arrangement, thanks from all of us.
        -Dave

        Reply
      • Dejan, and Erik,
        Thank you for the instruction, I thought that is what I did originally, but just to be sure I did it all over again, and it still displays everything as if it is shifted left by 60-80 pixels. The UTOUCH part seems to be fine, and in the LED display routine the LED level that should follow you finger, lags to the left that same amount.
        Just in case, I ordered and quickly received another TFT on ebay model number SSD1289, but it arrived with a cracked screen as it had only a couple layers of bubble wrap around it, with all the bubbles popped, like my kids used to do when they were small.
        So I am back to randomly changing numbers in the library and trying to correlate the results.

        Reply
  28. I got the Mega, Shield, and TFT through your links, because you deserve any commission you get.
    The only TFT link that worked was Banggood, and I got a ILI9341 TFT that is not covered with the UTFT library file, so I found that ILI9327 worked but the display seems shifted 80 pixels to the left.
    I experimented with values in UTFT.cpp and UTFT.h, and I got the right side over by changing some numbers to 400, but I am just not finding how to get the left side to move over.
    Can you direct me to the right area to continue experimenting?
    Thanks
    p.s. your drawing of the wires going to the ultrasonic module needed the white and yellow wires reversed to work for me. Now it measures, and very accurately!

    Reply
    • Hi there and thanks for the support.
      I know that this is a problem, because they have changed the controller.
      Check all comments on this tutorial and find Bent Erik Thomsen comment, as he posted how he’ve solved this problem.
      Let me know if that would work for you too.

      Reply
      • I did try Erik’s solution:
        (Quote—This chip is NOT supported by UTFT / Karlsen.
        But ILI9327 can be used in a quick and dirty solution:
        Modify index 1 in dsy[] found in UTFT.CPP from 399 to 319 – shown below
        // word dsy[] = {319, 399, 319, ………
        word dsy[] = {319, 319, 319, …….
        End Quote)
        And using “ILI9327” was encouraging, because it got me past the “white screen” problem, but changing those values in word dsy[] had no effect.
        I ran Karlsen’s demo for 400 pixel screen and that filled it out to the right, but I an losing about the first 80 pixels on the left.

        Reply
  29. Dejan,

    On your TFT LCD screen project. I was wondering if you can explain your code in a little more detail.

    For the myGLCD.fillRoundRect (35, 90, 285, 130), what does the 35,90,285,130 represent? How did you know you could place your rectangle at this location and how it would look? Was it trial and error or did you use some program like paint and set it to the resolution of the screen so you will know where you could place the objects?

    For the color: myGLCD.setColor(16, 167, 103) <– What does the 16,167,103 mean and what if I want to change the color? Is there a list I could use that will tell me how to set these?

    Do you know if there are any books or tutorials that I could look over that has more details on display screens?

    Thanks

    Reply
    • Well I think the tutorial already explains your question, but anyway, in the myGLCD.fillRoundRect (35, 90, 285, 130) function the numbers are the coordinates x1, y1,x2,y2 of the rectangle. What else can be said here, if you have a display which is 320 pixels, you have coordinates from 0 to 320.
      As for the myGLCD.setColor(16, 167, 103) function, the numbers are R G B values for the colors. Search on google for RGB Color Picker and you will understand what the RGB means.

      Reply
  30. I keep getting this error when running the program.

    (file in sketch) Blink.o: In function `drawBird(int)’:
    Blink.cpp:(.text._Z8drawBirdi+0x2a): undefined reference to `bird01′
    Blink.cpp:(.text._Z8drawBirdi+0x2e): undefined reference to `bird01′
    Blink.cpp:(.text._Z8drawBirdi+0x8e): undefined reference to `bird01′
    Blink.cpp:(.text._Z8drawBirdi+0x92): undefined reference to `bird01′

    Reply
  31. Hey, My Screen is always white, i tried it with Arduino DUE, Mega + shield, but it will not work!? What can i do?
    (Sry for bad English ;( comming from Germany)

    Reply
    • Do you use exactly the same components as the tutorial? Check your TFT controller model if it’s different from the one on the tutorial you should check some settings in the code. You can find some more info about the TFT models in the libraries documentation as well.

      Reply
  32. I tried your code with my 3.2 TFT LCD and Arduino Mega 2560, get this message: Error compiling for board Arduino/Genuino Mega or Mega 2560

    Reply
  33. I am interested in doing something similar to this. Basically I would like a touch screen with approximately 8 buttons that will switch relays to turn on/off various objects. Would you recommend a similar setup for this type of scenario?

    Reply
  34. Hello,i want to ask i found this tft (link) but for me it looks that default library is a but hard form me.Can i use this library that you use with the screen that i find.

    Reply
  35. Hello. Awesome work you’ve got there. I’m using a 3.2 TFT LCD. I’m not planning to use a shield because my project requires me to design and manufacture a PCB for it. For the lines:

    UTFT myGLCD(SSD1289,38,39,40,41);
    UTouch myTouch( 6, 5, 4, 3, 2);

    Can you please specify which numbers refer to which pins such as 6 = RS, 7 = DC etc.

    Reply
  36. I am trying to get this running for my 9 year old son and having the same print problem as Bent and Josselin. But I’m not clear on how they solved the problem. I have a TFT 320QVT.

    What should I put here ? UTFT myGLCD(SSD1289,38,39,40,41);

    Changing the model doesn’t seem to work. Do I need to change anything else?

    I get this error: My GLC.print …

    Graham

    Reply
  37. Hi , thanks for your tutorial, i must use myGLCD.printNumF and not printNumI, because i need float number to receive data from temp sensor. What are the arguments of the function printNumF ?

    number, x, y, ?, ?

    tnx!

    Reply
  38. I entered in ILI9327 on the UTFT line, but the screen is shifted to the left by around one or two cm. Any advice on shifting it back?

    Reply
  39. Using library UTFT in folder: C:\Program Files (x86)\Arduino\libraries\UTFT (legacy)
    Using library UTouch in folder: C:\Program Files (x86)\Arduino\libraries\UTouch (legacy)
    exit status 1
    Error compiling.

    Reply
  40. Hi, I got a TFT 320QVT and the program works well but i got a big probelm, and on all programs, my touch screen didn’t anwser to touch, i’m still pressing a button, but nothing happens, the only programs which works is the Calibration test, all other, appears well but buttons didn’t works.
    Tanks for help
    Valentin

    Reply
  41. Oh my god !!!! It’s working
    Thank you so much for your explanation.
    Now i will have some fun with this screen !!!
    The problem now is that the touching part is not working.
    If you’ve found some other tips to make it work, please tell me.

    Thanks a lot,
    Josselin Somerville

    Reply
  42. Hi Bent Erik Thomsen,
    I am quite happy that you found the solution. Actually I have the same problem as you. I have read your instructions but I am not good in Arduino and I am not sure to have understand all your explanation. Please can you be more precise and help a man who’s trying to make this screen work.

    Thanks a lot,
    Josselin Somerville

    Reply
  43. Hi I have found a solution.

    This chip is NOT supported by UTFT / Karlsen.
    But ILI9327 can be used in a quick and dirty solution:
    Modify index 1 in dsy[] found in UTFT.CPP from 399 to 319 – shown below
    // word dsy[] = {319, 399, 319, ………
    word dsy[] = {319, 319, 319, …….

    and use
    UTFT myGLCD(ILI9327 ,38,39,40,41);

    best regards
    Bent Erik Thomsen

    Reply
      • When you say library – where are you referring? I don’t its mentioned anywhere in the rinky-dink web or their library files. I am curious, because I would like to use bigger touch screen in future. Also, thanks a lot for the very nice tutorial.

        Reply
    • Hi,
      Just want to thank you for the “dirty fix”.
      Without this information i would have never got it to work.
      I am trying to learn to do this myself but it is hard.

      I also bought it through the affiliate links 🙂 hopefully buying through your page and all the good comment will keep you posting cool projects to build.

      Reply
    • Thank you so much. I got the TFT_320QVT_9341 model from Amazon and was so frustrated at why the code did not work.

      I even began to think the Shield or the TFT were damaged.

      I felt such despair after having to wait 3 weeks for both the Shield and the TFT to arrive, only for it not to work.

      Thank you.

      Reply
    • Hi Bent Erik Thomsen:
      my LCD is ILI9341, I am facing the same problems as what you guys described here. I already changed my UTUF code to “UTFT myGLCD(ILI9341_16,38,39,40,41)”, but it didn’t work too. I don’t quite understand your dirty fix here. Do you mind to explain clearly and tell me how to do it? Thank you.

      Reply
  44. Than you for your nice demo.
    I’ve bought display and display adapter from IC station using your links.
    Your original code only gives me a white screen.
    Ic station says they have changed controller on the display
    “Driver IC:ILI9341
    (Note: The old Version will be out of manufacture)”

    I have tried to modify the creator call to different versions found in UTFT.h
    eg. myGLCD(ILI9341_S4P ,38,39,40,41);
    but none of them seems to work?
    Can you give me a hint?

    Thanks
    Bent Erik Thomsen

    Reply
  45. Hi Dejean, yes I’ve changed the model in the code.
    This is the error message :
    C:\Users\Josselin\Documents\Arduino\ecran\ecran.ino:503:44: warning: deprecated conversion from string constant to ‘char*’ [-Wwrite-strings]

    myGLCD.print(“Restarting…”, CENTER, 120);

    And i have this for each line when I want to print something, so my screen stay white…..
    I am quite despairate, I’ve bought exactly the same components s you to have no problems and now nothing is working….

    I hope you’ll find the problem,
    Josselin Somerville

    Reply
  46. Hi Dejean, this is an excellent tutorial !
    I am trying to build my own gameboy with an Arduino Mega and the shield you have shown on your video. But saddly, when i am transmitting your code it’s not working. The screen stay fully white. It’s the same with the exemples codes.
    I nearly sure that the problem is from the libraries because all the line specific to UTFT and UTouch are in red in the error message.

    I don’t know if it’s important, but even if my screen looks to be the same as yours it’s not the same name, you have TFT_320QVT and i have TFT_320QVT_9341 (I’ve bought it on your website).

    Anyway, I will really appreciate your help cause it makes 15 days that I was impatient to get my screen and now I have it, it’s not working 🙁

    Thanks a lot for your help and I say it again it’s a really great tutorial.

    Josselin Somerville

    Reply
  47. Hi
    Very nice tutorial!
    I have just one question. I have a LCD which *I think* runs on 3.3V. However I have connected it to an Arduino UNO and run some sketches similar to yours. And it works (the touch part does not work). Do you think that there is some risk at working without a shield??

    Thanks a lot

    Reply
    • Well it’s all up the the LCD, if it’s meant to handle 5V you should not have any problem. However, running it at 5V for a small period of time might not cause a problem, but if you use it for a longer period of time it might fail.

      Reply
    • Well this code is for the particular 3.2″ TFT Display stated in the post. You should adjust the code for other TFTs, depending on their drivers and you should check whether it is supported by the libraries.

      Reply
  48. Hi, Dejan.
    I’m same problem that Ron Hunter.
    When compile show the error:
    “myGLCD.print( “Arduino TFT Tutorial”, CENTER, 10);
    depreciated conversion from string constant to ‘char*’”

    But, I’m using same display and adapter with arduino Mega.

    Reply
  49. Dejan; I have created A digital dash for my 1963 Lotus Elite. I am currently using a LCD Digital display & an Arduino UNO. Your Code looks great. It seems I should be able to convert it to my needs. BUT!! at the moment I can’t get it to run. Arduino Mega 2256, 5″ TFT display,
    Ver 1.2 Megashield, Arduino IDE 1.6.7.
    It does not like the command “myGLCD” example one of many (all myGLCD commands)
    myGLCD.print( “Arduino TFT Tutorial”, CENTER, 10);
    depreciated conversion from string constant to ‘char*’
    Any advice would be appreciated!!!
    Ron

    Reply
  50. Hi!

    Very useful project to understand Henning Karlsens libraries! thank you!

    I have a project including a 3.95″ TFT LCD touchscreen, a stepper motor (28BYJ-48, 5V) and a RTC module (DS1302). Will this be too much for the arduino mega to handle? Too much current? If it is, do you have any suggestions to solve it?

    Reply
    • Thanks! Well the current would not be a problem, but maybe driving the stepper could be, depending on your speed or accuracy requirement for the stepper. However a good and optimized code would definitely do the job.

      Reply
  51. Hi , Dejan , nice project . I have tried do this but i had a problem about display.
    I recently purchased a two-boards “TFT LCD Shield + Touch Panel Display”

    and not get it to work, I have only a white screen. I’m using the sketch demo UTFT_Demo_320x240 from library UTFT.
    How can i fix that ?

    Reply
    • When Dejan is asking you about your “controller” he is referring to the controller inside the TFT LCD I believe (and not to the Arduino). Check that in the specs of your TFT and modify the following line
      // Remember to change the model parameter to suit your display module!
      UTFT myGLCD(ITDB32WC,19,18,17,16);

      You see the ITDB32WC?? you have to modify that according to your own TFT controller
      otherwise you will get the white screen.

      Reply
  52. Hi my name is Cameron and i am a Senior High school student in an engineering class , we are give all year long to complete an invention we have came up with to solve a problem… We loved your video and have purchased everything that you have here…. is there a way you could show us how to program this screen to have one button the screen turn on/off an LED or LED’S with delay times, We tried doing it our self from the given code but we cant seem to figure it out…. It would really Mean a lot to our team if you could help out thank you!

    Reply
    • Hi there. Well I think this tutorial explains well how to use the TFT LCD so you can make your own program. About the LEDs with delay should not be a big problem to code it, but I’m sorry I can’t help you with that one because I cannot make codes for every individual separately. The point of my tutorials is to provide as much knowledge as possible to all readers so they are able work out something new for their projects.
      So just like I said, I can’t write codes for each individual because in that way I would not have enough time for me for making new tutorials. What I usually answer in the comments section is basic questions or errors in the particular codes of the posts, but not making new codes. I hope you understand.
      Thanks

      Reply
  53. Hi Dejan, it looks really good.
    I’m actually just starting evaluating Arduino and applications so I’m not enough skilled to understand all Arduino boards vs shields vs components yet.
    Do you think this specific TFT screen will work on Arduino uno board?
    I’m wondering if a specific shield is needed and if the code will fit in the memory?

    thanks a lot

    Reply
    • Well it’s possible to connect the particular TFT screen without a shield but it will not work correctly. I already tried to connect it without a shield, with a resistors voltage divider to each pin (as the TFT works at 3.3 volts) but the TFT didn’t work properly. The shield makes the things easier and even the libraries are written considering them. And I am not sure whether the Arduino Uno will be able to handle the particular TFT screen.

      Reply
  54. Hi Dejan, really great tutorial however after downloading and running your ino code from the .rar file your complete program does not run as you have demonstrated? The first screen (with three example buttons) loads OK but then after pushing on the top button it starts to go to the Distance Sensor screen but then defaults back to the main screen. You can do this only two times as thereafter pushing the sensor button does nothing. Pushing the other two main buttons does nothing, also??? Can you please have a look at your code and fix why the second (and main sensor data screen) is not functioning. Ditto for the other two buttons on the first screen as well? Hope you correct these bugs! Cheers, Ian
    PS my components & TFT LCD are identical with yours.

    Reply
  55. Having the same problem as nmsr, also not having a problem running any of the UTOUCH libraries

    Arduino: 1.6.3 (Mac OS X), Board: “Arduino Mega 2560”

    Reply
    • Well the problem was the game example, as you need to include an addition “.c”, which is the bitmap file for the bird. I have updated the post so now you can download that file and include it into the same directory with the Arduino sketch and you will be able to compile it.

      Reply
  56. Yes, I tried both examples QuickDraw, QuickPaint and Calibration. All three worked fine without any problems at all. The touch worked. Its only when I tried to load the full program listed above which gave me the error.

    Reply
  57. When I tried to compile…I get the following error:
    This report would have more information with
    “Show verbose output during compilation”
    enabled in File > Preferences.
    Arduino: 1.0.5 (Mac OS X), Board: “Arduino Mega 2560 or Mega ADK”
    MEGA_Touch.cpp.o: In function `drawBird(int)’:
    /Applications/MEGA_Touch.ino:507: undefined reference to `bird01′
    /Applications/MEGA_Touch.ino:507: undefined reference to `bird01′

    But when I comment out those lines (with bird01) nothing executes when I touch the buttons.

    Reply
    • Did you try the Touch Demo Example coming with the libraries? Does you touch work? Sometimes I had problems with the touch, so I had to unplug the Arduino and then re plug in order to get the touch working.

      Reply
    • Hi there,
      Well not always, it depends on the TFT Screen design itself. If it’s working at 5V then you don’t need a shield. (I modified your comment, deleted the link to the product. You don’t need shield for that one)

      Reply

Leave a Comment