Managing Page Loop for U8GLib using Arduino UNO & OLED 128x64 I2C

Previous tutorial we've done a simple hello world application that prints our name to the OLED screen using U8Glib. This tutorial I will just be focusing on the library itself and it's page looping construct.

The confusing thing with the Page Loop is that it's already in the loop function of Arduino. So we need to be careful about in which loop we need to alter our variables. In library's official wiki page it's very clear.

https://github.com/olikraus/u8glib/wiki/thelloworld

But what initially confused me here were the functions firstPage and nextPage. For me I would like to think those functions as "page start" and "page end" commands. Because between those functions I will be creating my drawing functions. And what if I have more than one page? Should I keep calling these functions multiple times inside the loop function? I hope not.

Let's say we have 3 sensors connected to our Arduino Uno.

  • Time
  • Humidity
  • Temperature

Also I would like to have another page to print my brand's name. And I want to create different pages for each of those. As a developer, I don't like copying and pasting the same code where I can create a good structure instead.

I would like to use function pointers for my each page. So each screen will have its own function.

First I want to define my functions. I want 4 functions: First I will show the date time, then the temperature, then humidity and finally will show my name/brand etc. For this tutorial values will be hard coded for simplicity but in your real world application you will want to read them from the sensors. Just remember: read the sensor values in the main loop of Arduino not in the picture loop.


void pageTimeDay();     // Page-1
void pageTemperature(); // Page-2
void pageHumidity();    // Page-3
void pageInfo();        // Page-4

Then I want to define my function pointer and related variables that will call the pages one after another. I also defined duration function because I might want each page to have different duration.


const int pageCount = 4;
int p;
void (*pages[pageCount])() = { pageTimeDay, pageTemperature, pageHumidity, pageInfo };
int duration [pageCount] = { 1000, 1000, 1000, 2000 };

So my main loop will be much simpler.


void loop() {  
  u8g.firstPage();
  do {  
    (*pages[p])();
  } while( u8g.nextPage() );
  delay(duration[p]);
  p = p+1;
  if (p == pageCount)
    p=0;
}

So the whole application will look like this. Nice and clean.
https://github.com/aliustaoglu/ArduinoOfThings/blob/master/OLED-U8glib/MultiplePages.ino


#include "U8glib.h"
#include 

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_NONE|U8G_I2C_OPT_DEV_0);  // I2C / TWI 

int p;

void pageTimeDay();     // Page-1
void pageTemperature(); // Page-2
void pageHumidity();    // Page-3
void pageInfo();        // Page-4

void (*pages[])() = { pageTimeDay, pageTemperature, pageHumidity, pageInfo } ;

void setup() {  
  u8g.setFont(u8g_font_unifont);
  u8g.setColorIndex(1);
  p = 0;
  Serial.begin(9600);
}

void loop() {  
  u8g.firstPage();
  do {  
    (*pages[p])();
  } while( u8g.nextPage() );
  delay(1000); 
  p = p+1;
  if (p == 4)
    p=0;
}
  


void pageTimeDay() {
  Serial.write("Time Day");
  Serial.println();
  u8g.drawStr( 0, 15, "July 15");
  return 0; 
}
void pageTemperature(){
  Serial.write("Temperature");
  Serial.println();
  u8g.drawStr( 0, 15, "27 degrees"); 
  return 0;
}
void pageHumidity() {
  Serial.write("Humidity");
  Serial.println();
  u8g.drawStr( 0, 15, "%65"); 
  return 0;
}
void pageInfo(){
  Serial.write("pageInfo");
  Serial.println();
  u8g.drawStr( 0, 15, "Cuneyt Aliustaoglu"); 
  return 0;
}