カテゴリー別記事一覧

マイコン

BeagleBone Blackで温度をグラフィカルに表示してみよう

みなさん、こんにちは。前々回からずっとBBBとGroveモジュールを用いた温度計を作っていますが、今のままでは温度をただ表示しているだけ……こんなの全然イケてないですよね。日々白黒画面でバイナリやアセンブラとにらめっこしたり、はんだの煙を吸っている私にとって、Webの世界というのは、もっと……こう……華やかでイケイケなイメージが！憧れがあるんです！折角Webと連携してものづくりを行っているので、できることなら温度表示だってイケイケにしてみたいですよね！

今回は温度表示をイケイケにすべく、Google Chartを使って温度を動的に、グラフィカルに表示してみたいとおもいます。前々回から引き続き、普段Webを触らない私のような人にとってはいろいろ初体験なことが多いですが、頑張って行きましょう！

温度を動的に表示しよう

まずは温度を動的に取得して表示するように変更しましょう。

クライアントサイドの修正
最初にクライアントサイド(index.html)のJavaScriptに以下の文を追加します

javascript var reload = function(){ // 更新希望を送信 socket.emit(‘reload’); } // reload関数を1秒毎に実行 setInterval(reload, 1000);

前回はサーバーサイドからsocket.emitしてデータを送るだけでしたが、今度は逆にクライアントサイドからもsocket.emitでデータを送ります。このreload関数を１秒毎に呼び出すことで、サーバー側に通知を送ることができるようになります。

サーバーサイドの修正
次にサーバーサイド(app.js)のconnection以下に次の文を追加します

javascript socket.on(‘reload’, function(){ t = getTemperature(); socket.emit(‘nowTemp’, { temp: t }); });

このコードは先ほどクライアントサイドで追加したreload通知をキャッチして、再取得した温度を返します。後はクライアントサイド側のコードがnowTemp通知を受け取って、温度を更新します。

これまでの変更を加えたコードをgistにアップしたので、以下のURLを参考に修正してください。

https://gist.github.com/jitomesky/a5721950a52cb5e6b4b3/85084e14453ed1840475ae6d15ad7887ce9c7853

これで動的な温度表示が可能となりました。

グラフィカルに表示してみる

温度をグラフィカルに表示するためには、Google Chartsを使います。

Google Charts APIとは？
Google Charts APIとは、かの有名なGoogle社が無料で提供している、グラフ作成サービスです。これを使えば、データを追加するだけで簡単に折れ線や円など、様々なグラフを作ることができます。

今回はその中の「Gauge」を用いて、よくあるアナログ温度計のようなものをつくろうと思います。

Gaugeのサンプルを動かしてみる
実際にコードに組み込む前に、以下のURLで紹介されているサンプルを動かして試してみます。

https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

このサンプルはjsfiddleというサービスを利用して、簡単に動作を確認することができます。

http://jsfiddle.net/api/post/library/pure/

うまく行けば以下の様な、パラメータを表示する画面ができるはずです。

コードをいじって動作確認してみる
サンプルが動いたところで、このサンプルをちょっといじって、簡単に動作を確認して行きましょう。

まず最初に見つかるのは、以下の部分です。

javascript var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]);

サンプルの結果を見ればわかるように、この部分は表示するデータの種類を選択しています。今回表示するのは温度だけなので、この部分を以下のように書き換えてみましょう。

javascript var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Temp', 80], ]);

表示されるパラメータの数が1つになりましたね。

次は以下のコードを見て行きましょう。

javascript var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5};

この部分はどうやら、表示サイズや目盛りの値などを決めているようです。ここで設定できる項目は、以下のURLより調べることができます。

https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge#Configuration_Options

現在のままでは室温を表示するのに適していないので、温度の最大を40度、最小を-32度に設定しておきましょう。これならファーレンハイトさんの家でも安心して使えるはずです。ついでに表示サイズも小さくてわかりづらいので、2倍にしておきます。

javascript var options = { width: 800, height: 240, redFrom: 35, redTo: 40, yellowFrom:30, yellowTo: 35, majorTicks: ["-32","-20","-10","0","10","20","30","40"], minorTicks: 5, min: -32, max: 40 };

次の部分はいろいろ飛ばして、以下の部分です。

javascript setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000);

この部分ではどうやら温度の更新を行っているようで、data.setValueの第3引数に値を入れて、chart.drawを呼ぶと表示が更新されるみたいです。

コードに反映してみる
先ほど調べたことを元に、クライアントサイドコードにGaugeを使ったグラフィカルな温度計を実装しましょう。といっても、先ほどのサンプルにsocket.ioの処理を追加するだけでさほど難しいことはないので、完成したコード(index.html)をいかに示します。

これを保存して、http://192.168.7.2:5000/にアクセスすれば、以下の様な動的でグラフィカルな温度計が完成です！！！

おわりに

今回は温度センサーを動的でグラフィカルにしてイケイケにしてみましたが、いかがでしたか？

……はい、わかっています。このままではイケイケには程遠いですね。確かに温度計はイケイケになりましたが、周りが白背景ではイケてませんね。 Webの華やかでイケイケな感じを作るのは難しいです。

今回使用したGoogleChartsは、この他にも折れ線や円グラフなども簡単に作ることができます。なので例えば、温度センサーのデータを記録して折れ線で表示したり、人感センサーを追加して部屋への入退出回数を棒グラフで表示したりもできるのではないでしょうか。夢が広がりますね。

BBBのBoneScriptは電子工作とWebとの距離を非常に近くしてくれる素晴らしいプラグインなので、今後これを活用した面白い工作が出て来ないかなーと期待しています。この記事が少しでもそういう人たちのお力になれたのであれば幸いです。

作者

作者: 西永俊文
Twitter: tnishinaga
協力: マルツエレック株式会社

この記事はクリエイティブ・コモンズ表示 4.0 国際ライセンスの下に提供されています。

【BB-BLACK-RC】BeagleBone Black とは？
http://www.marutsu.co.jp/pc/i/238963/

BeagleBoneは組み込みコンピューター分野でのオープンソースの
教育と普及を目的とする非営利団体BeagleBoard.org Foundationがサポートする
シングルボードコンピューターです。

見た目やサイズは小規模MCUの評価基板と同様ですが、
実態は強力でLinuxが動く小型のパーソナルコンピューターです。

BeagleBone Blackは最新版でTI社製AM335x 1GHz ARM Cortex-A8をプロセッサとし
512MBのDDR3RAMや2GBのオンボードeMMCフラッシュストレージほか
数々のデバイスを備えています。

BeagleBone Blackはマルツオンラインでも好評発売中です。