How to Display Animated GIF on OLED/TFT (ESP32, Arduino, ESP8266)

doll here's how to display animated gifs on an OLED or TFT display it's GIF not GIF you stupid dumbass in this tutorial I'm using an esp32 but it should work with any other microcontroller that uses SPI and has sufficient memory to hold the images data oh and you won't need an SD card the image data is held entirely in the devic's flash memory so in the Arduino IDE the first thing we need to do is to install the library so go to tools manage libraries and then search for animated gif and the one we want is animated gif by Larry bank so if it's not installed then install it so this Library also has a GitHub repository I've linked to it in the description below it's really useful to download it because it's got some examples which we can use for our code so to download the examples go to code and then download zip so once you've unzipped it you'll see there's a large number of different examples here the one I recommend using is TFT espi memory so we'll use this one this is the one that I've used as a template for the example you see in this video so this example uses a TFT espi library and this one's generally quite easy to use with the OLED or TFT displays so the first thing to do is to make sure you have this Library installed you probably already got it if you've been playing around round with displays so it's the one by bodmer this is very widely used so if you're using a regular esp32 then this is the PIN diagram you'll need to connect up the screen to the esp32 check my channel because I do have a number of other videos that go into this in more depth so if you're quite experienced at using the Arduino IDE then you should be able to get this example working quite easily I'll have a quick walk through of the code and point out the really important bits so this is my own sketch I've basically made a new sketch and copied and pasted all the really important bits from the example so there's a number of header files we require at the top so this is the S.H tfh these are the display libraries next we include the animated gif Library so we include the header file and then we make an instance of a gif the next thing you want to do is to include the image data more on that later so these are the standard pins for the SPI protocol if you're using an esp32 I've included some color definitions here as well so the display is instantiated here so there are two ways of accessing memory one is to use dma direct memory access and the other one is normal speed so you can play around with this if you want so in this setup routine we initialize the TFT screen so depending on what you want to display you might want to fill the screen with a color first so I've used black here this initializes the animated gif libr I'm not too sure what this is I think this is the file format if you're displaying a gif and it looks a bit corrupted then you might need to change this setting but all the animated gifs that I've used have just needed this format by the way you can rotate the screen so you might find this useful obviously I got a square one but it depends which TFT or OLED display you're using so the frames of the GIF are displayed in the loop itself so it just loops around displaying a different frame every Loop so that's the actual code itself how do we get the images into the sketch so first of all you obviously need some animated gifs to use you can find them in the Google image search if you click on the tools menu here then you can change this and just search for gifs it's a good idea to click on it or you can drag it into a browser window and it should animate so just check that you actually have got an animated gif it's also worth checking the file size I wouldn't use anything bigger than 1 Megabyte I would highly recommend you resize your image to fit the screen or the part of the screen that you want to display it on so I've linked to a couple of these online applications that will resize your animator GIF for you the first one is easy gif.com this one is best just for very simple files it doesn't really have many features so you basically just browse to your file and click upload and then you put in the dimensions that you want it resized to so I use this one for Ru and it worked really well the second one is red cop. this one is really good it's really fast and I recommend this if you're doing much larger files so the good thing about this is that you can resize it so that you can crop the image if you want and only make a shift from a small part of an image so you can change the aspect ratio here so if you got a square screen like I have then you can just use this and this is really nice so this is where to start the image and the dimensions are here so you just click on download once you've done everything so this one is really sophisticated and really worth a look so once you have your GIF you need to convert it to C format so I highly recommend this image to C utility I've linked to it in the description below again as with the other archive you need to go to code and then download zip incidentally this works on both a PC and a Mac so there is a graphical user interface for it if you click on this one however I couldn't get this one to work instead what I recommend doing on Windows is to type CMD and open a command prompt so you need then to CD to the directory you've installed this utility in so make sure that the directory is is the right directory then you can just type this command so it's image to C and then 64 so it's word wrapped a bit see we move it along and then it's dot slash and then the name of the CHF so which one am I doing uh chica dance so I'm doing this one so put this file name in then a greater than sign and then the output file and we want a h file so call it the same and it will call it this one so once you've got this file you need to copy and paste it into the ardino sketch folder so as you see this is my sketch folder and I have three images here so back in the ardino IDE you should find that once you add the images they appear here so chica Dan is here and this is the image data as you can see there's quite a lot of it so this is the image data the animated gif in the format that we can use in the AR IDE I forgot to mention earlier that you must also have this GIF draw. IO sketch in the same folder so back in our main sketch to use the image data all we have to do here is Define theore image and then puts the variable name in from the header file so chica dance was this variable name so if we want to use Homer then we'll just put Homer in so we can uncomment this one and comment this one out again so that's all you have to do to change the images I should also mention that in the Li's download folder there is a folder full of test images so this is the hom Simpson file that I've been using in this video I should also mention that if you want to display moving images on the screen then you don't have to use animated gifs you might want to take a look at this video that I made it's a little old now but it shows you how to make moving Sprites on a TFT or OLED display the good thing about this technique is it takes up very very little in memory in fact that was done on an Arduino Uno so that's how to display animated gifs on a TFT or OLED display I'll just mention that they look much better in real life there's hardly any flickering at all and the animation is really smooth I hope you found this video useful thanks for watching

Channel: Coding With Brett

Views: 3,592

Keywords: oled arduino, oled display, arduino display project, arduino display tutorial, arduino display programming, arduino display oled, oled display arduino

Id: GrNIfwUNaaw

Length: 8min 26sec (506 seconds)

Published: Thu Apr 11 2024