OLED - DEMO AND WORKING PART II

Summary

In the video below you will see three experiments done on the OLED, an explanation of which follows thereafter.

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.

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.

Next, let us look at drawing geometric shapes on the OLED display.

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.

Get the 'anim1.h' file here

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 starts from the beginning.