Our prices are exclusive of taxes and shipping. 18% GST shall be added during check out. Happy Shopping! :)  

Robocraze Welcome to Robocraze

OLED Working and Demo - Part 1

In this Demo, we will see how to display text and images on an OLED display using a NodeMCU.

OLED Working and Demo - Part 1

Organic Light Emitting Diode (OLED) displays are very popularly used in embedded systems

First, let us set up the circuit. Connect the OLED display to the NodeMCU as shown in the diagram below.

 

OLED VCC – NodeMCU 3.3V

OLED GND – NodeMCU GND

OLED SCL – NodeMCU D1

OLED SDA – NodeMCU D2

 

To being with the code download and install the library found in the link below.

 

https://github.com/ThingPulse/esp8266-oled-ssd1306?utm_source=platformio&utm_medium=piohome

 

For the 1.3 inch OLED display used in this tutorial, the header file we need to use is SH1106.h

 

First, let us have a look at displaying text on the OLED.



//Include the necessary libraries

#include <Wire.h>

#include <SH1106Wire.h>

 

//Initialize the display

//I2C address is 0x3c

//SH1106Wire display(I2C_ADDRESS, SDA, SCL);

SH1106Wire display(0x3c, D2, D1);

 

void setup()

{

 // Initialize the display

 display.init();

 

 //if you want to invert the display

 display.flipScreenVertically();

}

 

void loop()

{

 //set the font face and font size

 display.setFont(ArialMT_Plain_24);

 

 //clear the display

 display.clear();

 

 //center align the text

 display.setTextAlignment(TEXT_ALIGN_CENTER);

 

 //draw the text on the screen

 display.drawString(64, 10, “Robocraze”);



 //left align the text

 display.setTextAlignment(TEXT_ALIGN_LEFT);

 

 //draw the text on the screen

 display.drawString(0, 40, String(millis()));

 

 //update the display to show the text

 display.display();

 

 delay(10);

}

 

 

In the code above the display.drawString() method is used to draw text on the screen. The two arguments to this function are the x and y coordinates in of where you want to place the text given in pixels and the third argument is the text to be drawn.

 

This text can be customized in multiple ways. The display.setFont() method sets the font face and size. In the example above we are using ArialMT Plain with font size 24 points. The display.setTextAlignment() method can be used to make the text left, right or centre aligned. Custom fonts can also be designed but that is not covered within the scope of this article.

 

The display.flipScreenVertically() method can be used to invert the display in case it is mounted in such a way and is desired to be flipped.

 

The display.clear() method clears the screen contents and display.display() method draws all the buffered graphics onto the OLED.



Let us now look at how to draw images onto the OLED display. The images displayed on the OLED have to be in XBM format. Take an image in BMP format and use the conversion tool provided in the following website to convert it to XBM format.

 

https://convertio.co/image-converter/

 

Or if you wish to design a small XBM image pixel by pixel you can find a useful tool at the link below.

 

http://4umi.com/web/javascript/xbm.php

 

Given below is an example image.

 

static char img[] = { 0x00, 0x00, 0x00, 0x00, 0xf0, 0x0f, 0xf8, 0x1f, 0x0c, 0x30, 0xe6, 0x67, 0xf3, 0xcf, 0x19, 0x98, 0xcc, 0x33, 0xe6, 0x67, 0x30, 0x0c, 0x90, 0x09, 0xc0, 0x03, 0xe0, 0x07, 0xc0, 0x03, 0x80, 0x01 };

 

This is a 16x16 image of the wifi symbol.

 

Following code covers drawing images on the OLED display.



//Include the necessary libraries

#include <Wire.h>

#include <SH1106Wire.h>

 

//Initialize the display

//I2C address is 0x3c

SH1106Wire display(0x3c, D2, D1);

 

//declare the image

#define WiFi_Logo_width 60

#define WiFi_Logo_height 36

 

const uint8_t WiFi_Logo_bits[] PROGMEM = {

 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8,

 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xFF, 0x07, 0x00, 0x00, 0x00,

 0x00, 0x00, 0xE0, 0xFF, 0x1F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF,

 0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0x00, 0x00, 0x00,

 0x00, 0x00, 0xFE, 0xFF, 0xFF, 0x01, 0x00, 0x00, 0x00, 0x00, 0xFF, 0xFF,

 0xFF, 0x03, 0x00, 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0xFF, 0xFF, 0x00, 0x00,

 0x00, 0xFF, 0xFF, 0xFF, 0x07, 0xC0, 0x83, 0x01, 0x80, 0xFF, 0xFF, 0xFF,

 0x01, 0x00, 0x07, 0x00, 0xC0, 0xFF, 0xFF, 0xFF, 0x00, 0x00, 0x0C, 0x00,

 0xC0, 0xFF, 0xFF, 0x7C, 0x00, 0x60, 0x0C, 0x00, 0xC0, 0x31, 0x46, 0x7C,

 0xFC, 0x77, 0x08, 0x00, 0xE0, 0x23, 0xC6, 0x3C, 0xFC, 0x67, 0x18, 0x00,

 0xE0, 0x23, 0xE4, 0x3F, 0x1C, 0x00, 0x18, 0x00, 0xE0, 0x23, 0x60, 0x3C,

 0x1C, 0x70, 0x18, 0x00, 0xE0, 0x03, 0x60, 0x3C, 0x1C, 0x70, 0x18, 0x00,

 0xE0, 0x07, 0x60, 0x3C, 0xFC, 0x73, 0x18, 0x00, 0xE0, 0x87, 0x70, 0x3C,

 0xFC, 0x73, 0x18, 0x00, 0xE0, 0x87, 0x70, 0x3C, 0x1C, 0x70, 0x18, 0x00,

 0xE0, 0x87, 0x70, 0x3C, 0x1C, 0x70, 0x18, 0x00, 0xE0, 0x8F, 0x71, 0x3C,

 0x1C, 0x70, 0x18, 0x00, 0xC0, 0xFF, 0xFF, 0x3F, 0x00, 0x00, 0x08, 0x00,

 0xC0, 0xFF, 0xFF, 0x1F, 0x00, 0x00, 0x0C, 0x00, 0x80, 0xFF, 0xFF, 0x1F,

 0x00, 0x00, 0x06, 0x00, 0x80, 0xFF, 0xFF, 0x0F, 0x00, 0x00, 0x07, 0x00,

 0x00, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0x01, 0x00, 0x00, 0xF8, 0xFF, 0xFF,

 0xFF, 0x7F, 0x00, 0x00, 0x00, 0x00, 0xFE, 0xFF, 0xFF, 0x01, 0x00, 0x00,

 0x00, 0x00, 0xFC, 0xFF, 0xFF, 0x00, 0x00, 0x00, 0x00, 0x00, 0xF8, 0xFF,

 0x7F, 0x00, 0x00, 0x00, 0x00, 0x00, 0xE0, 0xFF, 0x1F, 0x00, 0x00, 0x00,

 0x00, 0x00, 0x80, 0xFF, 0x07, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xFC,

 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,

};

 

void setup()

{

 // Initialize the display

 display.init();

 

 //if you want to invert the display

 display.flipScreenVertically();

 

 //clear the display

 display.clear();

 

 //draw the image on the screen

 display.drawXbm(34, 14, WiFi_Logo_width, WiFi_Logo_height, WiFi_Logo_bits);

 

 //write the buffer to the display

 display.display();

}

 

void loop() {}

 

 

In the code above we see the method display.drawXbm() being used. This takes 5 arguments. First, two are the coordinates of the image in pixels, the next two arguments are the width and height of the image in pixels. Since we are using a 60x36 image hence we pass those to the method. The final argument is the image itself to be drawn onto the display.

 

Check out the Working and Demo of OLED:

Buy Your Oled here

Write Your Comment

Only registered users can write comments. Please, log in or register