Use OLED with “u8glib” : part 3

This article is about how to draw texts and values on screen. Please read after previous and the time before last.

Wiring

Wiring is same as previous instruction. You also need variable resistor. This wiring diagram is I2C connection. Please check here if your screen is SPI connection.

Review

Based on the review, I will write sketch using the variable resistor, first.

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);   // SPI connection
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, 60, val, 3);

  } while (u8g.nextPage());
}

This sketch has been updated than the last time. And it is basic sketch in this article.

Draw characters on screen

If you want to display strings by “u8glib”,

1. Set Font
2. Set Position and cast strings

Font is kept once you set it. So if you won’t use several fonts, you can omit process 1 for each draw.

#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.setFont(u8g_font_unifont);
    u8g.drawStr( 0, 22, "Hello World!");

    u8g.drawBox(0, 60, val, 3);

  } while (u8g.nextPage());
}

Set Font

What you need to set the font,

u8g.setFont( font name );

Font has been prepared in advance in the “u8glib” library. And it is packed in the sketch at compiling. So if you add more font, sketch size will expand. In fact, the most hard thing for using “u8glib” is how reduce font size. There is a font “u8g_font_unifont” and you can check detail here. Then watch detail of the font,

u8g_font_unifont BBX Width 16,  Height 16,  Capital A 10 Font data size: 5551

This font size is 5.5 KB, but Arduino memory size is 32 KB. So you need one-sixth size memory by one font.

Much ingenuity is required if you want to use multiple fonts.

Font List

Available font on “u8glib” You can use any font on the page. But it’s too many font to choose one. And File size will vary greatly depending on series of the font. If you got a font which you want to use, set the font name to “u8g.setFont” arguments. If you want to use “u8g_font_8ｘ13r” font, for example,

u8g.setFont( u8g_font_8x13r );

Now you can use it. I recommend you to use font that is attached ‘r’ to the end of the name. Because it’s much lighter.

Draw character string

To draw character string,

u8g.drawStr( x, y, character string );

It’s same as graphics drawing. But be careful that axis position of the text is lower left.

#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.setFont(u8g_font_8x13r);
    u8g.drawStr( 0, 20, "Hello World!");

    u8g.drawBox(0, 60, val, 3);

  } while (u8g.nextPage());
}

Now you can see how string is drawn. If you want several fonts,

    u8g.setFont(u8g_font_unifont);
    u8g.drawStr( 0, 20, "Hello World!");
    u8g.setFont(u8g_font_8x13r);
    u8g.drawStr( 64, 20, "Goodbye World!");

Use “u8g.setFont” before you draw character.

Once you define font, it is compiled in your sketch even if you don’t use it. Conversely, you should set “u8g.setFont” at “void setup”, if you won’t use any other font.

Draw values

I’m going to draw value by reading variable resistor, now. There are two options to draw value as character, easy way and hard way. The hard way is difficult, of course. But it’s convenient to layout.

option one

set position：u8g.setPrintPos(x, y);
draw value ：u8g.print(value);

“Print” functions works as same as “Serial.print”. It’s very simple to draw values.

option two

Make your own character string by pointer. First, I will try to display 1 digit of the value.

#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);

  char num [2] = {"0"};
  num [0] = '0' + vol_val % 10;

  u8g.firstPage();
  do {

    u8g.setFont(u8g_font_unifont);
    u8g.drawStr(95, 55, num);

  } while (u8g.nextPage());
}

I make array num[2], then set 1 digit of value “vol_val” to it. You can get the digit by ‘%’. And I get ASCII code num by adding ‘0’ to the value. This method is very useful and important. For example, ‘0’ + 5 = ? ‘0’ means number 48 as value on ASCII code. 48 + 5 = 53 So by this method, you can convert int value to number of char. By Converting for each digit by this way, you can display value.

#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);

  char num [5] = {"0000"};
  num [0] = '0' + (vol_val / 1000) % 10;
  num [1] = '0' + (vol_val / 100) % 10;
  num [2] = '0' + (vol_val / 10) % 10;
  num [3] = '0' + vol_val % 10;

  u8g.firstPage();
  do {

    u8g.setFont(u8g_font_unifont);
    u8g.drawStr(95, 55, num);

  } while (u8g.nextPage());
}

It will work.

Summary : Simplified sketch to display the values

Finally, I wrote a simplified sketch which displays value by variable resistor.

#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;

#define DEG 4                       // digit


void setup() {
  pinMode(VOL, INPUT);
  u8g.setColorIndex(1);             // paint pixel
  u8g.setFont(u8g_font_unifont);    // choose font
}


void loop() {

  vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL);   // get value of VR

  byte val = map(vol_val, 0, VMAX, 0, 127);   // map the value in screen range

  char num_array [DEG + 1];                   // array for VR
  bool space = true;                          // make space depends on digit

  for (byte i = 0 ; i < DEG ; i++)            // repeat for the digit
  {
    // Calculation for the carry digit
    long digit = 1;
    for (byte ii = 1 ; ii <= (DEG - 1 - i) ; ii++) digit *= 10;

    // get a single digit by dividing the value
    byte cur_val = (vol_val / digit) % 10;

    // get highest digit
    if ((vol_val == 0 && i == (DEG - 1)) || cur_val != 0) space = false;

    if (space) num_array [i] = ' ';       // fill array with 0 unless value is over.
    else num_array [i] = '0' + cur_val;   // fill number
  }

  num_array [DEG] = '
#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;
#define DEG 4                       // digit
void setup() {
pinMode(VOL, INPUT);
u8g.setColorIndex(1);             // paint pixel
u8g.setFont(u8g_font_unifont);    // choose font
}
void loop() {
vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL);   // get value of VR
byte val = map(vol_val, 0, VMAX, 0, 127);   // map the value in screen range
char num_array [DEG + 1];                   // array for VR
bool space = true;                          // make space depends on digit
for (byte i = 0 ; i < DEG ; i++)            // repeat for the digit
{
// Calculation for the carry digit
long digit = 1;
for (byte ii = 1 ; ii <= (DEG - 1 - i) ; ii++) digit *= 10;
// get a single digit by dividing the value
byte cur_val = (vol_val / digit) % 10;
// get highest digit
if ((vol_val == 0 && i == (DEG - 1)) || cur_val != 0) space = false;
if (space) num_array [i] = ' ';       // fill array with 0 unless value is over.
else num_array [i] = '0' + cur_val;   // fill number
}
num_array [DEG] = '\0';                 // set null character to last array
u8g.firstPage();
do {
u8g.drawStr(0, 22, "Hello World!");   // draw character
u8g.drawStr(95, 55, num_array);       // draw value
u8g.drawBox(0, 60, val, 3);           // draw gauge
vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL);   // get VR value on case of "while loop"
} while (u8g.nextPage());
}
';                 // set null character to last array

  u8g.firstPage();
  do {

    u8g.drawStr(0, 22, "Hello World!");   // draw character
    u8g.drawStr(95, 55, num_array);       // draw value
    u8g.drawBox(0, 60, val, 3);           // draw gauge

    vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL);   // get VR value on case of "while loop"
  } while (u8g.nextPage());
}

You can display more digit value if you change define of “DEG”. Well, are you able to use u8glib now ? I hope this articles will help you. For more information about ‘u8glib’, check here.

part 2
Part 1