256x64 oled

Hi, i have been trying to make a Cartesian graph to depict the temperature readings using u8g2 library but really don't know how to do it. Could someone please help me out on this?

What have you tried so far? Post your best attempt up to now.

If you want a simple-ish Cartesian graph using the u8g library, i made one yesterday for giggles but i have not spent that much time on it just a few hours and its made for a 128 display but should work for a 256, to which you could increase the maxArrayLength from 10 to 20 and arrays accordingly.

If you have no buttons spare, set menuLock to true and the row to 0-3.

// ------------------------------------------- IMPORTS ----------------------------------------------------------
#include "U8glib.h" //https://github.com/olikraus/u8glib/wiki/userreference
// -------------------------------------------- PINS ------------------------------------------------------------
const byte OLED_MOSI = 9;  // SDA
const byte OLED_CLK = 10; // SCL
const byte OLED_DC = 11;
const byte OLED_CS = 12;
const byte OLED_RESET = 13;
const byte downButton_Pin = A2;
const byte selectButton_Pin = A1;
const byte upButton_Pin = A0;
// ------------------------------------ SET SCREEN ADDRESS ------------------------------------------------------
U8GLIB_SSD1306_128X64 u8g(OLED_CLK, OLED_MOSI, OLED_CS, OLED_DC);  // SW SPI Com: SCK = 10, MOSI = 9, CS = 12, DC = 11, reset = 13 / hardware rst
// -------------------------------------- SYSTEM VARIABLES ------------------------------------------------------
byte row; // just for menu purposes
bool menuLock;// just for menu purposes
float xMax;
const byte maxArrayLength = 10; // this example supports up to 10 readings max for 128 and 20 for 256
// --------------------------------------- USER VARIABLES -------------------------------------------------------
char titles[4][12] = {"Temperature", "Humidity", "PH", "EC"};
float temperature[maxArrayLength] = {21.6, 21.4, 20.8, 20.2, 20.5, 24.1, 25.5, 27.2, 18.7, 16.5};
byte humidity[maxArrayLength] = {44, 47, 43, 43, 44, 42, 36, 32, 49, 52};
float ph[maxArrayLength] = {6.42, 5.29, 6.51, 5.54, 4.59, 3.66, 4.73, 4.84, 4.87, 4.92};
float ec[maxArrayLength] = {0, 2.2, 3.7, 5.9, 6.0, 4.3, 4.8, 3.2, 4.1, 5.4};
float tempArray[maxArrayLength];

void setup() {
  pinMode(downButton_Pin, INPUT);
  pinMode(upButton_Pin, INPUT);
  pinMode(selectButton_Pin, INPUT);
  u8g.setColorIndex(1);
  u8g.setFont(u8g_font_fur11);
  u8g.setFontPosTop();
}

void loop() {
  buttons();
  loadPage();
}

void buttons() {
  if (digitalRead(upButton_Pin) == HIGH) {
    if (row < 3 && !menuLock) {
      row++;
      delay(200);
    }
  }
  else if (digitalRead(downButton_Pin) == HIGH) {
    if (row > 0 && !menuLock) {
      row--;
      delay(200);
    }
  }
  else if (digitalRead(selectButton_Pin) == HIGH) {
    menuLock = !menuLock;
    delay(200);
  }
}

void loadPage() {
  u8g.firstPage();
  do {
    drawPage();
  }
  while (u8g.nextPage());
}

void drawPage() {
  if (!menuLock) {
    printTitle(row, 24); //(byte titleNumber, byte y)
  }
  else if (row == 0) {
    drawGraph(temperature, maxArrayLength, false);
  }
  else if (row == 1) {
    adjustArrayToFloat(humidity, 6, false); // should be maxArrayLength instead of 6, but just to show you the graph does adjust accordingly
  }
  else if (row == 2) {
    drawGraph(ph, maxArrayLength, false);
  }
  else if (row == 3) {
    drawGraph(ec, maxArrayLength, false);
  }
}

void adjustArrayToFloat(byte *dataB, byte arrayLenght, bool displayQuadrant) {
  for (byte i = 0; i < arrayLenght; i++) {
    tempArray[i] = dataB[i];
  }
  drawGraph(tempArray, arrayLenght, displayQuadrant);
}

void drawGraph (float *data, byte arrayLenght, bool displayQuadrant) {
  //printTitle(row, 0);
  for (byte i = 0 ; i < arrayLenght; i++) {
    if (data[i] > xMax) {
      xMax = data[i];
    }
  }
  // work out the x position to start the graph at, based on the width on the x axis numbers.
  byte graphXstartPosition;
  if (xMax > 10) {
    graphXstartPosition = 17;
  }
  else {
    graphXstartPosition = 10;
  }
  // draw x line and numbers
  float xIncrement = xMax / 4;
  byte xLablePosition = 0;
  float tempXmax = xMax;
  for (byte i = 0 ; i < 5; i++) {
    if (tempXmax > 10 || graphXstartPosition == 10) {
      u8g.setPrintPos(0, xLablePosition);
    }
    else {
      u8g.setPrintPos(8, xLablePosition);
    }
    u8g.print(tempXmax, 0);
    xLablePosition += 13;
    tempXmax -= xIncrement;
  }
  u8g.drawLine(graphXstartPosition, 0, graphXstartPosition, 51);
  // draw y line and numbers
  byte yLablePosition = graphXstartPosition + 1;
  for (byte i = 1 ; i < arrayLenght + 1; i++) {
    u8g.setPrintPos(yLablePosition, 52);
    u8g.print(i);
    yLablePosition += 10;
  }
  byte endOfcursorX = u8g.getPrintCol();
  u8g.drawLine(graphXstartPosition, 51, endOfcursorX, 51);
  // draw line graph
  float xGap = 51 / xMax;
  byte yGap = graphXstartPosition + 5;
  float plotXstartPosition;
  float plotXendPosition;
  for (byte i = 0 ; i < arrayLenght - 1; i++) { // note its one less than the array size as we are adding 1 to i.
    plotXstartPosition = 51 - xGap * data[i];
    plotXendPosition = 51 - xGap * data[i + 1];
    u8g.drawLine(yGap, plotXstartPosition, yGap + 10, plotXendPosition);
    if (displayQuadrant) {
      u8g.drawDisc(yGap, plotXstartPosition, 2);
    }
    yGap += 11;
  }
  if (displayQuadrant) {
    u8g.drawDisc(yGap, plotXendPosition, 2);
  }
  xMax = 0;
}

void printTitle (byte titleNumber, byte y) {
  byte center = ((u8g.getWidth() - u8g.getStrWidth(titles[titleNumber])) / 2);
  u8g.setPrintPos(center, y);
  u8g.print(titles[titleNumber]);
}

An example of it showing the temperature below

Hi Paul, i don't have anything which is even close. I will need some guidance from ground up.

Thanks @KawasakiZx10r but even after i uploaded it, the screen remains blank. Probably, something that i haven't done right.

ally2084:
Thanks @KawasakiZx10r but even after i uploaded it, the screen remains blank. Probably, something that i haven't done right.

The sketch that KawasakiZx10r posted was written for his display and sensors. You were meant to use it as an example on which to base your own sketch written for your display and sensors.

What is your level of Arduino, electronics and coding experience? What projects have you completed so far? I am becoming concerned, after reading your most recent posts, that this project is significantly beyond your current level of experience, and you would by relying almost 100% on other forum members to achieve your goal for you. That is not how things work in the forum.

You may need to adjust the screen address which is set to 64x128 SPI and the screen pins. Apart from that it should be fine, even with no buttons it should display the title, iv tested it a few times with no issues.

Hey, it worked okay !!!Thanks again...... :slight_smile:

Hi @PaulRB, i am working as an machine learning engineer for a firm back here in India. I have a some experience with the embedded software design after which i switched over but still continued the work. As far as an arduino goes, i am new. Its been three months since i started and the first project that i built was designing a digital display for my analog amp which worked pretty okay. It would show the watts, and channel change overs on a .96 inch oled display. Then i switched over to bigger screens which were Blue 2.8 inch OLED Display Module 256x64 Graphic w/Breakout Board purchased from buydisplay.com. It troubled me initially just to start it up as i was not familiar with the u8g2 library. But i have been at it for a month and i can do a few things now. So my next step would be to program the same readings and much more on this new big screen and hence, the doubt. So now i will get on with it and hope to make it work as per my convenience. Thanks for the help.

Hi ally2084. Your skills sound much more advanced and suitable than I initially perceived. Your early posts sounded quite different! :wink: