OLED Display Charts Library

I am a really passionate maker who love embedded systems. Because of this, I have been working with microcontrollers since five years ago and one of the things that care me the most are the ways to present information to the user. I found that there are a lot of different displays which can be interfaced with Arduino, but my favourite one is the OLED display.

I have been using these displays since three weeks ago through the Adafruit_SSD1306 library. With this library you can do a lot of things like draw geometric shapes, display text, etc. But i found that there wasn't an easy way to draw any kind of charts in these displays. That's the reason why I decided to write a library which makes drawing charts easy in these displays, and my main goal with this instructable is to present it to you.

In order to make this proyect you will need:

• NodeMCU microcontroller
• OLED Display based on SSD1306 driver
• Jumper wires

The OLED display used in this instructable is interfaced with NodeMCU through I2C bus. This bus uses only two pins, serial data (SDA) and serial clock (SCLK).

• Connect 3.3V to VCC
• Connect GND to GND
• Connect D1 to SDA
• Connect D2 to SCL

Now that everything is connected, you just need to flash your microcontroller with the code.

• First of all, download the library here
• Note that this library was written to be used with ESP8266, ESP32 and Arduino boards. You just need to connect te OLED display to the dedicated I2C pins of your board if your board has these dedicated pins
• Open your Arduino IDE and install the library
• Lastly, open and upload any of the library examples

By using this library you can set in an easy way a lot of configurable parameters of the charts. The library is able to work in SINGLE_PLOT_MODE or in DOUBLE_PLOT_MODE, the video displayed above shows the library working in DOUBLE_PLOT_MODE. The next code was extracted from this example.

display.setChartCoordinates(0, 60);         //Chart lower left coordinates (X, Y)
display.setChartWidthAndHeight(123, 60);    //Chart width = 123 and height = 60
display.setXIncrement(5);                   //Distance between Y points will be 5px
display.setYLimits(0, 100);                 //Ymin = 0 and Ymax = 100
display.setAxisDivisionsInc(12, 6);         //Each 12 px a division will be painted in X axis and each 6px in Y axis
display.setPlotMode(SINGLE_PLOT_MODE);      //Set single plot mode
display.drawChart();                        //Update the buffer to draw the cartesian chart
display.display();

As you can see, the library is highly configurable and by using it you can write a really readable code. Now let's see how to add points to the chart:

auto value = random(100);
if(!display.updateChart(value))             //Value between Ymin and Ymax will be added to chart
{              
   display.clearDisplay();                 //If chart is full, it is drawn again
   display.drawChart();
}

The function updateChart is the one which add points to the chart. This function returns a bool which indicate if the chart is already full. In this example, if chart is full, the display is cleared and the chart is drawn again to keep adding points.

With this library you have an easy and configurable way to plot cartesian charts. I hope it could be useful to your proyects.