Simple ILI9341 LCD Display With ESP32 Dev Module Step By Step

hi welcome back to shitoku tech a friend of the channel has an interesting project a pinball machine that he is refurbishing he wants to use various display modules and dev boards to dress things up with cool images and flashy texts but he's hung up working with the ili 9341 display panel so let's make this ili 9341 display panel play nice with the esp32 dev module i didn't have either of these on hand so my friend bought me a few coffees to defray the cost hey thanks for that these arrived quickly now i can begin to work with them when you look at the ili 9341 it's actually three different devices or modules on one board you have the display you have the touch panel and you have the sd card reader for those of you that are familiar with my channel you know i like to focus on succeeding at something simple first before going to something more complex this is my advice to anyone new to this hobby or each time you start to work with something unfamiliar to you succeed at something simple first then build on that success we will only be wiring the display portion of this ili 9341 at this time to keep things simple leave a comment below if you want me to make a video about the touch panel or the sd card here is the text version of the pin out this is actually my first time working with an esp32 dev module so i have to get my head around it let's simulate the wiring 3.3 volt to vcc and led on the ili 9341 ground goes to ground pin 15 goes to cs pin 2 goes to dc pin 4 to reset pin 18 to sck and pin 23 to sdi now let's do it live 3.3 volts to vcc and led ground goes to ground pin 15 to cs pin 2 to dc pin 4 to reset pin 18 to sck and pin 23 to sdi now it's time to put the ili 9341 to the test there are several interesting libraries and projects for the ili 9341 and esp32 but i'm loathe to go down a new path when we're already familiar with the tft espi library we've been working with the tt goatee display using this one if you go back to this t display video i advised to simply copy the tft espi folder from the ttgo t display library on github to your arduino libraries folder so this is a fork in the road i kept getting compile errors on example sketches for the ili 9341 using the ttgo version of tft espi it must be customized somewhere beyond the user setup and user setup select files i'm just going to rename this entire folder now in library manager let's install the latest vodmir tft espi library with the fresh copy of the bodmir tft espi installed we just have to modify the user setup file by default the ili 9341 driver is uncommented at the top here let's scroll down and comment out the node mcu pin selections scroll down further and uncomment these esp32 pin selections that's it let's see what else we need to prepare the arduino ide for this esp32 dev module in file preferences additional board manager urls make sure you have this espressif url in there in board manager make sure you have esp 32 installed i select the esp32 dev module and the correct serial or com port we can run this example tft custom fonts demo oops i forgot remember to hold the gpio0 button down before the arduino ide begins to upload my friend probably wants to display images let's go back to one of my previous videos where i show multiple images in succession to animate a meme upload this there we go it's a cool meme but we need to resize it for this display so we're going to do a batch resize in ear fan view we're going to convert these jpegs to c files at reiki dink electronics with their image converter rename these files from dot c to dot h we'll save a copy of our sketch with a new name copy our image files into this folder let's touch up the program a little for the ili 9341 in the bodmer library we can use the default value when we initialize tft espi we update these tft push image commands to reflect the size of the ili 9341 let's upload the sketch make sure to hold that button down there we go big dreams need big memes i want to go back to another one of my videos playing gifts on the ttgo t display this spongebob meme seems deserving for this instance we download the gif now we're going to go to resize image.net to resize our gif to fit the ili 9341 select our gif to resize now i'm clearing the aspect ratio check box because we don't want to maintain it we want to be able to free resize set the new size to 320 by 240. at the bottom we're going to set the highest optimization and reduce the color depth to 64. we download the resize gif now i really should have renamed the file to something simpler you'll see why in a minute now we run the image to c program against this resize gif image outputting it to out dot h oops i forgot the greater than symbol in between there we go we have converted the gif image to an h file that we can include with this tft memory example sketch i used in the ttgo gif video let's save a copy of this sketch we're going to copy the out.h file we just converted into this new sketch folder is there anything else in the sketch i need to update oh yeah there is this reference to the name of the image inside of the out.h file this is where a simpler file name would have been better so we're going to change it to spongebob there we fix the image name in the include file and in the sketch save and upload oops a different rotation is needed so we go set the screen rotation from zero to one and upload again there we go spongebob meme excellent there we go spongebob meme excellence indeed i hope this breakdown of the minimum wiring needed for the ili 9341 and example sketches displaying images and playing a gif is a catalyst for your next project check out the links below in the description to find these examples on my github site make sure to watch my previous ttgo t display videos for more details on these sketches image processing etc comment below with your favorite meme you want to display give this video a like and please subscribe thank you very much

Channel: ShotokuTech

Views: 43,087

Keywords: ILI9341, ESP32, ILI9341 LCD, ESP32 Dev Module, Arduino IDE

Id: pYp1Nxmfdeg

Length: 10min 11sec (611 seconds)

Published: Mon Aug 16 2021