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

Micro:bit(マイクロビット)で学ぶ 28

Micro:bit(マイクロビット)で学ぶ 28

前の記事でMicropythonとmicrobit_ssd1306ライブラリーを使ってMicro:bitからOLED有機ELディスプレイにテキストメッセージを表示する例を紹介しました。今回は、同じライブラリーを利用して、ビットマップファイルを表示する例を紹介します。

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

以下の項目については前回の記事を参照してください。

・使用するOLED有機ELディスプレイについて
・Micro:bitとOLED有機ELディスプレイの接続
・OLED有機ELディスプレイ用のライブラリーの入手とmu_codeフォルダーへのコピー

1.使用するライブラリーと命令

当手順は、Githubの『Simple micropython library for the micro:bit to control the SSD1306 display』のライブラリーと手順を紹介しています。ビットマップ変換については手順が煩雑でしたので、プログラムを一部改修しましたので、オリジナル手順とは異なりますので、注意してください。

今回のライブラリーを使用すると、以下の命令がMuで使えるようになります。なお、今回のライブラリーは128×64専用ですので、128×32で使用すると画像がつぶれるようです。下の表示例を参照してください。

以下の表のサンプルプログラムのうち、3のビットマップファイルを表示するプログラムの手順を紹介します。使用する機能により、使用するライブラリーが異なりますので、注意してください。

 
ライブラリーの命令 命令の説明

1.initialize()

画面をリセットして初期化します。
以下の命令を実行する前に、必ず実行する必要があります。

2.clear_oled()

画面を消去します。初期化の直後や、前に表示した画面を消去するために使用します。

3.show_bitmap(filename)

別途準備されたbitmapファイル作成ソフトで作成したfilenameをディスプレイに表示します。
サンプルで提供されているbitmapファイルを表示するプログラム

4.set_px(x, y, color, draw=1)

x(0~127)とy(0~63)で指定した座標をcolor(0=黒か1=白)で指定した色で表示します。draw=0は表示用バッファーにデータを書き込むだけで、draw_screen()命令を使用して表示します。draw=1はすぐに表示されます。

5.get_px(x, y)

x(0~127)とy(0~63)で指定した座標の色(0=黒か1=白)を返します。

6.add_text(x, y, text, draw=1)

前回の記事で紹介済み

7.create_stamp(img)

Micro:bit内で定義されているImageを作成します。

8.draw_stamp(x, y, stamp, color, draw=1)

7で作成したImageを表示します。

9.pulse(time=500)

 画面の明るさを指定した時間で徐々に明るくします。デフォルト値は0.5秒です。

10.blink(time=1000)

画面をtimeで指定した時間で点滅します。デフォルト値は1秒間隔です。
2.Muで実際にビットマップファイルを表示するプログラムを作成

2-1.Muを開始して、gazou_sample.pyを作成します。まだ、転送しないでください。(サンプルプログラムgazou_sample.pyをコピーしてください)
microbit28-20

2-2.前回の記事でダウンロードしたmicrobit_ssd1306-masterフォルダー内にsample_imagesフォルダーがあります。その中に以下の3つのファイルがありますので、microbit_logoをmu_codeにコピーしてください。
microbit28-2
bitmap_converter.py:ビットマップファイルをOLED有機ディスプレイ表示用に変換するプログラム
microbit_logo:OLED有機ディスプレイ表示用のデータ
microbit_logo.bmp:ビットマップファイル

2-3.必要なライブラリーをMicro:bitにコピーするためにmicrobit10-9をクリックすると、以下の様な画面になりMicro:bit内とコンピューター内のmu_codeフォルダーが表示されます。Micro:bit内には以前に転送したプログラムがmain.pyという名前で保存されています。どんな名前のプログラムを転送しても、main.pyという名前になります。mu_codeフォルダーはMuで作成したプログラムが保管される場所です。
microbit27-7

2-4.必要なライブラリーをコンピューターのファイル:からドラッグして、Micro:bitのファイルでドロップしてコピーします。まず、ssd1306.pyをコピーします。以下のようになります。次に、同じようにssd1306_bitmap.pyもコピーします。
microbit27-8

2-5.以下のようになりますので、次に表示用ファイルmicrobit_logoもコピーします。
microbit28-3

2-6.以下のようになりますので、file操作を止めるために再度microbit10-9をクリックします。これをしないと転送できません。その後、転送をクリックしてプログラムをMicro:bitにコピーします。
microbit28-4

2-7.転送が終わるとプログラムが実行され、ビットマップが以下のように表示されます。
microbit28-5

3.OLED有機ディスプレイ(128×64)表示用ビットマップファイルの作成手順

この手順は、Windows10環境で確認したものです。bitmap_converterJP.exeは当方で改修したものです。前回の記事でダウンロードしたmicrobit_ssd1306-masterフォルダー内にsample_imagesフォルダーがありますので、以下の手順はすべてそのフォルダーで作業してください。

3-1.以下のファイル『bitmap_converterJP.exe』をダウンロードして、microbit_ssd1306-masterフォルダー内にあるsample_imagesフォルダー内にコピーしてください。このプログラムは、pythonが導入されていなくても実行できます。

3-2.こちらにアクセスしてビットマップファイルをbitmap_converterJP.exeで使えるデータに変換するためのソフトを入手します。以下のような画面になりますので、『LCD_Assistant.zip』をクリックしてダウンロードしてください。
microbit28-7

3-3.ダウンロードした『LCD_Assistant.zip』を適当なフォルダー(マイドキュメントなど)に解凍してください。解凍するとLCD_Assistantフォルダー内に『LCD_Assistant.exe』というプログラムが解凍されますので、このプログラムを実行してください。以下の様なウインドウが開きます。ビットマップファイルを作成後にこのプログラムで変換しますので、後で使用します。左側にある設定は以下の画面同様になっているか確認してください。
変換の流れ:①128×64のビットマップファイルを作成→②このプログラムで変換→③bitmap_converter.pyで再度変換してMicro:bitで表示
microbit28-8

3-4.ウィンドウズのペイントソフトなどを使って、128x64pxのビットマップファイルを作成し、microbit_ssd1306-masterフォルダー内のsample_imagesフォルダーに保存してください。(ビットマップ作成手順については、ここでは省きます。)今回の説明用に以下のビットマップファイル『test1.bmp』をサンプルで作成しました。手順を確認するのであれば、このファイルを右クリックしてダウンロードして利用してください。
test1

3-5.3-2でダウンロードしたプログラムで、test1.bmpファイルを読み込みます。File→Load imageをクリックします。
microbit28-9

3-6.以下のようなファイルを選択する画面が表示されますので、microbit_ssd1306-masterフォルダー内のsample_imagesフォルダーから『test1.bmp』を選択します。
microbit28-10

3-7.読み込んだビットマップが表示されますので、正しければFile→Save outputをクリックします。
microbit28-11

3-8.以下のようなファイルを保存する画面が表示されますので、ファイル名『indata』を入力してmicrobit_ssd1306-masterフォルダー内のsample_imagesフォルダーに保存します。後述するプログラムで『indata』を使用しますので、他の名前にしないでください。
microbit28-12a

3-9.先ほど、1の手順でダウンロードしたmicrobit_ssd1306-masterフォルダー内のsample_imagesフォルダーにある『bitmap_converterJP.exe』をダブルクリックして実行します。以下の確認画面が開きますので、良ければエンターキーを押します。
microbit28-17a

3-10.エンターキーを押すと、以下のメッセージを表示されます。良ければエンターキーを押して、プログラムを終わってください。microbit_ssd1306-masterフォルダー内にsample_imagesフォルダー内に『outdata』ができ上がっています。
microbit28-18

3-11.出来上がった『outdata』ファイルに分かりやすい名前を付けて、mu_codeフォルダーに移動するかコピーしてください。後は、『1.Muで実際にビットマップファイルを表示するプログラムを動かしてみる』の手順で『microbit_logo』のかわりに今回作成したファイルを使用すれば、以下のように表示されます。注意:プログラムのshow_bitmap(microbit_logo)のmicrobit_logoを今回作成したファイル名で書き換えてください。
microbit28-19

4.ビットマップファイル表示を利用したプログラムの作成

以下は、ブロックエディターで作成した『トゥルース・オア・デア』をMicropythonで作成した例です。ひらがなメッセージをビットマップで作成してOLED有機ディスプレイに表示して分かりやすくなりました。

使用したビットマップファイルは以下です。上の手順で変換してプログラムを動かしてみてください。
top   shinjitu   chousen

 

次は、できれば『カタカナ』をテキスト表示できるようにプログラムを作りたいと考えています。


 

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

記事内容についてお伺い


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



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

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

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

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