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”.
Wiring
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.
Basic
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#include "U8glib.h" //U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7); U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); void setup(void) { u8g.setColorIndex(1); // pixel on } void loop(void) { u8g.firstPage(); do { u8g.setFont(u8g_font_unifont); u8g.drawStr( 0, 22, "Hello World!"); } while ( u8g.nextPage() ); } |
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.
|
1 2 3 4 5 6 7 8 9 |
u8glib library activate argument of your device u8g.firstPage(); do { write codes which you want to do } while ( u8g.nextPage() ); |
“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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#include "U8glib.h" //U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7); U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); void setup(void) { u8g.setColorIndex(1); // pixel on } void loop(void) { u8g.firstPage(); do { u8g.drawpixel(63, 31); } while ( u8g.nextPage() ); } |
This is tiny, and maybe difficult to identify.
Drawing lines
u8g.drawLine( start x, start y, end x, end y);
|
14 |
u8g.drawLine(0, 31, 127, 31); |
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.
|
14 |
u8g.drawLine(127, 63, 0, 0); |
Quadrangle
u8g.drawFrame(start x, start y, length, height);
|
14 |
u8g.drawFrame(31, 15, 64, 32); |
Filled quadrangle
u8g.drawBox(start x, start y, length, height);
|
14 |
u8g.drawBox(31, 15, 64, 32); |
You should watch out that the second half of the argument aren’t position value.
Circle
u8g.drawEllipse(x, y, length, height);
|
14 |
u8g.drawEllipse(63, 31, 20, 20); |
Filled circle
u8g.drawFilledEllipse(x, y, length, height);
|
14 |
u8g.drawFilledEllipse(63, 31, 20, 20); |
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.
u8g.setColorIndex()
This functions give you different color on drawing. In other words, you can erase part of graphics.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#include "U8glib.h" //U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7); U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); void setup(void) {} void loop(void) { u8g.firstPage(); do { u8g.setColorIndex(1); // pixel on u8g.drawBox(9, 4, 109, 55); // box u8g.setColorIndex(0); // pixel off u8g.drawFilledEllipse(63, 31, 15, 15); // 丸 u8g.setColorIndex(1); // pixel on } while ( u8g.nextPage() ); } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#include "U8glib.h" //U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7); U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); #define VOL A0 #define VMAX 1013 int vol_val = 0; void setup() { pinMode(VOL, INPUT); u8g.setColorIndex(1); } void loop() { vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL); byte val = map(vol_val, 0, VMAX, 0, 127); u8g.firstPage(); do { u8g.drawBox(0, 28, val, 5); } while (u8g.nextPage()); } |
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.
|
17 18 19 20 21 22 23 24 25 26 27 28 |
void loop() { u8g.firstPage(); do { vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL); byte val = map(vol_val, 0, VMAX, 0, 127); u8g.drawBox(0, 28, val, 5); } while (u8g.nextPage()); } |
This sample means avoiding slow reaction by running “analogread” functions during drawing.