マイクロビットの表示装置は２５個のLEDだけですので、長いメッセージはスクロールする必要があります。今回はMicro:bitにOLEDディスプレイを接続して、メッセージを表示する例を紹介します。
当記事は、シリーズでマイクロビット(Micro:bit)のプログラミングについて紹介しています。初めての方はこちらをご覧ください。
Micro:bit V2、Makecode、SSD1306Makecode拡張機能が更新された事により、記事の内容が古くなりましたので、記事を更新しました。当記事は以下のバージョンにのみ対応しますので、注意してください。Micro:bit V1.5用の記事はこちらになります。
Micro:bit V２ Micro:bit V1.5とV2.0の違いはこちらを参照してください。
Makecode 最新版 こちらからMakecode にアクセスできます。
使用するOLED有機ELディスプレイについて
今回使用したのは、『HiLetgo 0.96″ I2C シリアル 128×64 OLED LCDディスプレイSSD1306液晶』という製品です。今回の製品は最後に纏めて、購入先を紹介しています。
当サイトでも紹介しているArduino対応として販売されています。I2Cというインターフェースで接続できます。Micro:bitにもI2Cインターフェースがありますので、今回それを利用します。今までの記事でブロックエディターやMicropythonを紹介してきましたが、I2Cの説明については省いていましたので、今回紹介します。
I2Cはネット上に色々情報がありますが、以下のサイトが参考になります。ちょっと難しいですが。
Micro:bitとOLED有機ELディスプレイの接続
Micro:bitとディスプレイは、SCL、SDA、VCC、GNDの４本の線で接続します。
実際の接続状態
MakecodeにOLED有機ELディスプレイ用拡張機能を追加
１．Makecodeを開きます
２．以下のような画面になりますので、『新しいプロジェクト』をクリックします。
３．新しいプロジェクトをクリックすると、プロジェクト名を入力するように以下のような画面となりますので、例えば『OLED_TESTV2』のように入力して作成✔をクリックします。
４．作成✔をクリックすると以下のような画面になりプログラミングができるようになります。
５．拡張機能を追加するために、高度なブロックをクリックして開いたメニューの一番下の『拡張機能』をクリックします。
６．以下のような拡張機能の選択画面になりますので、検索窓に『SSD1306』と入力して検索をクリックします。
７．いくつかの拡張機能が表示されますが、同じ名前の『oled-ssd1306』が２つありますのでどちらを使うのか確認するため両方の『詳しい説明』をクリックしてください。表示名が『tinkertanker/pxt-oled-ssd1306 2.0.9』のほうを選択してください。
注：2.0.9は2021/9/3時点ですので、今後変わる可能性があります。（理由は後ほど）
８．以下のように、LEDブロックの下に『OLED』ブロックが追加されました。残念ながら日本語化されていませんが、次のステップで各ブロックの説明をします。
この拡張機能の情報はこちら（英語版）です。
Makecodeで実際にプログラムしてみる
レッスン内容『OLEDディスプレイにメッセージと図形を表示する』
Micro:bitのホームページにI２Cのレッスンがありませんので、以下のプログラムを作っていきたいと思います
Aボタンを押したら『Hello! と図形』を表示して、Bボタンを押したら画面をクリアするプログラムです。
レッスン目標
子供たちは、次のことができるようになります。
- OLEDディスプレイを使って、メッセージを表示したり図形を表示することができる
ステップ１
まず、OLEDディスプレイの初期化をします。他の命令を実行する前に必ず必要です。ブロック種類選択メニューから『OLED』を選択して、『initialize OLED with witdth 128 height 64』ブロックを選択します。この初期化により、ディスプレイは 128 x 64 ドットにセットされます。
『initialize OLED with witdth 128 height 64』ブロックを『最初だけ』ブロックに組み込みます。ワークスペースは以下のようになります。デフォルトのパラメーターが丁度128 x 64ですので、そのまま利用します。『ずっと』ブロックは使いませんので、削除しておいてください。
ステップ２
Aボタンを押したときの処理を作ります。ブロック種類選択メニュー『入力』から『ボタンAが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『show (without newline) string ” ” 』（改行なしで文字列を表示する）ブロックを選択し、『ボタンAが押されたとき』ブロックに組み込みます。表示するテキスト”Hello!”も入力してください。ワークスペースは以下のようになります。
次に、図形を表示するブロックをプログラムしますが、この部分は関数として呼び出す形にします。高度なブロック種類選択メニュー『関数』から『関数を作成する』をクリックします。（関数にする理由は、ボタンAが押されたときブロックが長過ぎて見にくいためと複雑なプログラムを作る際に再利用ができるからです）
『関数の編集』画面が表示されますので、例えば『ずけい』と名前を入力して完了✔をクリックします。
注：パラメーター指定も出来るようになりましたが、使い方は別の記事で紹介させていただきます。
ずけい関数ブロックがワークスペースに表示されます。ワークスペースは以下のようになります。
ステップ３
ここから、関数ブロックに作図するブロックを組み込んでいきます。以下のような四角と縦線をHello！の右に表示する例です。以下は128 x 64のドットを方眼紙で作成した作図案です。
①ブロック種類選択メニュー『OLED』から『draw lectangle from x1 y1 to x2 y2』ブロックを選択して『関数ずけい』ブロックに組み込み、x1＝110、y1＝０、x2=119、y2=9 と指定します。この指定は上図の四角を描画します。
②ブロック種類選択メニュー『OLED』から『draw line from x1 y1 to x2 y2』ブロックを選択して『関数ずけい』ブロックに組み込み、x1＝128、y1＝10、x2=128、y2=14 と指定します。この指定は上図の縦線を描画します。
ワークスペースは以下のようになります。
これで関数ずけいは完成です。次に拡張ブロック種類選択メニュー『関数』から『関数を呼び出す ずけい』ブロックを選択します。
そして、『呼び出し ずけい』ブロックを『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
ステップ４
ステップ３同様に、ボタンBが押された時に、画面をクリアするプログラムを作ります。ブロック種類選択メニュー『入力』から『ボタンBが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『clear OLED display』（OLEDディスプレイを消去）ブロックを選択し、『ボタンBが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
ステップ５
Makecodeの左下でプログラム名を決めてダウンロードボタンを押します。この例では『OLED_TESTV2』としました。
ダウンロードフォルダーに『microbit-OLED_TESTV2.hex』というファイルが出来上がっていますので、Micro:bitにコピーします。これでメッセージを表示することができますので、試してみてください。Aボタンを押すと以下の写真のようにOLED有機ELディスプレイに表示されます。Bボタンを押すと画面が消されます。
注：連続してＡボタンを押すとHello!が繰り返して表示されますので、Bボタンを押してください。
チャレンジ
これでレッスンは終了ですが、チャレンジとして以下をやってみてください。
- レッスン『温度を計ってみよう』の温度をLEDではなくOLED有機ELディスプレイに表示するように変えてみる。
上記の回答は、次の記事で紹介します。
なお、以前はサポートされていた円の描画などはまだ実装されていません。今後バージョンアップでサポートされると思われます。こちらの情報ではJavascriptで『OLED.drawCircle(x,y,r)』の記述がありますので。次の記事では今回紹介出来なかったその他のブロックについて補足します。
最後まで記事をお読みいただきありがとうございます。
記事の改善に役立てたいと思いますので、よろしければアンケートにご協力ください。
今回の記事に使用した製品は以下になります。
