マイクロビット用液晶モジュール

　今回は「1.8inch TFT 液晶モジュール」を使います。この液晶モジュールは160×128ドットで65536色表示が可能です。

・micro:bit用液晶モジュール(www.waveshare.comでの製品紹介) https://www.waveshare.com/1.8inch-lcd-for-micro-bit.htm
(Amazonでの販売) https://www.amazon.co.jp/dp/B07HD2TXQZ/

　この液晶モジュールへの表示もブロックを使って行うことができます。液晶モジュールは文字表示とグラフィック表示が可能です。ただし、グラフィックと文字を同時に表示することはできません。
　今回は文字の表示を使ったサンプルを作成してみます。が、その前に写真のようにマイクロビットと液晶モジュールを接続してください。向きを間違えると当然のことながら動きません。

拡張機能を読み込む

　この液晶モジュールは新しいブロックエディタでも古いブロックエディタでも使うことができます。
　液晶モジュールを使うには最初に拡張機能を読み込む必要があります。新しくプロジェクトを作成したら以下の手順で拡張機能を読み込みます。

  • 「高度なブロック」の項目をクリックします

    「高度なブロック」の項目をクリックします

  • 「拡張機能」の項目をクリックします

    「拡張機能」の項目をクリックします

  • いろいろな拡張機能が出てきます。画面上部にある「検索または、プロジェクトのURLを入力...」の欄をクリックします

    いろいろな拡張機能が出てきます。画面上部にある「検索または、プロジェクトのURLを入力...」の欄をクリックします。

  • 「LCD1in8」という拡張機能が表示されるのでクリックします

    「LCD1in8」という拡張機能が表示されるのでクリックします

  • しばらくしてカテゴリに「LCD1in8」の項目が追加されます

    しばらくしてカテゴリに「LCD1in8」の項目が追加されます

  • 「LCD1in8」の項目をクリックすると使用できるブロックが表示されます

    「LCD1in8」の項目をクリックすると使用できるブロックが表示されます

　拡張機能で読み込まれるブロックは以下の通りです。

LCD1IN8 Init モジュールを初期化します。
Clear screen and cache 液晶画面とキャッシュの消去を行います。
Filling Color (0) 液晶画面全体を指定した色で塗り潰します。
Send display data 文字やグラフィックコマンドを実行した後に、このブロックを入れます。このブロックがないと内部キャッシュに描画されるだけで実際の液晶画面には何も表示されません。
Show Windows display data 画面の表示位置と範囲を指定します。
(WHITE) 色指定に使うブロックです。以下の色が用意されています。
WHITE 白色
BLACK 黒色
BLUE 青色
BRED 紫色
GRED 黄色
GBLUE 水色
RED 赤色
MAGENTA マゼンタ（紫色）
GREEN 緑色
CYAN シアン（水色）
YELLOW 黄色
BROWN 茶色
BRRED 黄土色
GRAY 灰色
Set back light level (0) バックライトの明るさを指定します。
Draw Point 点を描画します。
Draw Line 直線を描画します。
Draw rectangle 四角形を描画します。
Draw Circle 正円を描画します。
Show String 文字列を表示します。
Show number 数値を表示します。

文字を表示する

　拡張機能が読み込まれたら準備完了です。まずは、ブロックを使って文字を表示してみましょう。この液晶モジュールには、ちょっと癖があり手順通りにやらないと期待通りに表示されません。
　まず、液晶モジュールを初期化したあと、画面とキャッシュを消去します。その後、文字を出力します。文字や数値が出力されるのはマイクロビット内にあるキャッシュなので、このままでは液晶画面には何も表示されません。このため、キャッシュの内容を液晶モジュールに転送する必要があります。
　実際のブロックを見てもらった方が早いでしょう。

  • 文字を表示する

    文字を表示する

　JavaScriptコードの場合は以下のようになります。（今回の処理ではbasic.forever〜のブロックは使用しないので不要ですが一応入れてあります）

LCD1IN8.LCD_Init()
LCD1IN8.LCD_Clear()
LCD1IN8.DisString(
23,
60,
"Hello! micro:bit",
255
)
LCD1IN8.LCD_Display()
basic.forever(function () {

})

　プログラムをマイクロビットに転送すると図のような表示になります。この液晶モジュールの処理は非常に遅いので表示されるまでに数秒かかることもあります。

温度を画面に表示する

　それでは次にマイクロビットのCPUの温度を液晶モジュールで表示してみましょう。液晶モジュールで温度などの数値を表示する場合には「Show number」ブロックを使います。このブロックにX,Y座標とカラー、そして表示する数値を指定します。この数値の部分に「温度」のブロックを入れます。
　「Send display data」ブロックで温度を液晶モジュールに表示します。問題はこの後です。一定時間後にふたたび温度を表示すると、すでにある数値の上に重ね書きされてしまいます。このため、表示されている内容を消去しなければいけません。液晶モジュールで使えるブロックを見ると「Filling Color (0)」という全画面を指定した色で塗り潰すのがあります。しかし、これを使ってはいけません。というのも、冒頭に書いたようにこの液晶モジュールは文字とグラフィックの同時処理ができません。このため、「Filling Color (0)」ブロックを使うと正常に処理されません。そこで、画面とキャッシュを消去する「Clear screen and cache」ブロックを使うことになります。 　実際のブロックは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

LCD1IN8.LCD_Init()
LCD1IN8.LCD_Clear()
basic.forever(function () {
    LCD1IN8.DisNumber(
    70,
    50,
    input.temperature(),
    LCD1IN8.Get_Color(LCD_COLOR.BLACK)
    )
    LCD1IN8.LCD_Display()
    basic.pause(2000)
    LCD1IN8.LCD_Clear()
})

　このプログラムをマイクロビットに転送して実行すると2秒ごとにCPUの温度が液晶画面に表示されます。

　温度のように表示間隔が長い場合はこれでも使えますが、もう少しリアルタイム性を要求されると処理速度に問題が出てきます。そこで、全画面の消去とキャッシュのクリアをせずに、表示した温度と同じ値を背景色と同じ色で表示することにします。この方法でも文字は消えたことになります。この方が少しだけ高速に処理できます。 　実際のブロックは以下のようになります。

　JavaScriptコードの場合は以下のようになります。

let temp = 0
LCD1IN8.LCD_Init()
LCD1IN8.LCD_Clear()
basic.forever(function () {
    temp = input.temperature()
    LCD1IN8.DisNumber(
    70,
    50,
    temp,
    LCD1IN8.Get_Color(LCD_COLOR.BLACK)
    )
    LCD1IN8.LCD_Display()
    basic.pause(2000)
    LCD1IN8.DisNumber(
    70,
    50,
    temp,
    LCD1IN8.Get_Color(LCD_COLOR.WHITE)
    )
})

　このプログラムをマイクロビットに転送して実行すると先ほどのプログラムと同じように温度が表示されます。表示間隔を1秒に変更してやってみると少し高速になっているのがわかります。

3軸の加速度を表示する

　それでは最後にXYZの3軸の加速度を液晶画面に表示してみましょう。同時に加速度を確認できるのは便利です。
少しでも処理を速くするために一度表示した加速度の値を背景色で上書きして消すことにします。これで1秒ほどの間隔で加速度を表示できます。
　XYZの3軸の値を表示し消すとなると同じようなブロックが続いてしまいます。そこで、ここでは関数を作成し、その中で3軸の加速度を表示するようにします。なお、ブロックエディタでは関数にはパラメーターを渡すことができないので、すべてグローバル変数でやりとりすることになります。そこで、変数名と役割を以下のようにしてあります。

変数名 内容
X X方向の加速度
Y Y方向の加速度
Z Z方向の加速度
color 文字の描画色

　関数は以下の手順で作成します。まず、高度なブロック内にある「関数」の項目をクリックします。

「関数を作成する...」ボタンをクリックします。

　作成する関数の名前を入力します。

　画面に関数ブロックが表示されます。

　関数のブロックを以下のように組み上げます。

　作成した関数を使う場合は「関数」の項目をクリックします。すると図のように「関数を呼び出す[disp]」といったブロックが表示されます。使いたい場所にこのブロックを配置します。

　あとは加速度を変数に入れて関数を呼び出せばできあがりです。図のようにブロックを組み上げます。

　JavaScriptコードの場合は以下のようになります。

let Z = 0
let color = 0
let Y = 0
let X = 0
function disp() {
    LCD1IN8.DisNumber(
    70,
    40,
    X,
    color
    )
    LCD1IN8.DisNumber(
    70,
    60,
    Y,
    color
    )
    LCD1IN8.DisNumber(
    70,
    80,
    Z,
    color
    )
}
LCD1IN8.LCD_Init()
LCD1IN8.LCD_Clear()
basic.forever(function () {
    X = input.acceleration(Dimension.X)
    Y = input.acceleration(Dimension.Y)
    Z = input.acceleration(Dimension.Z)
    color = LCD1IN8.Get_Color(LCD_COLOR.BLACK)
    disp()
    LCD1IN8.LCD_Display()
    basic.pause(1000)
    color = LCD1IN8.Get_Color(LCD_COLOR.WHITE)
    disp()
})

　このプログラムをマイクロビットに転送して実行するとX,Y,Zの加速度が液晶画面に表示されます。

　次回はグラフィックの描画を行ってみましょう。

著者 古籏一浩
プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム（mz-700版 SPACE HARRIER）の話などを書いたりしています。
著者サイト：http://www.openspc2.org/