Lets start by connecting the NodeMCU to the display.

The first and most important thing to note is that some of the displays may have the GND and VCC power pins swapped around. Check your display to make sure that it is the same as the image. If the pins are swapped, make sure to change the connections to the Arduino or NodeMCU.

- NodeMCU OLED Wiring

OLED VCC – NodeMCU 3.3V

OLED GND – NodeMCU GND

OLED SCL – NodeMCU D1

OLED SDA – NodeMCU D2

- Arduino Uno OLED Wiring

OLED VCC – Arduino 5V

OLED GND – Arduino GND

OLED SCL – Arduino Uno A5

OLED SDA – Arduino Uno A4

- Arduino MEGA 2560 OLED Wiring

OLED VCC – Arduino 5V

OLED GND – Arduino GND

OLED SCL – Arduino MEGA 2560 pin 21

OLED SDA – Arduino MEGA 2560 pin 20

Adafruit library comes with really good examples for both

128x32 and 128x64 displays.

The Library is located under File > Examples > Adafruit SSD1306 > and then the display type in the Arduino IDE.

We are going to use the 128x32 I2C example and will modify it to work with both 128x64 and 128x32 displays fist by hooking it up to an Arduino and then to a NodeMCU board.

The code starts by including both the Adafruit libraries. In this tutorial I am going to stress on only those parts of the code which are necessary for us to load on both boards and displays. If you want to know more about the code please drop a comment on my blog or in the comments section below and I endeavour to get back to you.

- First we are going to load the code to an Arduino Nano connected to a 128x32 display.

We can use the code as is without any modifications.

128x32 uses 0x3C address so this bit looks all good here, lets double check the header library, yes its also using the 0x3C address and the display type is 128x32.

- Now lets connect the 128x64 display. As we know it uses the 0x3C address by default so we don't need to update the address in either the code or the library.

We just need we need to comment the 128_32 and uncomment the 128_64 in the header library and change the LCDHEIGHT to 64 in our code.

- Now to run the same code on a NodeMCU we need to change one more line in our code.

The "#define OLED_RESET 4" > "#define OLED_RESET LED_BUILTIN" rest of the code is same as Arduino

Pretty much to display anything we first need to clear the previous screen using

display.clearDisplay(); // Clear the buffer

Then draw the object

testdrawline(); // Draw a line

Show it on the hardware

display.display(); // Make them visible on the display hardware!

Wait for some time before displaying the next item.

delay(2000); // Wait for 2 seconds

In this example we are displaying few items like text, lines, circles, scrolling text, triangles and more. Go ahead and use your imagination and display whatever you want on these tiny displays.

Attachments

Step 8: Customizing Text & Adding Images

Sometimes your code needs to display custom fonts and images. If you are very good in bit mapping then you just need to create a byte arrays by turning on or off the tiny LEDs of the display to create custom fonts and images. However, I am not very good in doing these mappings and don't want to spend hours creating the bit map tables. So, what are my options? I generally use two websites to generate custom fonts and images. The links are provided in the description below. Custom Fonts ------------ Go to the font converter website, select the font family, style, size, Library Version as "Adafruit GFX Font" and then hit the "Create" button. On the right hand side of this page you can see how your font is going to look like on the actual display. Based on your selection the webpage generates the fonts header file. Create a file called "modified_font.h" in the same folder where your code is and copy and save the generated code into it. Then you just need to include the header file in your code to use the custom font. #include "modified_font.h" Then, you just need to set the font before displaying the text to apply the custom font to it. display.setFont(&Your_Fonts_Name); You can get the name of the font from the header file you just added to your project. Thats it, easy. Memory is always a concern while using custom fonts, so always consider the bytes that will be consumed by the memory. Just remember Arduino UNO has only 32K of memory. Custom Images ------------- To display a bitmap image on your screen you first need to create a 128 x 64/32 sized image. I am using the good old "MS Paint" to create a 128 x 64 bitmap image which I will then upload to this image converter website. The website converts images into byte-strings, which can be used with Arduino and OLED displays. Start by uploading the image to the website. Then put a check on the "Invert image colors" check-box and change the "Output code format" to "Arduino Code" next select the orientation and hit the "Generate Code" button to generate the byte array. The "Preview" section shows you how your image will look like on the actual display. I have included the code along with this tutorial which you can use to display your images. You just need to replace the array in my code with the one you just generated and then load it to your Arduino.