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

Robocraze Welcome to Robocraze

OLED - Demo and Working Part II

In this blog, we will further discuss a few advanced applications with OLED displays.

OLED - Demo and Working Part II

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 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.

//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.




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

 

//Include the necessary libraries

#include <Wire.h>

#include <SH1106Wire.h>

 

//Declare the display

//I2C address is 0x3c

SH1106Wire display(0x3c, D2, D1);

 

void setup()

{

 // Initialize the display

 display.init();

 

 //if you want to invert the display

 display.flipScreenVertically();

 

 //clear the display
 display.clear();

 //draw a line
 display.drawLine(0, 0, 60, 35);

 //draw a rectangle both filled and hollow
 display.fillRect(20, 40, 25, 15);
 display.drawRect(0, 25, 15, 25);

 //draw a circle both filled and hollow and quadrant
 display.fillCircle(60, 15, 10);
 display.drawCircle(90, 15, 15);
 display.drawCircleQuads(80, 35, 20, 0x8);

 //write the buffer to the display
 display.display();

}

 

void loop(){}



 

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: https://drive.google.com/file/d/1cgx56hxW45zzbGRX2so0mp_GdxEYncTG/view

 

//Include the necessary libraries

#include <Wire.h>

#include <SH1106Wire.h>

#include <anim1.h>

 

//Declare the display

//I2C address is 0x3c

SH1106Wire display(0x3c, D2, D1);

 

void setup()

{

 // Initialize the display

 display.init();

 

 //if you want to invert the display

 display.flipScreenVertically();

}

 

void loop()

{

 for (int i = 0; i < num_frames; i++)

 {

   //clear the display

   display.clear();

 

   //draw the image on the screen

   display.drawXbm(0, 0, width_video, height_video, anim1[i]);

 

   //write the buffer to the display

   display.display();

 

   //wait to maintain fps of video

   delay(30);

 }

}

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.

 

Buy Your OLED Here 

Buy NodeMCU Here

Buy BreadBoard Here 

Write Your Comment

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