U8glib Arduino OLED Tutorial 2: Playing with the Picture Loop

Why the Picture Loop?

I’m not the author of the library,  so I don’t dare wade into the minutia, but it’s fairly easy to understand if you consider the challenge that he took up.  Specifically, he chose to create a graphics library to support a wide variety of devices while maintaining a uniform set of graphics commands.

As he states in his wiki,  some devices will allow you to turn a single pixel on.  Others don’t.  Instead only send eight bits at a time.

Might there be some necessary compromises with a one size fits all approach?  I’ll bet there are.

Useful?  For me, it absolutely is.  I can pick a variety of displays for the various things that I build without relearning yet another graphics library.

You see, I like to spend energy on my projects measuring things, moving things, and controlling things.  I want my fan to come on when things get hot and a heater to come on when they are cool.  To do make that happen, I’m willing to toil over the temperature control algorithm.

What I’m not signed up for is digging into a display driver data sheet just so that I can provide a display.  What I am willing to do is learn an understandable interface to provide an attractive project display that says that it’s 44 degrees C and that my fans are on.

To that end, the U8glib works and in my humble opinion, is worth the minor effort that is necessary to master it.

Therein lies the emphasis on the Picture Loop.   In order to get productive use of the Picture Loop, you need to get a sense of how it works.

firstPage() and nextPage():  The Picture Loop Book Ends

A call to firstPage() marks the beginning of your picture loop.

Following this call, you’re going to create a ‘do…while’  loop.  Within this loop, you’re going to issue draw commands.   These drawing commands must be inside this loop.   While the binary gods may occasionally smile on you if you violate this rule,  I can promise that your results (if you get any) will be VERY unpredictable.

The programmer designed his library to work properly IF drawing commands occur inside the Picture Loop.

Annotated Picture Loop

Put Everything You Want To See In the Loop

Each iteration of the picture loop creates a new screen.   For example you cannot draw a box in the first picture loop and then a circles in another and expect them to show up on the same display.  They won’t.  Only the circle will show up.   In fact, each picture loop erases the output of the previously picture loop entirely.

Go ahead a paste the following sketch into your Arduino.  Be sure to edit for your constructor.

#include "U8glib.h"

// Change this constructor to match your display!!!
U8GLIB_SH1106_128X64 u8g(4, 5, 6, 7);

void setup() {  
  u8g.setColorIndex(1); // Instructs the display to draw with a pixel on. 

void loop() {  
  do {  
  } while( u8g.nextPage() );
  do {  
  } while( u8g.nextPage() ); 

void draw(){
  u8g.drawStr( 0, 15, "First Line");    

void draw2(){
  u8g.drawStr( 0, 35, "Second Line");    

Upload the sketch and view the results.  You’ll notice that the ‘First Line’ and the ‘Second Line’ NEVER appeared on the display at the same time.  In other words, the Picture Loop is functionally a command to paint a fresh display on a fresh canvas.

Now,  remove the statement u8g.drawStr(0, 35, “Second Line”) from draw2() and put it into draw() as shown below.

Empty Picture Loop

Upload the sketch and view the results.

If you were successful,   both ‘First Line’ and ‘Second Line’ will appear on the display at the same time for about one second.    The display of both lines will immediately be followed by blank screen for one second.

In other words, an empty Picture Loop is the functional equivalent of a ‘Clear Screen’.


  1. Herni December 23, 2016
  2. César Fois December 5, 2016
  3. shamika dalvi June 15, 2016
  4. Ric January 22, 2016

Leave a Reply

Your email address will not be published. Required fields are marked *