Maker Pro

Beginner’s Guide to Display Text, Image & Animation on OLEDs

December 08, 2018 by ElectroPeak Inc

In this article, you will learn how to run OLEDs by Arduino, and display text, images, and animations on them.

In this article, we’ll talk about OLED displays' story and their differences, how to run them by simple controllers, and show text and images on them. At the end of this article, you will be able to:

  • Explain OLED display theory
  • Run OLED displays by Arduino
  • Display all type of text or images
  • Display simple animations

OLED: What’s the Theory?

An organic light-emitting diode (OLED) is a high-contrast and high-resolution display, making it easy for users to be readable. This kind of displays doesn’t have a backlight and create the backlight themselves and this makes them sharper, clearer and smoother than LCDs. American physical chemist Ching W. Tang and Steven Van Slyke at Eastman Kodak built the first practical OLED device in 1987. Nowadays we can see the upgraded generation of OLED like Super AMOLED and AMOLED Plus of SAMSUNG and POLED of LG.

Small OLED modules are very useful in electronics projects. Simple wiring and high readability of displays are suitable for showing data, numbers and simple images. You can find different size and colors of these panels with different resolutions. Based on your project, you can choose parallel, SPI or I2C model. There are monochrome, 2 colors and 16-bit full-color panels to use. We choose a 128*64, 0.96 inch, SPI OLED display with SSD1306 driver and Arduino UNO. Read the rest of this article to learn how to display text and images on OLED displays.


There are different SPI OLED displays with different pin names. Use the circuit illustration above to find out the meaning of your module pin names. Most of the OLED modules work with 3.3 Volt power too. You can change the pin of Arduino but you must change it in code too.


If you don’t have the components or don’t want to buy them, you can try it by Proteus simulation and edit it by your interest. Download the following project file.


There are a lot of Libraries written for OLED modules. In this article, We choose the WaveShare OLED SSD1306 Library. It’s not complicated and you can even change the library according to your code. You must first add the library and then upload the code. If it is the first time you run an Arduino board, don’t worry. Just follow these steps:

  • Go to and download the software of your OS. Install the IDE software as instructed.
  • Run the Arduino IDE and clear the text editor and copy the following code in the text editor.
  • Navigate to sketch and include the libraries (Download libraries from the following links). Now click add ZIP library and add the libraries
  • Choose the board in tools and boards, select Arduino UNO.
  • Connect the Arduino to your PC and set the COM port in tools and port.
  • Press the Upload (Arrow sign) button.
  • You are all set!

#include "ssd1306.h"
#define WIDTH     128
#define HEIGHT     64
#define PAGES       8
#define OLED_RST    9 
#define OLED_DC     8
#define OLED_CS    10
#define SPI_MOSI   11    /* connect to the DIN pin of OLED */
#define SPI_SCK    13     /* connect to the CLK pin of OLED */
uint8_t oled_buf[WIDTH * HEIGHT / 8];
void setup() {
 Serial.print("OLED Example\n");
 /* display images of bitmap matrix */
 SSD1306_bitmap(0, 2, Signal816, 16, 8, oled_buf); 
 SSD1306_bitmap(24, 2,Bluetooth88, 8, 8, oled_buf); 
 SSD1306_bitmap(40, 2, Msg816, 16, 8, oled_buf); 
 SSD1306_bitmap(64, 2, GPRS88, 8, 8, oled_buf); 
 SSD1306_bitmap(90, 2, Alarm88, 8, 8, oled_buf); 
 SSD1306_bitmap(112, 2, Bat816, 16, 8, oled_buf); 
 SSD1306_string(0, 52, "MUSIC", 12, 0, oled_buf); 
 SSD1306_string(52, 52, "MENU", 12, 0, oled_buf); 
 SSD1306_string(98, 52, "PHONE", 12, 0, oled_buf);
 SSD1306_char3216(0, 16, '1', oled_buf);
 SSD1306_char3216(16, 16, '2', oled_buf);
 SSD1306_char3216(32, 16, ':', oled_buf);
 SSD1306_char3216(48, 16, '3', oled_buf);
 SSD1306_char3216(64, 16, '4', oled_buf);
 SSD1306_char3216(80, 16, ':', oled_buf);
 SSD1306_char3216(96, 16, '5', oled_buf);
 SSD1306_char3216(112, 16, '6', oled_buf);
void loop() {


You can use a breadboard and male/male jumper wire to do it.

Now upload the code.

Display Image and Animation

To display an image, you have to convert it to a hex code. There are several applications that convert an image and to a hex code. You can download one of them from the following link. First, run the software and open an image from File menu. Your image size should be smaller than 128*64 pixels. Then click conversion from Option menu and be sure the settings are the same as the following image.

Click Convert from File menu. Now open the.c file and copy the hex code. In the main code, add the hex code in the following format.

const uint8_t SAMPLE_NAME [] PROGMEM = {0x00, 0x00, 0x00, 0x00 .... 0xFF };

Now, add the following line to the loop.

SSD1306_bitmap(0, 0, SAMPLE_NAME, 128, 64, oled_buf); // (x location, y location, Name of image, width, height)

It’s done, Upload the code to Arduino.

What’s Next?

For more practice, we add an example gauge and text animation. try to edit it and make your own animation on the display.

You can also read this project on ElectroPeak's official website.

Related Content



You May Also Like