Arduino Touch Screen Tutorial

Home/Arduino Projects/Arduino Touch Screen Tutorial

Arduino Touch Screen Tutorial

In this tutorial we are going to see how to use this inexpensive 2.8” Arduino Touch Screen with the ILI9325 driver with the Arduino Uno and the Arduino Mega. Is this Arduino Touch Screen a good option for your Arduino projects? Keep watching in order to find out!

Arduino Touch Screen: 2.8″ Display with ILI9325 driver

Hey guys, I am Nick and 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 this 2.8” touch screen designed for Arduino. As you can see, I have loaded a demo program that displays a button on the screen. When I press the button with my finger, the program displays a message. 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.

I discovered this touch screen on banggood.com and decided to buy it in order to try to use it in some of my projects. As you can see the display is inexpensive, it costs around $11.

——————–
WHERE TO BUY
——————–

2.8″ Touch Screen: http://bit.ly/ArduinoTouch

Arduino Uno: http://bit.ly/Cheap_Uno

Arduino Mega: http://bit.ly/ArduinoMega

Xiaomi Powerbank: http://bit.ly/PowerBank_XiaoMi

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!

 

The display offers a resolution of 320×240 pixels and it comes as a shield which makes the connection with Arduino extremely easy. As you can see, the display uses almost all of the digital and analog pins of the Arduino Uno. When using this shield we are left with only 2 digital pins and 1 analog pin for our projects.

Fortunately, the display works fine with the Arduino Mega as well, so we when we need more pins we can use the Arduino Mega instead of the Arduino Uno. Unfortunately this display does not work with the Arduino Due or the Wemos D1 ESP8266 board. Another advantage of the shield is that it offers a micro SD slot which is very easy to use.

Let’s now see the software side of the project. In order to use this Arduino Touch Screen we need three libraries. We need a modified version of the Adafruit TFTLCD library, the familiar Adafruit GFX library and the Touchscreen library.

——————–
LIBRARIES
——————–

Modified Adafruit TFTLCD: Download here

Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-Library

Touchscreen: https://github.com/adafruit/Touch-Screen-Library

The Arduino Touch Screen example program

After installing all the libraries you can now load any of the examples of the TFTLCD library. This is the graphicstext example. Impressive isn’t it? This is the tftbmp example. Just place the bmp files that come with library in an sd card and load the example. Great isn’t it? We can build some nice projects based on this example.

Now, let’s move on to Touchscreen functionality of the display. Load the example program I have developed. You can find it in a link below. First of all we have to calibrate the display. Open the Serial Monitor and  click on the top left corner of the display and write down the X and Y values. Then enter these values at these variables on the code. The X value goes to the TS_MAXX variable and the Y value that we wrote down goes to the TS_MAXY variable. We follow the same procedure for the other two variables. We clock on the bottom right corner of the display and we enter the values we get in the TS_MINX and TS_MINY variables. That’s it. Our display is now calibrated for this program and it is ready to use. If we touch the red button, the program will display a message.

When we touch the display, the Touchscreen library reports back the point that we clicked. We can get the X and Y values of the point but these values are not in pixels. We have to convert these values into pixel values. This happens here. We use the map function in order to convert the values we get from the Touchscreen library into pixels. Notice these two values, 320 and 240. They are the resolution of the screen we use in pixels.  Now that we know the X, Y values of the touch point in pixels it is very easy to make clickable buttons.

Let’s start from the beginning of the code. At first we clear the screen and we draw a black background. Next, we draw a white frame with this command. With the following 4 commands we print the word Hello on the display. We place the cursor at the desired position on the screen, we set the text color to be white, we set the font size and we finally print the “Hello text”.  By following the same procedure we print the red YouTube text as well.

The next step is to draw the red button. At first we create a red rectangle. The top left point of this rectangle has x and y pixel coordinates (60,180). We define that we want to have a width of 200 pixels and a height of 40 pixels. So, the button right pixel of the rectangle will have pixel coordinates (260, 220). Next, we draw a white rectangle on top of the red rectangle with this command. This makes the red rectangle to look more like a button. The last step is to draw the “Subscribe!” text with these commands.

Now in the loop function, each time the user clicks on the screen, we convert the point coordinates of the touch point into pixels. If that point is inside the red rectangle area that means that the user has pressed the button, so we disable the button by setting this variable to false, we clear the screen and we display a message on screen.

——————–

CODE OF THE PROJECT
——————–

Download

 

 

 

——————–

SUBSCRIBE ON YOUTUBE

——————–

Never miss a video: Subscribe to educ8s.tv

2017-03-28T12:58:21+00:00

7 Comments

  1. ganesh kolnure February 4, 2017 at 7:54 pm

    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

    • Bruce February 13, 2017 at 4:29 pm

      I have the same problem. Did you find a solution?

    • fred February 23, 2017 at 1:35 am

      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)

  2. Miguel March 20, 2017 at 9:44 pm

    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

  3. Christian April 19, 2017 at 12:11 pm

    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.

  4. arian May 23, 2017 at 6:43 pm

    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

  5. asga78 September 4, 2017 at 2:47 am

    Thanks for Christian all worked

Comments are closed.

Close