Arduino TFT LCD Touch Screen Tutorial

hello Dani here from how mechatronics tocom in this Arduino tutorial we will learn how to use TFT touchscreens with Arduino for that purpose I compose the following three examples the first example is distance measurement using ultrasonic sensor the output of the sensor or the distance is printed on the screen and using the touch screen we can select the units either CM or inches the next example is controlling on RGB LED using these three RGB sliders for example if we start to slide the blue slider the LED will light up in blue and increase the light as we would go to the maximum value so the sliders can move from 0 to 255 and with their combination we can set any color to the RGB LED but just keep in mind that the LED cannot represent the colors that much accurate the third example is a game actually it's a replica of the popular Floppy Bird game for smartphones we can play the game using the push button or even using the touch screen itself now we will go through each of these examples and step by step explain the codes behind them but before we do that let's see what Hardware we need for this tutorial as an example I'm using a 3.2 in TFT touchscreen in a combination with a TFT LCD the Arduino Mega Shield we need a shield because the TFT touchscreen works at 3.3 volts and the Arduino Mega outputs are 5 volts for the first example I will use the HC sr4 ultrasonic sensor then for the second example on RGB LED with three resistors and a push button for the game example also I had to make a custom made pin header like this by soldering two pin headers and bend one of them so I could insert it in between the Arduino board and the TFT Shield here's the circuit schematic we will use the ground pin the digital pins from 8 to13 as well as the pin number 14 as the 5 volts spin are already used by the TFT screen I will use the pin number 13 as VCC by setting it right away high in the setup section of the code okay now we are ready to go to the arino code I will use the utft and utouch libraries made by Henning Carlson here I would like to say thanks to him for the incredible work he has done the libraries enable really easy use of the TFT screens and they work with many different TFT screen sizes Shields and controllers you can download these libraries from his website Rinky Dink electronics.com and also find a lot of demo examples and detailed documentation of how to use them okay after we have included the libraries we need to create UT TFT and U touch object the parameters of this object depend on the model of the TFT screen and shield and these details can be also found in the documentation of the libraries next we need to define the phones that are coming with the libraries and also Define some variables needed for the program in the setup section we need to initiate the screen and the touch Define the pin modes for the connected sensor the LED and the button and initially call the draw home screen custom function which will draw the home screen of the program okay now I will explain how we can make the home screen of the program with the set back color function we need to set the background color of the text black one in our case then we need to set the color to bite set the big phone and using the print function we will print the string Arduino TFT tutorial at the center of the screen and 10 pixels down the Y AIS of the screen next we will set the color to red and draw the red line below the text after that we need to set the color back to White and print the two other strings by how to mechatronics dcom using the small font and select example using the Big Font next is the distance sensor button first we need to set the color and then using the fill round red function we will draw the rounded rectangle then we will set the color back to White and using the draw round rack function we will draw another rounded rectangle on top of the previous one but this one will be without a fill so the overall appearance of the button looks like it has a frame on top of the button we will print the text using the Big Font and the same background as the fill of the button the same procedure goes for the two other buttons now we need to make the buttons functional so that when we press them they would send us to the appropriate example in the setup section we set the character Zero to the current page variable which will indicate that we are at the home screen so if that's true and if we press on the screen this if statement would become true and using these lines here we would get the X and Y coordinates where the screen has been pressed if that's the area that covers the first button we will call the draw distance sensor custom function which will activate the distance sensor example also we will set the character one to the variable current page which will indicate that we are at the first example the draw frame custom function is used for highlighting the button when it's pressed the same procedure goes for the two other buttons so the draw distance sensor custom function needs to be called only once when the button is pressed in order to draw all the graphics for this example in similar way as we described for the home screen however the get distance custom function needs to be called repeatedly in order to print the latest results of the distance measured by the sensor here is that function which uses the ultrasonic sensor to calculate the distance and print the values with seven segment num font in green color either in cenm or inches if you need more details how the ultrasonic sensor works you can check my particular tutorial for that back in the loop section we can see what happens when we press the select unit buttons as well as the back button okay next is the RGB LED control example if we press the second button the draw LED control custom function will be called only once for drawing the graphics for that example and the set LED color custom function will be repeatedly called in this function we use the touch screen to set the values of the three sliders from 0 to 255 with these if statements here we can find the area of each slider and get the x value of uh each slider so the values of the x coordinate of each slider are from 38 to 310 pixels and we need to map these values into values from 0 to 255 which will be used as a pwm signal for lighting up the LED if you need more details how the RGB LED works you can check my particular tutorial for that the rest of the code in this custom function is for drawing the sliders back in the loop section we only have the back button which also turns off the LED when pressed next is the Arduino game example but I will leave that one for my next tutorial so that we can better understand it as it's a bit more complex thanks for watching and for more tutorials and projects visit my official website how mechatronics tocom

Channel: How To Mechatronics

Views: 1,602,649

Keywords: Tutorial (Media Genre), Thin-film-transistor Liquid-crystal Display, Arduino (Brand), Smartphone (Video Game Platform), Liquid-crystal Display (Invention), Touch Screen, TFT Touch Screen, TFT, LCD

Id: 9Ms59ofSJIY

Length: 7min 58sec (478 seconds)

Published: Mon Dec 07 2015