TFT LCD 2.4″ Touch screen shield tutorial
Hello, this a tutorial for beginners about the TFT LCD touch screen shield mounted on an Arduino UNO board, where we use some basic display functions and a little touch function, all this with simple and detailed functions.
Before proceeding, if you have the white screen problem or touch not detected or inverted you can check my previous tutorial it may help you with such issues (Â Go to tutorial).
Wiring:
Just mount the thing, it’s a shield 😀 There’s a breakout version of it but I don’t own it for the current moment.
Libraries:
Library from GitHub: Download here. Or download from drive here.
Codes:
Check below for an overview of the functions I tested, and the codes I’ve used in the tutorial with comments can be Downloaded here or:
Code 1: Lines
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the lines drawing functions *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); //Fill the whole screen with (BLACK) color tft.drawLine(0, 0, 100, 100, WHITE); //Draws a line from point1 with coordinates(x1,y1) to point2 (x2,y2) (x1, y1, x2, y2, line color) delay(2000); tft.drawFastHLine(100, 100, 150, RED); //Draws an horizontal line from point1 with coordinates(x,y) with the length L (x, y, L, line color) delay(2000); tft.drawFastVLine(100, 100, 150, BLUE); //Draws a vertical line from point1 with coordinates(x,y) with the length L (x, y, L, line color) delay(2000); } |
Code 2: Rectangles
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the rectangles drawing functions *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); tft.drawRect(20, 30, 80, 50, CYAN); //Draws a rectangle from the point (x,y) with width (W) and length (L) (x, y, w, L, Color) delay(2000); tft.fillRect(100, 120, 50, 50, RED); //Draws a filled rectangle from the point (x,y) with width (W) and length (L) (x, y, w, L, Color) delay(2000); } |
Code 3 : Circles
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the circles drawing functions *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); tft.drawCircle(tft.width()/2, tft.height()/2, 50, WHITE); //Draws a cirle which center is (x,y) with the radius r (x, y, r, Color) delay(2000); //tft.width()/2, tft.height()/2 means the center of the shield tft.fillCircle(tft.width()/2 , tft.height()/2 + 50, 50, YELLOW); //Draws a filled cirle which center is (x,y) with the radius r (x, y, r, Color) delay(3000); //tft.width()/2, tft.height()/2 are integers so you can add numbers or multiply } |
Code 4: Triangles
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the Triangles drawing functions *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); tft.drawTriangle( 80 , 80, // peak point position 150, 200, // bottom left 10, 120, // bottom right RED); // color red delay(3000); tft.fillScreen(BLACK); for(int i=0; i<200; i+=5){ tft.drawTriangle( 50 , 50, // peak 120, 300, // bottom left 10, 255, // bottom right tft.color565(0, 200-i, i)); //color RGB values and they keep changing which can create new colors rather than the ones we declared delay(200); } delay(2000); } |
Code 5: Displaying text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the Text displaying functions *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); tft.setCursor(0, 0); //Position of the cursor from where do you want to start writing tft.setTextColor(WHITE); tft.setTextSize(4); //Text color and size (1-5) tft.println("SurtrTech"); //Write text tft.fillRoundRect(110, 50, 100, 40, 10, RED); //One of the rectangle functions it draws a filled rectangle with round edges tft.setCursor(40, 55); tft.setTextColor(WHITE); tft.setTextSize(4); tft.println("Youtube"); //A part of this text is drawn in the same positions of the red rectangle drawn before, //so the last one will show on the top which is the text for(int i=0;i<5;i++){ //This little function print the text with a small size then clears it and show it bigger tft.fillRect(10, 150, 200, 200, BLACK); tft.setCursor(10, 150); tft.setTextColor(BLUE); tft.setTextSize(i); tft.println("Subscribe"); delay(50); } delay(2000); } |
Code 6: Touch function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the use of the touch functions to detect what the user pressed using an example *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #if defined(__SAM3X8E__) #undef __FlashStringHelper::F(string_literal) #define F(string_literal) string_literal #endif #define YP A3 // must be an analog pin, use "An" notation! #define XM A2 // must be an analog pin, use "An" notation! #define YM 9 // can be a digital pin #define XP 8 // can be a digital pin //Don't forget if your touch function doesn't work check the values above it may be (A1 A2 7 6) resp // Calibrate values you may want to run the calibration code first and set those points #define TS_MINX 125 #define TS_MINY 85 #define TS_MAXX 965 #define TS_MAXY 905 // For better pressure precision, we need to know the resistance // between X+ and X- Use any multimeter to read it // For the one we're using, its 300 ohms across the X plate TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300); #define LCD_CS A3 #define LCD_CD A2 #define LCD_WR A1 #define LCD_RD A0 // optional #define LCD_RESET A4 #define MINPRESSURE 10 #define MAXPRESSURE 1000 // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); void setup(void) { tft.reset(); //Shield launching tft.begin(0x9341); tft.setRotation(0); //Rotation 0-3 tft.fillScreen(BLACK); //Black background tft.fillRect(20, 40, 80, 80, RED); //Draws 2 rectangles Green and Red tft.fillRect(130, 40, 80, 80, GREEN); pinMode(13, OUTPUT); } void loop() { TSPoint p = ts.getPoint(); //checking if the user touched the screen pinMode(XM, OUTPUT); pinMode(YP, OUTPUT); if (p.z > MINPRESSURE && p.z < MAXPRESSURE) { //p.z means the pressure value so if the touch wants to be detected // it pressure should be in this range (it's enough) p.x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width()); //x and y positions of the touch so the program know the postion where the user has pressed p.y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());; if(p.y > 20 && p.y < 100 && p.x >40 && p.x <120){ //This concerns the red rectangle we draw before if the "y" position is between (20-100) and "x" position is between (40-120) tft.fillRect(0, 180, 300, 300, BLACK); //The program will show red pressed, and that's how we create a touch button, the positions are from the rectangle values with a little addition tft.setCursor(20, 180); tft.setTextColor(WHITE); tft.setTextSize(3); tft.print("Red pressed"); } else if(p.x > 130 && p.x < 210 && p.y >40 && p.y <120){ tft.fillRect(0, 180, 300, 300, BLACK); //We fill a little area so it's a partial cleaning of the screen tft.setCursor(0, 180); tft.setTextColor(WHITE); tft.setTextSize(3); tft.print("Green pressed"); } } } |
Code 7: Screen fill
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/*This code is to use with LCD 2.4" TFT touch screen shield with Arduino UNO board *It's modified from the Adafruit SPFD5408 library examples for a video tutorial *The code concerns the screen filling function *Refer to SurtrTech.com for more details */ #include <SPFD5408_Adafruit_GFX.h> // Core graphics library #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library #include <SPFD5408_TouchScreen.h> #define LCD_CS A3 // Chip Select goes to Analog 3 #define LCD_CD A2 // Command/Data goes to Analog 2 #define LCD_WR A1 // LCD Write goes to Analog 1 #define LCD_RD A0 // LCD Read goes to Analog 0 #define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin // Assign human-readable names to some common 16-bit color values: #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); //Declaring the tft lcd void setup() { Serial.begin(9600); tft.reset(); //Reseting the shield tft.begin(0x9341); //Starting the shield tft.setRotation(0); //Defining the rotation value 0-3, (4 directions) } void loop() { tft.fillScreen(BLACK); //The program keep filling the screen with different colors using this you can clear your screen delay(2000); tft.fillScreen(BLUE); delay(2000); tft.fillScreen(RED); delay(2000); tft.fillScreen(CYAN); delay(2000); tft.fillScreen(WHITE); delay(2000); tft.fillScreen(MAGENTA); delay(2000); } |
Overview:
The first code is about lines drawing and this is the result:
We draw 3 lines with 3 different functions that you can find the code above with comments about each one.
the first one consider the starting and finishing position, the two others are about he starting position and length.
Second code permits you to draw 2 rectangles one empty and the other one is filled.
these functions consider the top left point and the width, length of the rectangle.
The code about circles takes the position of the center and the radius value and also can be filled or empty.
      
The triangles code consider the positions of the 3 points and in the second one I used a little loop to change the color, it’s not that visible.
Displaying text is like the OLED, you set the cursor, color, size… and you can write you text it does consider the rotation too, you can draw rectangles and circles then write over them the display takes the last thing in the program.
Here comes the “function of the show”, the code about the touch function creates two squares with different colors and then we associate every one with a simple function, you can check the paint example for more functions, this one shows the basic way of creating a button and it’s by associating the position where the square is drawn before, to a function like writing a text or clearing the screen then going to another page… it’s up to you now to create what you want.
Categories
Yassine View All
Automation and Electrical Engineer, Electronics amateur trying to share my little projects.
Thank you for this tutorial, but it doesn´t solve my problem. When I touch the programmed buttons I use on my TFT LCD 2.4 display, sometimes I have the desired reaction and sometimes not. What could be the reason ?
Hello, first make sure your shield is fitting well with the Arduino, check that the Arduino USB port is not making contact with the shield, also verify all the shield pin solder points.
If you have the same problems as I had here, you may find solutions: https://surtrtech.com/2018/11/14/interfacing-and-fixing-touch-problem-in-arduino-tft-2-4-lcd-shield/