ILI9341 TFT LCD to ESP32 - Full HOW TO for display, SD card and Touch. Using TFT_eSPI driver

hi and welcome to extraña chol in this episode we're going to look at connector and ESP 32 up to one of these are li9 three-for-one displays using the TFT underscore ESPI driver let's get cracking is that it so this is one of the available examples with the TFT underscore ESP I driver there's an absolute plethora of examples amazing driver library usually I needs a lot of very free driver virus for this players but this one I'll put its name on screen now it's called the TFT underscored SPI driver and it is excellent and the amount of examples are just tremendous we will also be looking at how to use the display with an SD card as a building at built-in SD card reader or back and how to use the touchscreen all these are supported by this library that I'm showing you today so first things first let's look at how we wire up this display to the ESP 32 so you've got blackboard you're not is certainly on my version of this board there is no silkscreen identifying the pin connections on the top of the board would have been really handy I've actually not seen any with that on but presumably there are somewhere anywhere for your convenience I'm going to put the connections across the top of the screen now you'll also find these on my website link to the project page for this display down on the street now as well so you'll find that print out or just refer to it to make it easy when you connecting or because it's around painting the balls to work out which connections where when you're trying to count down you a traverse all right it's just that pin so anyway your convenience those are the connections so let's make a start first one voltage to bcz ground to ground next I'm going to do is the led LED and connect them to the VCC the mossy morresy whatever the blue wire is going to pin 23 thundered SPI Hardware caching for the SP 32 the clock ACK cook the yellow wire goes to pin 18 and the green wire chip select goes to pin 15 the reset the white wire is going to pin for the data connection the DC the pink wire is going to pin to notice that we haven't connected up the my soul my saw is the connection when you want to get data back from something we don't need any data back from this display so I've left it unconnected so let's have a look about library so the up to tools manage libraries and type in TFT underscore ESP I and the one you want is this one here it says baa baa baa I'll click install and close a window so by default this live is actually designed to work with the i/o i-93 for one it will work with several other screens as well and you have to make a few adjustments in a header file if you want to work with other screens you also need to make some adjustments for whatever microcontroller you're using we're using the SB 32 so we just need to make some changes in the header file for that it's just much fun commenting some lines and I'll show you that you know so I'm going to file preferences will get you your sketchbook location I know I'm going to do is I'm just going to copy that item there cause that down open the file a window pop my mouse in there place that in and I've got my sketch folder you can see some of the things I've worked on in the last few weeks double click on libraries and in there you'll find it many libraries that you've already installed perhaps saying is he some the ones I've had and then also the fan is TFT underscore the SPI that we've just installed so let's open up that folder and then the important file is use a set up dr. H here you want to be open that in an editor of your choice it's a simple plain text editor so I'll click Edit and that opens in notepad for me and if you look down here talks about different processes and I'll just go a little bit further down also I can see that my default is set for the iodine 90 for one driver and then you can see all these other screens that are supported so if you're using one of these other screens and I'll come back to this software when I use one of these other screens as well and show you but basically all you need to do you need to accommodate the 9:34 one and comment in the whatever let's say the st7 735 is that what you if that's what you're using however you've probably watching this video because in the title it says we're going to go with the 934 ones to display so leaving that as it is and then scrolling down bring this into view you can see says pin numbers definitions for ESB 32 setup you can see what we need to do is to release these into the wild for all those and also just further up here you will find let us say yes we've already got some default ones in there which we can just uncomment 4cs the chip select DC data control and reset we're just going to uncomment these for the ESP 32 here so I'll save that that down and we'll bring up an example so examples down to the bottom TFT ESPI and this is we can see there are awful lot of demos in here various things even an ePaper them or there we've got a 3d 9 3 4 1 it supports 320 by 240 pixel board that's what I'm going to go in for these demos and the demo you saw at the beginning is the meters example here of all there's an awful lot you could try out here just for fun so whether they look like I'll bring that in maximize that and nobody who need to do now is do a compile and upload and there we go I'll bring the display on the screen you can see and it's worth looking up the github page for this I'll put a link in the description below that explains about a lot more about what's happening here in fact you'll find the latest version of this driver on the github page which actually newer than the one you'll kept in the are doing is library manager so if interested in getting the latest of bugs fixes and extra facilities then I suggest you onto the get to hope you just need to install it as a zip file so that's that let us now move on to display an image from the SD card and looking on the back of the board you can see the connections for chips left Marseilles my saw and clock just solder a pin header on there and you're away so coming from left right we have the green wire which is the chip select and that goes down to pin 5 on the ESP 32 we then have the blue wire which is mossy and that goes down to our normal pin 23 which we've already connected to for the screen as well and then the next one we have is the purple wire which is my saw which goes down to pin 19 and the last one is the yellow wire which is the clock that goes down temp in 1802 now let's have a look at the software so the good to look at displaying JPEG images on the screen just a check make sure if the SD card is working what you need is a JPEG decoder library and the one you'll want is go to tools I manage libraries again it's exciting isn't it I'm typing jpg JPEG the quarter and the one you want is this we're in the middle here pie Bodmer and the rest of those people whose names I probably wouldn't be very confident at pronouncing so make sure you install that and then you've got a couple of options there is a demo which I'll show you now top examples in the TFT library so I go down here come on so many libraries in there and nowhere was it in generic and then ESB photo SD card JPEG I'll open that up I'm not going to use it but I'll open it up and what this does you need to put some images on your SD card the images you will find if you look in so you need to go to the libraries folder just showed you earlier go to the JPEG decoder that you'll forward that you're finding the virus folder into folder called extras and you'll find all the images that this program uses in there because they need to be those exact images named exactly as they meet named exactly as they are when you look at them because we go it'll be calling up and trying to display them from your SD card under those exact names so what I did is I wrote a little slightly different version that I best man on it so you'll see a lot of Bodnar's description up at the top there as well as my own or modified additional header there and baseball mine does my software does is it just scans your roots of your SD card set any files in fact any files so the deep need to be just JPEGs it's going to get yourself in it is so make sure you've just got JPEG files in the root of that for this demo and it will look through your root and the file it finds it will actually display it so it means you flexibly can just put your own images on that also they oughta Bodmer example look for example from the TFT ESB I lightly have them set so I think it was 480 by 320 or 360 or something like that which is a wrong pixel size the wrong resolution for this particular screen which is 320 by 240 so my images are all 320 by 240 images that I've created don't try and put big JPEGs on there you're just going to get a massively zoomed in section this software as far as aware this JPEG Decorah software will not scale it to your screen it's not that clever if it is a scale option I haven't really looked in depth I doubt the world will be because that would test that you know some computational power which is on a little micro controller even one as powerful as the amazing ESP 32 you're not probably gonna get that please write the comments perhaps the wrong and it does scale up and it's fairly fast but I think I'm right so if you go to my website you'll find and the links on screen now and the D link in the description below you got there you'll find this software this sketch that I've written a long with the folder of images that I'm going to display for you now in the correct resolution you just need to whack on to your SD card so let's look at the demo running on my screen and that can pop into their fatty causing upside down kind of thing into the slot there let's just zoom in and what power so Mountain shot amazing looking tiger asteroids on outside the ISS ah cute kittens what would eat what would eat at me without them and of course it look a treat pretty girl and back to the beginning Celestine let's get the touchscreen working so just look at the wiring first have a look at the underside of the board it's also the touchscreen is got five main connections for us using this binary we don't need to use that top one and i RQ b keep nor it's not going to be connected the next one D or optical view is d0 it's basically data out is data that's going to go back from touch controller to the ESP 32 to your micro control that di M is there to it so even I'm sending information to the touch them to control over that connection and then see s chip select and clock so some look at what they look like on the board so starting with the data act that actually connects via this purple wire to the my saw which is the SPI input pin egg is shared with the other mice or connection for the SD card the SPI boss can be used by many peripherals which ones using at any given time is determined by that chip select connection so only one device will ever be using it depending on whether it's been enabled via that chip select so the next one along is then the N data into the screen so mazi is the one where we send information from the SP 32 to whatever so that any look it's connected with this blue wire coming around on to the mazi connection at the screen I could have connected that to any point where my mozzie was so I've got one coming down from the top of the board from the SD card as well I could have sort of looked over the wires that way but for me it will be most convenient just to put it right at the bottom there and let on to the mazi connection of the actual TFT screen the next one is chip select and that has to be unique every device and spi boss has thought its own chip select line and we just got I think when one connection left along this top or side of the sp30 which is connection pin 21 and luckily the driver software that we use it wants to see the touchscreen on pin 21 if you were to use a different pin then he can change it in that set of heads file that we looked at earlier but stick with 21 and everything's gonna work straight out of the box and the last one is clock so then again got a little jump but going from the clock correction jumping on to where the clock collection is for the screen as well as I said that is a shared bus my saw Marseille and clock can always share all peripherals so that's the wiring done assemble with some software to demo it okay there are no additional line wish to download so I need to do is consume the examples we've been to already so it's just popped down here to where the TFT ze SPI is whoops and if you go into generic and chooses on/off awesome so on a bat I'm what I'm going to do just must make it a little bit more interesting this basically a button going to appear on screen with it on and off side to it you press the on and it will just highlight it on so let's just do a little bit more than that let's have an LED lights not wanna press the on button so we just come down here and in the set up the one to put it was that pin mod then Lord Frey pin 27 - I cut whoops whoops again and then going down to the loop we're going to just whack a line in here to turn it on and off as we need I'm dying to hear that set it to true they're so apart from that the chords will be identical to the actual example chord this is also we have something a little bit more visual too sure so that's all of that and how about in action okay so let's power it up and the first in line to see is actually calibration it says twitch katanas has indicated me to calibrate the SP 32 so it knows exactly where you're pressing this one needs to be done once once you've done it it was stored in the SP 32 permanent memory so even though you take the power off and unplug the SP 32 it will actually remember that so plug it in again and you won't see this screen again so it'll be calibrated just the once so I using my chunky fingers you can choose one of those little stars friends but chunky fingers I'll do me so that corner that corner that corner and that corner then straighten the demo so as we squatted it when we pressed the arm we should see this led here gets to pin 27 come on and there we go um ah ah ah ah off honestly I could do this as seconds before getting bored it's another problem there we go so simple demonstration taking control real-world objects using your touchscreen so that's all for now as a summary in this episode you've learnt how to actually wire up and right to this touch screen you learnt how to use SD card and read images of it and display them onto screen and you've also learned how to use the touch screen facilities of these IO i-93 for one TFTs using the TFT underscore ESP 32 library so hope this has been a really useful episode if you liked it give it a thumbs up if you like to see some more hit the old subscribe button down below and thanks very much to my patrons and thank you very much for watching till next time [Music]

Channel: XTronical

Views: 195,062

Keywords:

Id: rq5yPJbX_uk

Length: 19min 43sec (1183 seconds)

Published: Tue Apr 28 2020