Arduino Nano 33 IoT - OLED 128x32 Display
This guide shows you how to use the Arduino Nano 33 IoT with an OLED display. We will learn these things:
- How to hook up an OLED 128x32 display with the Arduino Nano 33 IoT.
- How to program the Arduino Nano 33 IoT to show text and numbers on the OLED 128x32 display.
- How to program the Arduino Nano 33 IoT to center text and numbers in the middle of the OLED 128x32 display.
- How to program the Arduino Nano 33 IoT to draw on the OLED 128x32 display.
- How to program the Arduino Nano 33 IoT to display an image on the OLED 128x32 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
There are many types of OLED displays. The most common one used with Arduino Nano 33 IoT is the SSD1306 I2C OLED, available in sizes 128x64 and 128x32.
I2C OLED Display Pinout
- GND pin: Connect this pin to the ground (GND) of the Arduino Nano 33 IoT.
- VCC pin: This pin gives power to the display; connect it to the 3.3V or 5V supply.
- SCL pin: This is the clock pin used for I2C communication.
- SDA pin: This is the data pin used for I2C communication.
※ NOTE THAT:
- The connections on the OLED module might be different depending on who made it and its type. Please use the labels shown on your OLED module. Look carefully!
- This guide uses an OLED screen that works with the SSD1306 I2C driver. We tested it with the OLED display from DIYables and it works great.
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
Wiring guide for connecting the Arduino Nano 33 IoT to the OLED display:
| OLED Module | Arduino Nano 33 IoT |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | A4 |
| SCL | A5 |
How To Use OLED with Arduino Nano 33 IoT
Install SSD1306 OLED library
- Click on the Libraries icon on the left side of the Arduino IDE.
- Search for SSD1306 and find the SSD1306 library made by Adafruit.
- Then, click the Install button to finish installing.
- You might see a message asking you to install extra library files.
- To add all of them, click the Install All button.
How to program for OLED
- Add the library
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
- Set the OLED screen size to 128 by 32.
#define OLED_WIDTH 128 // Defines the OLED display's width in pixels
#define OLED_HEIGHT 32 // Defines the OLED display's height in pixels
- Make a new SSD1306 OLED item.
// Initialize an SSD1306 display instance for I2C communication
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1);
- In the setup() function, start the OLED display.
// Begin initializing the OLED display at I2C address 0x3C for a 128x32 resolution
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("SSD1306 allocation failed"));
while (true);
}
- Then you can show text, images, and draw a line.
Arduino Nano 33 IoT Code - Display Text on OLED
/*
* This Arduino Nano 33 IoT code was developed by newbiely.com
*
* This Arduino Nano 33 IoT code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-nano-iot/arduino-nano-33-iot-oled-128x32-display
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define OLED_WIDTH 128 // OLED width, in pixels
#define OLED_HEIGHT 32 // OLED height, in pixels
// create an OLED display object connected to I2C
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(9600);
// initialize OLED display with I2C address 0x3C
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("failed to start SSD1306 OLED"));
while (1);
}
delay(2000); // wait two seconds for initializing
oled.clearDisplay(); // clear display
oled.setTextSize(1); // set text size
oled.setTextColor(WHITE); // set text color
oled.setCursor(0, 10); // set position to display
oled.println("newbiely.com"); // set text
oled.display(); // display on OLED
}
void loop() {
}
Here are some functions that can show text on the OLED:
- Oled.clearDisplay() – Turns off every pixel on the screen.
- Oled.drawPixel(x, y, color) – Draws a pixel at the specified x and y position.
- Oled.setTextSize(n) – Sets how big the text will be; you can choose a size between 1 and 8.
- Oled.setCursor(x, y) – Moves the starting point for writing text to the x and y coordinates.
- Oled.setTextColor(WHITE) – Sets the text color to white.
- Oled.setTextColor(BLACK, WHITE) – Sets the text color to black and the background color to white.
- Oled.println("message") – Writes a text message on the screen.
- Oled.println(number) – Writes a number on the screen.
- Oled.println(number, HEX) – Writes a number in hexadecimal (base 16) format.
- Oled.display() – Updates the screen so that your changes appear.
- Oled.startscrollright(start, stop) – Scrolls the text from left to right between the chosen start and stop points.
- Oled.startscrollleft(start, stop) – Scrolls the text from right to left between the chosen start and stop points.
- Oled.startscrolldiagright(start, stop) – Scrolls the text from the bottom left to the top right.
- Oled.startscrolldiagleft(start, stop) – Scrolls the text from the bottom right to the top left.
- Oled.stopscroll() – Stops the scrolling text.
How to vertical and horizontal center align text/number on OLED
If you want to learn how to center text and numbers on an OLED display both vertically and horizontally, please check out this guide: How to vertical/horizontal center on OLED.
Arduino Nano 33 IoT Code - Drawing on OLED
/*
* This Arduino Nano 33 IoT code was developed by newbiely.com
*
* This Arduino Nano 33 IoT code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-nano-iot/arduino-nano-33-iot-oled-128x32-display
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define OLED_WIDTH 128 // OLED width, in pixels
#define OLED_HEIGHT 32 // OLED height, in pixels
// create an OLED display object connected to I2C
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1);
void setup() {
Serial.begin(9600);
// initialize OLED display with I2C address 0x3C
if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
Serial.println(F("failed to start SSD1306 OLED"));
while (1);
}
delay(2000); // wait two seconds for initializing
oled.setCursor(0, 0);
}
void loop() {
oled.clearDisplay();
// draw a filled rectangle
oled.fillRect(0, 0, 40, 25, WHITE);
// draw a circle outline
oled.drawCircle(64, 16, 15, WHITE);
// draw a filled triangle
oled.fillTriangle(80, 31, 128, 31, 104, 0, WHITE);
oled.display();
delay(3000);
}
Arduino Nano 33 IoT Code – Display Image
To show a picture on an OLED, you need to first change the image (in any format) into a bitmap array. You can do this using an online tool. The picture below shows how to convert an image into a bitmap array; I used the Arduino Nano 33 IoT icon as an example.
After converting, copy the new array code and replace the ArduinoIcon array in the code below.
/*
* This Arduino Nano 33 IoT code was developed by newbiely.com
*
* This Arduino Nano 33 IoT code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-nano-iot/arduino-nano-33-iot-oled-128x32-display
*/
#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 image should not be bigger than the screen. You need to make the image smaller and change the width and height settings in the oled.drawBitmap() function.
OLED Troubleshooting
Make sure the OLED works correctly by doing these steps:
- Make sure your wires are connected correctly.
- Check that your OLED has the SSD1306 driver.
- Run the I2C Address Scanner code on your Arduino Nano 33 IoT to find the OLED's I2C address.
// 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 result shown on the Serial Monitor is as follows:
COM6
Scanning...
I2C device found at address 0x3C !
done
Scanning...
I2C device found at address 0x3C !
done
Autoscroll
Clear output
9600 baud
Newline