First, let us look at progress bars. Copy the code below and upload it to your NodeMCU. Here a global progress variable is being used to track progress and draw the progress bar.

//Include the necessary libraries

#include <Wire.h>

#include <SH1106Wire.h>

//Declare the display

//I2C address is 0x3c

SH1106Wire display(0x3c, D2, D1);

//declare a progress variable

int progress = 0;

void setup()

{

// Initialize the display

display.init();

//if you want to invert the display

display.flipScreenVertically();

}

void loop()

{

//clear the display

display.clear();

//set the font face and font size

display.setFont(ArialMT_Plain_16);

//center align the text

display.setTextAlignment(TEXT_ALIGN_CENTER);

//draw the text on the screen

display.drawString(64, 28, "Progress");

display.drawProgressBar(17, 15, 95, 10, progress);

progress = (progress > 100 ? 0 : progress + 1);

//write the buffer to the display

display.display();

delay(10);

}

In the code above you see the method display.drawProgressBar() being used. It takes 5 arguments. The first two arguments are the x and y coordinates of the progress bar. The next two arguments are the width and height of the progress bar. And the final argument is the progress in percentage. It takes a number between 1 and 100 and draws the progress bar accordingly.

In the code above you can notice the various functions that are being used for the geometric shapes.

display.drawLine(x1, y1, x2, y2) - the first two parameters are the x and y coordinates of the starting point of the line and next two parameters are the x and y coordinates of the terminating point of the line

display.drawRect(x, y, w, h) - here the first two parameters are the x and y coordinates of the top left vertex of the rectangle. The next two parameters are the width and height of the rectangle in pixels. display fillRect() method also uses the same parameters list.

display.drawCircle(x0, y0, r) - here the first two parameters are the x and y coordinates of the circle. The last parameter is the radius of the circle in pixels. The display.fillCircle() method also uses the same parameters list.

display.drawCircleQuads(x0, y0, r, q) - here the first three parameters are the same as the drawCircle() method. The last parameter q is the quads bit mask which specifies the quadrants to be drawn.

Let us look into displaying animations on the OLED display now. For this, you need an array of images which when played in succession will appear as a video or an animation. One sample animation is included in the header file “anim1.h”. Download it from the link given below and place it in the same directory as your main file so that it can be included.

Here the anim.h header file contains the anim1 variable which is an array of images which are displayed sequentially. The variable num_frames is also present in this header file and defines the number of frames present in the video, once the sequence is completed it is started from the beginning.