当サイトは2020年小学生のプログラミング必修化に向けて、関連する情報を纏めています。サイトリニューアルしました。

子供のプログラミング micro:bit(マイクロビット)で学ぶ 26

子供のプログラミング micro:bit(マイクロビット)で学ぶ 26

マイクロビットの表示装置は25個のLEDだけですので、長いメッセージはスクロールする必要があります。今回はMicro:bitにOLED有機ELディスプレイを接続して、メッセージを表示する例を紹介します。

当記事は、シリーズでマイクロビット(Micro:bit)のプログラミングについて紹介しています。初めての方はこちらをご覧ください。

使用するOLED有機ELディスプレイについて

今回使用したのは、『HiLetgo® 0.91″ IIC I2C シリアルOLEDディスプレイモジュール 128×32 3.3V/5V』という製品です。
今回の製品は最後に纏めて、購入先を紹介しています。
microbit26-1

当サイトでも紹介しているArduino対応として販売されています。I2Cというインターフェースで接続できます。Micro:bitにもI2Cインターフェースがありますので、今回それを利用します。今までの記事でブロックエディターやMicropythonを紹介してきましたが、I2Cの説明については省いていましたので、今回紹介します。

I2Cはネット上に色々情報がありますが、以下のサイトが参考になります。ちょっと難しいですが。

この当初の目的から推定されるように、I2Cは同じ基板内などのように近距離 で直結したデバイスと、100kbpsまたは400kbpsの速度でシリアル通信を行うよう に使われるのが主で、離れた装置間の通信には向いていません。  I2Cは、マスタ側とスレーブ側を明確に分け、マスタ側が全ての制御の主導権 を持っています。  I2Cはパーティーライン構成が可能となっており、1つのマスタで複数のスレーブ デバイスと通信することが可能です。  まずI2C通信のしくみは下図の構成を基本としています。http://www.picfun.com/c15.html

Micro:bitとOLED有機ELディスプレイの接続

Micro:bitとディスプレイは、SCL、SDA、VCC、GNDの4本の線で接続します。Micro:bitとの内部で、I2Cバスにはコンパスと加速度センサーもつながっています。
配線図
microbit26-3b
実際の接続状態(moto:bitには、I2Cバス用のコネクターがついていますので、それを使用しました。
microbit26-4

Makecode(V1使用)にOLED有機ELディスプレイ用拡張機能を追加

1.Makecode V1を開きます

2.以下の画面になりますので、『新しいプロジェクト』をクリックします。
microbit26-5

3.新しいプロジェクトをクリックすると、以下のような画面となりプログラムができるようになります。
microbit2-11

4.拡張機能を追加するために、高度なブロックをクリックして開いたメニューの一番下の『拡張機能』をクリックします。
microbit26-6

5.以下のような拡張機能の選択画面になりますので、検索窓に『SSD1306』と入力して検索をクリックします。
microbit26-7

6.以下の2つの拡張機能が表示されますので、『oled-ssd1306』をクリックします。
microbit26-8

7.以下のように、LEDブロックの下に『OLED』ブロックが追加されました。残念ながら日本語化されていませんが、次のステップで各ブロックの説明をします。
microbit26-9

Makecode(V1使用)で実際にプログラムしてみる

レッスン内容『OLED有機ELディスプレイにメッセージと図形を表示する』

Micro:bitのホームページにI2Cのレッスンがありませんので、以下のプログラムを作っていきたいと思います

Aボタンを押したら『Hello, OLED!と図形』を表示して、Bボタンを押したら画面をクリアするプログラムです。

 レッスン目標 

子供たちは、次のことができるようになります。

  • OLED有機ELディスプレイを使って、メッセージを表示したり図形を表示することができる

 ステップ1 

まず、ディスプレイの初期化をします。他の命令を実行する前に必ず必要です。今回使用するOLED有機ELディスプレイは横128(x:0-127)縦32(y:0-31)ドットの画面サイズですので、その値を指定します。ブロック種類選択メニューから『OLED』を選択して、『initialize OLED with height 64 width 132』(画面を高さ64幅128で初期化)ブロックを選択します。
microbit26-10

今回使用のOLEDに合わせてheight(高さ)を64から32に変更して『最初だけ』ブロックに組み込みます。ワークスペースは以下のようになります。『ずっと』ブロックは使いませんので、削除しておいてください。
microbit26-11

 ステップ2 

Aボタンを押したときの処理を作ります。ブロック種類選択メニュー『入力』から『ボタンAが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『show string “Hello, OLED!”』(文字列を表示する)ブロックを選択し、『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
microbit26-12

次に、図形を表示するブロックをプログラムしますが、この部分は関数として呼び出す形にします。高度なブロック種類選択メニュー『関数』から『関数を作成する』をクリックします。(関数にする理由は、ボタンAが押されたときブロックが長過ぎて見にくいため)
microbit26-13

『新たに作成する関数の名前:』画面が表示されますので、例えば『ずけい』と名前を入力してOKをクリックします。
microbit26-14

ずけい関数ブロックがワークスペースに表示されます。ワークスペースは以下のようになります。
microbit26-15

 ステップ3 

ここから、関数ブロックに作図するブロックを組み込んでいきます。ブロック種類選択メニュー『OLED』から『draw outlined box with coordinates x=0 y=0 w=0 h=0』(横左上位置x、縦左上位置y、幅w、高さhの□を描画)ブロックを選択して『関数ずけい』ブロックに組み込み、x=0、y=10、w=20、h=20と指定します。この指定は以下のような四角を描画します。縦は32ドット、横は42ドットまでで省略してあります。
microbit26-16a

ワークスペースは以下のようになります。
microbit26-17

塗りつぶされた四角を先ほどの四角の右に描画するために、ブロック種類選択メニュー『OLED』から『draw filled box with coordinates x=0 y=0 w=0 h=0』(横左上位置x、縦左上位置y、幅w、高さhの■を描画)ブロックを選択して『関数ずけい』ブロックに組み込み、x=25、y=10、w=20、h=20と指定します。ワークスペースは以下のようになります。
microbit26-18

塗りつぶされた四角の右に円を描画するために、ブロック種類選択メニュー『OLED』から『draw outlined circle with coordinates x=0 y=0 radius r =0』(中心位置x、中心位置y、半径rの円を描画)ブロックを選択して『関数ずけい』ブロックに組み込み、x=60、y=20、r=10と指定します。ワークスペースは以下のようになります。
microbit26-19a

先ほどの円の右に塗りつぶされた円を描画するために、ブロック種類選択メニュー『OLED』から『draw filled circle with coordinates x=0 y=0 radius r =0』(中心位置x、中心位置y、半径rの塗りつぶされた円を描画)ブロックを選択して『関数ずけい』ブロックに組み込み、x=90、y=20、r=10と指定します。ワークスペースは以下のようになります。
microbit26-20a

今まで描画した図形の下側に線を引くために、ブロック種類選択メニュー『OLED』から『draw line with coordinates x1=0 y1=0 x2= y2=0』(始点位置x1、位置y1、終点位置x2、y2 の直線を描画)ブロックを選択して『関数ずけい』ブロックに組み込み、x1=0、y1=31、x2=128、y2=31と指定します。ワークスペースは以下のようになります。
microbit26-21a

これで関数ずけいは完成です。次に拡張ブロック種類選択メニュー『関数』から『関数を呼び出す ずけい』ブロックを選択します。
microbit26-23a

そして、『関数を呼び出す ずけい』ブロックを『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
microbit26-24

最後に図形を表示するためにブロック種類選択メニュー『OLED』から『insert newline』(改行挿入)ブロックを選択して『ボタンAが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
microbit26-25

 ステップ4 

ステップ3同様に、ボタンBが押された時に、画面をクリアするプログラムを作ります。ブロック種類選択メニュー『入力』から『ボタンBが押されたとき』ブロックを選択し、次にブロック種類選択メニューから『OLED』を選択して、『clear OLED display』(OLEDディスプレイを消去)ブロックを選択し、『ボタンBが押されたとき』ブロックに組み込みます。ワークスペースは以下のようになります。
microbit26-26

 ステップ5 

Makecodeの左下でプログラム名を決めて保存ボタンを押します。この例では『OLED_TEST』としました。
microbit26-27

ダウンロードフォルダーに『microbit-OLED_TEST.hex』というファイルが出来上がっていますので、Micro:bitにコピーします。これでメッセージを表示することができますので、試してみてください。Aボタンを押すとこの記事の最初にある写真のようにOLED有機ELディスプレイに表示されます。Bボタンを押すと画面が消されます。なお、Aボタンを連続して押すと画面が崩れますので、Bボタンで消去してからAボタンを押してください。あるブロックを『ボタンAが押されたとき』に追加するとそのようなことにはなりません。どうすれば良いでしょうか?回答は次の記事で紹介します。

 チャレンジ 

これでレッスンは終了ですが、チャレンジとして以下をやってみてください。

  • レッスン『温度を計ってみよう』の温度をLEDではなくOLED有機ELディスプレイに表示するように変えてみる。

上記の回答は、次の記事で紹介します。


最後まで記事をお読みいただきありがとうございます。
記事の改善に役立てたいと思いますので、よろしければアンケートにご協力ください。

記事内容についてお伺い


良く解る解る解りにくい部分がある解りにくい 



今回の記事に使用したMicro:bit以外の製品は以下になります。

クロームブラウザーをご使用の方へ

当サイトへの訪問ありがとうございます。その際、グーグルクロームブラウザーをお使いの方にお知らせです。グーグルクロームブラウザーでは、2018年7月から、サイトにより以下の表示がブラウザーのアドレスバーに表示されます。当サイトでも表示されますが、心配ありませんのでご安心ください。
SSL案内1
これは、SSLと呼ばれるWebサイトとそのサイトを閲覧しているユーザとのやり取り(通信)を暗号化するための仕組みを使用していないためです。ネットショッピング、銀行サイトではパスワードやクレジットカードの情報を扱いますので、必須の仕組みです。当サイトでは、そのような情報を扱っておりませんので、暗号化は必須ではありませんが、訪問される方により安心していただけるように、SSL化を予定しております。このメッセージはSSL化完了まで念のため表示します。

マイクロビットカテゴリの最新記事