Raspberry Piでセンシングした温度を、firebaseとchart.jsを使ってリアルタイムグラフにしてみる


少しの間仕事が落ち着きましたので、久しぶりにRaspberry Piで遊んでみようという事で、今更ですが、Raspberry Piでセンシングしたデータをリアルタイムでグラフ化する試みにチャレンジしました。

 

Raspberry Piを使った実験の準備

このお遊びで使った物

Raspberry Piで作る室温管理IoT/DIYキット

Raspberry Pi 3 Model B

Firebase

Chart.js

 

このお遊びで参考にさせて頂いた資料、サイト

Bitcoin のリアルタイムチャートを Chart.js で表示する

PHPでFirebaseを使ってみよう!

Firebaseで作る簡単リアルタイムウェブアプリケーション

Firebaseでリアルタイムチャットを構築する

 

今回のお遊びで完成した制作物(デモ)

どんな制作物が完成したか、下記のデモえご確認ください。なお、Raspberri Pi がお休みしている時は、グラフの描写がされません。その時は、お休み中という事で、またお越しください。

室温をセンシングしてリアルタイムでグラフ化するUI

 

Raspberry Piを使った実験の流れ

Raspberry Piでセンシングしたデータをどのように受け取るか

Iotswitchで販売しているキットとRaspberry Piをセットする事で、温度を測る事は比較的簡単にできました。

電子回路の配線は下記の様な感じです。

ただ、それはあくまでRaspberry Piの中での事なので、外部にアウトプットしてあげる必要があります。

出来る限り、リアルタイムで描写したいという事もあり、いろいろ調べた所、FirebaseというGoogle参加のBaas系のサービスが良いのではという結果になりました。

 

出来るだけjsを使わずPHPだけで実装できないか

リアルタイムでデータのやり取りとなると、node.jsを入れてという資料が多くありますが、私javascriptはあまり得意ではないので、PHPで出来ないかといろいろ探しておりましたら、ちょうど良いのがありました。

PHPでFirebaseを使ってみよう!

上記のサイト様の情報を参考に、iotswitchのキットのPHPファイルを改造

 

Firebaseのデータをリアルタイムで取得

Raspberry Piのデータを一端Firebaseのデータベースに保存するところまでは、Raspberry Piで行い、それを取得して表示するのは、クライアント側の記述になります。

下記のサイト様の内容を参考に、苦手なjavascriptで処理を記述しました。

Firebaseで作る簡単リアルタイムウェブアプリケーション

Firebaseでリアルタイムチャットを構築する

 

取得したデータをリアルタイムでグラフ化する

有名なグラフ描写ライブラリ「chart.js」とそのプラグインなどを使用して、ほぼリアルタイムで取得したセンシングしたデータをグラフに描写していく処理を実施します。

これも、javascriptで記述する形になります。こちらの処理の記述方法は、下記サイト様がとても参考kになりました。

Bitcoin のリアルタイムチャートを Chart.js で表示する

 

Raspberry Piを使った実験のまとめ

皆さん先人のお知恵があったため、何とかやりたい事が出来ました。とは言え、実際に取り組み始めてから、5時間はかかったと思います。

一番苦労したのは、chart.jsを使ったグラフリアルタイム描写の所でした。

また、firebaseの仕様にも慣れが必要で、データを取得する方法などを知るだけでも、いろいろな文献を読み漁りました。

今回は、javascriptでのコーディングが多かったので、予想以上に苦労しましたが、これからは、javascriptは避けて通れないので、そろそろ本腰を入れて、勉強しようかなっと思った1日でした。

 

以上「Raspberry Piでセンシングした温度を、firebaseとchart.jsを使ってリアルタイムグラフにしてみる」をご紹介しました。