#83 Colour Touch Screen TFT LCD for your Arduino - Cheap & Easy

and welcome back now as you can see from the workbench I've got a TFT Brunning and yes you can learn how to do this on your TFT - and guess what it's just not that difficult and it builds on the previous video that we talked about not using so many hard-coded switches and things on your project well on this one you don't even have to have a switch you can do see the screen because this particular screen is a touch screen look that even looks like a button there let's have a look what happens when we touch that you can use your finger you can use the little thing they come with it there's a little tiny plastic pen door of lost now of course oh and there we are it's running again so hello Arduino it's yeah this is what it's all about a very quick video on how to implement this shield now this is a full-size uno shield and it just plugs straight in on top and of course there are well some caveats or at least the price to pay for that there is them this one here this is marginally smaller this one here is a 2.4 this one is a 2.2 or believing in this is on the back yeah it's a 2.2 but apart from that that pretty much the same obviously the pinout is totally different for this one this one just plugs into your no need out to think about it well not too much and this one of course has got one set of pins and you do have to think about that additionally whereas this one runs on your you know and you don't really care about anything like voltages on this one as you noticed on the back here I actually got a little note to myself to say 3.3 volts well brackets maybe I think it is 3.3 though more to the point the some of the control pins might be 5 volt tolerant I think the VCC is 3.3 anyway I put a maybe on there to remind myself just to double-check that right let me reset this video's brightness controls of a self didn't it down of it so that you get a better looking at this and okay let's say this up front I want to tell you again when you're looking at this LCD here this background that comes across on camera sort of a what does the blue color isn't it really in real life is not it's pitch black okay so that's pitch black yellow purple green it just looks better in real life like most things on in the LEDs and TFTs and things too so let's yeah handoff it runs again right let me reset the camera so they've got the exposure correct and then we'll talk a bit more about it okay here we are lit now was it easy to do this hmm sort of well no really it wasn't it was a lot of faffing about with libraries and finding libraries didn't work and then finding some that did and being led down a rabbit hole really of what to actually use and the Internet's of wash with people saying I've got this TFT screen and it looks vaguely like on like this one or this one and this library doesn't work on like it is a white screen and those posts are probably you know two three four years old even well things move on don't they in the are denote world and the libraries that we're using on here are in fact Adafruit libraries well Adafruit isn't known for sitting still and they've managed to change their life as I guess over the last few years and it works very nicely with this let's have a look first of all if you're thinking well yeah I'd love one of those but they're going to be expensive aren't like well they can be I mean certainly if I was to buy this from a UK supplier then I think yeah that's that's a little bit pricey for me I don't know you want to go down that route and of course if you've either an Adafruit themselves their pricing as well I don't think we can get them in the UK directly from Adafruit you can in the u.s. though but once again they're pricey and it would probably stop me using in a project but luckily of course our Far East and friends have jumped on the bandwagon and they make it so much more affordable so let's first of all find out where I got it and how much it costs that you can decide yeah I'm interested in one of these what what can I do with it what I know that the price is right here we are and indeed this is where I got it from now I've had this in my little box about must be six months because I haven't had a project yet in which to use it I most certainly do have now so I thought right now is the perfect time to detail and get it all up and running and well the downside for me of course is that this is a shield and for those of you who have been watching my videos pretty much as I released them you know that I've only just replaced smiled we know who know full-size board fairly recently because I use the other one up in the loft so um I've just replaced this one now I'm going to have to replace it again however the replacement Uno board I got here was I think it was 2 pound 42 which and well I just double-check that but it's it wasn't a price I could argue with so here we are anyway at the EM well bang good I got it from what's that in dollars and we have a look so in US dollars six dollars seventeen that's not bad as that euros 5 euros 71 while the currency can be Australian dollars or suppose is an Australian dollar in there I don't really know I'm looking for actually a US dollar movie nope can't find it ah don't they all scream I think that's what maybe that it maybe eight dollars 30 Australian dollar ok well that's I think from a gbb view that's not a bad price at or penny under five pounds and you can probably get it a few pennies cheap in this if you hunt around Aliexpress or someone like that but that's not too bad is it and of course remember it's not just the shield is a touchscreen so really you're buying not just a color monitor that you're buying the ability to draw buttons on much in the same way as I've done down here because that means you don't have to add any extra buttons to your project now of course there's not totally without pain but well we'll come on to that in a minute now the sketch I'm using which just to demonstrate this is well please don't use this as an example all right it's just a monolithic chunk just to prove that we got it working but what you can see here is that I'm using Adafruit libraries now these are standard Adafruit libraries I haven't touched them the ones that are current as of this video so April 2017 and I'll put a link into the video below this one and also put a copy of these in my github folder just so you've got the actual libraries that I'm using now the good thing about using the more modern log is the updated libraries from Adafruit is that you can include different fonts that will stop just before you think will be I can have 20 different fonts maybe can't you'll run out of space long before you get down to your fourth or fifth one okay but I have included one here this is the bold 24 now I can't even actually even fit this one on particularly well now I'm about even used it yes there we are that hello that's some 24 point but I couldn't fit anything else on but in my particular project I needed a large font and I'll comment that in a little while you have to define all these pins this particular sketch of controvert where it came from it's probably an example one with a difference libraries they put some of these colors and things on here so that we can just easily use them which is what quite useful I think isn't it really and what else someone look I will have put the colors into an array you'll see why in a minute well if you've watched the demo you might even have figured it out now the touch aspect of this screen is of course optional you don't have to use touch but if you do then you have to declare a touch screen object this one here and that uses up more pins of course in fact it uses up the analog pins or some of them anyway well here it says a three and a two but there are a lot pins on here that use we'll talk about that in just a sec so having leaf Laerdal this so basically you've got an object for the outputs to display all this text and then you've got an object this TS touchscreen for receiving values back what you actually get back is a touch screen object that gives you the pressure and the X&Y coordinates now let me unplug this because I want to show you the actual module just so that you get an idea of the way we've set it up because the very next statement I believe is all about setting rotation you can see this bit here and I've got it here in landscape because that's probably the way you would use it but you might not you might want it like that and it's no good with writing going that way is it so let's just unplug all this and we'll talk it through right so here we are then with an unplugged screen is reset button on here the way that does reset the entire arduino underneath just linked through so underneath ok tells you it's a 2.4 LCD screen that's fine the analog pins are down this end some of that plugs in like that this is the analog end isn't it here on the board now that goes in like that and then there's some power stuff up here and this end of course uses all the standard SPI and a few digital pins to go with it now it's also got an SD card now if you don't use the SD card slot reader via mail reader writer then you will free one more pin but there's not many pins you can use about let me just double check that right according to an Adafruit themselves they say that you've got the free GPIO pins you've got two three four five just four pins and if you're not using that SD card you get 12 as well otherwise it's going to use them all up which is the price to pay phone LCD screen however as I say at the price of this which is five pounds plus a cheap who no board like this which I'm pretty sure was about to pound 50 or so it's not a bad combination and you can potentially even view this as a sort of a self-contained module and have a different Arduino even a pie board or something to connect into this one to send data down to just an idea what we're ready well really it's this nail on the head a minute just how much this uno board cost me because of a sub just ordered another one because I'll be using this one now on the project which will come on to very very simple project but I did need a screen listening how much the uno costs me right here we have it on the screen I've just bought this this is the correct price I paid to pound 36 and it doesn't show the dollars but dollars and worth about 125 so it's about probably about 350 dollars something like that okay for an Arduino Uno full-size so we are 236 for that and as I say the actual screen was a 5-pound from banggood so as a price that's not too bad at it right let's move on to the actual project that I'm going to do and I could show you a bit more about the orientation and stuff because these important that gets sorted out and yeah it's pretty easy to do actually right so the orientation of the screen by default I think is with not logging in this top left-hand corner here and you there are for this rotational steps you can have nothing in between so you can set the rotation to zero which is the default baltra mode or 1 or 2 or 3 so that's pretty simple isn't it really having set it in the correct way and you can change this on the fly if you really want that the demo program does just that it display some text and then orientate to the screen and does it in a different way and you do the orientation then on the fly and you just got to remember where your zero zero is for the x coordinates obviously across the top so X that way why that way and that's the format for most of the the functions that call anything to do with positioning so set cursor for example will expect an x value first pull a bottle Y now I was going to take you through my little project over at second for sales because I think the huge big monolith thing I just threw together as a demo actually works quite well more just to show a few of the features so let's look at that and I'm going to plug all this back in again okay so I can show you what it's doing while it's doing it that makes sense so let me do that and I'll be back in two SEC's so this being a shoe this literally does plug straight in and then you can see whether the pins just fall into space you should never have to force it it will in fact just let you see just get them all lined up and push down so they're there shut so tight fit with the large USB socket here and the power jack but I see it all comes together now now the beauty about the shield of course is that you have to think about wiring is no DuPont cable was nothing like that but what do you think the downside is yeah how do you access to the rest of the pins and of course yes I do have pin headers in there but just thinking well it helps to put a DuPont cable such as this one here so here we have some DuPont cables well female ones if I was to put those on there I suspect it's all going to fell on this board so that's not brilliant and of course I wouldn't want to connect things to this so I'll let you know how I get on on that score normally I think when you have shields you can add in some additional spaces I don't mean just pull it apart like I'm doing now I could put on another set of header pins in here just plug them in and then push this in on top of that so of course it would mean that this would sit further away from the board but at least I could get to my pins on it in the inside there and I'll lay it out how get on with that so okay that's all in let's just plug the power and USB back in now if you do this and all you end up with a white screen it means the libraries haven't worked for you and the other connections wrong now I'm allowed to make a couple of minor change is to my but not the sketch well I suppose it is the sketch it's the way it calls the values within the library so the begins payment for the TFT itself you have to tell it what sort of board you got now this one just check my notes here it's an SPF d5 408 there it is on the screen look so SPF d5 4:08 and there are literally there must be a dozen different types of board out there and the problem is that because the boards use different chips people use the wrong libraries the wrong boards and then wonder why nothing happens additionally not just that the pin assignments here sometimes change between one release of the board and the other so you if you've got a working sketch and it does happen to be using these particular pinzhi of a touch and then suddenly you plug in a different shield and the touch stops working because the pins have been changing you have to make that amendment in your code it's tricky and it's frustrating when it doesn't work so a lot of people have got this bit working but not the touch and the touch of course I think does add that extra value to this that makes you want to use it but doesn't me anyway okay so let's have a look at the code then I'll leave this running even though there's a little bit of glares and the trouble is this green is so shiny and I've taken off it comes with this protective shield on here but that's when you get it it's all stuck on nice and shiny and tight but of course I've ripped this off so many times now it's all looking a bit rubbish this one here hasn't had its paper taken off yet so you can see that's that's nice and clean and you probably use it like that but once you start peeling it off then it goes back like a piece of old cellophane looks a bit rubbish collector inkling so off with that and we just have to put up a big layer right we'll leave that running there well that's flickering you can see in the background that's actually the ceiling the fan behind because it's warm in this office today right enough of that back to the code right as I said this was a just something I threw together to get that this writing all up here it wasn't going to go through it but having thought about it if you're a beginner at doing this it's probably easier to read something that is a monolith then as you're trying to pick apart a few functions so we've been through the beginning this where we declare the library we've defined a few of the pins what goes where okay the colors are sort of a plus we just make it easy I've got the colors also into an array here so that when this bit is displayed we can choose the colors from an array and then what okay we do this touch screen the sensitivity the minimum of X and pressure is up to you you can decide what you want so if you want the light is that light touches you could put a set of ten year you could put two or three assuming that there's no noise on here zero means no touch but as we know from all analog inputs sometimes it can be a bit noisy and what you don't want is for it to trigger a touch when nothing's happened so it's set here to ten I don't really know what we've got a maximum pressure really I mean you've either press T or you haven't I don't want a maximum pressure anymore you pressed it so hard that it's not registering as a touch anymore I think perhaps if this was portable and you were to grab it like you do your phone maybe it doesn't want to register as a touch well whatever it's available it's expecting that here so okay so here we're doing a reset that's what basically initializes everything now look here this is probably quite important as I said this is this DFP 50 408 yep and you have to specify that in the begin because otherwise it doesn't always detect which screen you've got but it might require that now as a parameter but that's what catches people out there using the wrong value here and then wondering why their screen doesn't work so make sure you're using the right devalue you'll have to look into the library the TFT library well the next ones rotation that I've set it to 3 which is 270 I guess let so look if that was if that's 1 0 now that'd be 0 1 2 3 yes that's right now I've got my cable curled up so yes that's 3 that's all the way around 270 degrees and I'm just picking a random number here just for this purpose he was on picking random colors and partners so to clear the screen there is no clear screen what you actually do you fill it with a black color the cursor is all a bit hit-and-miss quite frankly maybe there's a program I would be at all surprised if there's not a program out there to generate some parameters for you to say the placement of buttons rather than you trying them out for the umpteenth times I want to get into the line but I've not bothered looking for one I'm just guessing half the time for this is just not that critical so you set your case remember that 0 is in top left and there's how many 321 image was it on this one it says 240 by 320 now don't think this is any different so you can guess how many pixels down you are you're never going to watch any HD movies on there and if you look at the speed at which this is being generated I mean you can actually see it building up each line so it's not fast there are some libraries out there that a quick ever I'm not particularly after speed I'll just want functionality more than thing else there's my large font but I'm using for my hello now the way you do that with the new Adafruit libraries you say set font and you give it a reference to the font that we've included or way up the top somewhere and there's the include statement and that's what we're referencing in our kinds a little bit later on anyway you can set your text size that's all relative between 0 1 2 3 if you go to 3 though you probably won't fit more Nessa's on here and all this does then is go down the screen deleting x' and places putting in some text the color clears it down again a basic displays what you saw on here so it starts off with enlarged hello then the Audrey Knights bit looks smaller take size 1 and it does a lot in different colors there's a little delay now this bit here it's just getting a random color and re displaying this as you can see the colors are changing as we're looking just picks a random color out that ray all pretty simple stuff but quite impressive to watch and then and then it draws the buttons it's not even the button really it's just a picture that we've declared will displayed on our screen so I've got a white blob with the word okay in it now when I read that I'm saying that white one types as a routine down here this goes and gets it so the white one touch so it's going get me my touch I've even cheated on the outside look I don't care where you touch I'm not looking for the boundaries of that button so I could touch it up here see but normally a my other sketch you do have to touch it in the button but then all you have to do is take the values from the button that you've created here it's the same same size isn't it the area in which you are allowed to touch as part of a button must be by logic the same size that you've made your button here and as it says it's the X&Y coordinates the width the height that's the rounded corners the 3 if you don't walk around in rectangle you just say phil Rex without the round a bit in the middle and omit that parameter all very simple stuff and that's it that is it that's just the random color generator so that's pretty simple as now okay let's let you bro load up my project which is quite frankly not a lot it is no more complex than this but you'll see why I need this and a practical use well practical for me and I suppose you'll be building the same or one second right so this is actually my implementation therefore projects are really in the to do as you know Benny my rescue cat has access to an outside run and he's got it from the main living room and I want to know where he is because sometimes we look out and we can't find it we think is the outside confining there is the indoors can't run in there we've started panicking a little bit kgs got out so what I'm going to do is put a sensor in his run always walk way to the run it's all enclosed so I can't escape and tell me when he's in on the money's out so this is some sketch touch so there it says Benny is in they can't really read when it says underneath because medium let me begin this down there we are there you can read it that's looking much more like it does in real life as well so what the senses is going to tell me is Benny's in and he's been in for 23 minutes and when he cut goes back out it'll detect that he's gone out too simple PIR detectors on his and what catwalk quite literally going down to his cage it will say is I can detect these going past these two senses he must therefore be out and so the demo purpose is this white bit this white area down here as a button so if I press here that nothing happens but if I press the white pit is the button and then goes out Benny down he's been out for 14 hours and five minutes and well then perhaps not quite that long because they out there for many hours so that's what my project is going to be and and it's what as you can see it's very simple but I do want this to be visible at a distance so am I going to connect this up to something like an esp8266 don't know yet am I going to connect out them in RF 24 L zero one could well do because let's face it the only thing this needs to know is one of two stages are there in or is out that's it there's nothing else a perfect job for an n RF l n RF 24 L 0 1 transceiver unit hasn't it one here and one out in his cage so that that's probably top of my list at the moment and luckily I know a chap who's done a whole video on the NRF 24 l0 ones very good it is tuned explains it quite well yes okay it's mine one it's the one on the screen now yes and I'll be following that my own advice is it were and I think that's probably going to be top of my list because then I can build this in a fairly small box with a transparent lid and this will be not invisible and I can put some extra logic of course into the Arduino here to say how long for so the transmitter won't tell me how long it's been out there for this we'll work it out whenever the state changes you'll be at zero and this would just clock it up doesn't the RTC a real-time clock doesn't need anything like that all it's going to do is count the milliseconds okay because it's accurate enough what we want it really doesn't matter but Benny's been indoors with twenty three minutes or twenty 3.1 minutes does it doesn't matter in this case all I want to know is is he in or is he out and roughly how long has that state been like that okay so that's Mallya projects and I think that'll be fairly easy to do in fact the more I think about it that NRF 24:01 is probably the solution rather than the SP 86 which is that that overkill isn't it right so you've seen roughly what I'm going to do with this you've seen roughly how easy is to do maybe are okay that's it then I'm going to put all the libraries and links to libraries below this video but I actually include the two current libraries the ones I'm using here because I know that those libraries can quickly change on the Adafruit site and you might be watching this video in six months time a year's time but exactly the same here with wondering why it doesn't work because a defer basically changed their libraries so copy will be included on that github I think everything else is pretty much self-explanatory really isn't it certainly you'll better read through this and then no problems at all in finding out what spot the biggest problem quite frankly is working out your XY coordinates so if you see here this set curse of zero zero okay that's top left that's fine but what about down here is on what 100 170 how did I get that well I started off with a rough-and-ready guess did it wrong changed it looked at it again it's a little bit repetitive to get it right but well I am got that many buttons on the other in the final project I won't have any at all right I'm going to leave it there and let you decide whether for pound 99 is good value for a shield and indeed two pound 42 or thereabout for arduino full-sized board underneath because the two you get together in my view very very well indeed okay I'll put this one a way back in my little box and maybe use that for a future project in six months oh this one here incidentally is just a sixteen by two LCD and doesn't it seem so yesterday compared to one of these horses of course is anyway let's not disparage it okay that's it thanks very much for watching and I'll see you in the next video I hope you'll finding these videos useful and interesting that are plenty more videos to choose and a couple of shown below and if you'd like to subscribe to this channel just click on my picture below and enjoy the rest of the videos thanks for watching

Channel: Ralph S Bacon

Views: 75,659

Rating: 4.891892 out of 5

Keywords: Arduino, electronics, C++, microcontrollers, programming, gadgets, TFT, LCD, SPFD5408, 2.4, 2.8, GFX, Touchscreen, Touch screen, SD Reader Write, SD Card, Adafruit, Benny

Id: Fj0yXP0tCLU

Length: 29min 50sec (1790 seconds)

Published: Fri Apr 28 2017