Skip to content

TFT LCD 2.4″ Touch screen shield tutorial

 

Hello, this a tutorial for beginners about the TFT LCD touch screen shield mounted on an Arduino UNO board, where we use some basic display functions and a little touch function, all this with simple and detailed functions.

Before proceeding, if you have the white screen problem or touch not detected or inverted you can check my previous tutorial it may help you with such issues ( Go to tutorial).

Wiring:

Sans titre

Just mount the thing, it’s a shield 😀 There’s a breakout version of it but I don’t own it for the current moment.

Libraries and Codes:

-Library from GitHub: Download here

-The codes I’ve used in the tutorial with comments: Download here

 

Overview:

The first code is about lines drawing and this is the result:

20181121_194608.jpg

 

We draw 3 lines with 3 different functions that you can find the code above with comments about each one.

the first one consider the starting and finishing  position, the two others are about he starting postion and length.

 

 

 

 

20181121_194748

 

Second code permits you to draw 2 rectangles one empty and the other one is filled.

these functions consider the top left point and the width, length of the rectangle.

 

 

 

 

 

20181121_194828

 

The code about circles takes the position of the center and the radius value and also can be filled or empty.

 

 

 

 

 

 

20181121_194901           20181121_194931

The triangles code consider the positions of the 3 points and in the second one I used a little loop to change the color, it’s not that visible.

20181121_195021

 

 

Displaying text is like the OLED, you set the cursor, color, size… and you can write you text it does consider the rotation too, you can draw rectangles and circles then write over them the display takes the last thing in the program.

 

 

 

 

 

Here comes the “function of the show”, the code about the touch function creates two squares with different colors and then we associate every one with a simple function, you can check the paint example for more functions, this one shows the basic way of creating a button and it’s by associating the position where the square is drawn before, to a function like writing a text or clearing the screen then going to another page… it’s up to you now to create what you want.

Yassine View All

Automation and Electrical Engineer, Electronics amateur trying to share my little projects.

One thought on “TFT LCD 2.4″ Touch screen shield tutorial Leave a comment

Leave a Reply

%d bloggers like this: