Master the Round TFT Display on ESP32 and GC9A01 driver with the TFT_eSPI library

welcome fellow builders we'll be diving today to the Intriguing world of round TFT displays coupled with an esp32 this diminutive display when paired with the power of esp32 can bring an incredible amount of character to your projects to demonstrate this we're going to use the lifelike animated eye making it blink and gaze around we're not going to stop there we're going to create a set of uncanny eyes one on each display giving your projects an added depth of expressiveness I will walk you through the wiring process show you how to bring The Uncanny eyes to life and teach you to replicate the process for a second display so grab your esp32 your round TFT displays and let's add some eyes to your electronic projects let's get started you're not authorized in here I bought this from display model at AliExpress and I dropped the link in the video description it's quite cost effective with a price tag of a ring around just five dollars the display has clearly labeled pins on both sides of the display what's even more convenient is that it arrives with error pins already soldered in place so it's ready to be used on a breadboard the second display I picked at Amazon and again the link is in the video description this one has a much higher price tag around twenty dollars and it has no other pins it comes with a GST connector and a cable so it's not compatible directly with a breadboard to make it breadboard friendly I use standard prototyping upon female wire that I insert into each end of the cable and this is how it looks when I have inserted the dip on wire into each cable connection and I have secured each one of them using electric tape and even do each display has different types of connections they both have the same specifications the screen is size is 240 by 240 pixels they support up to 65 000 colors and both are using the SPI and the gc9a01 driver so let's start with the wiring of the wave share model so the one I bought at Amazon so I'm using this model of the esp32 microcontroller and maybe you have a different model with a different pin configuration but it doesn't matter as long as you follow this table where show the screen pin description and where it goes on the esp32 the gpio pin on the esp32 As Long as You Follow that table you're good to go so the VCC pin on the screen is connected to the 3 volt pin on the esp32 the ground pin on the screen is connected to the ground pin on the sp32 the din pin is connected to gpio 23 and sometimes on some models of round display the din pin is also called SDA the clock pin the CLK pin is connected to gpio 18. and the CLK pin on some model is also called sck or scl so your model may have a different description the chipset bin the Cs pin is connected to gpio 15. the DC pin on gpio2 rst pin on gpio4 and the backlight pin this one it's used to control the backlight of the LCD but I never use it in my project it's never connected to the microcontroller you can connect it if you want to control the backlight of your LCD screen but on my part I never do that so it's up to you now we're going to look at how to wire the model from AliExpress and if you've done your wiring on your side you can stop there because on the next chapter we're going to upload the code for the one eye setup One display one I set up and after that we're going to add another display to have the 2i to display setup so for this display the VCC pin of the display is connected to the three volt pin on the esp32 the ground pin of the display is connected to the ground pin on the esp32 on this model the clock pin is called scl so it's connected to gpio 18. on this model the din pin is called the SDA pin so it's connected to gpio 23 the DC pin is connected to gpio2 the chipset X CS pin is connected to gpio 15. and finally the rst pin is connected to gpio 4. and you will notice that there is no backlight pin on this model so on my side I wire the AliExpress version First and this is how it looks when the wiring is completed it's time to prepare the code for the Arduino IDE and this is my website this is a GitHub repository and I've put the link in the video description so you go to that website and you click on the code menu and you download the code as a zip file you choose download zip here it's going to download all the file in a compressed zip file you open your download folder and you just have to extract the files so I'm going to extract it into another folder and we have to remain rename the the folder so if we try to open it without renaming the folder into the Arduino IDE so this dot Ino file is the main sketch is it's the main file for the project so if we double click on it so it's going to open the Arduino IDE but we now get an error because um the dot Ino file needs to be inside a sketch folder name the same name as the main sketch file so what we have to do is you click cancel close the Arduino IDE so we're going to paste so I do F2 on my keyboard copy the name of the file go back to the download folder F2 again to rename it and I paste the name of the main sketch file so I go back inside the folder I double click the the main sketch file which is this one and this time the Arduino IDE will open without any error and we're going to see the code next we need to make sure that the TFT SPI library is installed into your Arduino setup so this library is used for displaying graphics on different types of TFT displays LCD display so you go into the Arduino Library manager this icon you click it and you search for espi here and you're going to see this Library TFT espi by budmer and it's already installed on my Arduino setup and if it's not installed on your site you're going to have a button like this an install button so click it to install the TFT SPI Library now we need to configure the correct driver in the TFT SPI library to be able to use the round display so let me show you you right click here you select go to definition go down a little bit on the file you see here the include user setup select right click on it go to definition you're going to see and include with user setup right click on it again go to definition and here the default driver Define is the ili 9341 driver which is not the right one for the round display we need to select this one so we have to comment this line and uncomment this line now if you try to edit the file inside the Arduino IDE let's say for example I want to comment this line with two forward slash I got a message saying that I cannot edit it it's read only it's a read-only file so we need to edit this file outside the Arduino IDE so this file is actually if you go into your a documents folder so go into your documents folder open the Arduino folder inside the Arduino folder you will have a libraries folder double click on it to go inside and you're going to see the TFT SPI Library you open it and inside it you will see the two header file that we need to modify so to modify them we're going to modify them into notepad so right click on the first one user setup dot h open with Notepad so we're going first to comment this line because we're not using this driver and we're going to uncomment this one which is the gc9 a01 driver which is the driver that we need for the round display so you close this file save it and now we're going to open the user setup select header file in Notepad and we're going to locate the GC driver which is this one so the gc9a01 for the esp32 you uncomment it close the file save now we're going to make sure that everything is correctly selected so if you see here in the user setup either file with the color coding we can easily spot that the uh the driver is correctly defined it's uncommented then I have no other driver uncommented you just have to have one driver activated uncommented and if we go to the user setup select editor file you go down a little bit we see that this one is uncommented so it will be used and we have to make sure that we don't have any other include or other driver that are selected so you just have to have one driver uncommented okay now the code is ready to be uploaded so you go to the main sketch which is this one and make sure you have your board selected you your esp32 board selected with the right com port and if you don't have it you just have to select it in the list of boards so mine is already selected and I'm going to upload the code all right the code is uploaded and you should see on your display and I gazing around and if you see anything if the screen is still black make sure that you have the correct wiring go back to the chapter where where I shoot the wiring for the display look at the table and make sure you have the good bin correspondence between the display and the esp32 and now we're going to add another display to the setup and if you like the video so far please hit the like button And subscribe to my channel adding a second display to our setup is very easy because all the pins of both displays except just one are going to the same gpio pins on the sp32 so the VCC pins of both display are going to the three volt pin on the esp32 the two ground pins of both displays are going to the ground pin on the microcontroller the clock pin of both displays is going to gpio 18. the DIN and SDA pins are going to gpio 23 the DC pin is going to gpio 2 for both displays and the RSD pins are going to gpio 4. so for the first display we already connected the Cs cheap select pin 2gbio 15. for the second display we're going to connect the Cs line the chip select pin 2gbio 14. so the magic will happen when the microcontroller will choose which display to show an eye by using the chip select pin and here is how it looks on my breadboard for the setup and you can see that I reused the same rows as the first display for the second display to make the connections except for the chip select pin for the second display the chip select pin is GPI U14 that you see at the top now go back to the Arduino IDE because we need to do some changes uh in the code for the second eye to show on the second screen so we're going to make that changes into the config.h file and you're going to change some things in that file so first we're going here to specify that now we have two screens so you change this number to two and we're going to specify here that the first display is connected the Cs line is connected to gpio 15. this one to gpio 14. here we're going to um change the number of eyes to two because we want two eyes one on each display and here you can change the rotation of your display FDI is showing not correctly on the display you can change this value for both display and you can you can change it you can try zero a zero value a one a two and a three until the the eye is in a good orientation on your display there's one other place we need to make a change before uploading the code so if we go to the user setup header file and we look a little bit further down we're going to see that we have a definition for a cheap select we need to comment that line in order that the chipset egg that we Define here in the config header file take precedence so we need to comment this line line 169 on my screen so you go back to the um TFT SPI Library and we're going to open the user setup in Notepad so we need to locate the Cs line where it is defined a little bit difficult to see Notepad so it's here so you have to comment this line by adding two forward slash and save it we also have to modify the gc9a01 driver it's in the user setup so it's set up 46 this one you open it with Notepad and we have to comment this line the Cs definition forward slash save it now it's time to upload the code and try it so you go to the main sketch and it upload if you get the upload error like me what you need to do is to disconnect the power from the second screen so you disconnect the VCC line from the 3 volt pin on the esp32 and now let's try to upload the code again so it's connecting and uploading the code to the microcontroller code is now uploaded and what you have to do is just reconnect the VCC pin of the second screen and now you should see one eye on each display and there's another problem you can run into if you're seeing one of the eye moving rapidly like this it's because you forgot to comment one of the chip select CS definition in the driver so go back into the Arduino IDE [Music] and make sure that in the user setup select you don't have any CS Define that are uncommented so look around you can make a search also these are not CS CS definition chipset X definition you go to the user setup and you make sure that you don't have any chip select that are uncommented this one is commented that's okay so maybe you have this one that is uncommented so all the tftcs line should be disabled commented like this one it's disabled so look around make a search and make sure all of the Cs definition are commented and re-upload your code and now you know how to use the round TFT display with the sp32 microcontroller and even how to use two of them with one microcontroller I have other video on my channel regarding displays go take a look at them and thanks for watching

Channel: The Last Outpost Workshop

Views: 16,485

Keywords: Arduino, electronic, DIY, code, programming

Id: pmCc7z_Mi8I

Length: 20min 12sec (1212 seconds)

Published: Sat Jun 03 2023