Creating an Arduino Touch Screen Calculator Using TFT LCD

Arduino boards always help us build a project easily and make it look more attractive. Programming a liquid crystal display with touch functionality may sound like a complex task, but using Arduino libraries and expansion modules can make this task very simple. In this article, we will use a 2.4-inch Arduino TFT LCD screen to build an Arduino touch screen calculator that can perform all basic calculations such as addition, subtraction, division, and multiplication.

Required Materials

1. Arduino Uno board

2. 2.4-inch TFT LCD display module

3. 9V battery.

Understanding the TFT LCD Display Module

Before we dive into the project, it is important to understand how this 2.4” TFT LCD display module works and the model used. Let’s take a look at the pins of this 2.4-inch TFT LCD screen module.

As you can see, the module has 28 pins that can perfectly fit into any Arduino Uno / Arduino Mega board. The following table provides a description of these pins.

As you can see, the module pins can be divided into four main categories: LCD command pins, LCD data pins, SD card pins, and power pins. We don’t need to know the detailed working principle of these pins, as they will be handled by the Arduino library.

You can also find an SD card slot at the bottom of the module shown above, which can be used to load an SD card with bmp image files that can be displayed on our TFT LCD screen using Arduino programs.

Another important thing to note is your interface IC. From Adafruit TFT LCD modules to cheap Chinese clones, there are many types of TFT modules on the market. A program suitable for Adafruit expansion boards may not be the same for the Chinese expansion boards. Therefore, it is very important to know what type of LCD screen you have on hand. This detail must be obtained from the vendor. If you have a cheap clone like mine, it most likely uses the driver IC ili9341. You can try some basic example programs following the official Arduino tutorial to familiarize yourself with this LCD screen.

Calibrating the Touch Screen of the TFT LCD

If you plan to use the touch screen functionality of the TFT LCD module, you must calibrate it to work properly. An uncalibrated LCD screen is unlikely to work properly; for example, you might touch one place, but the TFT may think you touched another place. These calibration results are not the same for all circuit boards, so you can only do this work yourself.

The best way to calibrate is to use the calibration example program (included with the library) or use the serial monitor to detect your errors. However, for this project, since the buttons are large, calibration shouldn’t be a big issue, and I will explain how to calibrate your LCD screen in the programming section below.

Connecting the Arduino Board to the TFT LCD

The 2.4-inch TFT LCD screen is a great Arduino expansion board. You can directly push the LCD display onto the top of the Arduino Uno, and it perfectly matches the pins and slides in. However, for safety, the programming terminals of the Arduino UNO must be covered with small insulating tape in case the terminals touch your TFT LCD screen. The appearance of the LCD assembled onto the UNO development board is shown below.

Programming the Arduino Board

We use the SPFD5408 library to ensure that the Arduino calculator code works properly. This is a modified Adafruit library that works seamlessly with our LCD TFT module. You can check the complete program at the end of this article.

Note: It is very important to install this library in the Arduino IDE or this program without any compilation errors.

To install this library, you can simply click the link above, which will take you to a GitHub page. Click on Clone or Download and select “Download ZIP”. A zip file will be downloaded.

Now, open the Arduino IDE and select Sketch – > Include Library – > Add .ZIP library. A browser window will open to navigate to the ZIP file, then click “OK”. If successful, you should notice “Library added to your Libraries” at the bottom left of Arduino.

Now, you can use the following code in the Arduino IDE and upload it to Arduino UNO to make the touch screen calculator work properly. Below, I will explain the code in small segments.

We need three libraries to make this program work properly. All three libraries can be downloaded in ZIP format from the link provided above. I just included them in the code as shown below.

1. #include <SPFD5408_Adafruit_GFX.h> // Core graphics library

2. #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library

3. #include <SPFD5408_TouchScreen.h>

Copy Code

As mentioned earlier, we need to calibrate the LCD screen for it to work properly, but don’t worry; the values given here are almost universal. The variables TS_MINX, TS_MINY, TS_MAXX, and TS_MAXY determine the calibration of the screen. If you feel the calibration is not ideal, you can make slight adjustments.

1. #define TS_MINX 125

2. #define TS_MINY 85

3. #define TS_MAXX 965

4. #define TS_MAXY 905

Copy Code

As we know, the TFT LCD screen can display many colors, and all these colors must be input in hexadecimal values. To make it more readable, we assign these values to a variable as shown below.

1. #define WHITE 0x0000 //Black->White

2. #define YELLOW 0x001F //Blue->Yellow

3. #define CYAN 0xF800 //Red->Cyan

4. #define PINK 0x07E0 //Green-> Pink

5. #define RED 0x07FF //Cyan -> Red

6. #define GREEN 0xF81F //Pink -> Green

7. #define BLUE 0xFFE0 //Yellow->Blue

8. #define BLACK 0xFFFF //White-> Black

Copy Code

Alright, now we can enter the programming part. This program involves three parts. One is to create a user interface for the calculator with buttons and a display. Then, based on user touch, detect the buttons and finally calculate the results and display them. Let’s explain them one by one.

1. Creating the User Interface for the Calculator:

Here you can unleash your creativity to design the user interface of the calculator. I simply made a basic layout of a calculator with 16 buttons and a display unit. You have to construct the design as if you are drawing something in MS Paint. The added library will allow you to draw lines, rectangles, circles, characters, strings, and more in any preferred color. You can learn about the available functions from this article.

I have designed a user interface very similar to a 90s calculator using line and box drawings. Each box has a width and height of 60 pixels.

1. //Draw the Result Box

2. tft.fillRect(0, 0, 240, 80, CYAN);

3. //Draw First Column

4. tft.fillRect (0,260,60,60,RED);

5. tft.fillRect (0,200,60,60,BLACK);

6. tft.fillRect (0,140,60,60,BLACK);

7. tft.fillRect (0,80,60,60,BLACK);

8. //Draw Third Column

9. tft.fillRect (120,260,60,60,GREEN);

10. tft.fillRect (120,200,60,60,BLACK);

11. tft.fillRect (120,140,60,60,BLACK);

12. tft.fillRect (120,80,60,60,BLACK);

13. //Draw Second & Fourth Column

14. for (int b=260; b>=80; b-=60)

15. { tft.fillRect (180,b,60,60,BLUE);

16. tft.fillRect (60,b,60,60,BLACK);}

17. //Draw Horizontal Lines

18. for (int h=80; h<=320; h+=60)

19. tft.drawFastHLine(0, h, 240, WHITE);

20. //Draw Vertical Lines

21. for (int v=0; v<=240; v+=60)

22. tft.drawFastVLine(v, 80, 240, WHITE);

23. //Display keypad labels

24. for (int j=0;j<4;j++) {

25. for (int i=0;i<4;i++) {

26. tft.setCursor(22 + (60*i), 100 + (60*j));

27. tft.setTextSize(3);

28. tft.setTextColor(WHITE);

29. tft.println(symbol[j][i]);

Copy Code

2. Detecting Buttons

Another challenging task is detecting the user’s touch. Each time the user touches somewhere, we can know the X and Y position of the touched pixel. This value can be displayed using println on the serial monitor as shown below.

1. TSPoint p = waitTouch();

2. X = p.y; Y = p.x;

3. Serial.print(X); Serial.print(‘,’); Serial.println(Y);// + ” ” + Y);

Copy Code

Since we designed the boxes with a width and height of 60 pixels and there are four rows starting from (0,0), the position of each box can be predicted as shown in the figure below.

But in practice, the results are not like this. Due to calibration issues, there can be a significant difference between the expected and actual values.

Therefore, to predict the exact position of the box, you must click on that row and check its corresponding position on the serial monitor. This may not be the most professional way, but it still works. I measured the positions of all lines and obtained the values below.

Now, because we know the position of all boxes, when the user touches anywhere, we can predict where they touched by comparing their (X,Y) values with each box’s values as shown below.

1. if (X<105 && X>50) //Detecting Buttons on Column 2

2. {

3. if (Y>0 && Y<85)

4. {Serial.println (“Button 0”); //Button 0 is Pressed

5. if (Number==0)

6. Number=0;

7. else

8. Number = (Number*10) + 0; //Pressed twice

9. }

11. if (Y>85 && Y<140)

12. {Serial.println (“Button 2”);

13. if (Number==0)

14. Number=2;

15. else

16. Number = (Number*10) + 2; //Pressed twice

17. }

Copy Code

3. Displaying Numbers and Calculating Results

The final step is to calculate the results and display them on the TFT LCD screen. This Arduino calculator can only perform operations on 2 numbers. These two numbers are named variables “Num1” and “Num2”. The variable “Number” is given and taken from Num1 and Num2, and the result is obtained.

When the user presses a button, a number is added to the number. When another button is pressed, the previous number is multiplied by 10, and the new number is added to it. For example, if we press 8, then press 5, and then press 7, the variable will first hold 8, then (8 * 10) + 5 = 85, and then (85 * 10) + 7 = 857. Finally, the variable gets the value of 857.

1. if (Y>192 && Y<245)

2. {Serial.println (“Button 8”);

3. if (Number==0)

4. Number=8;

5. else

6. Number = (Number*10) + 8; //Pressed again

7. }

Copy Code

When we perform any operation, such as addition, when the user presses the add button, the value from Number will be transferred to Num1, and then Number will be set to zero to prepare to accept the input of the second number.

When the Equal button is pressed, the value in Number will be sent to Num2, and the corresponding calculation (in this case, addition) will be performed, and the result will be stored in the variable “Number” again.

Finally, this value will be displayed on the LCD screen.

Working Process

The working process of this Arduino touch screen calculator is simple. You need to upload the code below to the Arduino board and power it on. At this time, the LCD screen will display a calculator.

Now, you can input any number and perform calculations. Currently limited to two operands and one operator. However, you can adjust the code to have more options.

After performing calculations, you must press the “C” key to clear the values on the screen. I hope you can understand this project and enjoy creating something similar. If you have any questions, feel free to post in the forum or below this post.

For more exciting tutorials about Arduino boards, please click “Read Original“.