表示を充実させる(Grove Beginner Kit For Arduino検証報告)

Grove Beginner Kit For Arduino(以下、Beginner Kit)検証報告の10番目です。前回の記事はこちらです。
hirocom777.hatenadiary.org

表示を充実させる

 前回はOLED ディスプレイで図形の表示をしてみました。今回は図形と文字を同時に表示してみようと思います。

2つのライブラリ

 OLED ディスプレイについては前々回で文字の表示、前回で図形の表示を行いました。

最初の文字の表示ではスケッチの冒頭で

#include <U8x8lib.h>
U8X8_SSD1306_128X64_ALT0_HW_I2C u8x8(/* reset=*/ U8X8_PIN_NONE);

って書きました。

次の図形の表示では

#include <U8g2lib.h>
U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R2, /* reset=*/U8X8_PIN_NONE);

って書いています。

これは、U8x8libとU8g2libを使い分けているということです。一度に両方のライブラリを使うことはできません。U8x8libはU8g2libに含まれているのでU8g2libをインストールしておけばU8x8libも使えます。2つのライブラリの違いは以下の通り。

・U8x8lib
 -テキスト表示のみサポートのみ
 -8x8 ピクセルのフォントだけ対応
 -OLED ディスプレイに直接書き込む。描画が速く、CPU側のリソースは少ない

・U8g2lib
 -グラフィック表示をサポート
 -対応しているフォント多数。フォントのサイズも変更可能
 -描画するのにCPU側のリソースが必要。速度もやや遅い

つまり、簡単な表示を高速で少ないリソースで実現したい場合にはU8x8libを、リソースを消費してもいいので形や複雑な文字表示を実現したい場合はU8g2libを使用するということになります。

スケッチ例

 それでは、スケッチ例をご紹介します。今回は3軸加速度計の値を表示してみました。3軸加速度計についてはGrove Beginner Kit For Arduino検証報告⑦ 動きを把握するを参考にしてください。

#include <U8g2lib.h>
U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R2, /* reset=*/U8X8_PIN_NONE);
#include "LIS3DHTR.h"
LIS3DHTR<TwoWire> accelemeter;
#define WIRE Wire

void setup() {
  u8g2.begin();
  u8g2.setPowerSave(0);
  u8g2.setFlipMode(0);
  u8g2.setFont(u8g2_font_t0_16_mr);
  accelemeter.begin(WIRE, 0x19);
  accelemeter.setOutputDataRate(LIS3DHTR_DATARATE_50HZ);
}
void loop() {
  double x = accelemeter.getAccelerationX();
  double y = accelemeter.getAccelerationY();
  double z = accelemeter.getAccelerationZ();
  u8g2.firstPage();
  do {
    u8g2.drawRFrame(2, 2, 125, 61, 5);

    u8g2.setCursor(20, 20);
    u8g2.print("x:"); u8g2.print(x);
    u8g2.setCursor(20, 36);
    u8g2.print("y:"); u8g2.print(y);
    u8g2.setCursor(20, 52);
    u8g2.print("z:"); u8g2.print(z);
  } while (u8g2.nextPage());
  delay(200);
}

 
書き込んで実行すると、OLEDディスプレイに以下の様に表示されたと思います。

f:id:HiroCom777:20201128211003j:plain

スケッチの解説

 それではスケッチの解説です。今回新しく出てきた関数は以下になります。まずはsetup()内から。
・u8g2.setFont()
 カッコの中にフォント名を指定することによって、表示に使用するフォントを指定します。指定出来るフォントはU8g2libとは異なります。使用できるフォントは以下にまとまっているので参考にしてください。
fntlistall · olikraus/u8g2 Wiki · GitHub
フォントを切り替えることによって文字の表示サイズも変えることが出来ます。また、字体の変更も色々出来ます。以下はフォントにu8g2_font_luRS12_tfを指定した場合の表示です。ちょっと感じが変わりましたね。

f:id:HiroCom777:20201128211428j:plain
 気を付けなければならないのが、フォント自体がかなりリソースを食うという事です。特にサイズの大きなフォントはリソースを食います。フォントの選択には気を付けましょう。

続いてloop()内は以下となります。

・u8g2.setCursor()
 文字を表示する位置を決めます。座標系については、前回で図形の表示で使用した128x64と同じで左上が0,0となります。座標を指定すると文字の左下が指定座標となって表示されます。

・u8g2.print()
 u8g2.setCursor()で指定された位置にカッコ内で指定した文字を表示します。u8g2.println()もあるのですが、改行は行いません。動作はu8g2.print()と一緒です。

実用的な表示ができる

 いかがでしたか?これで色々な表示にも柔軟に対応できますね!!次回は画像の表示に挑戦します。あと、SeeedからBeginner Kitに似たようなアイテムが出てるみたいなのでチェックしてみますね。お楽しみに!!
hirocom777.hatenadiary.org


Arduino Grove Beginner Kit For Arduinoの連載記事はコチラからどうぞ!!