elc0mpa/oled_ssd1306_chart

Arduino library to easily draw cartesian charts in oled displays based on the SSD1306 drivers

OLED_SSD1306_Chart

Arduino library to easily draw cartesian charts in oled displays based on the SSD1306 drivers.

What is it for?

This library is used to easily draw cartesian charts in oled displays based on the SSD1306 drivers. It inherits from Adafruit_SSD1306 class, reason why it has all of this class functionalities.

How to install

Install the library using one of the following options

• Arduino Library Manager
• Clone this repository into your libraries directory
• Use it locally cloning this repository into your project's directory

Compatibility

This library is compatible with any oled display which is compatible with Adafruit_SSD1306 library.

How to use

Include the library

#include <OLED_SSD1306_Chart.h>

Create an instance of the class

Create an instance of OLED_SSD1306_Chart class for each oled display in which you would like to draw a cartesian chart. These objects constructors and Adafruit_SSD1306 objects constructors are the same. In this documentation will be explained only the I2C constructor.

// OLED_SSD1306_Chart instance
OLED_SSD1306_Chart display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

The class constructor takes the following arguments:

w : Screen width, usually 128.
h : Screen height, usually 64 or 32.
*twi : Reference of TwoWire object.
rst_pin : Reset pin, -1 if shared with microcontroller pin.
clkDuring : Speed in Hz for I2C transmissions in the library calls. Defaults to 400 KHz.
clkAfter : Speed in Hz for I2C transmissions following library calls. Defaults to 100 KHz.

// OLED_SSD1306_Chart class's constructor signature
OLED_SSD1306_Chart(uint8_t w, uint8_t h, TwoWire *twi, int8_t rst_pin=-1,
        uint32_t clkDuring=400000UL, uint32_t clkAfter=100000UL)

Configuring chart

The library add new functionalities in order to configure the cartesian chart:

// Chart coordinates
display.setChartCoordinates(double x, double y);

The function setChartCoordinates is used to define the lower left chart coordinates.

// Chart width and height
display.setChartWidthAndHeight(double w, double h);

The function setChartWidthAndHeight defines the width and height of the chart.

// X axis increment
display.setXIncrement(double xinc);

The function setXIncrement defines the distance in pixels between Y points.

// X and Y axis divisions
display.setAxisDivisionsInc(double xinc, double yinc);

The function setAxisDivisionsInc defines the distance in pixels between which a division will be painted in the chart.

// Set Ymin and Ymax for each cartesian chart
display.setYLimits(double ylo, double yhi, uint8_t chart = 0);

The function setYLimits defines the minium and maxium Y values to each chart. When working in single plot mode just pass two first parameters.

// Sets the visibility of the Y axis labels
void setYLabelsVisible(bool yLabelsVisible);

The function setYLabelsVisible defines if the Y axis labels should be displayed. This will reduce the drawable area by the width of the labels defined in setYLimitLabels.

// Sets the textual labels for the y axis limits.
void setYLimitLabels(char* loLabel, char* hiLabel, uint8_t chart = 0;)

The function setYLimitLabels sets the textual labels that will be displayed at the upper and lower of each chart. The labels will only be displayed if their visibility is enabled via setYLabelsVisible(true).

// Set point geometry for each chart
display.setPointGeometry(char pointGeometry, uint8_t chart = 0);

The function setPointGeometry defines a geometric shape to show in each point. Right now the only options are POINT_GEOMETRY_NONE and POINT_GEOMETRY_CIRCLE.

// Set plot mode
display.setPlotMode(char mode);

The function setPlotMode is used to configure if the chart will draw one or two cartesian charts

// Set plot mode defines
#define SINGLE_PLOT_MODE 0
#define DOUBLE_PLOT_MODE 1

These #define are used to pass as parameter to this function.

// Set mid line visibility
display.setMidLineVisible(bool lineVisible);

The function setMidLineVisible is used to show and hide a mid line between charts only in DOUBLE_PLOT_MODE

// Set plot mode
display.setLineThickness(char thickness, uint8_t chart = 0);

The function setLineThickness is used to set thickness of each chart

// Set plot mode defines
#define LIGHT_LINE 6
#define NORMAL_LINE 7

These #define are used to pass as parameter to this function.

Drawing chart

// Draw chart
display.drawChart();

The function drawChart is used draw the cartesian chart. This function must be called after calling all previous functions.

Updating chart

// Add Y points to chart
display.updateChart(double firstValue, double secondValue = 0);

The function updateChart is used to add new Y values to the chart. When working on single mode, only firstValue is needed. This function returns false when all X points have been used.

Changelog

• v1.0.0 (2020/01/05)
  • library initial release
• v1.1.0 (2020/03/21)
  • added implementation for POINT_GEOMETRY_CIRCLE
• v1.2.0 (2020/12/27)
  • posibility to set Y axis labels in both plot modes. Thanks to @felixkosmalla
• v1.3.0 (2020/12/30)
  • fixed wrong behavior when value is not between min and max values
  • added implementation for setMidLineVisible
  • added implementation for setLineThickness
  • examples updated
• v1.3.2 (2022/05/04)
  • solved scale problem in second chart. Thanks to @lkz0ne

Examples

SinglePlotMode

DoublePlotMode

Copyright

MIT © José Gabriel Companioni Benítez (elC0mpa)

oled_ssd1306_chart's Issues

Feature request

include different displays like uno's tft shield (mcufriend_mkv)

Typo

Hi,
just to let you know you're missing a "g" in line 29 It reads "Wire.bein();"

wrong scale on second chart after update chart

after updatechart my second chart displays values near zero. Only the first run works great.

OLED_SSD1306_Chart/src/OLED_SSD1306_Chart.cpp

Line 264 in f4e6a79

double secondY = (secondValue - _y_min_values[1]) * (-semiHeight) / (_y_max_values[0] - _y_min_values[0]) + _y_lower_left_coordinate - semiHeight;

do _y_max_values and _y_min_values have to refer to index 1 ??

Is possible to insert values to the X axys?

I need to create a graph with specific X and Y values.
Is there a way to insert values to the X and Y values, rather only to the Y value in the graph?

Multiple devices crash.

I have a setup to read Canbus data from a car. i want a graph of data with the lcd to display text about said graph, i have 1602 i2c lcd, 64x128 i2c oled and spi mcp2515 running on nano.
mcp and oled works fine
mcp and lcd works fine
oled and lcd works fine but
mcp oled and lcd nano freezes at drawdisplay.
tested for freeze by using a serial.print("test point") and moving it down through code untill it stopped printing. code can be supplied if needed.
tested oled, mcp and lcd with #ifdef to be able to switch each on and off in turn.

Graph out of scale

I am writting a class work using ssd1306 and this library. My classwork is a electronic load.

I need to plot 2 graph. One with the current being drained from source and another with the voltage of the source.

The graph of current is totally out of scale. I need to increase the current to 3~4 Amps to it show the first Amp on the graph.

Not is problem with wrong formulas or that stuff, because I've tested the formulas in other environment before.

Furthermore, the configuration of the library that i am using is the following:

  display.begin(SSD1306_SWITCHCAPVCC, 0x3c);
  display.clearDisplay();
  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, 14);              //Ymin = 0 and Ymax = 100 for first chart
  display.setYLimits(0, 3, 1);           //Ymin = 0 and Ymax = 100 for second chart
  display.setYLimitLabels("0", "14");
  display.setYLimitLabels("0", "3", 1);
  display.setAxisDivisionsInc(12, 6); //Each 12 px a division will be painted in X axis and each 6px in Y axis
  display.setYLabelsVisible(true);
  display.setPlotMode(DOUBLE_PLOT_MODE); //Set double plot mode
  display.setMidLineVisible(mid_line_visible);
  display.setLineThickness(LIGHT_LINE);
  display.setLineThickness(NORMAL_LINE, 1);
  display.drawChart(); //Update the buffer to draw the cartesian chart
  display.display();

and in the graph update part:

sometimes i need to do current_value*10 to see some motion in the graph:

  if (!display.updateChart( voltage_value, current_value*3 )) //Value between Ymin and Ymax will be added to chart
  {
    display.clearDisplay(); //If chart is full, it is drawn again
    mid_line_visible = !mid_line_visible;
    display.setMidLineVisible(mid_line_visible);
    display.drawChart();
  }

Moreover, the formula i am using for current_value is the standard formula for ICS758 hall effect sensor. That is the following:

  current_value = (5.0 / 1023.0) * analogRead(A0);

  current_value = current_value - 2.5 + 0.007;

  current_value = current_value / 0.04;

Why this? How to solve this out of scale graph?

Thanks in advanced.

Feature request - moving chart

Hi,
great library!

One feature I could really use - to have the chart continously moving to the left when I add new values instead of redrawing when x is full.

This is what I mean:
When a new value is added - chart it on the right of the curve and move all other points to the left. So the most recent value is on the right, the older values are on the left.
When the screen is full the oldest values are just dismissed.

Best,

-T