Arduino互換機を使ったマルチメーターの制作〜その6〜OLEDの画面表示

カスタム

これまでシフトインジケーター、日付と時刻の表示、電圧計、タコメーターとお話ししてきたが、どれもコンピュータの中だけの話で、肝心のスーパーカブへの実装がなかなか見えてこない内容だったかもしれない。

このマルチメーター、実装に近づくにつれて話はややこしくなってくる。

今回の話あたりから面倒臭いトライアンドエラーの繰り返しになることだろう。だがそれも可愛いカブちゃんのため。決して苦にはならないはずだと思いたい。

有機ELディスプレイを手に入れよう

まずは有機ELディスプレイ(OLED)を手に入れなければ話は始まらない。

僕はAmazonで購入した。秋月電気通商でも購入できるが、Amazonの方が単価にすると安い。

OLEDには制御チップの種類によって色々とあるが、僕はSSD1306という型番のチップが使われているものを選んでいる。

制御チップの型番はプログラムを組むときのライブラリに関係してくるので、自分が使うチップに適切なライブラリを見つけることができるならどんな型番でも構わない。

大きさは0.96インチで128×64ドットの解像度だ。価格が手頃なものはこの大きさが主流で、これよりも大きなものだとわずかな大きさの差で価格が高くなりコストパフォーマンスが良いとはいえなくなる。

ブレッドボード上で接続してみる

RTCモジュールと同じくI2Cで通信するので、端子はVCC, GND, SDA, SCLの4つ。それぞれSeeeduino XIAOの5V, GND, 4, 5番ピンに接続する。

OLEDに付属していたピンをVCC(赤), GND(黒), SDA(黄), SCL(緑)の配線に付け替えてある。

ライブラリをインストール

ライブラリは「u8g2」というのを利用した。

Arduino IDEのメニューから「スケッチ」〜「ライブラリをインクルード」〜「ライブラリを管理…」と辿っていく。
検索欄に「u8g2」と入力すると検索される一覧からこいつを選んで「インストール」する。説明のところに対応するチップの型番が列挙されている。

スケッチ

要は128×64ドットの画面の中に、日付と時刻・電圧・ギアポジションの情報をいかに詰め込むかという1ドットをアレコレする細かい話になる。

多分結局は何度も試行錯誤してSeeeduino XIAOに書き込み〜スケッチの修正を繰り返しながら位置を決め込んでいく作業になるだろう。

#include <U8g2lib.h>
// OLED 画面定義
U8G2_SSD1306_128X64_NONAME_F_HW_I2C OLED1(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
void setup() {
  OLED1.begin();
}
void loop() {
// -----------------------------
//          OLED 表示
// -----------------------------
  OLED1.firstPage();
  do {
    // 時刻表示
    OLED1.setFont(u8g2_font_helvB24_tn);
    OLED1.drawStr(0, 26, "15:39");
    // 時刻表示
    OLED1.setFont(u8g2_font_siji_t_6x10);
    OLED1.drawGlyph(7, 40, 0xe225);
    OLED1.setFont(u8g2_font_helvB14_tn);
    OLED1.drawStr(20, 44, "12/28");
    OLED1.setFont(u8g2_font_profont11_mr);
    OLED1.drawStr(66, 44, "Mon");
    // 電圧表示
    OLED1.setFont(u8g2_font_siji_t_6x10);
    OLED1.drawGlyph(7, 62, 0xe040);
    OLED1.setFont(u8g2_font_logisoso16_tf);
    OLED1.drawStr(16, 64, "12.4");
    OLED1.setFont(u8g2_font_profont11_mr);
    OLED1.drawStr(55, 64, "Volts");
    // ギアポジション表示
    OLED1.setFont(u8g2_font_logisoso58_tr);
    OLED1.drawStr(88, 60, "N");
  } while ( OLED1.nextPage() );
}

以下、少し補足説明。

コメント「OLED 画面定義」部分
ここは接続したOLEDのニックネームを決めるところと思ってほしい。この例では「このスケッチ内では”OLED1”という名前で呼ぶよ!」ということを書いてある。
長々とした記述については、僕と同じOLEDを使う場合はそっくりこのままでいけるはず。違う製品を使う場合は少し変わってくるかもしれない。その場合は、ArduinoIDEの「ファイル」メニュー〜「スケッチ例」〜「u8g2」の中から適当なサンプルを開いて冒頭の長々としたコメント行の中から色々と試していくことになるだろう。

setup関数内
先ほど定義したニックネーム「OLED1」をスタートさせる記述のみ。

loop関数内
OLED1.firstPage();
do {
から
} while ( OLED1.nextPage() );
までが表示内容の記述になる。
フォントの設定、文字またはアイコンの表示の繰り返しなので命令自体はどれがなんの役割をしているかは読めばわかるだろう。
文字・アイコンを表示させるときは(横位置, 縦位置, 表示文字)を指定する。位置についてはドット単位での指定になる。

とりあえずこの段階では日付と時刻、電圧値とギアポジションは適当な文字で指定して、表示位置だけを色々と自分好みになるように調整してみてほしい。

実際にこれまでのRTCモジュールの日付や時間、計測した電圧値とギアポジションなどをOLED表示と合体させるのは最終段階にしたい。

アイコン指定のやり方

アイコンの指定に「0xe225」などと書いてあるが、これはフォントの一覧を見ながら次のように指定する。

一覧からフォント名と使いたいものの番号を確認する。

例えば上の図の中の7番のカメラの絞り羽根のアイコンを使う場合、右の「80/0040」という番号の「0040」の下一桁をアイコンの番号にして「0047」となる。最後のF番の下矢印の場合は「004F」となる。
スケッチに記述する場合は冒頭に「0x」を付加して「0x0047」や「0x004F」と記述する。

参考サイト

表示に詳細については参考サイトなしには試行錯誤もできないと思う。以下のサイトを参考にしてほしい。

参考サイト【Arduino】OLEDに文字表示【Seeeduino】
https://101010.fun/iot/arduino-oled-display.html

参考サイト(利用できるフォント)
https://github.com/olikraus/u8g2/wiki/fntlistall#7-pixel-height

僕のはこんな感じに配置してある。
ちなみにこのOLEDは破損していて上部が縞々表示になってしまっている。原因は下の部分を押さえつけすぎてしまったこと。右下のところ、ガラスが割れているのが見える。

コメント

タイトルとURLをコピーしました