Arduino-friendly 240x320 LCD Display Tutorial (ILI9341)

hey everyone welcome back in this video I'll take a look at one of these 240 by 320 color LCD displays these are great little LCD breakout boards that you interact with over SPI that means that they'll work with any microcontroller or a single board computer that supports the SPI which includes Arduino Raspberry Pi ESP 32 and pretty much any modern microcontroller they come in all kinds of different form factors you can see that this one has an optional SD card port on the bottom some of them have microsd ports some of them don't have any storage options at all it really just depends on the exact model and where you get them and then some of them even have touch support you can see that this one has the pins for it even though the board doesn't have a touch controller or soldered on to it you can pick them up from just about anywhere that sells hobby electronic parts like Adafruit Amazon eBay you get the idea this one came from one of the hacker boxes that I looked at in a previous video so I'll go ahead and put a link to that in the description if you're getting yours from somewhere else basically you just need to make sure that it uses an i/o I 9 3 4 1 LCD controller the code I'll show in this video should work with any variant of these screens as long as it uses the same controller chip the first thing I'll do is connect it to an ESP 32 board this one is a dev kit see directly from espress if again any microcontroller capable of SPI should work my plan was to do this video within arduino but the one that I have on hand seems to have a corrupt bootloader so I'll need to try to fix that first but anyway I did have this ESP 32 on hand as well you can program these using the Arduino IDE and most of the same libraries so the code will basically be the same I'll also show how to use an Esprit no Wi-Fi board to control the screen using JavaScript so stick around for that you connect to these displays just like any SPI device if you've never done that before look up the pinout for your microcontroller and match your SPI pins to depends on the display which should be labeled it's important to mention that this screen takes 3.3 volt logic pens and some microcontrollers operate at different voltages 5 volts for instance is also pretty common so you may need to use some resistors or a level converter instead of connecting directly but if your microcontroller already operates at 3.3 volts like this ESP 32 or this esprit no Wi-Fi then it's safe to connect directly in addition to the normal spi pins there should also be a pen labeled LED and you can either connect that to a 3.3 volt output pen or a general purpose digital i/o pen it's the backlight for the screen so if you connect it to an eye open you can turn the screen on and off from the microcontroller this way you can save battery power when it's not in use there are three other pins that aren't typically part of an SPI connection and those are CS DC and reset you can connect these to any general purpose digital i/o pins just remember which ones you use because you'll need to reference them in your code CS is a typical chip select pin which is how the code will specify which SPI device to write to DC is sort of like a chip select pen except it's how the protocol for these screens specifies whether it's sending data or commands and the reset pin of course resets the display that's all there is to hooking these things up now I can jump over to the Arduino IDE and work on the software side of things the SPI protocol for these screens isn't too bad and we could definitely write our own library to control them from scratch but these screens are so common that there's probably already a library written for them for whatever microcontroller you're using regardless I would probably start with an existing implementation just to save some extra work for Arduino there's an Adafruit library that seems to work really well even for these ESP thirty-two boards you can install it from the library manager in the arduino ide just search for Adafruit il i-93 for one and you'll also want to install the adafruit gfx library which contains some generic graphics primitives for drawing shapes and text and stuff once you've got those libraries installed you can just include them into a new sketch and then define some constants for the pins so these are just the Pens that I have configured for the ESP 32 board these might be different depending on you know which microcontroller you're using and then you'll use those pin constants to initialize this little TFT object so this is just using that Adafruit library and creating an object for the screen by passing in all those pin constants and this is being declared as a global so we can use it in any functions that we want in the setup function I'm setting this TFT LED pen to be an output pin and then I'm writing hi to it so this is going to turn that back light for the screen on and if I ever want to turn it off later I'll just write low to it next you call the begin method on this TFT object to basically initialize the display and then I'm setting the rotation here to one so you can set the rotation of the screen to different orientations by default it starts in portrait mode and I actually want it to be in landscape mode so one will rotate once and then if you did too it would basically be portrait mode again but upside down and then three would be the upside down landscape mode and then finally this method here fills the screen with the color in this case I'm using a constant defined in the library and the color that this defines is black but you can use specific colors too and I'll show you that here in a second but for now I'm just going to send this to the screen and then we'll see what that looks like so yeah basically the screen turns on and then it gets filled with black now let's define a specific color here just to make sure that everything's working correctly so colors for this screen are 16 bits and the pattern of those bits is 5 red bits 6 green bits and then 5 blue bits so in order to create a specific color we have to specify a 16 bit integer with our red green blue channels filled out correctly in that integer and the Adafruit library actually has a method that helps with this and it's called color 5 6 5 so it takes three 8-bit integers and then creates that 16-bit color integer so if I go here and say TFT color 5 6 5 then let's say we'll make kind of a pinkish purple color by giving it maximum red and maximum blue but no green so then I'll go ahead and save and upload cool and you can see that this time the screen fills with a pinkish purple color so yeah interacting with this library is pretty easy and if we go over here to the source code for the library specifically the adafruit gfx header file we can look at some of the methods that they provide for you to work with so you see we have methods for drawing vertical lines horizontal lines a filled rectangle so this is interesting let's go ahead and draw a rectangle on our screen I'm just going to copy this method signature so that I don't forget what does what and then I will make it a method call over here in the Arduino sketch so we're going to specify the X and y of the rectangle let's go ahead and put it at 100 100 yeah let's do 100 and then 50 for y and we'll make it a 20 by 20 rectangle yeah let's do 20 by 30 why not and for the color so we've got this pinkish purple background I don't know let's make the color yellow so that's color 5 6 5 method yellow of course is gonna be full red and full green channels and no blue ok so now if I save that and then upload again this time we get a little yellow rectangle on the screen and that's really all there is to it now you can just go through all these different methods and draw different shapes on the screen and you can create animations and stuff so let's go ahead and add a circle just to show how that looks so I'll copy that function signature just so I don't forget TFT draw circle so the X and the y are going to be for the center of the Circle we know that this screen is 320 by 240 so I can do like 160 by 120 for the center of the screen we'll do a radius of like 30 pixels and for the color let's go ahead and make it green so that's going to be 0 255 0 and save and upload okay so you see it drew the outline of the circle I guess that's not the method that I thought it was so let's go back here and see what the deal is ok see I actually wanted this fill circle method draw a circle apparently just draws the outline fill circle should draw a filled in circle so I'll go ahead and change that upload and there we go now I have a yellow rectangle and a green circle so another useful thing to do with these screens other than just drawing shapes and making video games and stuff like that is for displaying text so text is pretty easy too you basically just treat this as though it were a serial console or something you can call this print line method so let's say you know hello world I'll go ahead and upload it you can see that the font size is very small just barely see it up there in the corner so there are methods for changing that and it looks like it's just set text size there's also a method for setting the cursor position so you can place the text anywhere on the screen but I'm just going to change the size real quick so that's TFT dot set text size let's go ahead and try like I don't know sighs let's try size 4 so again we hit upload and yeah that's a much larger font so yeah this library contains all of the methods that you would need to make your own video game or make a graphical interface for maybe an Internet of Things hub or a thermometer where you want to display the temperature or any other sensors that you connect your microcontroller to so it's pretty neat stuff now I'll jump over to the esprit know board and show how to use javascript to control these screens the code side for Asprey know is incredibly easy there's a standard built in module that you can include that connects to these screens basically I'm setting up an SPI interface by specifying the pins that I've used and the baud rate which is the speed for SPI and then I'm connecting the screen to that SPI interface and then specifying some of those ili controller specific pins so then I have this graphics object that's defined by this connection and this has a clear method which is going to clear the screen based on whatever the background color is by default the background color is black then I'm going to set the rotation this time I'm setting the rotation to 3 instead of 1 because I've got the screen wired upside down but I still want it to be in landscape mode so 3 is going to be the upside-down landscape mode and then I'm setting the fill color to be blue now the color space on this is 0 through 1 instead of 0 through 255 like in the Arduino example just a different representing the colors the Esprit no module here handles all the details of that in the background I feel like it's easier to work with colors in the 0 to 1 range just because a lot of them math is easier so what I'm doing here is I'm just setting the color to blue and then drawing a filled circle at an X of 100 and a Y of 100 and a radius of 30 and if I send that to the Esprit no you see that it draws a blue circle so let's do something a little bit more interesting I'll go down here I will make a function named loop which will call itself with like a slight delay so that's going to be like a tenth of a second if you're not familiar with JavaScript set timeout basically just says I want to call this function after this millisecond delay so 100 milliseconds is a tenth of a second I'm gonna copy this so basically when we call this connect method we passed all these parameters one of the parameters we pass is a function and that's what gets executed after the aisle ice-cream connection is made so that's why I was doing this the graphics code there so now I'm just going to clear the screen set the rotation and then start the loop so this is going to call loop and then loop calls itself with a slight delay forever and in here I will do a bunch of well let's go ahead and say a variable named R which I'll set to math dot random I will also make green and blue so this is going to generate a random color so we've got a random red green and blue value and I'm also going to generate a random x value and this is going to be a value between 0 and 320 so I'll set that there and a random Y value which will be between 0 and 240 set that there and then R is already defined so we'll go ahead and call this radius which will be a random value between oh I don't know 10 and 100 so 10 is the minimum value because I'm adding it to this random and then you know between 0 and 90 so the result will always be between 10 and 100 so then I'll set that to the radius so if you haven't guessed what this does already basically it's gonna be an infinite loop that just draws a random circle and a random place with a random color so let's go ahead and hit Send and see what it looks like and I just realized that I made a really stupid mistake by creating a variable named G twice here oh it's an easy fix I'm gonna call this G GFX for graphics and then replace all of the instances that I used there so that should work now we'll go ahead and send it and there you go lots of random circles so the one thing I will say about these screens being over SPI they are limited a bit to speed for most applications that's not a big problem but if you're trying to change a lot of pixels with a high frame rate you might have a problem with these screens usually what you'll do is only change the pixels that have changed over time so if you're making a game and you have a a character who's moving across the screen you don't redraw the entire screen every frame you only move the or you only redraw the pixels that have changed which is going to be you know where the character was before and where the character is now so when you're developing things like that this speed should be fine but if you are trying to change every single pixel every single frame and you want a high frame rate these screens might be a problem just because of the limits of you know communicating these pixels over SPI but again for most purposes they're great especially for things like if you're just showing text to show the reading of a sensor or something this is gonna work just fine well that's it for this video I hope you enjoyed and go to the comments below let me know what you think about these screens let me know what you think about this format of videos I know I haven't been uploading as much recently because I've just been busy with other things and this is kind of like a hobby side project I do want to upload more and feedback from you definitely gives me an idea of you know what kind of videos people are interested in so yeah if you like this content hit like and subscribe to my channel and maybe leave a comment down below but until next time bye

Channel: Davy Wybiral

Views: 38,183

Keywords: Arduino, ESP32, Espruino, TFT LCD, LCD Display, LCD Screen, 240x320, 320x240, HackerBoxes, ILI9341

Id: EFAfcsYOriM

Length: 21min 5sec (1265 seconds)

Published: Fri Mar 29 2019

Reddit Comments

[u/Poepopdestoep]

thanks for the share