ESP8266 0.96 Inch OLED Display With Arduino IDE
ESP8266 0.96 Inch OLED Display With Arduino IDE
The model we’re using has four pins and communicates with any
microcontroller using I2C communication protocol. There are models that
come with an extra RESET pin or that communicate using SPI
communication protocol.
Pin ESP8266
Vin 3.3V
GND GND
SCL GPIO 5 (D1)
1. Open your Arduino IDE and go to Sketch > Include Library > Manage
Libraries. The Library Manager should open.
2. Type “SSD1306” in the search box and install the SSD1306 library from
Adafruit.
3. After installing the SSD1306 library from Adafruit, type “GFX” in the
search box and install the library.
4. After installing the libraries, restart your Arduino IDE.
We’ll program the ESP8266 using Arduino IDE, so you must have the
ESP8266 add-on installed in your Arduino IDE. If you haven’t, follow the
next tutorial first:
In your Arduino IDE, go to File > Examples > Adafruit SSD1306 and
select the example for the display you’re using.
The following code should load:
/*********
Complete project details at
https://randomnerdtutorials.com
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define LOGO_HEIGHT 16
#define LOGO_WIDTH 16
static const unsigned char PROGMEM logo_bmp[] =
{ B00000000, B11000000,
B00000001, B11000000,
B00000001, B11000000,
B00000011, B11100000,
B11110011, B11100000,
B11111110, B11111000,
B01111110, B11111111,
B00110011, B10011111,
B00011111, B11111100,
B00001101, B01110000,
B00011011, B10100000,
B00111111, B11100000,
B00111111, B11110000,
B01111100, B11110000,
B01110000, B01110000,
B00000000, B00110000 };
void setup() {
Serial.begin(115200);
void loop() {
}
void testdrawline() {
int16_t i;
display.clearDisplay();
display.clearDisplay();
display.clearDisplay();
for(i=0; i<display.height(); i+=4) {
display.drawLine(display.width()-1, 0, 0, i, WHITE);
display.display();
delay(1);
}
for(i=0; i<display.width(); i+=4) {
display.drawLine(display.width()-1, 0, i,
display.height()-1, WHITE);
display.display();
delay(1);
}
void testdrawrect(void) {
display.clearDisplay();
delay(2000);
}
void testfillrect(void) {
display.clearDisplay();
delay(2000);
}
void testdrawcircle(void) {
display.clearDisplay();
for(int16_t i=0;
i<max(display.width(),display.height())/2; i+=2) {
display.drawCircle(display.width()/2,
display.height()/2, i, WHITE);
display.display();
delay(1);
}
delay(2000);
}
void testfillcircle(void) {
display.clearDisplay();
for(int16_t i=max(display.width(),display.height())/2;
i>0; i-=3) {
// The INVERSE color is used so circles alternate
white/black
display.fillCircle(display.width() / 2, display.height()
/ 2, i, INVERSE);
display.display(); // Update screen with each newly-
drawn circle
delay(1);
}
delay(2000);
}
void testdrawroundrect(void) {
display.clearDisplay();
delay(2000);
}
void testfillroundrect(void) {
display.clearDisplay();
delay(2000);
}
void testdrawtriangle(void) {
display.clearDisplay();
for(int16_t i=0;
i<max(display.width(),display.height())/2; i+=5) {
display.drawTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, WHITE);
display.display();
delay(1);
}
delay(2000);
}
void testfilltriangle(void) {
display.clearDisplay();
for(int16_t i=max(display.width(),display.height())/2;
i>0; i-=5) {
// The INVERSE color is used so triangles alternate
white/black
display.fillTriangle(
display.width()/2 , display.height()/2-i,
display.width()/2-i, display.height()/2+i,
display.width()/2+i, display.height()/2+i, INVERSE);
display.display();
delay(1);
}
delay(2000);
}
void testdrawchar(void) {
display.clearDisplay();
display.display();
delay(2000);
}
void testdrawstyles(void) {
display.clearDisplay();
display.display();
delay(2000);
}
void testscrolltext(void) {
display.clearDisplay();
void testdrawbitmap(void) {
display.clearDisplay();
display.drawBitmap(
(display.width() - LOGO_WIDTH ) / 2,
(display.height() - LOGO_HEIGHT) / 2,
logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
display.display();
delay(1000);
}
#define XPOS 0 // Indexes into the 'icons' array in
function below
#define YPOS 1
#define DELTAY 2
If your OLED doesn’t have a RESET pin, you should set the OLED_RESET
variable to -1 as shown below:
Note: if your OLED has a RESET pin, you should connect it to a different
GPIO than GPIO 4, because that pin is being used for I2C communication
in the EPS8266.
Upload the code to your ESP8266 board. Don’t forget to select the right
board and COM port in the Tools menu.
You should get a series of different animations in the OLED as shown in
the following short video.
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Write Text – OLED Display
The Adafruit library for the OLED display comes with several functions to
write text. In this section, you’ll learn how to write and scroll text using the
library functions.
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { //
Address 0x3D for 128x64
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 10);
// Display static text
display.println("Hello, world!");
display.display();
}
void loop() {
Importing libraries
First, you need to import the necessary libraries. The Wire library to use
I2C and the Adafruit libraries to write to the
display: Adafruit_GFX and Adafruit_SSD1306.
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
Initialize the OLED display
Then, you define your OLED width and height. In this example, we’re using
a 128×64 OLED display. If you’re using other sizes, you can change that in
the SCREEN_WIDTH, and SCREEN_HEIGHT variables.
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
Then, initialize a display object with the width and height defined earlier
with I2C communication protocol (&Wire).
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire,
-1);
The (-1) parameter means that your OLED display doesn’t have a RESET
pin. If your OLED display does have a RESET pin, it should be connected
to a GPIO. In that case, you should pass the GPIO number as a parameter.
In the setup(), initialize the Serial Monitor at a baud raute of 115200 for
debugging purposes.
Serial.begin(115200);
Initialize the OLED display with the begin() method as follows:
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println("SSD1306 allocation failed");
for(;;); // Don't proceed, loop forever
}
This snippet also prints a message on the Serial Monitor, in case we’re not
able to connect to the display.
In case you’re using a different OLED display, you may need to change the
OLED address. In our case, the address is 0x3C.
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
If this address doesn’t work, you can run an I2C scanner sketch to find your
OLED address. You can find the I2C scanner sketch here.
After initializing the display, add a two second delay, so that the OLED has
enough time to initialize before writing text:
delay(2000);
Clear display, set font size, color and write text
Scrolling Text
The Adafruit OLED library provides useful methods to easily scroll text.
/*********
Rui Santos
Complete project details at
https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { //
Address 0x3D for 128x64
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000);
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0, 0);
// Display static text
display.println("Scrolling Hello");
display.display();
delay(100);
void loop() {
// Scroll in various directions, pausing in-between:
display.startscrollright(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x0F);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
}
View raw code
The text scrolls as shown in the following short video.
The sizes are set by the actual font. So, the setTextSize() method
doesn’t work with these fonts. The fonts are available in 9, 12, 18 and 24
point sizes and also contain 7-bit characters (ASCII codes) (described as
7b in the font name).
You can choose from the next selection of fonts:
FreeMono12pt7b.h FreeSansBoldOblique12pt7b.h
FreeMono18pt7b.h FreeSansBoldOblique18pt7b.h
FreeMono24pt7b.h FreeSansBoldOblique24pt7b.h
FreeMono9pt7b.h FreeSansBoldOblique9pt7b.h
FreeMonoBold12pt7b.h FreeSansOblique12pt7b.h
FreeMonoBold18pt7b.h FreeSansOblique18pt7b.h
FreeMonoBold24pt7b.h FreeSansOblique24pt7b.h
FreeMonoBold9pt7b.h FreeSansOblique9pt7b.h
FreeMonoBoldOblique12pt7b.h FreeSerif12pt7b.h
FreeMonoBoldOblique18pt7b.h FreeSerif18pt7b.h
FreeMonoBoldOblique24pt7b.h FreeSerif24pt7b.h
FreeMonoBoldOblique9pt7b.h FreeSerif9pt7b.h
FreeMonoOblique12pt7b.h FreeSerifBold12pt7b.h
FreeMonoOblique18pt7b.h FreeSerifBold18pt7b.h
FreeMonoOblique24pt7b.h FreeSerifBold24pt7b.h
FreeMonoOblique9pt7b.h FreeSerifBold9pt7b.h
FreeSans12pt7b.h FreeSerifBoldItalic12pt7b.h
FreeSans18pt7b.h FreeSerifBoldItalic18pt7b.h
FreeSans24pt7b.h FreeSerifBoldItalic24pt7b.h
FreeSans9pt7b.h FreeSerifBoldItalic9pt7b.h
FreeSansBold12pt7b.h FreeSerifItalic12pt7b.h
FreeSansBold18pt7b.h FreeSerifItalic18pt7b.h
FreeSansBold24pt7b.h FreeSerifItalic24pt7b.h
FreeSansBold9pt7b.h FreeSerifItalic9pt7b.h
The fonts that work better with the OLED display are the 9 and 12 points
size.
To use one of those fonts, first you need to include it in your sketch, for
example:
#include <Fonts/FreeSerif12pt7b.h>
Next, you just need to use the setFont() method and pass as argument,
the specified font:
display.setFont(&FreeSerif12pt7b);
After specifying the font, all methods to write text will use that font. To get
back to use the original font, you just need to call the setFont() method
with no arguments:
display.setFont();
Upload the next sketch to your board:
/*********
Rui Santos
Complete project details at
https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Fonts/FreeSerif9pt7b.h>
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println("SSD1306 allocation failed");
for(;;);
}
delay(2000);
display.setFont(&FreeSerif9pt7b);
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,20);
display.println("Hello, world!");
display.display();
delay(2000);
}
void loop() {
}
View raw code
Now, your display prints the “Hello, world!” message in FreeSerif font.
Draw a pixel
To draw a pixel in the OLED display, you can use the drawPixel(x, y,
color) method that accepts as arguments the x and y coordinates where
the pixel appears, and color. For example:
display.drawPixel(64, 32, WHITE);
Draw a line
Use the drawLine(x1, y1, x2, y2, color) method to create a line.
The (x1, y1) coordinates indicate the start of the line, and the (x2, y2)
coordinates indicates where the line ends. For example:
display.drawLine(0, 0, 127, 20, WHITE);
Draw a rectangle
Draw a circle
To draw a circle use the drawCircle(x, y, radius, color) method.
The (x,y) coordinates indicate the center of the circle. You should also pass
the radius as an argument. For example:
display.drawCircle(64, 32, 10, WHITE);
In the same way, to build a filled circle, use the fillCircle() method
with the same arguments:
display.fillCircle(64, 32, 10, WHITE);
Draw a triangle
Use the the drawTriangle(x1, y1, x2, y2, x3, y3,
color) method to build a triangle. This method accepts as arguments the
coordinates of each corner and the color.
display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);
Use the fillTriangle() method to draw a filled triangle.
display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);
Invert
The library provides an additional method that you can use with shapes or
text: the invertDisplay() method. Pass true as argument to invert the
colors of the screen or false to get back to the original colors.
If you call the following command after defining the triangle:
display.invertDisplay(true);
You’ll get an inverted triangle as follows:
/*********
Rui Santos
Complete project details at
https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pause for 2 seconds
// Draw line
display.clearDisplay();
display.drawLine(0, 0, 127, 20, WHITE);
display.display();
delay(3000);
// Draw rectangle
display.clearDisplay();
display.drawRect(30, 10, 50, 30, WHITE);
display.display();
delay(3000);
// Fill rectangle
display.fillRect(30, 10, 50, 30, WHITE);
display.display();
delay(3000);
// Draw triangle
display.clearDisplay();
display.drawTriangle(10, 10, 55, 20, 5, 40, WHITE);
display.display();
delay(3000);
// Fill triangle
display.fillTriangle(10, 10, 55, 20, 5, 40, WHITE);
display.display();
delay(3000);
void loop() {
}
View raw code
Then, use a Image to C Array converter to convert the image into an array.
I’ve used LCD Image Converter.
Run the program and start with a new image. Go to Image > Import and
select the bitmap image you’ve created earlier.
Go to Options > Conversion and in the Prepare tab, select the following
options:
▪ Type: Monochrome, Threshold Dither
▪ Main Scan Direction: Top to Bottom
▪ Line Scan Direction: Forward
Go to the Image tab and select the following options:
▪ Split to rows
▪ Block size: 8 bit
▪ Byte order: Little-Endian
Then, click OK. Finally, in the main menu, go to File > Convert. A new file
with .c extension should be saved. That file contains the C array for the
image. Open that file with a text editor, and copy the array.
In our case, this is the array that we get:
/*********
Rui Santos
Complete project details at
https://randomnerdtutorials.com
*********/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
void setup() {
Serial.begin(115200);
if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;);
}
delay(2000); // Pause for 2 seconds
void loop() {
}
View raw code
After uploading the code, this is what we get on the display.
Troubleshooting
If you get the “SSD1306 allocation failed” error or if the OLED is not
displaying anything in the screen, it can be one of the following issues:
Wrong I2C address
The I2C address for the OLED display we are using is 0x3C. However,
yours may be different. So, make sure you check your display I2C address
using an I2C scanner sketch.
SDA and SCL not connected properly
Please make sure that you have the SDA and SCL pins of the OLED
display wired correctly. In case of the ESP8266, connect SDA pin to GPIO
4 (D2) and SCL pin to GPIO 5 (D1).
Wrapping Up
We hope you’ve found this guide about the OLED display with EPS8266
useful. Now, you can integrate the OLED display in your own projects.
Proceed to the next tutorial to learn how to display sensor readings on the
OLED display: