Arduino OLED Animations -- tutorial for beginners, Arduino UNO, u8g2, Adafruit GFX, SSD1306, SSD1309

okay so in this video I'm gonna show you how to create animations on the OLED display using the Arduino Uno just like the one that you see right now and it will be super simple because we will be using the dedicated tool called walkway animator and in here you just select which icon you like and there's actually a lot of icons to choose from and you can always see a preview on the right side on the display itself I think I will go with this Walking Man loading animation and then you select the size I'll make it slightly smaller being 48 pixels and then you click the get the code button and you have the Arduino code to run on your Arduino and that's pretty much it that's quite simple right so let me actually show you how to run it on the Arduino but before I do so let me talk about the sponsor of today's video which is PCB way and not only you can get pcbs or SMD stencils but you can also get 3D printing or CNC Machining and pretty much anything you might need for your project also if you use the link down in the description you can get 10 pcbs for free only paying for shipping so thank you PCB way and let's get back to our project so let me show you how to run this animation on the Arduino as a first step I will run it on walkway which is a free online Arduino emulator and select the Arduino Uno to start with and of course I want to add the Ola display which is this SSD 1306 OLED display and connect it to the Arduino board so the ground goes to ground the VCC goes to 5 volts and then the scl serial clogger goes to pin A5 and SDA serial data goes to pin A4 then I will jump back to the vocal animator and copy the code in the clipboard and paste it in here the code uses two libraries being the Adafruit gfx and Adafruit SSD 1306 that we need to add to our sketch so go to library manager and click this plus icon and type in Adafruit gfx and click this library and then click this plus button one more time and type in Adafruit SSD 1306 and click this library now we can go back to sketch and click this start the simulation button and after a few seconds the simulation is running but we don't actually see anything on the display let's assume that everything is connected correctly and there is no problem in our code because we haven't seen any error messages when compiling the code if I stop the simulation and open the help page for the OLED display you will see that the first thing it mentions is that the its currency address is 3C but if you look in our code we actually set this address to be 3D instead of 3C so I'll just try to change it to 3C instead and restart the simulation enter another VC a working man on the Ola display he's probably very old because he's working very slowly and I think that's because we have this delay inside the loop I don't think that the delay is needed because the drawing takes some time so I can just comment it out and restart the simulation again and now the animation is looking much better so let's try to run the same sketch on the real Arduino for that you will need the Arduino Uno and the SSD 1306 128 by 64 pixel resolution 8 square C version of the OLED display and some jumper wires the connection is same as on the walkway sketch which means that the ground goes to ground the VCC goes to 5 volts and then the SDA serial data goes to pin A4 and scl serial clock goes to pin A5 now I have this display which is sized 1.5 inch that's my favorite one but if you want you can also get a list by the slightest mode this one is 0.9 inch or I display that is much bigger this one is around 2.5 inches they should all work because they have the same chip same resolution and same connection it's just that the physical size is different finally you connect the Arduino to your PC but I guess that's obvious right then you go to Arduino IDE and paste the code from the workway sketch now if you haven't used those two libraries before you need to go to libraries and then install those by searching for the names so this one is Ada Freud gfx you can see I already have this Library installed and the second one is Adafruit SSD 1306 this one I actually don't have so I will click the install button so once everything is successfully installed I can select the board in my case it's Arduino Uno and click the upload button and in a few seconds we should see the same walking man on the OLED display and I have to say it looks very nice and it also took us almost no time to get it up and running which is great because it gives me a time to show you a second way how to get the animation on the OLED screen and it will also be very simple if I jump back to the walkway animator and reload the page and go to the loaders section I like this infinite loading animation however if I click the get the code button you can see that all of the content is pretty much empty it's just all 255 and it's not showing any content unfortunately so something is broken maybe getting the image from the server but this is a good excuse to use a different tool so first I will go back and open this link to the icons 8 website and here I will search for the infinity and I quite like this spin one so I'll open it and download it as a gif file and then we want to convert this gif file into the C style arrays so something like this for that they can use a tool called image to CPP but when I select the gif file you'll see that I can only see the first frame so I need to First separate those frames into individual files and there are many online tools to do that but my favorite one is follow P which is like a free online version of Photoshop so if I open this gif file you can see that I get all those individual frames as layers so if I zoom in a little bit I can kind of see the animation as I make those individual layers visible so something like this unfortunately there is no way how to play it inside photo P but that doesn't matter right now all you want to do is to export those individual frames as individual images and I can do this by clicking file export layers make sure to uncheck this first checkbox because otherwise it will only export layers with the dash e Dash into name and we don't have any of those so I will uncheck this one and we can probably check the new spell it but I don't think it makes any difference and then click export layers and that will export all those 28 frames as PNG images so we can jump back to the image to CPP website and select all those images to be converted into the C style arrays you can see the preview down here in here you want to do two things the first thing is to invert the images because the white color is the one that is being drawn so I will click this invert image course checkbox the second thing is to check this Swap checkbox and that's because we will be using the u8 G2 library to draw stuff and this one is required so then I will click the generate code and copy output we will also try this in the walkway sketch but this time I will not be starting from scratch but from my older video titled image to olet in 60 seconds and I will open this walkway project now if I run this you can see that I'm showing a full screen image only over the display and the code is pretty simple just clearing the buffer drawing the image and sending the buffer to the display this time we are not using the Adafruit library but we are using the uadg2 library so I will delete the full screen image definition which is this piece of the code and instead paste the content from the image to CPP website which looks like this you can see I have 28 different frames then inside our loop I want to of course draw this image so I'll just randomly pick one for example this one and the size if I scroll up is 50 by 50 pixels so I'll make sure to change it in here as well so 50 by 50 pixels and let's restart the simulation and you can see one of the frame being displayed on the over the display but we don't want to show a static image we want to show the animation thankfully when generating the code using the image to CPP website we also get this array which holds all the individual frames so I can use this array to draw those images unfortunately you can see that the order of those individual items is somehow not correct so I have to just sort it out based on the number and now I can use this array to draw the image so instead of drawing this image I will draw an image from the array and for the index let's create a new variable for example called counter so I'll create a new variable of the type integer called counter set it to 0 and after everything is drawn I will of course increase the counter saying counter equals counter plus 1 and since I have 28 frames going from 0 to 27 I can say module 28 that will make sure that it will always go between 0 and 27 and I can remove this Delay from drawing Loop because I don't need any delay I can probably also Center the image on the display by increasing the x value to 13 9 and the Y value to 7 and I can restart the simulation one more time and now the animation is nicely playing in the middle of the screen so again let's try the same thing on the real Arduino and as you can see it looks exactly the same so now the animation is playing on the OLED display and I can use this middle sized OLED display or I can also use this small one or the bigger one let's talk about the its currency address one more time and we already know that the used chip to SSD 1306 or 1309 supports two different its Clarity addresses and for some modules you can actually switch between those if you take a closer look at this PCB you can see that there is very small print saying ID Square C address and then there is a small resistor and so if you desolder the resistor and solder it again on the right side you will switch the address from 7 8 to 7A which is kind of strange right previously we've said that the address could be 3C or 3D and now we see 7 8 and 7A and that's because of 3C and 3D are 7-bit addresses and this 7 8 and 7A are 8-bit addresses so what we have to do is we have to bit shift by one bit and we get 3C and if I bit shift by one bit less 7A we will get 3D I don't quite understand why it's listed as 7 8 and 7A on the PCB maybe there is a good reason if you know it please let me know in the comment section for me it's quite confusing because those are not the addresses that you set in the code speaking of confusion when I started using the uh G2 Library I was surprised that there is no place where you set the ID Square C address pretty much you just call the uid2 begin function but if you look at the documentation it says that by default the uh G2 Library assumed that there is the lowest possible its currency address of the display being set and if that's not the case then you have to call the set its course address function before calling the begin function which means that most of the time you don't actually have to call this function and you don't have to sell the ice course the address because it's already predefined and hard coded in the uid2 library when dealing with animations and a lot of images it might be a good idea to talk about the memory usage So currently we are using the Arduino Uno which is 42 kilobytes of flash memory and 2 kilobytes of RAM memory and since we don't need to change those image during runtime we can store those in the flash memory and that's done by typing this program board so again we have 32 kilobytes available now for every pixel one bit is being used and since our image is 50 pixels wide it means that we are using divided by 8 so we are using 6.25 bytes but that's not possible because we can't split bytes like this so we have to round this up to seven so we are using seven bytes per one line so seven times the height which is again 50 pixels for the height we are using 350 bytes for one image and if you count the number of values in this array you will find that there are exactly 350 values and since we have 32 kilobytes available it means that we can store up to 90 or so images obviously not 91 because we have to also store the program in the memory but you will definitely not be able to store more than 90 images being sized 50 by 50 pixels now a lot of people ask me if they can use the SD card to store more data more images and that's of course possible but I think that much better solution is actually using a different board for example the newest Arduino Uno R4 Minima or Wi-Fi because that one has much more memory we have 255 kilobytes of Flash and 32 kilobytes of ram which means that if you use the same sized images we can now store about 700 of them so that's quite a lot now since the Arduino Uno R4 has a higher clock speed you might think that it will play a little bit faster unfortunately that's not the case you can see it's playing even a little bit slower than the R3 so that's something that I would like to investigate a little bit more very soon as for the connection this time I've used a dedicated SDA and scl pins because for some reason it wasn't working with A4 and A5 pins the good news is that those dedicated ice core c pins are also only Arduino Uno R3 boards finally let me talk about creating your own custom animations and you can use Photo P to draw individual frames but then you have to switch between those and there is no easy way how to play this animation in your real Photoshop you have this timeline pane where you can play the animation and jump between individual frames easily unfortunately this functionality is missing in follow B at least for now thankfully there is another application that I was using for a few of my other projects and that's this physical application same as follow p is also online and free and here you can create your own animation and the advantages that you can see the previous frame as a semi-transparent pixels and you can see animation playing all the time on the right side so every time you make a change you always see the most up-to-date version of your animation so that's quite nice tool and you can also import the animated gif files so if I open our infinite Loop animation keep the same size I can make changes to this animation while still seeing the preview playing all the time and then once you make changes to this animation you can export it as a gif file PNG file or even the C style array so this is pretty useful tool so hopefully this video showed you less playing animations on the OLED screen could be very simple and easy as always if you are using the right tools you can save a lot of time and so that's it for today if you have any questions or comments please put those on in the comment section thank you very much for watching and I hope to see you soon thanks and bye

Channel: upir

Views: 111,935

Keywords: arduino, microbit, ui, gui, ui design, arduino display, oled lcd, gauges, gauge, digital gauge, dashboard, car cluster, digital car cluster, digital dashboard, esp32, raspberry pi, round display, animation, tutorial, diy, cluster design, pixel, microbit makecode, arduino ui, custom display, custom car cluster

Id: o3PhC_VJdXo

Length: 13min 12sec (792 seconds)

Published: Thu Aug 31 2023