Tutorial: I2C OLED

This Instructable focuses on the I2C, 0.96 inch,128 x 64, OLED (organic light-emitting diode).

This display often looks better to the eye than it does in a photograph, which frequently introduces artifacts that are not present during visual examination.

There are many types and sizes of OLEDs suitable for maker projects, e.g., 128×32, 96 X 16, 64 X 48, 64 x 32, 16 x 2, etc., many larger sizes than here, all requiring unique sketches. However, here to make it easier and more specific, we will concentrate on the, relatively small, 4-pin, I2C, 0.96 inch 128 x 64 OLED.

The I2C interface is slower than an SPI interface, but only requires two pins in addition to power. These pins can be shared with other items.

So, although there are fewer connections overall, the I2C interface is generally not as fast as the SPI interface. However, I personally prefer I2C as the connections are a bit easier to make.

As opposed to the LCD character displays, e.g., the 1602 and 2004 (see my Instructable (I2C LCD), which are relatively easy to use, the OLED is a bit more complex, but all pixels in the relatively small 0.96 inch, 128 x 64 display used here are fully addressable, so this display has true graphics and can display not only text, but circles, squares, triangles etc. on its full screen without difficulty.

Here we mount all items on optional experimental platforms, to make the experiments in the appropriate Steps easier to move as single units.

If after reading this Instructable you found it helpful, please be kind enough to mouse click "Favorited" at the top of this tutorial.

- an Arduino UNO, or compatible clone

- a 0.96 inch I2C 128 x 64 OLED

- Some male to male Dupont wires

- a DHT22 temperature and humidity sensor

- an optional experimental platform

The experimental platform comes in a vinyl bag containing a 120mm x 83mm Plexiglas sheet, and a small plastic bag containing 5 screws, 5 plastic standoffs (spacers), 5 nuts. less frequently one finds experimental platforms with only four (4) screws, washers, and nuts, both styles of experimental platform contain a sheet with four bumpers, i.e., self-adhesive feet.

The experimental platform with only four (4) screws, washers , and nuts typically has smaller plastic self-adhesive feet. The screw heads on these four (4) screws may occasionally fall through the mounting holes on some clones. Thus, the five (5) screw package is recommended.

All four plastic bumpersfeet, on either style experimental platform, will be needed, as will four each of the other items. The experimental platform with five (5) screws. washers, and nuts has an extra screw, standoff, and nut that are not required to add a UNO to the platform..

However, the bags of either style experimental platform do not contain instructions.

Initially the external vinyl bag is cut open to remove the Plexiglas sheet and the smaller bag.

The Plexiglas sheet is covered on both sides with paper to protect it in handling and transit.

The first step is to peel the paper back on each side of the platform and remove the two sheets. Once the paper is removed from each side, the four holes for mounting the Arduino to the platform are easily seen. It is easiest if after peeling the paper away, the acrylic sheet should is placed with the four holes on the right and the holes closest together and near one edge of the acrylic board, toward you (as can be seen in the attached picture).

I used the experimental platform with five screws, washers, and nuts in this Instructable.

The Arduino UNO R3 boards, and their clones, have four mounting holes.

The transparent spacers, in the experimental platform package, are placed between the underside of a UNO R3, or its clones, and the upper side of the acrylic board.

When working on my first experimental board I made the mistake of assuming that the spacers were washers that should be placed underneath the Plexiglas board to hold the nuts in place - they should not. The spacers are positioned underneath the Arduino UNO board, or clone, around the screws after the screws pass through the UNO's, or clone's, mounting holes. After passing through the board the screws pass through the spacers and then through the holes in the acrylic Plexiglass board.

The screws are terminated by the nuts enclosed in the small package. The screws and nuts should be tightened to insure that the Arduino will not move when in use.

I found it easiest to start with the hole nearest the reset button (see photos) and work my way clockwise around the Arduino. The UNO is attached to the board, as might be expected, using one screw at a time. You will need a small Phillips head screwdriver to turn the screws. I found a socket to hold the nuts was quite helpful, although not necessary.

I used drivers made by Wiha and available on Amazon (a Wiha (261) PHO x 50 and a Wiha (265) 4.0 x 60).

However, any small Phillips head screwdriver should work without problem, and as noted previously, a nut driver is not really required (although it makes mountings quicker and easier, and typically more secure).

The first two photographs show the hardware configuration for this and the next Step

For our first sketch we will display three short lines of simple text.

Here we turn the display to portrait mode.

The first two lines, shown below, should always be added to our text sketches.

The lines below ensure that we have added the appropriate library for our sketch, i.e. U8g2lib.h and that we have the appropriate constructor.

#include U8g2lib.h // U8g2lib.h should be enclosed in less than and great than brackets
// Unfortunately, this site removes less than and greater than brackets and the text between them in // sketches

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R1, SCL, SDA, U8X8_PIN_NONE);

The U8g2 library is a replacement, and supersedes, the first effort at a graphics library, U8g (universal 8-bit graphics), developed by Oli Kraus, and now maintained by Arnim Läuger.

If using the same OLED as in this experiment, and the u8g2 library, the #include pre-processor directive and the constructor lines shown above should both be used in your sketch,

The SSD1306, above, tells use we should use this with SSD1306 OLED drivers, which is what comes with the OLED used here. The 128X64 identifies the size of the display in pixels. The NONAME_F_SW_I2C identifies that we are using an I2C display.

U8X8_PIN_NONE identifies that we are not using a reset pin.

Here we use a function from the included library that allows us to display strings. Other functions can be found at

https://github.com/olikraus/u8g2/wiki/u8g2referen...

Finally, in our Sketch, we write u8g2.sendBuffer(); which displays the items on the OLED screen.

/* Arduino and OLED Displaying Text

* Programmer: R. Jordan Kreindler

* Created: November 6, 2020

*/

#include U8g2lib.h // U8g2lib.h should be enclosed in less than and great than brackets

// Unfortunately, this site removes less than and greater than brackets and the text between them in

// sketches

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R1, SCL, SDA, U8X8_PIN_NONE);

/*

U8G2_R0 No rotation, landscape

U8G2_R1 90 degree clockwise rotation // Moves us to portrait mode

U8G2_R2 180 degree clockwise rotation

U8G2_R3 270 degree clockwise rotation

*/

void setup() {

u8g2.begin();

u8g2.setFont(u8g2_font_ncenR18_tf ); // Font size 18

u8g2.drawStr(17, 40, "Test"); // Display resolution is 64 x 128

u8g2.drawStr(20, 80, " L2 ");

u8g2.drawStr(20, 120," L3 ");

u8g2.sendBuffer();

}

void loop()

Here we again use portrait mode. However, since we are drawing a circle and triangle, there is not need to select a font.

Note: The two functions used here are

8g2.drawDisc() and

u8g2.drawTriangle().

As stated previously these functions, and all references, can be found at

https://github.com/olikraus/u8g2/wiki/u8g2referen...

In the attached photographs, the circle and triangle are shown separately as well as combined, as in our sketch.

There appears to be an unfortunate interaction between the camera shutter and the display, as when seen in the video the circle and triangle appear to be partially obscured at various moments in their display. However, when viewed directly, with the eyes, as seen in the last still photograph, this image appear steady and without any issue.

/* Arduino and OLED, Filled Circle/Disc and Filled Triangle

* Programmer: R.Jordan Kreindler

* Created: November 8, 2020

*/

#include U8g2lib.h // U8g2lib.h should be enclosed in less than and greater than brackets

// Unfortunately, this site removes less than and greater than brackets and the text between them in
// sketches

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R1, SCL, SDA, U8X8_PIN_NONE);

/*

U8G2_R0 No rotation, landscape

U8G2_R1 90 degree clockwise rotation

U8G2_R2 180 degree clockwise rotation

U8G2_R3 270 degree clockwise rotation

*/

void setup() {

u8g2.begin();

u8g2.drawDisc(40, 20, 20, U8G2_DRAW_ALL);

u8g2.drawTriangle(40, 20, 50, 100, 30, 100);

u8g2.sendBuffer();

}

void loop()

{ }

Insert the four pins of the DHT22 into the half-size breadboard, on the experimental platform, thereby mounting the sensor on the breadboard.

The DHT22 has four pins. I numbered these pins 1 to 4 as shown in the included photograph.

The power to the sensor is provided via pins 1 and 4. Specifically, pin 1 provides the +5v power, and pin 4 is used for ground.

Pin 3 is not used, and pin 2 is used to provide the output from the sensor.

Connect the three pins that are used on the DHT22, and thus the Arduino UNO as follows: 1) Pin 1 of the sensor goes to the UNO's 5v power socket, 2) Pin 4 of the sensor goes to one of the UNO's GND connectors, 3) Pin 2 of the sensor, the data output pin, goes to digital socket 3, i.e., D3 on the UNO, no analog connectors are required.

Note: the DHT22 sensor can only provide updated information every 2 seconds. Thus, if you pole the sensor more than once every two seconds you may get results that are not current. You can add the line delay(2000); in the sketch below if results that are not current is an issue for you. as it is for me.

The DHT22 sensor provides Centigrade temperature values which can be easily converted to Fahrenheit.

The formula for this conversion is Fahrenheit Temperature = Centigrade Temperature * 9 / 5 + 32.

Here we use the OLED display in the landscape mode.

The OLED, used in this Step, is the two color type, yellow-blue, with the toplines of pixels being yellow as shown.

The display looks better to the eyes than it does in the photographs. Looking at the OLED directly there are no artifacts/problems.

Since the Instructable.com site removes less than and greater than brackets, and the text in between them, in sketches, I have attached a text file with the appropriate sketch. Sadly, spaces between quotes are also removed by this site

The third (3rd) still photograph shows the DHT22 connected to the breadboard, while the fourth (4th) and fifth (5th) still photograph show the final configuration with both the DHT22 and OLED on the breadboard.

In the seventh (7th) and eighth (8th) still photographs, more on the eighth (8th) below, the font is set to a height of 18 pixels using u8g2_font_luRS18_te. This font can be substituted for u8g2_font_luRS14_te, in the sketch below, by any user who would like a larger font. and does not mind the output being somewhat "scrunched" together

In the eighth (8th) still photograph, the relative humidity display is indented to the right, while, at the same time it is set to the smaller 10 pixel font, and the Centigrade and Fahrenheit temperature displays are set to the larger 18 pixel font.

In the last still photograph the temperatures, both Centigrade and Fahrenheit, are initially set to floats, rather than ints, and thus we display decimal values.

The lines,

u8g2.drawStr(30, 41, " "); and

u8g2.drawStr(30, 62, " ");

are included, in the Sketch, to avoid any artifacts appearing as the C and F temperatures change. However, as noted above, additional spaces between quotes are removed by this site. So, you may want to see the attached text file.

The two (2) second delay implemented in our code by delay(2000); is appropriate for the DHT22.

To see the Sketch associated with the last, "squished" display, download the last text file.

/*

Sketch to display humidity and temperature

Written by R. Jordan Kreindler, J

Sketch: November 27,2020

Uses a 0.96 inch OLED to display Humidity, as well as Fahrenheit and Centigrade

room Temperatures.

The DHT22 sensor provides Centigrade temperature values which can be easily converted to Fahrenheit.

*/

#include

// U8g2lib.h should be enclosed in less than and greater than brackets after #include

// Unfortunately, this site removes less than and greater than brackets and the text between them in // sketches

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, SCL, SDA, U8X8_PIN_NONE);

/*

U8G2_R0 No rotation, landscape

U8G2_R1 90 degree clockwise rotation // Moves us to portrait

U8G2_R2 180 degree clockwise rotation

U8G2_R3 270 degree clockwise rotation

*/

#include

// DHT.h should be enclosed in less than and greater than brackets after #include

// Unfortunately, this site removes less than and greater than brackets and the text between them in

// sketches

#define DHTData 3 // The data pin from the DHT22 is digital pin 3

DHT dht(DHTData, DHT22);// Define a DHT object, dht

int humidity = 0; // Holds humidity results as an integer

float cTemp = 0.0; // Holds Centigrade temperature results as an integer

//float centigradeTemp = 0; // The Centigrade temperature

float fTemp = 0; // Will hold the calculated Fahenheit temperature

int delay1 = 4000; // The time between text displays

void setup() {

u8g2.begin();

dht.begin(); //Start the DHT22 sensor

}

void loop()

{

u8g2.setFont(u8g2_font_profont22_tf); // Set Font

u8g2.drawStr(32, 18, "RH:"); // Display resolution is 128 x 64

humidity = round(dht.readHumidity());

u8g2.setCursor(70, 18);

u8g2.print(humidity);

u8g2.setFont(u8g2_font_luRS18_te); // Set Font

u8g2.drawStr(02, 41, "C:");

u8g2.setCursor(30,41);

cTemp = dht.readTemperature();

u8g2.print(cTemp);

u8g2.drawStr(30, 41, " "); // Note: Spaces Between The Quotes are Removed By This Site

u8g2.drawStr(02, 62 , "F:");

fTemp = cTemp * 9.0 / 5.0 + 32.0;

u8g2.setCursor(30,62);

u8g2.print(fTemp);

delay(2000);

u8g2.drawStr(30, 62, " "); // Note: Spaces Between The Quotes are Removed By This Site

u8g2.sendBuffer();

}

If you have come to this point - congratulations.

You should now have a basic understanding of some of the capabilities of the relatively small I2C, 0.96 inch, 128 x 64 OLED display covered in this tutorial., in both portrait and landscape modes.

I hope you found this Instructable interesting and useful.

If you have any comments, suggestions, or questions related to this tutorial, please be kind enough to add your comments below, if there are any or start this section.

If you have any thoughts or questions related to the 0.96 inch OLED not covered in this tutorial, or any suggestions on how I could improve this Instructable, I would be pleased to hear from you.

You can reach me at transiintbox@gmail.com. (Please replace the second 'i' with an 'e' to contact me).