Introduction: Create Animation on OLED Display Controlled by Arduino
In this tutorial I will show you how to create animation on small OLED display connected to Arduino Nano.
Step 1: Supplies
We need following two components for this project
- Arduino Nano
- SSD1306 SPI 128x32 display
You can also use SSD1306SPI 128x32 display but it will need code adjustments when declaring the display.
Step 2: Creating Bitmaps for the Animation
This is probably the most time consuming step. You have to create a set of frames thet would fit into 128x32 format. You can try to create them from any flipbook cliparts you can find on the net.
All the frames need to be black and white!!!
I created the frames that show the running creature
Step 3: Connectivity
Here is the diagram how the OLED display should be connected to Arduino
If you are not familiar with OLED display you can also check my video tutorial on how to connect them and how to initialise them in Arduino code
Step 4: Creating Code Representation of the Bitmaps
To create code representation of the bitmap we would use online tool
Image2cpp
You can find it going to the url below
https://javl.github.io/image2cpp/
Execute following steps:
- In Select Image section open your frame files one by one
- Check if images uploaded correctly by checking Image Settings section
- Check Invert image colors if you want to have black background and only line pixels lit
- In the Output section
- In Code Output Format specify "Arduino code"
- Provide the name of your animation in Identifier/Prefix
- Press Generate button
- Save the generated code . It will be pasted into arduino sketch
Step 5: Creating Animation Code
First we need to declare required libraries
#include <SPI.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h><br>
First two are for SPI interface the other two are for working with OLED displays
The we need to define the size of the display
#define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 32 // OLED display height, in pixels<br>
Then we declare pins through which OLED display is connected. And with those pinswe declare the display itself
// Declaration for SSD1306 display connected using software SPI #define OLED_MOSI 11 #define OLED_CLK 13 #define OLED_DC 9 #define OLED_CS 10 #define OLED_RESET 8 Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT,OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);<br>
Then you have to copy paste the code we got from Image2cpp
It is a fairly lengthy code so I will not paste it here in full. I will show just one frame
<strong> unsigned char RUN1 [] = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x00,
0x00, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x1e, 0x00, 0x00, 0x00, 0x01, 0x83, 0x80, 0x00, 0x00, 0x00,
0x07, 0x00, 0x00, 0x00, 0x03, 0x00, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xc0, 0x00, 0x00, 0x03, 0x0c,
0x40, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xe1, 0x0c, 0x60, 0x00, 0x00, 0x00, 0x00, 0xf0,
0x00, 0x1f, 0xff, 0x80, 0x20, 0x00, 0x00, 0x00, 0x01, 0xe0, 0x00, 0x01, 0xf9, 0xe0, 0x20, 0x00,
0x00, 0x00, 0x03, 0xc0, 0x00, 0x00, 0xcc, 0x78, 0x60, 0x00, 0x00, 0x03, 0xe7, 0x80, 0x00, 0x00,
0x64, 0x1f, 0xc0, 0x00, 0x00, 0x0e, 0xff, 0x00, 0x00, 0x00, 0x66, 0x00, 0x00, 0x00, 0x00, 0x1c,
0x0e, 0x00, 0x00, 0x00, 0x33, 0xf0, 0x00, 0x00, 0x00, 0x30, 0xf8, 0x00, 0x00, 0x00, 0x18, 0x1f,
0xf0, 0x00, 0x00, 0x7f, 0xf0, 0x00, 0x00, 0x00, 0x08, 0x00, 0x00, 0x00, 0x01, 0xfc, 0x00, 0x00,
0x00, 0x00, 0x0c, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x00, 0x00, 0x06, 0x00, 0x00, 0x00,
0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0x00, 0x00, 0x00, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00,
0x01, 0x86, 0x00, 0x00, 0x0c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xcc, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x78, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};<br></strong>Then in Setup function we are initialising the OLED display
void setup() {
// SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
if(!display.begin(SSD1306_SWITCHCAPVCC)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;); // Don't proceed, loop forever
}
// Show initial display buffer contents on the screen --
// the library initializes this with an Adafruit splash screen.
display.display();
delay(2000); // Pause for 2 seconds
}<br>And then we have loop functions where we replay all 10 frames in 50ms intervals
void loop() {
// Diplay Animation
// Frame1
display.clearDisplay();
display.drawBitmap(30,0,RUN1, 80, 32, 1);
display.display();
delay(50);
// Frame2
display.clearDisplay();
display.drawBitmap(30,0,RUN2, 80, 32, 1);
display.display();
delay(50);
// Frame3
display.clearDisplay();
display.drawBitmap(30,0,RUN3, 80, 32, 1);
display.display();
delay(50);
// Frame4
display.clearDisplay();
display.drawBitmap(30,0,RUN4, 80, 32, 1);
display.display();
delay(50);
// Frame5
display.clearDisplay();
display.drawBitmap(30,0,RUN5, 80, 32, 1);
display.display();
delay(50);
// Frame6
display.clearDisplay();
display.drawBitmap(30,0,RUN6, 80, 32, 1);
display.display();
delay(50);
// Frame7
display.clearDisplay();
display.drawBitmap(30,0,RUN7, 80, 32, 1);
display.display();
delay(50);
// Frame8
display.clearDisplay();
display.drawBitmap(30,0,RUN8, 80, 32, 1);
display.display();
delay(50);
// Frame9
display.clearDisplay();
display.drawBitmap(30,0,RUN9, 80, 32, 1);
display.display();
delay(50);
// Frame10
display.clearDisplay();
display.drawBitmap(30,0,RUN10, 80, 32, 1);
display.display();
delay(50); <br>You can get the entire code going to following URL
Step 6: Final Result
You can see the final result in the attached video tutorial.
This particular animation was done for fun. But also please check my other video in which I create animation for a real project. Here I build an eggtimer/countdown timer in which when the counter goes down to zero the buzzer sound is played. I added a ringing bell animation to go with the buzzer sound.
Hope you enjoyed this tutorial and you will be able to replay my animation.
It would be great if you could based on this tutorial create your own animation. If you do don't forget to send me the links to videos that will show the result of your work.
If you like this content and you want to support me in creating similar videos go to my Patreon webpage
https://www.patreon.com/MariosIdeas Or Paypal