マイクロビットの表示装置は２５個のLEDだけですので、長いメッセージはスクロールする必要があります。今回はMicro:bitにOLED有機ELディスプレイを接続して、メッセージを表示する例を紹介します。
当記事は、シリーズでマイクロビット(Micro:bit)のプログラミングについて紹介しています。初めての方はこちらをご覧ください。
使用するOLED有機ELディスプレイについて
今回使用したのは、『HiLetgo® 0.91″ IIC I2C シリアルOLEDディスプレイモジュール 128×32 3.3V/5V』という製品です。
今回の製品は最後に纏めて、購入先を紹介しています。
当サイトでも紹介しているArduino対応として販売されています。I2Cというインターフェースで接続できます。Micro:bitにもI2Cインターフェースがありますので、今回それを利用します。今までの記事でブロックエディターやMicropythonを紹介してきましたが、I2Cの説明については省いていましたので、今回紹介します。
I2Cはネット上に色々情報がありますが、以下のサイトが参考になります。ちょっと難しいですが。
Micro:bitとOLED有機ELディスプレイの接続
Micro:bitとディスプレイは、SCL、SDA、VCC、GNDの４本の線で接続します。Micro:bitとの内部で、I2Cバスにはコンパスと加速度センサーもつながっています。
配線図
実際の接続状態（moto:bitには、I2Cバス用のコネクターがついていますので、それを使用しました。
Makecode（V1使用）にOLED有機ELディスプレイ用拡張機能を追加
１．Makecode V1を開きます
２．以下の画面になりますので、『新しいプロジェクト』をクリックします。
３．新しいプロジェクトをクリックすると、以下のような画面となりプログラムができるようになります。
４．拡張機能を追加するために、高度なブロックをクリックして開いたメニューの一番下の『拡張機能』をクリックします。
５．以下のような拡張機能の選択画面になりますので、検索窓に『SSD1306』と入力して検索をクリックします。
６．以下の２つの拡張機能が表示されますので、『oled-ssd1306』をクリックします。
７．以下のように、LEDブロックの下に『OLED』ブロックが追加されました。残念ながら日本語化されていませんが、次のステップで各ブロックの説明をします。
Makecode（V1使用）で実際にプログラムしてみる
レッスン内容『OLED有機ELディスプレイにメッセージと図形を表示する』
Micro:bitのホームページにI２Cのレッスンがありませんので、以下のプログラムを作っていきたいと思います
Aボタンを押したら『Hello, OLED!と図形』を表示して、Bボタンを押したら画面をクリアするプログラムです。
レッスン目標
子供たちは、次のことができるようになります。
- OLED有機ELディスプレイを使って、メッセージを表示したり図形を表示することができる
ステップ１
まず、ディスプレイの初期化をします。他の命令を実行する前に必ず必要です。今回使用するOLED有機ELディスプレイは横128(x:0-127)縦32(y:0-31)ドットの画面サイズですので、その値を指定します。ブロック種類選択メニューから『OLED』を選択して、『initialize OLED with height 64 width 132』（画面を高さ64幅128で初期化）ブロックを選択します。
今回使用のOLEDに合わせてheight（高さ）を64から32に変更して『最初だけ』ブロックに組み込みます。ワークスペースは以下のようになります。『ずっと』ブロックは使いませんので、削除しておいてください。
ステップ２
Aボタンを押したときの処理を作ります。ブロック種類選択メニュー『入力』から『ボタンAが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『show string “Hello, OLED!”』（文字列を表示する）ブロックを選択し、『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
次に、図形を表示するブロックをプログラムしますが、この部分は関数として呼び出す形にします。高度なブロック種類選択メニュー『関数』から『関数を作成する』をクリックします。（関数にする理由は、ボタンAが押されたときブロックが長過ぎて見にくいため）
『新たに作成する関数の名前：』画面が表示されますので、例えば『ずけい』と名前を入力してOKをクリックします。
ずけい関数ブロックがワークスペースに表示されます。ワークスペースは以下のようになります。
ステップ３
ここから、関数ブロックに作図するブロックを組み込んでいきます。ブロック種類選択メニュー『OLED』から『draw outlined box with coordinates x=0 y=0 w=0 h=0』（横左上位置x、縦左上位置y、幅w、高さhの□を描画）ブロックを選択して『関数ずけい』ブロックに組み込み、ｘ＝０、ｙ＝１０、ｗ＝２０、ｈ＝２０と指定します。この指定は以下のような四角を描画します。縦は３２ドット、横は４２ドットまでで省略してあります。
ワークスペースは以下のようになります。
塗りつぶされた四角を先ほどの四角の右に描画するために、ブロック種類選択メニュー『OLED』から『draw filled box with coordinates x=0 y=0 w=0 h=0』（横左上位置x、縦左上位置y、幅w、高さhの■を描画）ブロックを選択して『関数ずけい』ブロックに組み込み、ｘ＝２５、ｙ＝１０、ｗ＝２０、ｈ＝２０と指定します。ワークスペースは以下のようになります。
塗りつぶされた四角の右に円を描画するために、ブロック種類選択メニュー『OLED』から『draw outlined circle with coordinates x=0 y=0 radius r =0』（中心位置x、中心位置y、半径rの円を描画）ブロックを選択して『関数ずけい』ブロックに組み込み、ｘ＝６０、ｙ＝２０、r＝１０と指定します。ワークスペースは以下のようになります。
先ほどの円の右に塗りつぶされた円を描画するために、ブロック種類選択メニュー『OLED』から『draw filled circle with coordinates x=0 y=0 radius r =0』（中心位置x、中心位置y、半径rの塗りつぶされた円を描画）ブロックを選択して『関数ずけい』ブロックに組み込み、ｘ＝９０、ｙ＝２０、r＝１０と指定します。ワークスペースは以下のようになります。
今まで描画した図形の下側に線を引くために、ブロック種類選択メニュー『OLED』から『draw line with coordinates x1=0 y1=0 x2= y2=0』（始点位置x1、位置y1、終点位置x2、y2 の直線を描画）ブロックを選択して『関数ずけい』ブロックに組み込み、ｘ１＝０、ｙ１＝３１、ｘ２＝１２８、ｙ２＝３１と指定します。ワークスペースは以下のようになります。
これで関数ずけいは完成です。次に拡張ブロック種類選択メニュー『関数』から『関数を呼び出す ずけい』ブロックを選択します。
そして、『関数を呼び出す ずけい』ブロックを『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
最後に図形を表示するためにブロック種類選択メニュー『OLED』から『insert newline』（改行挿入）ブロックを選択して『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
ステップ４
ステップ３同様に、ボタンBが押された時に、画面をクリアするプログラムを作ります。ブロック種類選択メニュー『入力』から『ボタンBが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『clear OLED display』（OLEDディスプレイを消去）ブロックを選択し、『ボタンBが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
ステップ５
Makecodeの左下でプログラム名を決めて保存ボタンを押します。この例では『OLED_TEST』としました。
ダウンロードフォルダーに『microbit-OLED_TEST.hex』というファイルが出来上がっていますので、Micro:bitにコピーします。これでメッセージを表示することができますので、試してみてください。Aボタンを押すとこの記事の最初にある写真のようにOLED有機ELディスプレイに表示されます。Bボタンを押すと画面が消されます。なお、Aボタンを連続して押すと画面が崩れますので、Bボタンで消去してからAボタンを押してください。あるブロックを『ボタンAが押されたとき』に追加するとそのようなことにはなりません。どうすれば良いでしょうか？回答は次の記事で紹介します。
チャレンジ
これでレッスンは終了ですが、チャレンジとして以下をやってみてください。
- レッスン『温度を計ってみよう』の温度をLEDではなくOLED有機ELディスプレイに表示するように変えてみる。
上記の回答は、次の記事で紹介します。
最後まで記事をお読みいただきありがとうございます。
記事の改善に役立てたいと思いますので、よろしければアンケートにご協力ください。
今回の記事に使用したMicro:bit以外の製品は以下になります。
