Arduino UNO R4 - OLED 128x32
This tutorial will show you how to use an Arduino UNO R4 with an OLED 128x32 I2C display. You will learn:
- How to connect an OLED 128x32 display to the Arduino UNO R4.
- How to program the Arduino UNO R4 to show text and numbers on the 128x32 OLED display.
- How to create drawings on the 128x32 OLED display with the Arduino UNO R4.
- How to display images on the 128x32 OLED display with the Arduino UNO R4.
- How to center text and numbers both vertically and horizontally on the 128x32 OLED display.
Hardware Preparation
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables.
Additionally, some of these links are for products from our own brand, DIYables.
Overview of OLED Display
I2C OLED Display Pinout
- GND pin: should be connected to the ground of Arduino UNO R4
- VCC pin: is the power supply for the display which we connect the 5 volts pin on the Arduino UNO R4.
- SCL pin: is a serial clock pin for I2C interface.
- SDA pin: is a serial data pin for I2C interface.
※ NOTE THAT:
The arrangement of pins on an OLED module can differ based on the manufacturer and the model of the module. Always check and follow the labels on the OLED module. Be attentive!
This guide is for an OLED display that uses the SSD1306 I2C driver. We tested it with an OLED display from DIYables. It functions perfectly without any problems.
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
If you use a different type of Arduino UNO R4, the pin layout will not be the same as the Uno. Look at the table below for information on other Arduino UNO R4 models.
| 128x32 OLED Module | Arduino UNO R4 |
|---|---|
| Vin | 5V |
| GND | GND |
| SDA | A4 |
| SCL | A5 |
How To Use OLED with Arduino UNO R4
Install SSD1306 OLED library
- Go to the Libraries icon on the left side of the Arduino IDE.
- Type "SSD1306" in the search box and look for the SSD1306 library made by Adafruit.
- Press the Install button to add the library.
- You will need to install some additional libraries.
- Click the Install All button to install all the required libraries.
How to program for OLED
- Include a library.
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
- Set the screen size to OLED 123x32.
#define SCREEN_WIDTH 128 // Defines the width of the OLED display in pixels
#define SCREEN_HEIGHT 32 // Defines the height of the OLED display in pixels
- Create an SSD1306 OLED item.
// Initialize an Adafruit SSD1306 display object for I2C communication
Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
- In the setup() function, set up the OLED screen.
// Start OLED display with specific I2C address (0x3C) for 128x32 resolution
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed")); // Print error message if initialization fails
while (true); // Enter an infinite loop to halt further execution
}
- Then you can show text, pictures, and draw lines.
Arduino UNO R4 Code - Display Text on OLED
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-oled-128x32
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels
// declare an SSD1306 display object connected to I2C
Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(9600);
// initialize OLED display with address 0x3C for 128x32
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
delay(2000); // wait for initializing
oled.clearDisplay(); // clear display
oled.setTextSize(1); // text size
oled.setTextColor(WHITE); // text color
oled.setCursor(0, 10); // position to display
oled.println("Hello World!"); // text to display
oled.display(); // show on OLED
}
void loop() {
}
Here are some functions you can use to show text on the OLED:
- oled.clearDisplay(): turns off all pixels.
- oled.drawPixel(x, y, color): draws a pixel at x, y coordinates.
- oled.setTextSize(n): changes text size, with choices from 1 to 8.
- oled.setCursor(x, y): sets the starting point for text.
- oled.setTextColor(WHITE): makes the text color white.
- oled.setTextColor(BLACK, WHITE): makes the text color black and background white.
- oled.println("message"): displays text.
- oled.println(number): displays a number.
- oled.println(number, HEX): shows a number in hexadecimal format.
- oled.display(): updates the display with changes.
- oled.startscrollright(start, stop): moves text from left to right.
- oled.startscrollleft(start, stop): moves text from right to left.
- oled.startscrolldiagright(start, stop): moves text diagonally from the bottom-left to top-right.
- oled.startscrolldiagleft(start, stop): moves text diagonally from the bottom-right to top-left.
- oled.stopscroll(): stops any scrolling text.
Arduino UNO R4 Code - Drawing on OLED
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-oled-128x32
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels
// declare an SSD1306 display object connected to I2C
Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(9600);
// initialize OLED display with address 0x3C for 128x32
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
delay(2000); // wait for initializing
oled.setCursor(0, 0);
}
void loop() {
// draw rectangle
oled.clearDisplay();
oled.drawRect(0, 15, 60, 40, WHITE);
oled.display();
delay(2000);
// fill rectangle
oled.clearDisplay();
oled.fillRect(0, 15, 60, 40, WHITE);
oled.display();
delay(2000);
// draw the round rectangle
oled.clearDisplay();
oled.drawRoundRect(0, 15, 60, 40, 8, WHITE);
oled.display();
delay(2000);
// fill the round rectangle
oled.clearDisplay();
oled.fillRoundRect(0, 15, 60, 40, 8, WHITE);
oled.display();
delay(2000);
// draw circle
oled.clearDisplay();
oled.drawCircle(20, 35, 20, WHITE);
oled.display();
delay(2000);
// fill circle
oled.clearDisplay();
oled.fillCircle(20, 35, 20, WHITE);
oled.display();
delay(2000);
// draw triangle
oled.clearDisplay();
oled.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
oled.display();
delay(2000);
// fill triangle
oled.clearDisplay();
oled.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
oled.display();
delay(2000);
}
Arduino UNO R4 Code – Display Image
To display an image on an OLED screen, first turn the image (any format) into a bitmap array. You can use this online tool to convert it. Look at the image below to see how to change an image into a bitmap array. I changed the Arduino icon into a bitmap array.
Copy the new array code and update it in the Arduino icon array in the code below.
The below video shown how to do it with OLED 128x64 display and Arduino Uno and Arduino icon
We can do similarly to make it work with Arduino Uno R4 and OLED 128x32. The below code display DIYables icon on OLED 128x32
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-oled-128x32
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels
// declare an SSD1306 display object connected to I2C
Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
// bitmap of DIYable-icon image
int bitmap_width = 72; // MUST match to bitmap image size
int bitmap_height = 32; // MUST match to bitmap image size
const unsigned char bitmap_DIYables [] PROGMEM = {
// 'DIYables Icon', 72x32
0x00, 0x0f, 0xff, 0xff, 0x8f, 0xf8, 0x07, 0x38, 0x07, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xfe, 0x07,
0x1c, 0x0e, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xff, 0x07, 0x1c, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e,
0x07, 0x87, 0x0e, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x0f, 0x38, 0x00, 0x0f, 0xff,
0xff, 0x8e, 0x01, 0xc7, 0x07, 0x38, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xf0, 0xf0,
0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xe0, 0xfc, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x01,
0xe0, 0xfe, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x03,
0x87, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x0f, 0x87, 0x01, 0xc0, 0xff, 0xcf, 0xff, 0xff,
0x8f, 0xff, 0x07, 0x01, 0xc0, 0xff, 0xef, 0xff, 0xff, 0x8f, 0xfc, 0x07, 0x01, 0xc0, 0xff, 0xef,
0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00,
0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00,
0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x8f,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfd, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff,
0xef, 0xff, 0xff, 0x0e, 0x0c, 0x0c, 0xc3, 0x07, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0xec, 0xec, 0x99,
0x7f, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0x04, 0xe4, 0x81, 0x0f, 0xff, 0xcf, 0xff, 0xfc, 0x0e, 0x32,
0xe4, 0x9f, 0xc7, 0xff, 0x8f, 0xff, 0xf8, 0x0e, 0x32, 0x4c, 0x9b, 0x67, 0xff, 0x0f, 0xff, 0xf0,
0x0e, 0x04, 0x0c, 0xc3, 0x0f, 0xfe, 0x0f, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x0f,
0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xfc, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
};
void setup() {
Serial.begin(9600);
// initialize OLED display with address 0x3C for 128x32
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
delay(2000); // wait for initializing
}
void loop() {
oled.clearDisplay();
// display bitmap to the center
int x = (SCREEN_WIDTH - bitmap_width) / 2;
int y = (SCREEN_HEIGHT - bitmap_height) / 2;
oled.drawBitmap(x, y, bitmap_DIYables, bitmap_width, bitmap_height, WHITE);
oled.display();
delay(2000);
}
※ NOTE THAT:
- The picture size must be as small as or smaller than the screen size.
- To use the given code for an OLED 128x32, you must resize the image and adjust the width and height in the oled.drawBitmap(); function.
How to vertical and horizontal center align text/number on OLED
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-oled-128x32
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels
Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // // create SSD1306 display object connected to I2C
void setup() {
Serial.begin(9600);
// initialize OLED display with address 0x3C for 128x32
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
delay(2000); // wait for initializing
oled.clearDisplay(); // clear display
oled.setTextSize(2); // text size
oled.setTextColor(WHITE); // text color
oled.setCursor(0, 10); // position to display
}
void loop() {
// display string
String text = "DIYables";
oledDisplayCenter(text);
delay(2000);
// display number
int number = 21;
String str = String(number);
oledDisplayCenter(str);
delay(2000);
}
void oledDisplayCenter(String text) {
int16_t x1;
int16_t y1;
uint16_t width;
uint16_t height;
oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height);
// display on horizontal and vertical center
oled.clearDisplay(); // clear display
oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2);
oled.println(text); // text to display
oled.display();
}
OLED Troubleshooting
If the OLED screen shows nothing, please follow these steps:
- Ensure the wiring is done properly.
- Confirm that your I2c OLED is equipped with an SSD1306 driver.
- Verify the I2C address of your OLED using the following I2C Address Scanner code on Arduino UNO R4.
// I2C address scanner program
#include <Wire.h>
void setup()
{
Wire.begin();
Serial.begin(9600);
Serial.println("I2C Scanner");
}
void loop()
{
byte error, address;
int nDevices;
Serial.println("Scanning...");
nDevices = 0;
for(address = 1; address < 127; address++ )
{
Wire.beginTransmission(address);
error = Wire.endTransmission();
if (error == 0)
{
Serial.print("I2C device found at address 0x");
if (address < 16)
Serial.print("0");
Serial.print(address,HEX);
Serial.println(" !");
nDevices++;
}
else if (error==4)
{
Serial.print("Unknown error at address 0x");
if (address < 16)
Serial.print("0");
Serial.println(address,HEX);
}
}
if (nDevices == 0)
Serial.println("No I2C devices found");
else
Serial.println("done");
delay(5000); // wait 5 seconds for next scan
}
The output on the Serial Monitor:
COM6
Scanning...
I2C device found at address 0x3C !
done
Scanning...
I2C device found at address 0x3C !
done
Autoscroll
Clear output
9600 baud
Newline