Release 2016.9.7 / Update 2017.6.18

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. simple_wiring_u8g_I2C_breadboard

Review

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

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.

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. u8glib_size_capa

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_8x13r” 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.

u8glib_axis
x0、y20 is here.

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

Use “u8g.setFont” before you draw character.

u8glib_hello_goodbye

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.

u8glib_first_num

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.

It will work.

u8glib_hello_val  

Summary : Simplified sketch to display the values

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

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

9 thoughts on “Use OLED with “u8glib” : part 3

    1. Thank you for comment.
      Sorry to say, code of the url seems to be for “Adafruit” library. And I haven’t learn neither the library and how to use the sensor.
      So, basically, I can’t help your project. But some rewrite of the code might be workable.

      Watch Out! I changed sensor pin 10 to 2.

      Good luck!

  1. Thank you! Before the hertz stuff I’m really lost in here and tearing my hairs ;

    vol_val = 0.9 * vol_val + 0.1 * analogRead(VOL);
    byte val = map(vol_val, 0, VMAX, 0, 127);

    Any touch here will make my gauge bar(u8g.drawBox, val) fail! I couldn’t tell that I really understood this code. Basically I’m trying to make the gauge screen (u8g.drawBox(val)) range to accept 0v to 5v and numbers(u8g.drawStr(num)) to 0-100 %

    So I modify the code;
    vol_val = 5.0 / 1024.0 * (analogRead (VOL) + 0.5) ;
    u8g.drawBox(0, 44, val, 22);

    but no go!

    1. At first, to be sure, hertz(PWM) is not same as analog voltage. Be careful.

      The analogRead() function returns 0-1024 value depends on its system voltage. So if you use 5V arduino, you don’t have to remap value. 5V is 1024, 0V is 0.
      But, instead, you should remap the value to OLED pixel range.
      For example, if I use 128×64 pixel OLED, screen size value goes 127×63. And,

      u8g.drawBox(0, 43, analogRead (VOL) / 1024.0 * 127, 20);

      Incidentally, I recommend you use “map()” function to be much easier.

      In addition, “0.9 * vol_val + 0.1 * analogRead(VOL);” is very practical way to get stable value.

      Check here,
      https://jumbleat.com/2016/08/17/reduce_fluctuations/

  2. Hi!
    Okay I misunderstood how the sensor works. The sensor send PWM signal 50-150 hertz. So 50hz means %0 Alcohol and 150 hz means %100 alcohol. I get rid of some codes and now it works.

    http://img.photobucket.com/albums/v124/cucuman/20170501_035320.jpg

    Here is the code;

    #include “U8glib.h”

    U8GLIB_SH1106_128X64 u8g(13, 11, 10, 9, 8); // SW SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9

    int Sensorpin = 2;
    float pulsetime = 0;
    int hertz = 0;

    void setup() {
    u8g.setColorIndex(1);
    u8g.setFont(u8g_font_fub35n);

    }

    void loop() {

    pulsetime = pulseIn(Sensorpin, HIGH) + pulseIn(Sensorpin, LOW);
    hertz = int((1000000 / pulsetime) – 50);

    u8g.firstPage();
    do
    {

    u8g.drawBox(25,4,8,34); // dikey I
    u8g.drawBox(31,4,15,6); // yatay 1
    u8g.drawBox(31,18,15,6); // yatay 2
    u8g.drawBox(31,32,15,6); // yatay 3
    u8g.setPrintPos(49, 39);
    u8g.print(hertz);
    u8g.drawBox(0, 44, hertz, 22);

    } while (u8g.nextPage());
    delay(900);
    }

    But as you may see the bar graph doesn’t fit to screen. I’m trying to understand how u8g.drawBox(0, 44, hertz, 22); works on a screen range. Thank you for your great help

Leave a Reply

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