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.
Modified Adafruit TFTLCD: Download here
Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-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
SUBSCRIBE ON YOUTUBE
Never miss a video: Subscribe to educ8s.tv