Hey guys, its Nick again, welcome to educ8s.tv a channel that is all about DIY electronics projects with Arduino, Raspberry Pi, ESP8266 and other popular boards. Today we are going to take a look at how to use the inexpensive, ILI9325 driver based, 2.8” touchscreen display designed for Arduino and at the end of this tutorial, you should be able to determine if this Touch Screen is a good option for your Arduino projects.
Arduino Touch Screen: 2.8″ Display with ILI9325 driver
I first came across this touchscreen which offers a resolution of 320×240 pixels, and an easy to use micro SD slot among several other great features on banggood.com and decided to buy it for use in some of my projects since it was inexpensive as it only costs around $11.
As shown in the video above, we will be performing simple tasks with the display to demonstrate how it works such that, When we press a button on the screen, a message will be displayed it. This means we will learn both how to create a button on the screen such that it can be touched and how to display messages on the screen.
As demonstrated the touch screen is working fine! Finally, we can start building projects with a touch screen which are much more interesting and easier to use.
Required Components/Parts and Where to Buy
The following components/parts are required to build this project and they can be bought by clicking on the links in front of them.
- 2.8″ Touch Screen ▶ https://educ8s.tv/part/TouchScreen28
- Arduino Uno ▶ https://educ8s.tv/part/ArduinoUno
- Arduino Mega ▶ https://educ8s.tv/part/ArduinoMega
- Xiaomi Powerbank ▶ https://educ8s.tv/part/Powerbank
Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!
[adsense]Schematics
The display comes as a shield which makes the connection with Arduino extremely easy, thus all that needs to be done for this project is to plug the display into the Arduino board since we won’t be adding any other sensor or actuator.
One of the few downsides to this display is that it uses almost all of the digital and analog pins of the Arduino Uno which means when using this shield, we are left with only 2 digital pins and 1 analog pin for connections to other components that the project we are building might require.
Fortunately, this display works fine with the Arduino Mega, so when working on projects with more pin requirements and size is not really an issue, we can use the Arduino Mega instead of the Arduino Uno. Unfortunately, this display does not work with some other Arduino Uno form factor based boards like the Arduino Due or the Wemos D1 ESP8266 board due to pin compatibility and library Issues.
Let’s now see the software side of the project.
Code
In order to use this Arduino Touch Screen easily, we will need three libraries. We will need a modified version of the Adafruit TFTLCD library, the familiar Adafruit GFX library, and the Touchscreen library. All these libraries can be downloaded by following the links below.
Libraries
? Modified Adafruit TFTLCD: Download here
? Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-Library
? Touchscreen: https://github.com/adafruit/Touch-Screen-Library
With the Libraries installed, we can test the display by trying out the examples which came with the libraries. Two favorite examples are the graphicstext example and the tftbmp example whose demonstration can be seen in the tutorial video.
To explore the Touchscreen functionality of the display, I have developed a sample code, which you can extend for use in any of your projects. it can be downloaded via the download link below.
To briefly explain the code, the first thing we do as usual is to include the libraries we will be using.
////////////////////////////////////////////// // 2.8" TOUCH SCREEN DEMO // // // // https://educ8s.tv // ///////////////////////////////////////////// #include <Adafruit_TFTLCD.h> #include <Adafruit_GFX.h> #include <TouchScreen.h>
Next, we declare the pins to which our screen is connected to on the Arduino both for the display and the touchscreen.
#define LCD_CS A3 #define LCD_CD A2 #define LCD_WR A1 #define LCD_RD A0 #define LCD_RESET A4
To use the touchscreen functionality of this display, there is a need for the display to be calibrated. To do this after uploading the code, Open the Serial Monitor and click (touch) on the top left corner of the display and write down the X and Y values displayed on the serial monitor. Then we edit the code to reflect those values. The X value goes to the TS_MAXX variable and the Y value goes to the TS_MAXY variable. We follow the same procedure for the other two variables. We click on the bottom right corner of the display and we enter the values we get in the TS_MINX and TS_MINY variables. With this done our display is now calibrated and ready for use.
#define TS_MINX 204 #define TS_MINY 195 #define TS_MAXX 948 #define TS_MAXY 910
Next, we declare the colors to be used with their hexadecimal values after which we create an object of the Adafruit TFTLCD library class indicating the variables used to represent the pins to which the screen is connected on the Arduino.
#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);
We also create an object of the touchscreen library indicating the pins to which the touch part of the screen is connected to on the Arduino.
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
Next, we write the Setup function.
We start the function by initializing the serial monitor and the LCD, after which we set the orientation of the LCD and fill the screen with a black color to serve as the background.
void setup() { Serial.begin(9600); Serial.print("Starting..."); tft.reset(); tft.begin(0x9325); tft.setRotation(1); tft.fillScreen(BLACK);
Next, we draw a white frame on the display then set the cursor to the desired location, change the text color to white, and print the “Hello” text on the screen. By following the same procedure, we display the red YouTube text as well.
//Draw white frame tft.drawRect(0,0,319,240,WHITE); //Print "Hello" Text tft.setCursor(100,30); tft.setTextColor(WHITE); tft.setTextSize(4); tft.print("Hello"); //Print "YouTube!" text tft.setCursor(80,100); tft.setTextColor(RED); tft.setTextSize(4); tft.print("YouTube!");
Next, we create the red youtube subscribe button. We do this by Creating a red rectangle and for our size requirements, we set the x and y pixel coordinates of the top left corner point of this rectangle to (60,180) after which we define the width for 200 pixels and the height as 40 pixels and set the bottom right pixel coordinates of the rectangle to (260, 220). To make the rectangle look like a button, we then draw a similar white rectangle on the red rectangle and write the “subscribe” text on it.
//Create Red Button tft.fillRect(60,180, 200, 40, RED); tft.drawRect(60,180,200,40,WHITE); tft.setCursor(80,188); tft.setTextColor(WHITE); tft.setTextSize(3); tft.print("Subscribe!");
With the setup function all done, we move to the loop function, the algorithm in operation for the loop section is simple, each time the user clicks on the screen, we convert the point coordinates of the touch point into pixels using the Map function. After conversion, If that point is inside the red rectangle area, it means that the user has pressed the button, so we disable the button by setting this variable to false and we clear the screen so as to display the “thank you for subscribing” message on the screen.
void loop() { TSPoint p = ts.getPoint(); //Get touch point if (p.z > ts.pressureThreshhold) { Serial.print("X = "); Serial.print(p.x); Serial.print("\tY = "); Serial.print(p.y); Serial.print("\n"); p.x = map(p.x, TS_MAXX, TS_MINX, 0, 320); p.y = map(p.y, TS_MAXY, TS_MINY, 0, 240); if(p.x>60 && p.x<260 && p.y>180 && p.y<220 && buttonEnabled) // The user has pressed inside the red rectangle { buttonEnabled = false; //Disable button //This is important, because the libraries are sharing pins pinMode(XM, OUTPUT); pinMode(YP, OUTPUT); //Erase the screen tft.fillScreen(BLACK); //Draw frame tft.drawRect(0,0,319,240,WHITE); tft.setCursor(50,50); tft.setTextColor(WHITE); tft.setTextSize(3); tft.print("Thank you for\n\n subscribing!"); } delay(10); } }
The code for this project can be downloaded by clicking on the link below.
——————–
CODE OF THE PROJECT
——————–
Upload the code to your Arduino board with the screen connected and you should see something like the image below.
That’s it for today’s tutorial guys, thanks for reading/watching. If you get stuck at any point while building this project, feel free to reach out to me via the comment section, I will be glad to answer whatever questions you might have. Don’t forget to share, like and subscribe on youtube. Thanks!
——————–
SUBSCRIBE ON YOUTUBE
——————–
Never miss a video: Subscribe to educ8s.tv
hello sir,
I m Ganesh from India. your video on TFT touch screen is great. I appreciate your work. I have seen all tutorials which are provided by you.
now I m working on 2.4″ TFT screen. I use your code. but it’s not working .white light is shown on the screen. please guide me as fast as possible. I provide my email address below. please provide additional info with my mail.
patilganesh31195@gmail.com
I have the same problem. Did you find a solution?
hello Ganesh. i had same problem of permanent white screen.
then i used this library and i could at least have the DEMO work :
https://github.com/JoaoLopesF/SPFD5408
(read instructions down the github contents)
halo, can you do it?
here is my email
rainstory97@gmail.com
Hello Guys, Im Miguel Diosdado, student form Mexico, i have this problem:
Arduino:1.8.1 (Windows 10), Tarjeta:”Arduino/Genuino Mega or Mega 2560, ATmega2560 (Mega 2560)”
In file included from C:\Users\bms\Desktop\TFT\screenTouch\screenTouch.ino:9:0:
C:\arduino-1.8.1\libraries\TouchScreen/TouchScreen.h:51:12: error: ‘RwReg’ does not name a type
volatile RwReg *xp_port, *yp_port, *xm_port, *ym_port;
^
C:\arduino-1.8.1\libraries\TouchScreen/TouchScreen.h:52:3: error: ‘RwReg’ does not name a type
RwReg xp_pin, xm_pin, yp_pin, ym_pin;
^
exit status 1
Error compilación en tarjeta Arduino/Genuino Mega or Mega 2560.
If you can help me, please tell me how to solve this problem, thanks
Hi Ganesh and Bruce,
I had the same problem as you. Then i changed Nick´s code as follows:
tft,begin(0x9341); // This I found in the graphics example-file of SPFD5408 library
tft.setRoation(3);
and all worked fine, don´t ask me why.
hi i have 2.8 inch lcd sheild from mcufriend and mega arduino should i make any alteration in order to use the libraries and if how?
cause i think in default it works for uno boards.
i’m new to arduino i would be very grateful if u could help me
Thanks for Christian all worked
For those getting a white screen of death, Replace the code tft.begin(0x9325) with tft.begin(tft.readID());
did nit work either
change 9325 to the model number of your board, mine is 9341
This fixed my display issue! Thanks for that!!! However, the touch function (pressing ‘Subscribe!’ doesn’t do anything. Any thoughts on that?
did you get an answer for this?
You have to reverse the mapping of the Y coordinate, e.g.,
p.y = map(p.y, TS_MAXY, TS_MINY, 240, 0);
I educ8.tv please can you make a project with two tft screens communicating to each other via a wifi module something like an sms form or ordering system
Hi Nick. I just bought an TFT touchscreen hoping I could make it work with my Arduino UNO. Then I came across your tutorial on Youtube and trying to run your example, all the screen went blank. Then I realized you’re using a Touchscreen that works with ILI9325 driver while mine works with HX8341i driver. I don’t know about the compatibility of this driver with Arduino UNO (apparently works with MEGA according to the library documentation) and if it’s just a matter of calling the specific library, but I would like to ask you if you have worked with this driver before. Also, I run some examples from the touchscreen library and they seem to work, it’s just the graphics part that I haven’t been able to make work.
I see the last comment on this was back in 2018 so I’m not sure if your still there but I have a question. I have an Elegoo 2.8″ TFT Touchscreen and yes it is 240 x 320. Those are also the x and y values I get when I touch the extreme parts of the screen. How do those values get translated into the larger numbers shown above in your piece to XMAX and YMAX values. You certainly didn’t enter in the actual values of x and y and come up numbers like 920.
Error messages I am receiving
Arduino: 1.8.12 (Mac OS X), Board: “Arduino Uno”
In file included from /Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/Adafruit_TFTLCD.cpp:19:0:
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:166:28: warning: backslash and newline separated by space
#define write8inline(d) {\
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:172:30: warning: backslash and newline separated by space
PORTG |= (d & 0x10) < Preferences.
Error messages I am receiving
Arduino: 1.8.12 (Mac OS X), Board: “Arduino Uno”
In file included from /Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/Adafruit_TFTLCD.cpp:19:0:
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:166:28: warning: backslash and newline separated by space
#define write8inline(d) {\
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:172:30: warning: backslash and newline separated by space
PORTG |= (d & 0x10) < Preferences.
Arduino: 1.8.12 (Mac OS X), Board: “Arduino Uno”
In file included from /Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/Adafruit_TFTLCD.cpp:19:0:
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:166:28: warning: backslash and newline separated by space
#define write8inline(d) {\
/Users/nick/Documents/Arduino/libraries/Adafruit_TFTLCD/pin_magic.h:172:30: warning: backslash and newline separated by space
PORTG |= (d & 0x10) < Preferences.
Error messages I am receiving
Hi I’m getting the same error messages. Have you managed to figure out what’s happening?
How can this be modified with an SPI TFT screen?
Hi guys, I may have found the reason for the error!
The latest release of the Adafruit_GFX broke compatibility with the Adafruit_TFTLCD library. You’ll need to roll back to Adafruit_GFX 1.5.3:
Sketch > Include Library > Manage Libraries
Wait for the download to finish
In the “Filter your search…” box, type “adafruit_gfx”.
Press Enter.
From the search results, click on “Adafruit GFX Library by Adafruit”.
From the dropdown version menu, select 1.5.3.
Click the “Install” button.
Wait for the installation to finish.
Click the “Close” button.
After that, the sketch should compile.
If you have updatable library notifications enabled in the Arduino IDE, it will occasionally prompt you to update your Adafruit_GFX library to the new version. You will need to refrain from doing so, otherwise you’ll be back to the same compilation error again when you use the Adafruit_TFTLCD library.
Fantastic!!! This fixed it for me thank you!!
Hi Sir,
My name is Kenneth Kwok from Australia. I am new to the Arduino Code. I have the same problem with Ganesh Feb 4. The screen is white and no more function. Please advise. Thanks,
My email: kwokww111@outlook.com
Is it possible to have a button to return to the main screen?
Thank you for such a concise & straight forward tutorial. I downloaded your code to try to upload it & it compiled fine, but when it uploaded, I just got a blank white screen. Any ideas where I’m going wrong? Thanks again.
Hola gran trabajo, me gustaría saber si me puede apoyar en un programa en el que estoy trabajando, estaría interesado en apoyarme?
Hi Sir, the pin required to use A0, A1, A2, A3, A4, however i got the input sensor that require SCL and SCA in A4 pin and A5 pins… will it interrupt ?
how da fuck do u declare “XP”
(TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);)
tOUCH:44:30: error: ‘XP’ was not declared in this scope
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
C:\Users\Intern\Documents\Arduino\tOUCH\tOUCH.ino:44:30: note: suggested alternative: ‘SP’
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
SP
tOUCH:44:34: error: ‘YP’ was not declared in this scope
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
C:\Users\Intern\Documents\Arduino\tOUCH\tOUCH.ino:44:34: note: suggested alternative: ‘YL’
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
YL
tOUCH:44:38: error: ‘XM’ was not declared in this scope
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
C:\Users\\Intern\Documents\Arduino\tOUCH\tOUCH.ino:44:38: note: suggested alternative: ‘XH’
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
XH
tOUCH:44:42: error: ‘YM’ was not declared in this scope
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
C:\Users\Intern\Documents\Arduino\tOUCH\tOUCH.ino:44:42: note: suggested alternative: ‘YL’
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
^~
YL
C:\Users\Intern\Documents\Arduino\tOUCH\tOUCH.ino: In function ‘void loop()’:
tOUCH:71:1: error: expected ‘}’ at end of input
}
^
exit status 1
‘XP’ was not declared in this scope
Dieser Bericht wäre detaillierter, wenn die Option
“Ausführliche Ausgabe während der Kompilierung”
in Datei -> Voreinstellungen aktiviert wäre.
#include
#include
#include
#define LCD_CS A3
#define LCD_CD A2
#define LCD_WR A1
#define LCD_RD A0
#define LCD_RESET A4
#define TS_MINX 204
#define TS_MINY 195
#define TS_MAXX 948
#define TS_MAXY 910
#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);
int XP,YP,XM,YM;
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);
void setup() {
Serial.begin(9600);
Serial.print(“Starting…”);
tft.reset();
tft.begin(0x9325);
tft.setRotation(1);
tft.fillScreen(BLACK);
//Draw white frame
tft.drawRect(0,0,319,240,WHITE);
//Print “Hello” Text
tft.setCursor(100,30);
tft.setTextColor(WHITE);
tft.setTextSize(4);
tft.print(“Hello”);
//Print “YouTube!” text
tft.setCursor(80,100);
tft.setTextColor(RED);
tft.setTextSize(4);
tft.print(“YouTube!”);
//Create Red Button
tft.fillRect(60,180, 200, 40, RED);
tft.drawRect(60,180,200,40,WHITE);
tft.setCursor(80,188);
tft.setTextColor(WHITE);
tft.setTextSize(3);
tft.print(“Subscribe!”);
}
void loop()
{
int buttonEnabled;
TSPoint p = ts.getPoint(); //Get touch point
if (p.z > ts.pressureThreshhold) {
Serial.print(“X = “); Serial.print(p.x);
Serial.print(“\tY = “); Serial.print(p.y);
Serial.print(“\n”);
p.x = map(p.x, TS_MAXX, TS_MINX, 0, 320);
p.y = map(p.y, TS_MAXY, TS_MINY, 0, 240);
if(p.x>60 && p.x180 && p.y>>>>i fixed dat sh!t duuude!!!!!!!!!!!!<<<<<<<<< SHEEEEESH
Hello guys,is it any esp idf library available?