Connect an SPI TFT with Touchscreen to your Arduino - ILI9341 LCD with XPT2046 Touch screen

these cheap generic lcd screens are great for connecting to microcontrollers such as arduinos but they can be a little bit tricky to get set up and working so let me show you how it's done [Music] hi and welcome to bytes and bits these little lcd screens are a great and quite cheap way of adding some sort of output to your microcontroller or arduino projects they come in a range of formats some of them plug in as shields onto your arduino um but the one i'm using here is just a generic uh screen so this one just simply has the connections along an edge connector here and you can then drive it from any microprocessor or arduino at all the one i'm using is it uses an spi interface which is a serial peripheral interface and that then can be driven by any microcontroller that has that interface built into it so let's first of all have a look at what spi is and then get this connected up and get something showing on the screen the spi bus is one of the standard ways of connecting devices to a small microcontroller boards its real advantage is that it only requires three i o pins the first of these connections is the serial clock which on an arduino uno is on pin number 13. this clock signal controls the overall timings of the conversation between any two devices it's really just a signal which goes between zero volts and five volts and zero volts and either the rising edge or the falling edge then is used to clock the individual bits of data across the communications channel now this idea of transferring individual bits one after the other of course that that's why this is called a serial channel but it does also give the limitations of this uh bus where because it's a serial channel there's a certain limit to the speed at which we can send data across it and of course having to send individual bytes of data as single bits one after the other that does mean that these um transmission these serial channels are a lot slower than some other methods and we'll see that that comes into play as we're working with our tft lcd screen a bit later on having said that on this arduino uno we can run the bus at 16 megahertz so for short um data transfers between sensors and so on and that isn't actually a problem at all so as well as this clock pin we also need two data pins one two allow arduino to send data to devices i want to allow it to receive back information now in this situation we have what's known as a bus master and that's going to be the arduino because it's going to be the one which is actually controlling all the timing signals and deciding who is able to talk at particular time so we have two lines then coming out one is this miso the master input slave output line and that is the line which allows slave devices so the actual peripherals that we want to connect to to send data back to the master device so that this information then is input into the master and on our arduino uno that tends to be on pin number 12. the second pin then is our master output slave input pin so this allows our master device to send information to our peripheral devices and that on our arduino uno is on pin number 11. so these three pins form the basic spi interface and for simple systems that's actually all you need but one of the powers of this bus is that it allows you to connect to more than one device so when we do have more than one device we need some method of telling the system which device we are actually talking to and this is where we need our slave select signals and these are just other digital pins that we need and basically when we have a 5 volt signal on a select pin that tells a device that you should not be listening and then when we want one of the devices to listen we will take it down to zero volts in other words it's an active low signal and then that device will start listening to what we're saying on the channel and the idea here is of course that we would only ever have one device active at a time or otherwise it's not going to work for the first device we usually use pin number 10 on the arduino uno as the slave select but really you can use whatever pin you want and as we say when we start connecting up both the touch screen and eventually the sd card reader then we can just assign other digital pins to perform those slave select signals so the three spi interface pins plus the chip select tend to be the ones that you'll find on your peripherals but some peripherals then do need other pins and signals to make them function correctly and indeed our tft screen uses those as well so we do have to pay attention to how our lcd module is made and the one i'm using and one of the very very common ones uses what's known as an ili9341 lcd driver chip and that's a bit of electronics which is usually built inside the lcd module and that's actually doing the conversion between your data and actually making pixels appear on the screen now that can be wired up in a number of different ways as i said before we're using the spi version with just simply the three signal cables and a couple of other control cables but we can you can wired up to receive parallel data where we send eight bits all at a time so if we look at the data sheet you can see in the highlighted uh connection we actually have five signals so we have our our serial clock we have our serial data input our serial data output our chip select and then this dc which is a data command line and that allows our controller to specify whether it's going to be sending data to the screen or whether it's sending commands to the driver chip so we can use pin number nine for this data command signal and then my board has another signal which is a reset line and we can connect that up then to pin number eight and that then gives us all the connections we need for our tft lcd module now on my screen i also have a resistive touchscreen attached and again that works through the spi bus so we're going to be using the clock the miso output the mos i input and then we'll have to have a separate slave selects um signal then for the touch screen and i'm going to wire that up to pin number seven on my arduino so that's really covered all of the spi interface connections we need between the arduino and the tft screen and the touch screen so let's summarize it all then with a table so we can see exactly which pins need to be connected to which devices now there are just a few final connections we need to make onto the lcd module so we need to have some power so we'll need to connect up five volts and zero volts um we do need to have the backlight turned on so all the lcd screens work by shining a light through the lcd panel itself and that's how we can see the colors so we need to supply 5 volts to turn the leds on and there is one other touch screen connection which we're not actually going to use on on this project now there is one last thing we need to take into consideration when connecting these together and that are the um logic voltage levels that we're using so our arduino uses five volts logic um so in other words whenever we put up turn an output on we send out five volts but the ili 9341 works of 3.3 volt logic so it's expecting 3.3 volts so if we do supply it with 5 volts we could damage the electronics so what we need to do is we need to take our arduino outputs and then feeding through a voltage divider to to take the level of the voltage down now we could do it through a level shifting circuit and if we were doing this on a proper circuit board that's what we would do but the simplest way is just use two resistors to create a voltage divider which will take our five volts and then we tap off um at the correct um place but by just selecting the correct am uh resistors uh to to give us the 3.3 volts or close to it to be honest so that gives us a final circuit diagram then including all of our voltage dividers and again i'll put this on the project pages on my website i'll put all the links in the description below we can go and actually view these correctly and then of course we're going to be laying this out in breadboard so here's here's a sort of a a view of putting it together on breadboard so if we have a look at the made-up breadboard then you can see we have our arduino we're taking our power connectors here from the five volts and zero volts and feeding them onto the power rails on our breadboard we're then taking each of the signals that we identified we need we're bringing them down onto the breadboard here so then being fed through the two resistors down to zero volts again on this side here and again i'm using this lead over here to bring my zero volts across to the other blue power rail and then we're taking those voltage lowered levels off on these green wires down to the actual connections on the lcd panel and then of course we're making the various connections between the um tft spi connections and the touchscreen tft connect connections down here so that then gives us our our full circuit and we're now ready really to start putting some software on that and trying it out so let's have a look at that next and see what we need to get this running so to program the um panel we do have a choice here um we can go through the standard spi library so the arduino development system does offer this spi library that lets us quite easily communicate using the spi interface and you can see here that we sort of basically have to sort of set it up and begin to begin an spi transaction we then have to decide what information we need to transfer over that channel and we do that and then we come back and end our transaction and again you can see here um it's talking about using these um slave select pins to control which devices are listening when we do that transfer we then of course have to work out how to drive the actual um display driver the ili 9341 chip and again we've got the data sheet here and you can see that there is um quite quite a large number of commands which it can obey and we would have to work the way through and work out how to get all of those going across on this spi interface and of course that is a considerable block of work the other choice of course is to try and find some ready written code which will allow us to drive this lcd driver and again as a lot of the times we find with the arduino system adafruit um a a company run by um somebody called lady ada they provide some very very good drivings driver software and library software and then they do have their own version of these tft lcd panels and they then provide a library software that lets you drive them now they're they're slightly different to the cheap ones that we are using in this particular project they have some extra circuitry in there to make it just slightly easier to use them but um having said that it's not at all hard to get it to work with our driver so we're going to use that library software and if you scroll down here you'll see it takes you through the ideas of of setting it up um some of these don't apply to our board because they're preset in the actual um circuitry um but you can see it talking here about setting up these imi one two and three jumpers um and that if you look inside the um data sheet for the ili nine three four one you'll you'll you'll see it talking about this and on why you need to solder certain things together to get it to work but again in in in in my um cheap panel that's already all done for us it's set up in a particular way and you can see here takes you through the connections you'll notice that it talks here about not setting up the reset pin um in the adafruit panel that is pre-wired to be um inactive so that we don't you don't need to worry about it um in ours we do need to connect that and that's one of the changes we need to make to this tutorial to get ours to work properly but we'll come across that in a second but basically down here then you'll see that we need to install the libraries and there is an adafruit ili93411 library and that's what we need to install to get um some some software that will allow us to talk very very easily to our lcd panel so let's jump into our arduino development system and once we load that up we simply just go to our tools menu and go to our manage libraries button and this brings up the library manager and once that's updated um the list there we can just simply search for the ili 9341 driver if we search for that you'll see that comes up then with this adafruit ili 9341 and that's the one we need to install of course i've already installed that so we just simply select the latest version and install that we then need to install the adafruit gfx library so if we search for that you'll see they have the adafruit gfx library and again you need to install that so just simply click the install button and and that will go ahead and do that so once you've got those two libraries installed if we close that down you'll you should be able to find then if you go to the file and the examples um area so if we scroll down on that um eventually in the bottom here and go you won't be able to see it on my on my screen moment but down the bottom there will be one that says the adafruit ili9341 library and inside that there will be if you can see that now there is one called graphic test so if we open up that example and let me just bring that into view for you okay so this example here is just a general purpose making sure that the um the lcd panel is working okay so you can see here that we need to use the generic spi library so that's the the arduino version and again that's going to be used for the very base level talking to the spi channel we then need to include both of our adafruit libraries and so we need to do a slight bit of modification on on our on our system so the moment we said that the adafruit shield doesn't need the reset button to be used but in ours we actually do need that and we connect that to pin it so we're going to do a define so tft reset pin as pin number 8. and then we come down here and this is where it initializes our our library so you can see here that um we're using the hardware spi pin so so it's 13 12 and 11. and then we have this one here where it then says what pins we're going to be using for the chip select and the data command pin and again we've defined them up here as as 10 and 9 as we did in our circuit but what we also need to do then is we need to tell it which pin we're using for the reset so we're going to use in there [Music] our reset pin the last thing we need to do to make this work is that we need to avoid what's known as contention between the various devices so at the moment um this this code would work if we only had the actual lcd part wired up but of course we'd wired up the touch screen as well and the the problem is that we now have two devices sitting on this spi channel and we need to make sure that they are in a safe state for us to start talking so we have the chip select pins remember they were active low so we need to make sure that both of the chip select pins are actually set high um otherwise when we start to initialize our screen with this line here our our our touch screen might still be listening and of course if if that is the case then of course it it it isn't gonna work because um it's going to get um confused as to which particular devices we're actually talking to so i'm just pasting a couple of lines here so really all we're doing is we're saying that our um lcd our tft chip select and our um touch screen chip select which we had on pin number seven we're setting them both to be um outputs and then we're setting them both to be high which will deselect both of the spi devices and then when we come in to do the tft.begin and that goes off to the library code to actually set up the lcd screen at that point it will handle the chip select for the tft uh and and turn that low well while it talks to it okay so so now we've got that all set up so again we have made sure that we include the reset pin in our setup again um that's not needed for the adafruit one but if you're using these um little red um lcd screens you do need to wire that up pardon me and and include that in the setup and then of course if we are having more than one device connected then we do need to make sure that we avoid any of the um outputs drifting low while we set it up of course of course that will then just cause confusion so we should now be at a state where we can um upload this to our arduino so let's see what happens when we do that so companion code and then transferring it up to arduino and once that comes across we can now see the various test routines running on the actual lcd screen so run through a series of screenshots and lines and various shapes and so on and then ends up sort of just going into some text and rotating that around in in various orientations on the screen okay so that all seems to be connected up and working correctly so let's have a look and see how we can get the touch screen working as well so if we take a closer look at the bottom of the circuit board we'll find there's a little chip which is handling our touchscreen and that is this xpt 2046 chip and if you have a look at the data sheet for that we'll see that that is a touch screen controller i see and again if if we have a look through that data sheet and we'll be able to see all the information about how it works and eventually down to the spi channel and there'll be a list of commands down here that we can give it to um to read the actual values coming from our touch screen but but as per usual then it's much much easier if we find ourselves a library and the library which i've been using is this one by paul strafriggen which is a a driver library for this xpt 2046 touchscreen so if if we go across then to our arduino development system um if we come in here and look at again under tools and manage libraries if that comes up and once that's updated if we then look for an xp t2046 and that'll search for that and then down here we should find um the one which i'm using in here so the paul struffer again one um and again if you install that then that should get you enough software loaded so for us to easily then start using this uh touch screen so let me just close that there really again there's a number of um examples so if we go to files and examples and again if you scroll down again off the visible script moment there's one group called xpt 2046 touch screen and if we load in the touch test version and let me just bring that into view here so again we have code which will let us just check to make sure that our touch screen is working and of course there's a few little things which we need to do to make this work with our particular setup so again you can see here we have a chip select pin so the the touch screen needs to be told or the library needs to be told which pin we're using for our chip select and again we're using pin seven on ours we're not we said we weren't actually using the irq pen so the way in which we initialize the library we don't want to initialize it with the irq pin we just want to use this top one here which we simply tell it which chip select pin we're using and then we turn off the interrupt version after that then it comes down and it starts to set up the boards and again because we have both the lcd screen and the touch screen um connected at the moment we do need to then make sure that we turn both of those chip select pins high to disable them so again here we need to set pin 8 and pin 7 to be outputs and then pin 8 and pin 7 to be high and at that point we can then go off and start to initialize the touch screen uh drivers and and it will then go off and do the communication and handle the chip selects correctly but again this this setting up here so making sure that our lcd screen is not interfering with the spi channel so that should be enough then for us to get this going so we have a quick look to see what's happening in the code here and really what it's doing is it is setting up the touch screen um setting the rotation which tells it which way around the screens in sort of portrait or landscape mode and then really it's just reading us touching it and and using the serial uh monitor to allow us to see what values it's getting back and that's all that's happening here just a little loop going through there if if we're touching the screen then it gets the values where we're touching it and then prints those out on the serial channel and again our serial channels working at 38 400 baud so let's upload that then to the arduino that's coming up okay let's then go into our tools and turn on our serial monitor and let's just make sure that we're set at at three thirty eight thousand four hundred board and then we should be able to touch the screen and get it to give us some values so you can see that we've got our values if i go up to one corner we see that our x and y values go down quite low if we then go across to the other corner you can see that our x and y values then increase and those are the values which we're getting back as as raw data from our touch screen we of course will have to then learn how to scale that to get it to be pixel dimensions on our on our screen but we can see that everything is working and we're getting back our our values and you can see there as well the pressure if i press hard it does vary a little bit on there so we can get a bit of pressure feedback as well okay so that's everything nice set up and working so really all i want to do now is to work out how to actually use the screen and use the touch screen so um if you want there are there are tutorials on the adafruit website and again i'll put links to to that so that you can go and have a look at the actual graphics library which they provide um the paul strawford touch panel um there isn't a lot to do with that so there is the setting up there then is this touched method which you can use to tell whether the screen is actually being touched or not and then the get point method which gets the values for that touch or the read data which brings back as well then the pressure sensing stuff but again the examples that he provides really gives you all the information you need to work that but what i'm intend to do then is on my next video i will actually write a little application for this so if i just bring that up and we're going to write a version of the pong game which will use the touch screen to move the bat and then the ball bouncing around knocking blocks so that's this block of code here which as i said um it it's both using the screen and it will it will also highlight some of the limitations of this type of screen in terms of speed and so on um but also then allow us to actually get round those using some sort of old-school really programming techniques and also then using the touch screen and seeing how we can use that and control rotation and and all those um nice little bits to sort of get you up to up and up to speed using both of these devices so let me just upload that for you so you can see exactly what we're heading towards so if i upload that into the arduino the sort of things we're going to be doing then is we're learning how to um talk to both the screen and the touch screen i talked about the idea of calibrating those numbers so this here's a little calibration program that's running so i put up a little x and i touch there and i touch here and that is now calibrate the screen so when i touch the screen and i have some little code again which i will take you through the next video which will actually turn all of those um values coming straight off that driver into actual pixel values so we now have little buttons we can touch on here so we can click on there and again we now have our pawn game where we're using our touch panel to control our paddle and then of course drawing things on our screen using sort of primitives to draw rectangles and circles um but then of course using different methods of um controlling that so when we used our other programming techniques um in our take edicts and so on we were drawing frames so we actually cleared the screen and drew a frame every every time we don't have enough processing power or speed with this panel to do that so we have to use sort of an over drawing technique where whenever we want to move the bat we simply overdraw it in black and then draw the new position so we're not actually updating the whole screen we're just updating the tiny bits that need to be updated but we'll cover all that as we go through the next tutorial so you shouldn't i have a working touch panel and lcd screen and if you haven't make sure that you are using that reset line and the chip selects make sure you're setting the chip selects too high before you start initializing each of the um tft and touch screen and just to make sure you don't have that contention issues when we first start up but you should be able to get that working and as i say in in the next tutorial i'll take you through actually putting together a little game which will show you all the graphic techniques and primitives that we use to actually build up the screens so make sure you check and hit the subscribe button down below turn on your notifications and that way you'll not miss any of the next uh tutorials so i hope you enjoyed that um have fun putting things together and i will see you very soon don't forget to visit the course pages for this project there you'll be able to download the code for this lesson and get lots of extra hints and tips you'll also get access to all my other programming electronics and gaming projects all the links are in the description below for more games programming electronics projects and retro gaming please make sure you like this video subscribe to my youtube channel and visit my website

Channel: Bytes N Bits

Views: 27,058

Keywords: arduino, ili9341, lcd panel

Id: 4DtuOeeYHys

Length: 31min 38sec (1898 seconds)

Published: Fri Oct 23 2020