 This right here is a TFT touch display. With one like this you can display data, control projects with the digital buttons that you can make and place anywhere you'd like, draw on, or even make games. So in this video I will show you how this thing works, how to control it with code, and if you enjoy this type of content please do give the video a like and subscribe to the channel to see more sensor, screen, electronics type stuff like this. If there's something you'd like to see me review in future videos please do let me know in the comments. There's many TFT displays like this one out there but they all generally work the same. There's a couple things that change, resolution, the size, and if they're touchscreen or not. This one specifically is touchscreen, it says it on the back here, no it doesn't I lied, but this one right here is a touchscreen display and it comes with this nice nifty pen but you don't actually need it. TFT displays are really great for a couple different reasons. First off they run on pretty low power. This one runs on a five volt you can find ones that run on lower power consumption and you can use them with batteries so you can plug this into your Arduino and have it off on a little battery on the side like a nine volt and that thing can run for a pretty long time. The screen is pretty visible even this one that isn't crazy high resolution it's like 320 times two something, 240 so it's a 240p monitor but it still looks pretty decent as you'll see because it's not being stretched out into a massive 13 inches or whatever it's it's a 2.8 inch screen from corner to corner it's 2.8 inches and in my experience these are pretty good for basic projects you just three print something for cover and you have this and your Arduino like that and now you have a screen inside of a pretty thin box once these two are plugged in together they sit pretty flush like that. A couple issues I've had with these is they're extremely fragile for some reason this one right here I had in my backpack while I went on a trip and when I took it out it's hard to see but it's absolutely shattered and I didn't do anything crazy the screens lifted off one of the corners here it's pretty much peeled in the middle and cracked here too. This one is from an old video we did where we put these monitors in a liquid that's supposed to allow them to still work but they're inside liquid and somehow that liquid broke it the mineral oil video we did you can actually see it's right here I think what happened is it went between the screen and between the board and actually caused them to crack apart and yeah ruined something in there because this should still work even if this liquid's all over it. Another nice thing about this board is because it has so many different components you can either use all of them or none of them so it has a touch display it has the LCD inside of it and on the back it has an sd card reader in previous videos we've used these which are just like modules just for sd card reading this one has one built into it so you don't need this anymore you just take your sd card load whatever files you want on it and then slide this in the back kind of like a phone and you just take this you line it up now if you don't have this specific one that fits onto the arvina uno mega whatever that's okay most of the things I've talked about are the same and the code should be very similar so I'm just going to go and line it up in the bottom there line it up in the top and just press it together and I don't know if you can see it but this one's already showing signs of damage up here which I'm guessing is from the pen pushing onto it what I'm trying to say is these are not very durable but they're cool so plug it into your computer and let's look at the code also if you're interested on how the touchscreen in this works please do let me know I'm going to do that in the next video okay so now that we have it plugged in let's go into file here or sorry let's go into tools manage libraries and you're going to go into this library manager and you're going to search ate a fruit tft this is the library this one right here I have it installed already ate a fruit tft lcd library by ate a fruit for the 2.8 inch tft display this is the one I'll be using in this video a lot of them are generally the same so you can follow along this tutorial but it's meant for this 2.8 inch display this one's not actually made by ate a fruit it's a clone but that's really important so if you're using a 1.8 or whatever that measurement is there's a 3.5 there's a bunch of different measurements and different types make sure you're using the library that's meant for that one or for that style but again the code is very similar so you can still follow along with this one once you install your library go into file go into examples and find your library so in ours it's ate a fruit tft lcd library and we're going to go and open up graphics test this is going to be the first thing you run when you get one of these boards just to make sure it works the way you want it to work make sure you're on the right board up here I can see mine in the bottom here aduino uno on com 3 so I'm going to go and upload it to my board and give it a minute and you're going to see something happen to the board I know it's a little hard to see so for the sake of the video I'll try and zoom in as much as I can but you can see a couple colors just flashed by some text some line animation it's supposed to look like a like a 3d cubed wall like this or like that or even in the top corner so you can see there's like a wall here and a wall there one there and one there and there's some what is that triangles some lines you can probably barely see this on camera circles more triangles and at one point it should start looping back to the thing that we sought to start anyways this is a graphics test as the file describes so it's just going to run through a bunch of different things that you can do with this board now the cool thing with this is we could look through the code and see how they wrote text or how they drew a triangle or how they drew a circle and we could just copy that and use it for our own project later on so if you wanted a button you just take the square code paste it into your project and make that square button by using their code so it's pretty cool it's a lot it's a little file with everything you need to use this board so on the top here you can see there's the library declarations there's pin declarations there are different colors that they just simplified instead of you having to write this you can just write the word black then they do this which we do in every single video every single project you have to declare your tft display using your library and you have to give the pins that you're using and where they're located so if we go up here we could see the lcd cs a3 lcd cs if you click on that you could see it's defined as a3 right here this is just a way of making things cleaner but you can always just write a3 a2 a1 a0 into here if you wanted to down here we have our setup which we do again in every video we're going to declare our serial begin which means if you go tool serial monitor when there's issues with the board or when you reset the board you could see it draws different things and because this because this file project example whatever you want to call it is a benchmark you can see it's actually logging how long it takes for that specific animation to go through which is normal that's what it should be doing down here it's going to do a check for the driver but if you have the library installed you should be good to go and then here it's running through all the animations yeah so here it runs through every single animation so we start with fill screen text lines fast lines rectangles rectangles circles it pretty much goes through every single animation and if you want to see what a specific one does like let's see how we write text you go to text here and here's the function right here just highlight that so if you want to fill the screen with a color you do it right here you have to set your cursor before doing anything so the cursor is the same thing as if you're writing text into a box like if i put my mouse here you can see that line right here flashing on and off it does the same idea you have to place a cursor on the screen so you choose a pixel so in this case it's choosing pixel zero on both axes and then it's going to write some text in the color white and it says the text size is going to be one so we can't really see it on camera but there's a tiny little line at the top that says hello world in white under that there's the green stuff which we could see right here set it to green set it to size five write the word group so that's the big word you should be able to see on camera and then go text size two and text size one and write a bunch of jibberish so that's what you have to do if you want to write text down here is how you draw lines you have to give the accesses and the colors if you want to do an animation you just have to keep printing lines in different places and then eventually when you're done you just uh there's a reset screen if we get what it is tft.reset i think is what it is let's go back up here yeah tft.reset will clear the screen and go back to what your default color was which is black in this case if you want it to change that you just have to do fill screen black this thing right here tft.fillScreen black so you can actually instead of using tft.reset you could just use tft.fillScreen and then it will fill the screen with that color and reset at the same time so you don't have to do both you can just do one of them so that's how you do text and circles and all that stuff let's go into file again let's go into examples and let's go down to our library and let's select bmp uh bmp's are images they're image files like jpeg and all that they're ones that you can use on this board because this board is not very powerful comparing to your computer so you can't really put 4k quality images on this you have to keep these really low resolution files on your sd card which is what i did before i started this video so right now on my sd card there's a file called mini wolf dot bmp and if we go into the project here you could see that right here it's looking for bmp or wolf dot bmp or wolf sorry and then mini wolf dot bmp now this one doesn't really matter i'm not too concerned about it so i'm just going to delete that and i'm going to run this and the first thing we should see if we open our serial monitor is it goes through the same process as we've done before it looks for the board so here's the driver here's the board it checks the sd card which we'll look in a sec and then it starts printing this picture of a dog which is the mini wolf image so if we go in the code quickly i'm just going to put this to the side we can see that we did the the same thing as before we went through our board connections and all that but we also defined sd cs10 which is the pen used for reading off of your sd card then down here we declared the tft like we always do but one more thing we did which should be down here is we pretended as if we have one of these sd card modules connected to our board so because it's built in doesn't mean it's not a separate piece of the board if that makes any sense so imagine if i took this and i literally just glued it over to that that's pretty much what's happening over here there are two different pieces but they're on the same board so we have to go and do the whole process as if it's another piece connected so we're going to go and read off of that pin we're going to do sd.begin which is part of the library uh up here sd.h it'll it'll auto install it when you install the ate a fruit library and then down here we could see if let's say i unplugged the sd card hopefully i don't burn it but if i actually take it out and reset the board let's clear this see that you should see there's a failed error which comes from this right here so if if the sd card uh fails to begin that's what's happening here this if the sd card fails to begin print failed which if we go to the top here i guess it got lost by now but it does print it we have seen it before so you have to make sure that you have the sd card plugged into your board with the right image on it and then eventually when it does restart which takes forever it'll start to print the image here we go now for images you have to use this bmp draw function you put in your image you put in the coordinates for the image and then it goes and prints them so one thing i'd like to do is get rid of this loop here i'm just going to draw the image on its own and i'm going to change the coordinates to be 40 and let's do 100 so what's going to happen is i'm going to be drawing mini woof dot bmp at pixel 40 on the x axis and 100 on the y axis and then it's going to rotate it into every single corner like it's been doing because it's still inside of this loop so it prints it once prints it once prints it once but it keeps doing it at the coordinates i've given it which is 40 and 100 then down here is the bmp draw function which honestly i don't give any attention to because it does exactly what i'm asking it to do so i just keep it on the side but if you want it to do that you would just copy this over into whatever project you're doing if it requires you to put images on the screen and then just use that function like we did up here just like this so that's pretty much it for the tft display if you want to learn more about these you have any more questions please do put it in the comments or come to the discord where we have a lot of people that can help you out with these there's always somebody in chat that can give you some advice if you have any questions on this kind of stuff and if you want to see more stuff around this like how the touch part of the screen works and how it doesn't require your finger you can work with other stuff let me know i do that in the video separately from this one