Release 2016.9.3 / Update 2017.6.18

Use OLED with “u8glib” : part 2

I wrote article about how to run “u8glib” sample sketch previously.

So this time, I’m going to write about how to draw graphics by “u8glib”.


In this article, I use a screen of I2C connection. Check previous article if you want to use SPI connection screen. And for more advanced, I use variable resistor in this article.



At first, open sample sketch “Hello World”. Remove ‘//’ marks, depends on your display. Then compile the file, and you can watch the program runs.


Well, this sample sketch seems to long and complex. But it does not. Here is a sketch which I have removed unnecessary code from the sample.

It’s so plain sketch.

I explain about “u8g.setColorIndex(1)” later.You need to check “loop()” section first.

“u8g.firstPage()” and “u8g.nextPage()”

You can see “u8g.firstPage()” functions in this mainloop. This functions mean start of drawing, I think.

Then it goes to “do ~ while” repeat. And in this loop, you can make commands what you want to do. In this terms, it runs “set font” and “drawstrings”.

Finally, to escape from “while” loop, there is a conditions “u8g.nextPage()” functions. This functions checks whether it finished drawing or not. I mean, these drawing commands will be repeated until “u8g.nextPage()” allow to go.

“u8glib” will be easy if you can understand this mechanism.

Functions for drawing

There are so many functions in “u8glib” library. I will introduce you some of it.

Basically, you have to set x and y position to drawing.


Drawing a dot
u8g.drawPixel(x, y);


This is the most simple drawing command.

This is tiny, and maybe difficult to identify.

Drawing lines
u8g.drawLine( start x, start y, end x, end y);


You need two dimensional values for each start and end points to draw a line. You can draw diagonal if you give it differ points on x or y values.


u8g.drawFrame(start x, start y, length, height);


Filled quadrangle
u8g.drawBox(start x, start y, length, height);

You should watch out that the second half of the argument aren’t position value.

u8g.drawEllipse(x, y, length, height);


Filled circle
u8g.drawFilledEllipse(x, y, length, height);

Give it different values to length and height if you want to draw ellipse.

For more detail, check here

As you know, “u8glib” draw graphics from zero for each drawing. But sometimes you want to erase parts of graphics.


This functions give you different color on drawing. In other words, you can erase part of graphics.

On this example, it draws black(0) circle after draw box with white (1).


You can draw any graphics by this functions.

But, keep in your mind. this painting function is keeping on. You have to set back to white after draw in black. Sometimes I forget this, and confused “There are no drawing!”.

Animate gauge from the value of the variable resistor


Then, let’s make animation by variable resistor.

sketch : Gauge react to the variable resistor

VMAX value depends on your parts. For more detail, check article “Eliminate the fluctuation of the variable resistor”.

“map” functions is used for set value of variable resistor to 0-127. So, value of variable resistor goes to screen range value.

issues of “u8glib”

Perhaps, you feel that resistor reacts slow. This is problem of “u8glib” structure. In short, it takes times by “do~while” functions. And it cause delay for analogread.

Well, I can give you a hint for avoiding this latency.

This sample means avoiding slow reaction by running “analogread” functions during drawing.

Part 1
Part 3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.