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.

2.8″ Touchscreen Display

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.

  1. 2.8″ Touch Screen ▶ https://educ8s.tv/part/TouchScreen28
  2. Arduino Uno ▶ https://educ8s.tv/part/ArduinoUno
  3. Arduino Mega ▶ https://educ8s.tv/part/ArduinoMega
  4. 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.

Connecting Screen to Arduino

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.

Demo

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