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

Do you like video? Please consider buying me coffee, thanks! www.buymeacoff...
PCBWay - www.pcbway.com...
WOKWI project - wokwi.com/proj...
SOURCE files: github.com/upi...
------------------------------------------------------------------------------------------
In this project, I will show you how to show a simple animation using Arduino UNO and OLED display (SSD1306 IIC OLED). The graphics library for drawing images is u8g2 and Adafruit GFX. Enjoy!
------------------------------------------------------------------------------------------
Links from the video:
WOKWI animator: animator.wokwi...
Animated icons: icons8.com/ico...
128x64 SSD1306 OLED Display 1.54": s.click.aliexp...
128x64 SSD1306 OLED Display 0.96": s.click.aliexp...
128x64 SSD1306 OLED Display 2.42": s.click.aliexp...
Arduino UNO: s.click.aliexp...
Arduino breadboard prototyping shield: s.click.aliexp...
Image2cpp (convert image to c-style array): javl.github.io...
Photopea (online graphics editor like Photoshop): www.photopea.com/
Piskel Application: www.piskelapp....
Related videos with Arduino UNO and 128x64 OLED screen:
Arduino OLED menu: • Arduino OLED Menu Tuto...
U8g vs U8g2: • U8g vs. U8g2 Arduino G...
Arduino Parking Sensor - • DIY Parking Sensor wit...
Turbo pressure gauge with Arduino and OLED display - • Turbo pressure gauge w...
Arduino Car Cluster with OLED Display - • Arduino Car Cluster wi...
Knob over OLED Display - • Knob over OLED Display...
Arduino + OLED = 3D ? - • Arduino + OLED = 3D ?
Arduino OLED Gauge - • Arduino OLED Gauge
Smaller & Faster Arduino - • Smaller & Faster Arduino?
------------------------------------------------------------------------------------------
PCBWay is a service for manufacturing custom PCBs. If you click the link above, you will get a coupon for $5, which is exactly the price of 10 pieces of custom PCBs. In that case, you will only pay for shipping. Do you have any experience doing this? Please let me know in the comment section!
------------------------------------------------------------------------------------------------------------------------------
Do you have any questions? Suggestions for the next video? Please put those down in the comment section. I try to answer as many questions as I can. Thank you for watching, reading the video description and I hope to see you next time. Good luck with your projects!
--------------------------------------------------------------------------------------------------------
#arduino #oled #animation
--------------------------------------------------------------------------------------------------------

[@upir_upir]

Do you like this video? Please consider buying me a coffee, thank you! www.buymeacoffee.com/upir

[@Wokwi]

Finally someone found out about the Wokwi Animator 😉

[@upir_upir]

It’s a great tool, thank you for creating it! Do you have any idea why the second animation was not generating any data?

[@Wokwi]

@@upir_upirIt was a bug in the app. Most animations have a transparent background, and were correctly converted to 1-bit bitmap for the SSD1306. This specific animation had a white background, which caused the issue. It should be fixed now!

[@upir_upir]

@Wokwi ok, thank you for fixing it!

[@smug_cat1]

Now pay him

[@christianmcdowell3052]

Your content has been so fundamental to my projects and learning. Truly a wonderful age to live in technologically, but your personal effort is what really makes this happen. Thank you.

[@upir_upir]

Thank you for your nice words, I really appreciate it! Good luck with your projects and stay tuned for more content.

[@RicZalewski]

This is perfect, fast but not too fast, full of details and yet not overcomplicated to show off so...I will be coming back to your channel. I try to teach robotics to primary school kids and I am always looking for projects that will be fun and educational to young kids. I know I will need to simplify a lot further but having a reliable source like yours it is priceless. I work in a public school so money it is not abundant, but if I can contribute to your channel, let me know.

[@upir_upir]

Thank you for your nice words, I really appreciate it. There are always many ways how to contribute - watching videos, liking, sharing.. and of course providing some constructive feedback and criticism. That´s something that I´m missing a lot.

[@trobinso92]

Thanks!

[@upir_upir]

Thanks a lot sir, I really appreciate that!

[@E1l2r3o4_YT]

Finally! I figured it out. The first time I uploaded the code, it didn't work. But I realized that the address that was default inputted was a different one, it was supposed to be 0x3c. Thank you very much!

[@upir_upir]

Cool, I´m glad you were able to finally run it!

[@sanjyuu2298]

It's listed as 0x78, because it is what you send for real to address this screen, depends how you use it, it is either {0x3C

[@upir_upir]

Thank you for your comment and for the clarification. Is the IIC address generaly listed as 7bit or 8bit? Is there a way by looking at the address to know if it´s 7bit or 8bit?

[@sanjyuu2298]

@@upir_upir I can't say for sure, but it is propably up to device/manufacturer. If you would want to move r/w bit to another byte, then you could have 8-bit address, but you would always need to send at least 2 bytes in order to tell a device if you want to read or write. I had only "experience" with two I2C devices, LM75A temperature sensor and this SSD1306. LM75A had same addressing mode. One of the methods to check if unknown device have 7 or 8-bit address, is to use I2C scanner and look how many device you'll find, with 7-bit devices, you'll always find two of them (for e.g. 0x78 and 0x79). Internet says that I2C device is always 7-bit address followed by read/write bit, but there is nothing to stop you from using 8-bit address if you'd build your own I2C device. It is sometimes valuable to know how I2C address byte is made because while hardware I2C may operate on 7-bit values and you may never know what is really sent, it might be an onset of really hard (bat maybe really short) brainstorm when you have to make a software implementation of I2C from the grounds. :)

[@andymouse]

The walking animation looked great !....cheers.

[@upir_upir]

Thank you, I can always count on you! :)

[@randalltockes2247]

This helped so much. Been wanting to play around with a bitmap animation for a long time. Finally got one working.

[@upir_upir]

That´s great to hear, I´m glad it was helpful. Good luck with your project!

[@GnobarEl]

I learn a lot from your videos! In 13 I got plenty of information! Thanks for sharing!

[@upir_upir]

Thank you, I´m trying to squeeze as much information as possible, I know nobody has time :)

[@GnobarEl]

@@upir_upir Thats why I like your videos! straight to the point! No wasting time about things no one cares! Keep your great work! Can't wait to see the next one :)

[@upir_upir]

@GnobarEl thank you! Please feel free to check my other videos as well.

[@bimokayoba]

Thanks upir ♥, you always came up with new tools that most of us didnt know ☺, Thanks a lot ♥♥

[@upir_upir]

You are welcome, thank you for your comment!

[@LastChanceNow]

Your projects are always interesting. Thank you. I saw simplification here. The black ball will pass through the coordinates of this icon. Sorry for being smart.)

[@upir_upir]

Thank you for your nice comment, but I’m not quite sure if I understand the second part.. which ball? What coordinates?

[@LastChanceNow]

figure eight coordinates. those. the ball runs along the track like a sports car and paints the icon itself black on a black background. Sorry for the english.

[@upir_upir]

Have you ever created any animations for OLED display? I would love to see them!

[@pje_]

A calculator popping out from the left

[@Naku93]

I made the animation of a RGB LED ladder that displays the same visual effect pattern of the led strip before displaying on it.

[@martinkuliza]

I've created animations for CRO's in X-Y Mode does that count

[@upir_upir]

What is CRO?

[@TheHackersBay69420]

@@upir_upir CRO = Cathode Ray Oscilloscope

[@mohamedgendia4274]

Thanx alot ur video saved me a tons of times coding the byte array ❤

[@upir_upir]

Glad to hear that. Thank you for your nice comment and good luck with your projects!

[@soniccinos]

That's some high level content!!!!!! Congrats for the video!! I'm using the ESP8266 but the steps are almost the same!!!

[@upir_upir]

That’s great to hear! Thank you for your comment.

[@arduinomaquinas]

Awesome, very cool brother 😉👏👏👏

[@upir_upir]

Thank you, I´m glad you like it!

[@afnankabir2190]

You speak Adafruit in an interesting way

[@upir_upir]

Not quite sure what is the correct pronounciation.. I´m sure I have it wrong.

[@vygintaskirda2658]

WoW. This is very informative video

[@upir_upir]

I´m glad you like it!

[@jankomuzykant1844]

Difference between those addresses is that 0x3c/0x3d is 7-bit addr for lcd as in i2c spec and 0x78/0x7a is 8-bit data which must be sent thru bus with LSB set for i2c direction (read/write).

[@upir_upir]

Thank you for the clarification. It would still make more sense to list 7-bit addresses on the PCB as those are the addresses that you set in the code.

[@АрсенийГерасимлюк]

Super helpful!!! Nice vid 😆

[@upir_upir]

Thank you, I’m glad it was helpful!

[@imtrung5244]

I have login to say thanks for simulator and lopaka. It save me a lot of time for working with display modules

[@upir_upir]

Thank you for your nice comment, but of course big thanks goes to the creators of those great tools. Good luck with your projects!

[@grea2sy3gaming49]

I tryed everything but every time a get this snow crash screne can someone help me out please?

[@upir_upir]

Can you provide more details? Does it show an image and than it stops animating? Do you see any content at all?

[@Wawan_Setiaw4n_Robotik]

Terimaksih informasinya, sukses selalu semoga ilmunya berkah.

[@upir_upir]

What?

[@Wawan_Setiaw4n_Robotik]

@@upir_upir Thank you for the information, always success, hopefully the knowledge will be a blessing..

[@FullStopBooks]

I have it wired correction, the Adafruit animation test works, so I know my screen and my connections work. I put the correct screen address into this animation code, and I have a blank screen. Nothing.

[@upir_upir]

That´s strange, it should work in a very similar way. What kind of OLED display do you have?

[@pest-alt-account]

Quick question, can you make your own animation with that? I don't know alot about coding i just wanted that for my cosplay

[@upir_upir]

Not using this tool, but you can create custom animations quite easily. Just draw the frame(s) in any graphical tool - like Photopea, export those as PNG files, and convert those to arrays using the image2cpp tool. I describe this process in many other tutorials.

[@nrdesign1991]

I'm really surprised it works this fast over I²C, the examples I've seen so far are all a lot slower.

[@upir_upir]

Perhaps it´s because I´m only drawing pictures sized 50x50px? Drawing a fullscreen picture would be surely slightly slower.

[@BlKSI]

is there a way to convert the gif into an array similar to the walking man example, where each line seems to be a frame and which I can use with the Adafruit library? I think it's more elegant and uses up less space in the IDE.

[@upir_upir]

Sure, the walking man -is- originaly a gif image. If you want to do this manually, you can open the GIF in Photopea and it will create layers > than export those layers, and convert those using the image2cpp website.

[@imranics1142]

Good work 👍

[@upir_upir]

Thank you, I´m glad you like it!

[@tanjiro3285]

Please make a video of Esp32 with OLED displays as it can be used with much more diverse applications. (With u8g Library

[@upir_upir]

That´s exactly my plan!

[@tanjiro3285]

@@upir_upir 🔥🔥🔥

[@justinc2633]

esp32 is exactly the same, did you even try it?

[@tanjiro3285]

@@justinc2633 yup bro. I was able to get it working. I was just suggesting him to implement WiFi and Bluetooth with oled to make them even more interesting 🙂

[@tb303wpf1]

I'm trying to draw an animated sine wave. I've managed to map the pixels with Page Buffer. I cannot get it the pixels to offset for some reason. I'm watching your video here right now. Maybe I'll just make bmp animations in the method you teach here. Thanks as always for the AWESOME videos! Love your content!!!

[@upir_upir]

You can check my latest video, there I also manipulate individual pixels on the screen, perhaps it will be helpful. Good luck with your project!

[@bobbygummy5114]

Hi, I'm using a 2.42 Oled Display SSD1309 SPI with 7pins .... I was wondering how to make the animation code from Wokwi work for my oled display

[@upir_upir]

Please see my older videos where I was also using SPI displays, which should give you some clues about the connections. Otherwise, code-wise, it´s not a big difference.

[@bobbygummy5114]

​@@upir_upirthank you so much😄🥰

[@MrXRes]

I advice to store difference between frames instead of whole frames Also you can try to use RLE compression

[@upir_upir]

Do you have any example of using the RLE compression with Arduino uno and this oled display? It would surely be worth trying, but I’m worried about the performance.

[@fridolineckerd6135]

Does the ardafruit library use a lot of memory, or is it the same as if I would write code to draw the image on it own ?

[@upir_upir]

It will probably take the same amount of memory. If you want to go lower on memory usage, try using u8g2 or other libraries, I have used some that worked even on ATTINY - I have videos about that as well.

[@Dospaj_multigamer]

Which jumper wires are you using

[@upir_upir]

I believe there is a link in the description, but those are standard breadboard wires / dupont wires / jumper wires from AliExpress. Nothing special, probably the cheapest you can get.

[@theprofessional2676]

Please make a video for using Xbee with Oled display and the parking sensors! I am making a rc project and your code is 90% of the project and I learned soooo much from your videos!

[@upir_upir]

Thank you for your comment. Have you seen the parking sensor video? Perhaps that might be a good starting point?

[@Keeping_IT_Simple]

really interested as to why the animation plays slower on the R4 even though it has a faster processor I have seen this on a couple of other boards that have higher clock speed than UNO maybe it has something to do with the Arduino IDE board package for the device?

[@upir_upir]

Not quite sure what is the reason, but it was slower also when using the Adafruit library. I need to investigate it little bit more, as I would like to switch to R4 because I enjoy the bigger memory.

[@Keeping_IT_Simple]

@@upir_upir I have also seen slower animation on RP2040 based board as well as NFR5280 based devices .

[@Nazwan-r7r]

Nice, does it work with python as well?

[@upir_upir]

Thank you. Not this particular tool, but surely you can use Python to draw animation on the oled display. Adafruit website has some examples.

[@eerrfanshayyestehh2069]

🙋‍♂️👍👍good my friend

[@upir_upir]

Thank you!

[@calvin2013]

What about displaying animations alongside custom text or even more complicated; alongside variable values being updated in real time as well?

[@upir_upir]

Yes, I have both scenarios covered in my other tutorials, please feel free to check my playlist with OLED displays.

[@nikheel5643]

Is there a way to only make it loop a certain number of times? I would like the animation to play 10 times and then just stop automatically but have no idea how to do that. Or even to make it start or stop when a button is pressed. It just keeps looping infinitely.

[@upir_upir]

Sure, that should be possible. Just add some counter and increment it with ever loop. Please watch my other tutorials, perhaps that might give you some ideas. I have videos that cover the usage of buttons as well.

[@nikheel5643]

@@upir_upir Thanks for your help. I got it working. I was wondering if there a way to trigger another animation after the first one has gone through it's loop? Thanks again for your previous help. Your videos are super helpful.

[@kaylajason8917]

Thank you so much, worked great. But now have idea for valentines gift. But with flaticon the animation has 2 colors and when i did this its not bringing over the teal color. Is there a trick or way to bring jpg over in one color

[@upir_upir]

You are welcome, try playing with the threshold slider and hopefully that will help.

[@MdYaseen-l6y]

thanks 🌹

[@upir_upir]

You're welcome 😊

[@vinyltheif]

Hi. A good explanation there. Do the patterns also work with the 32x64 oled?

[@upir_upir]

Yes, they do. Just make sure the animation size can fit the display, but if you are talking about the SSD1306 display, it should work without any problems.

[@krishnabhandari5583]

I am learning alot from your content and i request you to make a video on displaying of our picture animation or picture with happy birthday display and song.

[@upir_upir]

Thank you for your comment, can you just use this video as a start and choose a different animation? As for the song, this might be a good start - projecthub.arduino.cc/Sparkbuzzer/happy-birthday-tone-using-arduino-uno-66a676

[@Anticafe-v4i]

is it possible to do this to the eyes? eye movement, have I seen such a project, thanks to the tutorial that you gave me, will I be able to?

[@upir_upir]

You mean animated eyes? That should be possible.

[@aaronsaldanha2815]

Thanks a lot!

[@upir_upir]

You are welcome! Good luck with your projects

[@sreeram9220]

Is it possible to use multiple animation using SD card instead of increasing code size in esp32

[@upir_upir]

Sure, but going with a microcontroller with more memory would be probably easier and maybe even cheaper. You don´t need to go with ESP32, there are other options like UNO R4, or many boards from Seeed Xiao.

[@sammessina3849]

Did you have any issues with the OLED flickering while on camera? If so how did you address it? Thanks :D

[@upir_upir]

I do, all the time. You need to set the camera settings correctly, and even then, I still see the flickering from time to time. Thankfully it´s only on camera, not visible in real world.

[@electrochem8819]

im kinda new at this. this works with 0.96in oled but my 1.54in oled didn't, is there something I can do here?

[@upir_upir]

Sometimes, the display uses SH1106 chip instead of SSD1305, try changing the initialization accordingly to see if that works. You can also include pull-up resistors on the i2C line. Finally, the SSD1306 chip can have two different addresses, perhaps you need to see the address first. Run the I2C scanner sketch first to find out the address. Hope this helps!

[@danielli6665]

My SSD1309 has 7 pins, does it work with this? If so, what's the connections?

[@upir_upir]

It will work, your is SPI version. Just use a different initialization. I believe I have the connections listed in my "arduino turbo gauge" video.

[@buildyear86]

incredible skills. Really amazed. Could all of this also work the same using small sized graphical monochrome lcd displays?

[@upir_upir]

Yes, that should be possible. Google "u8g2 gallery" and you will find a lot of different displays for which you can use this technique.

[@buildyear86]

@@upir_upir thank you for this suggestion. I am pretty new to this and surely will learn more from your channel... ofc subscribed!

[@fullpower8382]

Du bisch brudal! :o)

[@upir_upir]

What is "brudal"?

[@fullpower8382]

@@upir_upir Hi my Friend. Its a German dialected Word (In Germany called "schwäbisch") what u can use for great, fantastic or any other positive Description. :-) A german Reader would still understand.

[@евгенийсазонов-э2у]

🎉Наверно все супер. Но не чего не понятно. Но видно что человек со знанием дела

[@upir_upir]

English please? Thanks!

[@juancarlos1549]

I really liked your video today @upir ... And it's just where I have a problem with an Array of 1000 samples, but I'm doing a 560 Hz sine signal through a matrix without the screen that you use, just I am using a R2R Network with an amplifier... If you make the same signal with 256 samples you can see the output signal, but increasing to 1000 samples the signal is distorted... By the way, I am using interrupts to increase the frequency... According to your experience, what could be the problem you have when you increase the number of samples of a matrix from 256 to 1000???? Greetings.

[@jankomuzykant1844]

What is the type of the variable for sample counter ? Maybe it's byte (char) 🤔

[@juancarlos1549]

@@jankomuzykant1844, At first I used byte, but then I changed it to char and in neither of the two modes it works, the output signal is distorted... I have come to the conclusion that the array has many elements (1000 samples)... Greetings.

[@jankomuzykant1844]

@@juancarlos1549 Then you need integer because 1000 samples is 10-bit counter and char is only 8 bit

[@juancarlos1549]

@@jankomuzykant1844...I am going to tell you what I did, first I know that the R2R that I was going to use needs a number of 2^8 = 256, this is because of the Arduino ports, so my sinusoidal signal cannot exceed those values, the smaller number is 0 and the largest is 255... I did all this in MATLAB as with 256 samples the sinusoidal signal comes out very distorted in MATLAB and in the Arduino output, I put 1000 in MATLAB and a perfect sinusoidal signal comes out with 1000 samples, but the Arduino only outputs a very distorted signal, but not the signal I want... Now do you understand the problem? Greetings.

[@upir_upir]

Looks like someone was quicker with the answer, hopefully that did solved your problem. Yes, both byte and char are 1 byte variables, and could only hold 256 values - either -128...+128 or 0..256

[@RetroRobloxDev]

Will it display colored animations??

[@upir_upir]

Not this particular display, this one only displays one color.

[@RetroRobloxDev]

@@upir_upir which one does???

[@slabua]

Is there any equivalently easy way to do it for micropython/pico, that you are aware of?

[@upir_upir]

I have used micropython with pico in my older video, and was able to display image in a very similar way, so I believe that you can use this approach and just slightly modify it to run on pico. I will try it and let you know how it went..

[@slabua]

@@upir_upir Thank you!

[@Nayel-Khouatra]

Hi Upir, is it possible to add multiple animation in one code if so can you make a video out of it please !

[@SyncMotion27]

Yes, it is possible. You can have multiple animations by programming to switch to the next animation automaticaly or by pressing a button.

[@upir_upir]

Someone was quicker with the reply, but yes, it is possible. You can have as many animations as you want as long as it fits into the available memory.

[@Nayel-Khouatra]

@@SyncMotion27 thanks ! I will try that.

[@Nayel-Khouatra]

@@upir_upir Thanks !

[@upir_upir]

You are welcome. Please feel free to check also my order videos as I have quite a lot of them using the same display and showing animations.

[@Nithin-e4c]

pls, any help me. my oled screen is not working i don't know what to doo pls telllllllll

[@upir_upir]

Can you provide more details about what´s not working?

[@Nithin-e4c]

@@upir_upir that adafruit library is not working for me :(

[@yradelrosario9837]

Can u customize it?

[@upir_upir]

Sure. You can display any animation you want.

[@asirisudarshana536]

Can we use with nodemcu 8266

[@upir_upir]

Yes, that´s possible. I don´t think you even have to modify the code.

[@_sn33k_]

Can someone help me make one for a cronus zen device? Like when im ADS or shooting the image or picture or something like that will display another image on the cronus zen screen

[@37289-s]

🙏🙏🙏

[@upir_upir]

You are welcome!

[@developedmobile4692]

It Work with esp 8266 ?

[@upir_upir]

Yes, it should work with ESP as well. If your is ESP32, you can also simulate it on WOKWI.

[@developedmobile4692]

@@upir_upir ok bro

[@broteendas1194]

How many more open source resources does this guy know about?

[@upir_upir]

I´m sure there are many tools that I don´t know about yet!

[@karlohorcicka7388]

Bro... The way things are going, in a few videos you'll make arduino gameboy 🤣

[@upir_upir]

Don´t say it twice :)

[@fenohikari]

why did you devided by 8 when calculating the bytes? also how can I send the image codes to the sd card (and can you make a video about it?)

[@upir_upir]

You divide it by 8 because one pixel is one bit, and data is stored by bytes, i.e. 8 bits.

[@fenohikari]

@@upir_upir i see thank you for your responce

[@davidhugheszerobubblemodel1865]

Nothing Works!!! I have tried soo many tutorials on how to do this and nothing works!!! I have followed all the instructions...

[@upir_upir]

Can you perhaps share what Arduino board and what display are you using?

[@davidhugheszerobubblemodel1865]

@@upir_upir thanks for the prompt reply. I was frustrated as I have tried everything and nothing was working. I am running an Arduino uno, breadboard, 1.3” I2C 128x64 OLED. 4 pin. Code would verify and run but the OLED would do nothing, I have imported the 2 libraries. (Adafruit.GFX and SSD 1306.) to no avail…

[@salmanchaudry7459]

What if i need to use this with SH1106 driver based OLED's?

[@upir_upir]

For u8g2 library, you just use a different initialization. For example: U8G2_SH1106_128X64_NONAME_F_HW_I2C(rotation, [reset [, clock, data]]) [full framebuffer, size = 1024 bytes]

[@justinc2633]

if you need more memory the solution is most definitely not another arduino lol. get an esp32

[@upir_upir]

Agreed. But there are some Arduino clones that have plenty of memory.

[@patamax7879]

On ferait ça en 1985 avec un Thomson to5 😅😅😅.

[@upir_upir]

Do you mean mo5? 😳

[@ekhalilov5543]

♾

[@upir_upir]

:)

[@karlohorcicka7388]

I have no sound on your video

[@upir_upir]

I´m sorry to hear that but that´s most likely a youtube issue.

[@mrbeatsgiveaway5133]

whyd

[@upir_upir]

What?

[@raqtty]

i was looking for something like img2cpp, ty

[@upir_upir]

I’m glad it was helpful. Feel free to check also my other videos, as there are a few more useful tools like Lopaka.