創って学ぼうプログラミング(28) IchigoLatte/IchigoCakeとつなげてデータをやりとりしよう

IchigoLatteとは？

　今回はマイクロビットのシリアル通信機能を使ってIchigoLatte（イチゴラテ）/IchigoCake（イチゴケーキ）とデータのやりとりを行ってみます。
IchigoLatteもIchigoJam同様にこども向けの小型コンピューターですが、1ランク上の位置づけといった感じになっています。IchigoLatteはBASICではなくUNIXライクなシェルとJavaScriptベースのスクリプト(MINI Script)を使ってプログラムを作成することができます。また、スクリーンエディタも備えています。これ1台で簡易的ながらUNIXシェルからJavaScriptまで学ぶことができます。
　IchigoLatteはIchigoJamと同じ基板で動作し、IchigoJamで動作するセンサーなどはそのまま利用できます。IchigoLatteはIchigoJamより高速に動作しI2C制御命令なども用意されていますので、より複雑な処理も可能です。EEPROMをつなげれば128KB+2KB=130KBまでのプログラムを作成することができます。

・IchigoLatte
http://ichigolatte.shizentai.jp/

　IchigoLatteは標準ではグラフィックを描画することができません。IchigoJam用のマルチメディアボードであるPanCakeを取り付ければグラフィック＆サウンドを扱うことができます。また、IchigoCakeを使えばより強化されたグラフィック処理を行うことができます。IchigoCakeはIchigoLatteとPanCakeを合体させただけでなくメモリなども大幅に増えています。
なお、今年新たにBASICで動くIchigoCakeが発売されました。現在ではIchigoCakeはJavaScript版とBASIC版があります。今回使用するのはJavaScript版です。

・IchigoCake
http://ichigocake.shizentai.jp/

　また、昔懐かしいナムコのゲームキャラクタを使ったゲームも作成することができます。

・CakeRes × レトロゲームズ
http://cakeres.shizentai.jp/

マイクロビットとIchigoLatteをつなげる

　まず、マイクロビットとIchigoLatteをつなぎます。マイクロビットとIchigoLatteはシリアル通信(UART)を使ってデータの送受信を行います。データの送受信を行うためには3本のケーブルが必要です。ワニ口クリップやジャンパーワイヤーなどを使って以下のようにつなぎます。IchigoLatteには複数のGND端子がありますが、どこにつないでも構いません。

【マイクロビット側】	【IchigoLatte側】
P0端子	RXD
P1端子	TXD
GND端子	GND

これで準備完了です。IchigoLatteの電源は最初に入れておきます。

次にマイクロビット側のプログラムを作成します。ここでは「明るさ」を取得してIchigoJamに送信してみましょう。シリアル通信のカテゴリは高度なブロック内に用意されています。

使用するのは「シリアル通信　送信先を変更する」「シリアル通信　1行書き出す」ブロックです。通信速度などの設定はマイクロビット側で用意してあるものをそのまま使います。また、IchigoLatte側でも同じ設定になっているため、最初だけのブロック内に「シリアル通信　送信先を変更する」ブロックを入れます。次に明るさを送信するブロックを図のように組み立てます。

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

serial.redirect(
SerialPin.P0,
SerialPin.P1,
BaudRate.BaudRate115200
)
basic.forever(function () {
    serial.writeLine("" + input.lightLevel())
})

　マイクロビットを動作させる前にIchigoLatteのシェル（電源投入時の状態）で以下のように入力します（lash>部分はプロンプトです）

lash>cat uart

　これでシリアル通信(UART)からのデータを受信し標準出力に流します。IchigoLatteの標準出力はデフォルトでは画面になっています。つまり、cat uartとすればシリアル通信データが、そのまま画面に表示されることになります。
　コマンドを入力したら　プログラムをダウンロードしマイクロビットに転送します。すると画面に明るさが表示されていきます。

　画面の右側に網■が表示されています。これは改行コードの違いによるものです。IchigoLatteの改行コードはUNIXと同じLF (10) です。そこで、マイクロビット側のプログラムを変更し一行単位ではなく、明るさの後に改行コードを送るように変更します。　ブロックは以下のように組み立てます。

書き出す文字列で\nを指定しています。これが、IchigoLatteでの改行コードになります。この\nはブロックエディタでは入力できないため、JavaScriptコードエディタに切り替えて入力します。

serial.redirect(
SerialPin.P0,
SerialPin.P1,
BaudRate.BaudRate115200
)
basic.forever(function () {
    serial.writeNumber(input.lightLevel())
    serial.writeString("" + "\n")
})

　プログラムをダウンロードしマイクロビットに転送して動作を確認します。IchigoLatteではシェルでcat uartと入力します。すると、マイクロビットから送られた明るさの数値がIchigoLatteの画面に表示されます。

　なお、受信データを保存したい場合はIchigoLatteのシェルでcat uart>.と入力します。はプログラム領域を示します。これにより受信データはプログラム領域に保存されます。ただし、2KBを超えるとIchigoLatteが強制リセットされ再起動してしまいます。

IchigoLatte側でプログラムを使って受信

　今度はIchigoLatteでプログラムを使ってデータを受信してみます。IchigoLatteのMINI Script (JavaScript) のリファレンスは以下のURLに用意されています。

http://ichigolatte.shizentai.jp/

　IchigoLatteでプログラムを入力するには以下のように入力しエディタを起動します。

lash>vi

　エディタはスクリーンエディタです。カーソルキーで移動しescキーでプログラムを保存しシェルに戻ります。保存せずにシェルに戻るにはctrlキーを押したままDキーを押します。　IchigoLatteのMINI ScriptはJavaScriptベースで文法などはほぼ同じです。異なるのは使用できるメソッドとオブジェクト、リテラルなどです。特にtrue、falseは使えないので1と0で代用します。var宣言はletと同じように機能します。また、行末のセミコロン(;)は必須となっています。また、プログラムは最大2KBまでです。

　シリアル通信データを受信するにはuart()メソッドを使います。データが受信されていない場合は-1を返します。while()でデータが来るまで待ちます。データが来たらlog()メソッドを使ってデータを画面に表示します。データは文字コードでくるのでchr()を使って文字に変換し表示します。
　実際のプログラムは以下のようになります。

while(1){
 var d=-1;
 while(d==-1){
  d=uart();
 }
 log(chr(d));
}

　上記のプログラムを入力したらIchigoLatteのシェルでms .と入力します。msと.の間には空白を入れてください。空白を入れないとインタラクティブモードになってしまいます。インタラクティブモードになってしまった場合はescキーを押すと元の状態に戻ります。

lash>ms .

コマンドを入力すると画面にマイクロビットから送られた明るさの数値が表示されていきます。

　このプログラムは単純に受信したデータを表示しているだけなので、データを加工して処理する場合は使い物になりません。そこで今度はマイクロビットから送られてきたデータを数値として処理することにします。
　まず、数値を入れる変数nに0を入れておきます。送られてきた文字が改行コード以外の場合、変数の値を10倍してから送られてきたデータを足します。0の文字コードは48なので送られてきたデータから48を引き算してから足します。改行コードを受信したらlog()を使って出力します。

var n=0;
while(1){
 var d=-1;
 while(d==-1){
  d=uart();
 }
 if(d==10){
  log(n,"\n");
  n=0;
 }else{
  n=n*10+(d-48);
 }
}

プログラムを入力したらIchigoLatteのシェルでms .と入力します。すると図のようにマイクロビットから送られてきた明るさの数値が表示されていきます。

本当に数値データとして処理されているか確認するには以下のプログラムをIchigoLatteで実行してみてください。送られてきた明るさのデータと、それを2で割った値が表示されます。

var n=0;
while(1){
 var d=-1;
 while(d==-1){
  d=uart();
 }
 if(d==10){
  log(n,":",n/2,"\n");
  n=0;
 }else{
  n=n*10+(d-48);
 }
}

　受信データを数値として扱えればデータ処理をしてグラフとして表示することもできます。IchigoLatteは標準ではグラフィック機能がありませんが、マルチメディアボードを装着すると80×45、16色、4重和音を利用することができます。また、IchigoCakeを使えば標準で80×45、16色、4重和音を利用できます。
　ここではテキスト画面だけで処理してみます。　IchigoLatteのテキスト画面は32文字×24行です。マイクロビットから送られてくる明るさのデータは0〜255です。この値を16で割ればIchigoLatteの画面内に収まります。あとは、明るさにあわせて文字（＊）の表示Y座標を調整します。文字をどこに表示するかはlc()メソッドで指定します。
　明るさを示す文字（＊）を表示したら画面全体を左側にスクロール（移動）させます（SCROLL 3）。

　以下のプログラムをIchigoLatteで入力し実行（ms .）するとマイクロビットから送られた明るさをグラフとして表示します。

var n=0;
while(1){
 var d=-1;
 while(d==-1){
  d=uart();
 }
 if(d==10){
  n=n/16;
  lc(31,17-n);
  log("*");
  scroll(3);
  n=0;
 }else{
  n=n*10+(d-48);
 }
}

IchigoLatteからのデータをマイクロビットで受信する

　それでは次にIchigoLatteからマイクロビットにデータを送信してみます。マイクロビットでは送信された文字をLEDに表示します。まず、先にマイクロビットのプログラムを用意します。このプログラムは前回IchigoJamからマイクロビットにデータを送信する際に使用したものです。
　プログラムは図のように作成し、マイクロビットに転送しておきます。

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

serial.redirect(
SerialPin.P0,
SerialPin.P1,
BaudRate.BaudRate115200
)
basic.forever(function () {
    basic.showString(serial.readString())
})

IchigoLatteはプログラムを作成しなくてもシェルから文字を送る個ができます。これはechoコマンドを使います。echoの後にスペースを1つ入れてからマイクロビットに送る文字を指定します。なお、一度に20文字程度までしか送信できません。
　以下のようにシェルから入力するとABCという文字がマイクロビットに表示されます。（lash>はプロンプトです）

lash>echo ABC>uart

uartのキーワードはシリアル通信(UART)を示しています。>はUNIXのシェルと同様リダイレクトを示しています。これは左側にあるデータを右側に流す処理を行ってくれます。つまりABCの文字をUARTにそのまま出力することになります。

コマンドを入力するとABCの文字がマイクロビットのLEDに表示されます。

IchigoCakeのグラフィック機能を使って表示する

　それでは最後にIchigoCakeを使ってグラフィックで明るさを表現してみます。ここでは明るさに応じて円のサイズを変化させます。
　IchigoCakeはIchigoLatteの上位互換なのでシェルやエディタは同じように使うことができますし、コピー＆ペーストや複数のプログラム保存なども可能です。

　IchigoCakeとマイクロビットは写真のように接続します。基本的にIchigoLatteと同じRXD, TXD, GNDにつなぎます。

　IchigoCakeでグラフィックを扱うにはPanCakeオブジェクトを利用します。まず、以下のようにしてPanCakeオブジェクトを作成します。

var pc=new PanCake();

次にグラフィックをリセットします。これはreset()メソッドを使います。以下のようにしてリセットします。

pc.reset();

画面を消去した後、円を描きます。画面を消去するメソッドはclear()です。パラメーターには背景色を指定します。黒色の場合は0になります。

pc.clear(0);

円を描くにはcircle()メソッドを使います。パラメーターは以下のようになっています。X座標の範囲は0〜79，Y座標の範囲は0〜44です。色は16色なので0〜15までの数値になります。

circle(X座標, Y座標, 半径, 色);

半径を色の明るさに対応させれば、円のサイズが変化することになります。 IchigoCakeのプログラムは以下のようになります。

var pc=new PanCake();
pc.reset();
var n=0;
while(1){
 var d=-1;
 while(d==-1){
  d=uart();
 }
 if(d==10){
  n=n/8;
  pc.clear(0);
  pc.circle(40,22,n,1);
  n=0;
 }else{
  n=n*10+(d-48);
 }
}

プログラムを実行（シェルからms .と入力）すると明るさに応じて円の大きさが変化します。

IchigoCakeには他にもグラフィック機能やスプライト機能がありますので、興味のある人は使ってみてください。

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