クリエイター手抜きプロジェクト[572]IoT IchigoLatte編 データをグラフで表示する
── 古籏一浩 ──

投稿:  著者:



今回は、計測したデータをグラフとして表示します。しかし、IchigoLatteはグラフィック機能がありませんので、文字を使ってデータをグラフとして表示します。

まず、光(照度)センサーの値の範囲は0~1023です。これを画面の縦幅である24行に収まるようにします。ただ、最下段の行に文字を表示してしまうと、画面が上にずれてしまいます。(スクロールしてしまいます)

そこで20行以内に収まるように調整します。1024÷20=51.2ですが、51で除算することにします。そもそもIchigoLatteは小数点の計算ができませんし、今回はそこまで精度を要求しないからです。

グラフを表示するといっても、形状は様々です。棒グラフ、折れ線グラフ、積み上げグラフ、円グラフなどがあります。今回の場合は、縦棒グラフで明るさを表示することにします。





グラフはリアルタイムに表示され、右から左に移動するようにします。このような処理は面倒な感じがしますが、IchigoLatteでは簡単にできます。というのも、画面を任意の方向にスクロールする機能があるためです。

まず、棒ではなく点でセンサーの値を表示してみましょう。センサーの値を読み出し、50で除算した後、画面の右端に■を表示します。その後、scroll()を使って画面を左にずらします。あとは、この繰り返しです。実際のプログラムは以下のようになります。

cls();
while(1){
var a=ana(2)/50;
lc(31,a);
log(chr(0x8f));
scroll(3);
sleep(100);
}

このままでは縦棒グラフになりません。今度は棒グラフになるように、プログラムを修正します。棒グラフは■を座標を変えていき、Y座標が20になるまで縦に表示するだけです。

cls();
while(1){
var a=ana(2)/50;
while(a<20){
lc(31,a);
log(chr(0x8f));
a=a+1;
}
scroll(3);
sleep(100);
}

グラフ表示は面倒な感じがしますが、IchigoLatte単体で処理するだけなら簡単に実現できます。

リアルタイムにデータを表示するだけでなく、EEPROMに保存したデータをグラフとして表示することもできます。EEPROMから読み出したデータを、棒グラフとして表示すればできあがりです。

以下のプログラムは、キーを押すとEEPROMからデータをひとつ読み出して、グラフとして表示します。


function read(adrs){
var n, d=0x50|(((adrs>>16)&1)<<2);
i2cw(d,(adrs&0xff00)>>8,adrs&255);
i2cr(d,n);
return n;
}
cls();
var adrs=0;
while(adrs<256){
var low=read(adrs);
var high=read(adrs+1);
var n=high*256+low;
var a=n/50;
while(a<20){
lc(31,a);
log(chr(0x8f));
a=a+1;
}
scroll(3);
adrs=adrs+2;
while(inkey()==0);
}

キーを押さなくても表示するようにしたい場合は、「while(inkey()==0);」の行を削除してください。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/


・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram


・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936

[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/


・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591

https://www.amazon.co.jp/dp/4844397605


・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP

http://digiconcart.com/dccartstore/cart/info/2561/218591


・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/


・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/


・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/


・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/


・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/