Arduino Touchscreen Display - Using a Resistive Touchscreen

today in the workshop we'll take our first look at touchscreen displays I'll show you how touchscreens work and then we'll start with an inexpensive Arduino touchscreen shield we'll run a bunch of demo sketches and then we'll program some buttons of our own it's been a while but we're back in touch today so welcome to the workshop [Music] hello and welcome to the workshop and today we are going to be working with a touchscreen display shield for the Arduino now if you saw the video I did last time about all the projects I'm going to be working on this summer you'll notice I had a number of different touch screens the one that we are going to be using today is a very inexpensive touchscreen shield that is commonly available I got mine on Amazon you can get these on eBay and if you have locally stocked electronics parts store you can also get one over there they're very inexpensive and as you're going to see they're not that difficult to use but you need to get a handle on the fact that you're actually not working with one item you're working with three of them the touchscreen display shield that I'm using today is pretty typical in a sense that it actually has three separate components there's a display itself that's an LCD display is called a TFT or thin film transistor display there is the touch screen membrane that sits on top of the display and on this particular one it's a resistive touch screen I'll explain the difference between that and a capacitive one in a few moments and there's also a micro SD card on the board and that can be used as you're going to see in order to store images and things that you would like to display on your display so when you're interacting with one of these you're really interacting with three different devices now I've got the device over here right now you can take a closer look at it if you wish over there it's a very simple field for the Arduino and as I said this is a particularly common model over here now this shield is made for the Arduino Uno or the Arduino mega although as you're going to see when you're using with the mega the SD card is not going to work because it uses the SPI bus and the SPI connections on the mega are different than the ones on the uno so there are a number of these small displays available this one is very common there are a few other ones and one thing I want to show you is a great resource that I ran into on the internet for getting that information and drivers for virtually any LCD display touchscreen or not and this is for both the Arduino and the Raspberry Pi so we're going to take a look at that after we do we're going to get the software for this particular display and I'll run through a number of the demo programs to hold it straight the capabilities of the display once we do that we'll write our own code so we can create a simple user interface and control things with our touchscreen display so as usual we have a great deal of things to cover today so let's start by learning a bit about touchscreen displays now let's take a look at the technology behind touchscreen displays the first touchscreen was invented in 1965 in the UK by Eric Johnson the original use for this screen was for air traffic control and by the way the original touchscreen did not cover the entire screen and could only be touched in one location touchscreens are now used in a myriad of different products there are two main types of touchscreens in use today resistive and capacitive screens resistive touchscreens are inexpensive and very common they consist of two thin layers or membranes separated by a small gap the top layer is flexible and also transparent the bottom layer is a solid layer the conductive side of both layers face one another if you press on the top layer it'll change the overall resistance and this is used to indicate a touch there are three types of resistive touchscreens that you'll run across the simplest is the 4 wire analog touchscreen where each layer has two wires these are often called the X bus and the Y bus and this is the type of touchscreen we'll be working with today the five wire analog has four wires on the top and one on the bottom it allows multiple touching with this arrangement eight wire analog screens are more reliable than the four a wire variety but use the same principle capacitive touchscreens are made of a transparent conductive material this material is placed upon a glass surface electrodes are attached to each corner of the material touching the glass with your hand initiates a current flow due to your hand capacitance the current will try to find a route to ground through you sensors underneath the screen measure the change and location of it the advantages of resistive touchscreens include that they are lower cost a mana factor they have a higher sensor resolution and capacitive screens they also have fewer accidental touches as you need to physically press the screen to register a touch you can use gloves to use a resistive touch screen although it should be noticed that there are special conductive gloves that you can use for capacitive screens any hard object can activate a resistive touchscreen so you can use a stylus or your finger resistive touchscreens are more resistant to heat than capacitive ones capacitive touch screens are more durable than resistive ones they can even function with small cracks in the glass because the material they use is more transparent they produce sharper images and also produce better contrast capacitive touch screens can also use multi-touch sensing allowing you to use two or more fingers on the device at one time this is often used in tablets and phones and cameras they're more reliable than their resistive cousins and capacitive touchscreens are also more sensitive so now let's start working with touchscreen displays let's take a closer look at the 3.5 inch LCD touchscreen field that we're going to be using today now this is a very common device available from a number of different manufacturers if you look at it on the bottom I'll turn it around this way you can see that they've labeled off what all of the connections actually do and if you look you'll find there are very few connections left over on an arduino uno digital pin 0 & 1 or not being used an analog pin a5 is not being used but other than that it uses pretty well every pin on the Arduino now you'll also notice a micro SD socket over here we can just take a micro SD card and insert that in there and this would allow you to have a micro SD card which you could use for images that you're going to use on your display now the display also came with a little stylus over here that you can use to press on the screen or you can use your finger of course now I'm not sure if you can see this but if you look on the side of the display you'll see two different film cables the top one over here is the one going to the actual a touch screen these are the X and y bus connections and this is a four wire analog type touch screen so there are four wires here these lines over here on this film cable are the ones that go to the LCD display itself so it's a very simple looking device but as you're going to see we're going to have to write a bit of code to use it because remember we're actually looking at three devices the touchscreen itself the liquid crystal display and the micro SD card and so let's start working with this so now that we're all experts on the LCD touchscreen it's time to put our little touch screen display shield to work and in order to do that we're going to try to gather a little bit of software and now what you're going to need when you're working with a touchscreen display shield be it this one or any other one is you're going to need to get a few specifications so you know things like pin outs etc now for a field that's of course not that important because you just plug it into the Arduino but if you're wiring this independently to another processor you would need to know that so a datasheet is something you're really going to want to get a hold of another thing you're going to want to get a hold of when you're working with the Arduino is some libraries now you'll need a library to drive the LCD display you can drive it directly but it's a lot easier to do with the library you'll also need a library to read the touch screen membrane and since it has a micro SD card there are a couple of existing Arduino libraries that we can use to work with that now getting all of that software can be accomplished a number of ways when you buy one of these touchscreen displays it quite often comes with a tiny little CD that has a lot of this on it and that's really great the only thing of course about a CD is you tend to wonder if you're getting the most recent version the libraries etc because the CD might be a couple of years old you'll also probably find a link with your display to the vendors website where they will give you a number of these files as well and the website files may indeed be updated more frequently but I've got another resource for you that I think you're going to like even better now the resource is called the LCD vici and as it implies by its name it is a wiki that covers all sorts of liquid crystal displays be them touchscreen displays or non touchscreen displays and it has libraries and it has data sheets for all sorts of displays not only for the Arduino but for the Raspberry Pi we're talking about fields we're talking about hats and independent displays that you would wire up to your processor with discrete wires so I'm going to show you right now the LCD wiki we're going to use it to grab the software for our touchscreen display and then we're going to quickly go through some of the demo software that they give us so let's take a look at the wiki right now now this is the LCD wiki and you literally find this at LCD wiki com and this is an excellent resource for using liquid crystal displays with the Raspberry Pi and the Arduino as well as a number of other processors now on the main page of the wiki you'll get a number of things such as the About section and all that here's a number of getting started articles some of these would be really handy how to use Raspberry Pi downloads how to install the drivers how to calibrate a resistance touchscreens there's a lot of good stuff over here then it goes into the individual displays first of all some Raspberry Pi 8 DMI displays ones that connect directly to the HDMI port on the PI then another series of Raspberry Pi displays ones that connect on to the display connector ones that connect on to the GPIO and then we get into our Arduino display is a number of different displays through the Arduinos then some OLED displays some SPI connected displays and some parallel port displays so you'll see there is a wide variety of LCD displays that they have information on now let's go into the Arduino ones now the 3.5 inch Arduino Uno is the display that we will be using and so this is the page that it takes you to when you select that now this is typical of all the LCD display so if you've got a different display you'll find a very similar page for it it gives you some pictures of the product the description of it the parameters the pin outs of the product this can be very important when you're trying to wire this to a different processor like let's say an Arduino Nano using jumper wires and a number of documentation links the user manuals pictures specifications and data sheets etc for the driver I see now some instructions for actually connecting it onto the Arduino and using the software libraries so if you need some help with that that's right over here and then what we're really looking for the program download this is a zip file that you can download with all the libraries and examples that you need so download this file and the next step will be to install it onto our computer and to start running the demos so now that we've downloaded our software from the LCD wiki I want to go through a number of the demo programs that they include with the software demo programs are a great way not to only display the capabilities of the device in this case the LCD touchscreen display but they're also great for writing your own code because you can look at the samples they use and modify them for your own purposes now there are a number of demos here and I don't want to go through the individual code and then run the demo for each of them because that'll make this a two hour video and I don't think we really want that so I've gone through all of the demos and I've got a little present taste of them right now so let's take a look at that after downloading the zip file from the LCD wiki and extracting its contents this is what you're going to end up with a series of directories now before we can run our demo software we're going to need to install some libraries into our do library so this is how we do it the first thing we do is we want to go to the demo directory so we'll go into there and since we're working with the Arduino we're going to go into demo Arduino now you'll notice two folders here example and install library you'll also notice there's a couple of PDF documents with instructions so if you need some further help it's right there for you in both English and Chinese we want to go to install libraries to get our library so we go into there and we will find three libraries all in their own folders now where you install those will be the library directory in your Arduino directory and that location will depend upon your operating system as I'm using Ubuntu Linux my Arduino directory is in my home folder but if you're using Windows or a Mac you will find it in a different location by the way your arduino ide can tell you where the directory is so let's go and take a look at mine right now and how i've installed it into my arduino directory so let's split my screen over here now let's go over here and go to the home folder and here we have an Arduino folder in the Arduino folder I've got all of my Arduino programs if I go down here I'll see a folder called libraries and in the libraries folder I have a number of my libraries and as you can see I have installed the three libraries from here into this folder and that's all you need to do is to copy them in okay now back on to here let's go ahead and get the example so let's close our split screen and we'll go back to demo Arduino and we will see example an under example we will see all of the different examples now these can be copied again directly into your Arduino directory if you wish and you can run the examples one by one that way so here's a summary of the demo sketches included with the LCD display software example one is the simple test this test doesn't use any of the libraries you installed it drives the liquid crystal display directly the test is a simple or sweep in this case the touchscreen is not used this is a good test just to determine if your hardware is functioning correctly example two is the clear screen example this uses the graphics library and also uses the helper library the one that takes two specific configuration of the LCD display hardware and maps it to the graphics library this test is also another color sweep in this case the speed of the sweep will vary during the test example three is a comprehensive test it uses the same two libraries this test displays the graphics capabilities of the display it draws a series of geometric shapes this test runs for a very long time and then repeats at the end of each cycle it will give you the results on the screen example four is the display graphics test this also uses the same two libraries and like the previous test displays the graphics capabilities unlike the previous sketch the shapes are displayed in the setup so they're only displayed once the loop of the program displays a series of text messages and they'll run continuously until you stop the example example 5 is the display scroll again it uses the same two libraries in addition this also uses an external font file this shows text in two languages English and Chinese it displays multiple colors and changes the orientation of the text example six is the display string test this uses both libraries it simply displays text in different sizes and colors this is an excellent example for learning how to drive the display and to add text to it the read pixel example uses both of the libraries this reads the pixel color values during the test the background will change and the orientation will change the test might seem a bit cryptic until you stand far away from the display and then you will actually see the characters that are being displayed and their color values example 8 is the display phone test this uses both of the libraries we've been using and this is also one that uses the touchscreen library this is a telephone keypad simulation and it's fairly functional the touchscreen is used and when you touch a number it'll display up on the reading at the top there are also keys to delete and to make the call and to end the call although of course the call keys are dissimulated there is no real phone happening over here example nine is to show a bitmap picture this uses the same two libraries we've been using for all of the tests it also uses the Arduino SPI NSD libraries you'll need to put your bitmap images on a micro SD card these images will be drawn on the display again this is excellent code for learning how to display images from the SD card on your display example 10 is a switch test this uses all three libraries so it includes the touchscreen library it also uses an additional font file this draws a series of switches and buttons which are actually active you can use your finger or a stylus in order to activate this this is a very good example code for designing a user interface example 11 is the touch pen example this one also uses all three libraries and what this test is is actually a functional drawing application you can select color and pen size this is an excellent sample to show you how to make an advanced dynamic menu on the display and finally we have the touch screen calibration this sketch uses all three libraries it starts by providing a number of calibration points you use your stylus to select the center of these calibration points the resultant displays can be used in your future sketches you'll probably run run this many times to get the most accuracy so as we've seen there are a lot of very interesting demos included with the software package that we got from the LCD wiki and we can use the code in those demos as example code for writing our own touchscreen interface and that's exactly what we're going to do right now now the interface I'm going to build right now is fairly simplistic and this is going to use a couple of components I'm going to use this one however with an Arduino mega and that's because our touchscreen really is taking up just about every single pin on the Arduino Uno in fact the only pins that are left over from the touchscreen our pins 0 and 1 which are also the pins that are used for the transmit and receive on the USB connector so we don't really want to use those if we can avoid it because whatever we connect will need to disconnect in order to upload updates to our sketches the only other pin available is analog pin a5 which of course could be used as a digital pin as well but if you need more than one external pin then an Arduino mega is really a good idea because of all the extra analog and digital i/o pins it's also fairly easy to get to the pins on the very far end of the mega when the touchscreen shield is in place so we're going to put our touchscreen on to Omega hook a few extra components up to it and build our own touchscreen user interface let's get at it right now for our experiment we'll be using an Arduino mega we'll also need three LEDs I'm using a red green and blue one but you can use three different colors if you wish you'll also need a dropping resistor for each LED I'm using 220 ohms although any value from one fifty-two 470 will work we'll begin by connecting the ground connection from the aired we know mega to the cathode pins of all the LEDs will then connect the anode pin of the red LED through its dropping resistor to pin number 44 the green LED through its dropping resistor will go to pin 45 and the anode of the blue LED through its dropping resistor to pin number 46 finally we'll place our field on top of the Arduino mega making sure to align it correctly and this completes the hookup now let's go and take a look at the sketch we'll be using to drive our LEDs and control them with the LCD shield so now let's take a look at the sketch that we'll be using with the three LEDs that we've hooked up to the Arduino mega with the LCD touchscreen now we're going to be using a number of libraries from Adafruit these are very common libraries to be using with touchscreens and a lot of the code for this came from an example that they had to do a phone demo similar to the phone demo that we saw earlier and so what I've done is I've just taken out three of the buttons change the color on it and set them to toggle the LEDs on and off now this is a very basic demo but it'll show you how the basics of working with a touchscreen goes so first of all we need to include two different libraries from Adafruit the core graphics library over here which is used for a number of different Adafruit graphics projects and the LCD library which defines the LCD itself now you can get both of these using the library manager in your arduino ide if you don't have them already so you can go grab the latest one the touchscreen library we've already used and was included with our touchscreen display and we've also downloaded that of course from the download we did from the LCD wiki the MCU friend is a live hardware specific library for a number of different touchscreen display fields and so what it does the ghost route identifies what field you have and spits back the proper parameter now there are a number of ways you can get this file you can't get it on the Arduino library manager but there are several sources to download it from including the LCD wiki I'll also show you some sources on the article that accompanies this video on the drone bot workshop website okay so once you've called all your libraries and included them we have to start defining a number of things now we define a number of the pins that the field is going to be using connect it up to there do we know so just basically take these as these are because they're hardwired onto the shield then we're going to assign names to a number of different colored definitions and I've included the entire list that Adafruit provided in their demo code even though by no means are we using all of these colors for that matter they weren't using them either but these are this good to have and you can play with the colors later on if you want to change the colors of the buttons or the background etc we've just given them all human readable names and so down over here we start working with the user interface and we define a number of parameters for the user interface it is determine the size of the buttons and the text etc then we got to define the pins of the resistive touchscreen now remember our touchscreen uses four pins two of them on the Y side and two on the X side and we're trying to measure resistance between all of these now the Y these two here need to be an analog pin because these are the ones are actually be using to measure resistance these ones are digital pins because these are going to be the output or actually going to send out five volts and then measure the voltage we get back on the other pins here and that's essentially how we determine where the touchscreen has been pressed we just see the voltage difference between the XS and the Y's and we can figure that out as to what coordinates it is okay now a couple of pressure points these are parameters that you can just take as they are right now you can adjust those if you find the two touch screen isn't responsive enough or as perhaps too responsive and then these parameters over here now if you remember we ran through a test sketch earlier during the demo in which we could go and calibrate touchscreen and get a number of different values well these are the values that it spits back you can run that sketch and came these values if you wish or you can just take the values right now with their pretty generic and should work for a demo like this because their buttons don't have to be too too precise okay then we define the LEDs themselves and they're on pins fifty one forty nine and forty-seven you could use other pins if you want I did choose those pins because I intend to take this same setup and write another sketch down the road in which I can control the brightness of the leds and these three pins happen to be PWM pins but for this particular sketch we're not using PWM and you could use different ones if you want these pins are pretty easy to get to go with the field on top and then we also define a couple of Williams over here and these are the state variables for the button remember we're going to make these toggle so this just holds the previous value of the button so that we know what to turn it into when it's pressed whether to turn it on or off and they're all set to zero to start off with which would be having all of the LEDs off now we define an object to hold the buttons themselves a button array over here and we create a couple of arrays with both the labels of the buttons the RG and the B and the three colors so if you wanted to change labeling or the color of your buttons you would just modify the code down over here we'll also use an object over here would define one for the TFT using the M C friend library of TFT displays and TFT does means thin film transistor it's another word for the LCD display so as an object that represents it and an object for the touchscreen on top of the display itself now these parameters already we have gotten previously in the code this last one here 300 is actually the resistance and ohms between the X and the y with the screen not being pressed and if you wish you could take your touchscreen and a multimeter measure your resistance and change this to make it a bit more accurate but 300 is a pretty standard value and that is what most of these touchscreens are manufactured to be defaulted to okay now we'll go into the setup now we're going to use our serial monitor the to observe the buttons being pressed and released and so we'll set it up at 9600 baud and print a little bit to it we'll set that our LED pens up as outputs right now and we'll reset the touchscreen display the sort of the LCD display with the TFT reset over here now we need to identify the display itself so we'll read it's ID and depending on the identify er that we find over here we'll print this out to the LCD sorry - the serial monitor so we can see which LCD driver it is found in some cases the identify er is going to be a little bit different and we changed it down accordingly but this identify er is just used just so that the display libraries know the size of the display etc etc and so assuming we've identified the LCD driver tip we've using we get through that then we set up the display itself we begin to display and we know the identify our number now so we know how to write to it we print out on the serial monitor what the size is because now because we know the identify we'll know the width from the height of the display so we'll know what size our display is we set the rotation this just sets it up right now into portrait mode if you want to set it in the landscape you turn that to a one and we fill the back of the screen which I'm filling with black but again you could change the color just by changing this here and this goes up to one of those human readable colors we defined earlier now we draw the buttons and the buttons are just basically members of an array as you recall so they're all mathematically related to each other by their space than their width and all that and so this whole bit over here which again I board from the Adafruit code just allows you to define the buttons and you can change the parameters of some of these further up in the code if you wish to change the size of the buttons okay now we go into the loop now we need to toggle pin 13 which is being used to send a pulse out right now into the display and so we'll toggle it over here and then we need to set those pins that we're using for the X and the y it's two outputs right now though you might think it's kind of different setting pin mode up in the and not setting it earlier up let's say in these set up or even before the setup routine when we define the pins but the reason we do it over here is that we need to actually redefine that every time that after we've done this pulse over here because everything kind of starts from scratch if you don't do this try moving this up into the setup and see what happens you'll notice the display will flash every time that you press it and it gets quite annoying so that's why this is down over here then we have to determine if we've at least hit the correct pressure and we've gone over here to map that pressure and find out the exact value of the X&Y coordinate that has been pressed and we go through the buttons now to see if they relate to those coordinates and if they do later within a value of 10 to those coordinates we know a buttons been pressed and we get the values 0 1 & 2 depending on which button has been pressed so button 0 would be the red button the first thing we do is we've tamed that status boolean that we had we toggle it to the opposite value so we do it this statement here and if the button the second button was pressed was button 1 that would be the green the third button button 2 would be the blue so we change the state accordingly of its of its boolean and then we go to the button display and we take a look at that state and now if these are set to a 1 then the bright then the light should be on so if the red is set to 1 we'll turn the red LED on or otherwise we'll keep it off same deal for the green and the blue so we go through that and see what lights need to be on or which would need to be off and then after that will this go through and look at the released event over here printed out in the serial monitor and we'll just draw the inverse on the button because we want the button itself to react to the fact that it's just been released and put a slight delay in here for debouncing and then we'll go up and run the loop all over again now I know there's a lot of code over here but if you break it down section by section you can see how we're dealing with the display because remember we're dealing with both the LCD display and the resistive touchscreen on the top of it so we're really dealing with two different items over here so now that we've seen the sketch let's go and take a look at it in action okay so here's our display as you can see it's a very simple hookup I've got the shield on top of the Arduino mega and the red green and blue LEDs through their associated dropping resistors are connected to three of the i/o pins on new mega and you can get at the i/o pins on the very end of the field without adding an extra adapter or anything so that's very handy to be able to do that now I've also got my serial monitor up as you can see it's already displaying that it's done the LCD test it's found the correct driver and it has determined the resolution of the display as well so all this left to do is to press some buttons and see what happens so let's press the red one and as you can see of course the red light came on and it stayed on and you'll see on the serial monitor that the event of both press and button zero and releasing it has been recorded let's do it again and we'll see again we've recorded another pressing and release of nth and the light is turned off it's toggled and of course this works with all of the lights and so you could see on the serial monitor as I'm doing it the events are being recorded and of course the lights are doing exactly what we would expect them to be doing now if you wanted to instead of hooking up three independent LEDs a red green and blue one you could of course just use an RGB LED and in that case you'd be able to dial up seven different colors now admittedly that's not the fanciest display but it's a good start for getting to work with liquid crystal displays and touch screens and the next time we work with touch screens we'll look at adding some additional controls on to our display well we've covered quite a bit today haven't we we've learned how to touch screens work and the difference between resistive and capacitive touch screens we've also used a common touch screen field for the Arduino with both the uno and the mega and we've written our own simple touch screen interface now this is not the last time we're going to be looking at touchscreen displays I've got another display to show you for a future video which is a capacitive touchscreen from Adafruit and we'll be using it along with a number of other different libraries when we work with that one also I've got a touchscreen that works with the Raspberry Pi it's basically based upon the same module as the one that you've seen right now it's a resistive touchscreen but of course with the PI we need to work with Python so I will show you how to work with that display as well so if you're not subscribed to this YouTube channel please do so and then you'll know when these videos are coming up now if you need more information about what we discussed today please check out the article in the drone bot workshop comm website you will find a link to that right below this video while you're on the website please consider subscribing to the newsletter if you haven't already that way I can keep in touch with you let you know what's going on in the workshop and also get your opinion as to what subjects you'd like to see me cover and if you want to discuss what we've done today the best way to do that is on the new drone bot workshop forums forum drone bot workshop comm go to the forum sign up and you can get it on the discussion if you've got questions about touchscreens or anything related to our dueños raspberry pi's robotics IOT all the forum is the place to ask them so I'm looking forward to interacting with you there so until next time we meet please take care of yourselves and I hope to see you very soon here in the drone bot workshop goodbye for now [Music]

Channel: DroneBot Workshop

Views: 239,148

Rating: 4.952673 out of 5

Keywords: touch screen, arduino touch screen, touchscreen, resistive touchscreen, arduino touchscreen project, touchscreen tutorial, arduino mega, arduino uno

Id: _GT_sgbKQrc

Length: 38min 50sec (2330 seconds)

Published: Mon Aug 12 2019