少しの間仕事が落ち着きましたので、久しぶりにRaspberry Piで遊んでみようという事で、今更ですが、Raspberry Piでセンシングしたデータをリアルタイムでグラフ化する試みにチャレンジしました。
Raspberry Piを使った実験の準備
このお遊びで使った物
このお遊びで参考にさせて頂いた資料、サイト
Bitcoin のリアルタイムチャートを Chart.js で表示する
Firebaseで作る簡単リアルタイムウェブアプリケーション
今回のお遊びで完成した制作物（デモ）
どんな制作物が完成したか、下記のデモえご確認ください。なお、Raspberri Pi がお休みしている時は、グラフの描写がされません。その時は、お休み中という事で、またお越しください。
Raspberry Piを使った実験の流れ
Raspberry Piでセンシングしたデータをどのように受け取るか
Iotswitchで販売しているキットとRaspberry Piをセットする事で、温度を測る事は比較的簡単にできました。
電子回路の配線は下記の様な感じです。
ただ、それはあくまでRaspberry Piの中での事なので、外部にアウトプットしてあげる必要があります。
出来る限り、リアルタイムで描写したいという事もあり、いろいろ調べた所、FirebaseというGoogle参加のBaas系のサービスが良いのではという結果になりました。
出来るだけjsを使わずPHPだけで実装できないか
リアルタイムでデータのやり取りとなると、node.jsを入れてという資料が多くありますが、私javascriptはあまり得意ではないので、PHPで出来ないかといろいろ探しておりましたら、ちょうど良いのがありました。
上記のサイト様の情報を参考に、iotswitchのキットのPHPファイルを改造
Firebaseのデータをリアルタイムで取得
Raspberry Piのデータを一端Firebaseのデータベースに保存するところまでは、Raspberry Piで行い、それを取得して表示するのは、クライアント側の記述になります。
下記のサイト様の内容を参考に、苦手なjavascriptで処理を記述しました。
Firebaseで作る簡単リアルタイムウェブアプリケーション
取得したデータをリアルタイムでグラフ化する
有名なグラフ描写ライブラリ「chart.js」とそのプラグインなどを使用して、ほぼリアルタイムで取得したセンシングしたデータをグラフに描写していく処理を実施します。
これも、javascriptで記述する形になります。こちらの処理の記述方法は、下記サイト様がとても参考kになりました。
Bitcoin のリアルタイムチャートを Chart.js で表示する
Raspberry Piを使った実験のまとめ
皆さん先人のお知恵があったため、何とかやりたい事が出来ました。とは言え、実際に取り組み始めてから、5時間はかかったと思います。
一番苦労したのは、chart.jsを使ったグラフリアルタイム描写の所でした。
また、firebaseの仕様にも慣れが必要で、データを取得する方法などを知るだけでも、いろいろな文献を読み漁りました。
今回は、javascriptでのコーディングが多かったので、予想以上に苦労しましたが、これからは、javascriptは避けて通れないので、そろそろ本腰を入れて、勉強しようかなっと思った１日でした。
以上「Raspberry Piでセンシングした温度を、firebaseとchart.jsを使ってリアルタイムグラフにしてみる」をご紹介しました。