ラズパイで取得した温度をWordPress amChartsで簡単かつ綺麗にグラフ表示(アクアポニックス)

Toshio Kuga/ 5月 13, 2016/ アクアポニックス/ 0 comments

どーも、アクアポニックス水槽に早くメダカを投入したいとウズウズしております
わたくし、くがとしおです!

今回は、自宅のアクアポニックス環境の温度・湿度・気圧を取得して
グラフで見られるようにしました。

 

どうでしょう、中々かっこよく仕上がりましたね。

今回作成したグラフは、アクアポニックスの水槽の様子を確認できるページに追加しました。

[nlink url=”http://g-action.gack2u.com/aquaponics-chop2-fish-tank/”]

 

今回の作業を、ざっとまとめるとこんな感じです。

・ラズベリーパイからBME280で温度・湿度・気圧を定期的に取得します。
・取得したセンサー値をmBaaSクラウドサーバーにNode.jsで送信します。
・mBaaSに格納されているセンサー値をWordpress上から取得後、
・amChartsでグラフ表示したいと思います。

 

スポンサードリンク

 

その前に・・・

知っておきたい知識を紹介しておきます。

mBaaS

mBaaS(mobile backend as a Service)とは、スマートフォンアプリでよく利用される
汎用的な機能をクラウドから提供するサービスです。

クラウド上に用意された機能をAPIで呼び出すだけで利用できるので、サーバー開発・運用不要で
よりリッチなバックエンド機能をアプリに実装することができ、工数削減によるコストカット
スピードアップに貢献します。

“mBaaSとは”. ニフティクラウド mobile backend

 

Node.js

サーバーサイドのJavaScript。
非同期、シングルスレッドで動作し、ノンブロッキングI/Oで多くの要求を処理することができます。

 

amCharts

WordPressのプラグインにもなっており、Javascriptで簡単に綺麗なグラフが書けます。

amCharts

 

使用するもの

今回、使用したものはこちらです。

温度・湿度・気圧センサー

これ1つで温度・湿度・気圧を取得できます。
I2Cで簡単に取得できるPythonスクリプトが提供されていますので、便利です。

 

 

ラズベリーパイ2

ラズベリーパイ1/3でも動きます、多分。。。

 

 

ニフティクラウド mBaaSの登録

今回、使用するニフティクラウドのmBaaSへ登録します。

アプリを作成して、アプリケーションキーとクライアントキーを取得します。
詳細はこちらを参考にしてください。

 

BME280のセットアップ

温度センサーBME280のセットアップは、こちらのサイトを参考にして、進めました。

Raspberry Pi 2で温湿度・気圧センサのBME280をPythonから使う

 

ラズベリーパイ側の準備

Node.jsのインストール

Node.jsは、バージョンアップが激しくバージョンによって動作しないこともあるため
バージョンを管理できるnvm(Node Version Manager)をインストールしておきます。

 

nvmが使用できるようにパスを通しておきます。
毎回起動時にパスを通さなくて済むように、bash_profileに記載しておきます。

 

以下は、bash_profileの内容です。
sshで接続時にロードされることを確認できます。

Last login: Wed May 11 21:18:40 2016 from 192.168.2.103
[.bash_profile] loaded!!

 

nvmでNode.jsをインストールします。

 

ncmbパッケージのインストール

mBaaSで提供しているSDKを利用するために、ラズベリーパイにmBaaSのSDKをインストールします。
npm(Node.js package manager)をインストールして、ncmbパッケージをインストールします。

 

プログラムの作成

センサー値を取得するNode.jsのプログラムを作成します。
取得したアプリケーションキーとクライアントキーを使用します。

 

BME280センサー取得プログラムの修正

取得したBME280_sample.pyを修正して、Node.jsプログラムを呼ぶようにします。
readDataを修正し、bme280.pyという名前で保存しました。

 

プログラムの実行

センサー値取得プログラムを実行してみます。

 

sudo で実行しなくても、I2Cを制御できるようにi2cグループに追加します。

 

定期的に実行するために、cronに登録しておきます。
cron設定については、クーロン(cron)をさわってみるおを参考にしました。

 

正常に実行されている場合、クラウドのデータストアに登録されていきます。
登録されない場合は、cronに登録したログを参照して原因を特定してください。

スクリーンショット 2016-05-12 18.19.41

 

 

WordPressの準備

プラグインのインストール

「amCharts: Charts and Maps」プラグインをインストールし、有効化します。

プラグインをインストールすると「Charts&Maps」が追加されます。
グラフを新規に作成します。

 

プラグイン HTMLの追記

プラグインのHTML欄を以下の様に記載します。

 

プラグイン Resourceの追記

プラグインのResourceを以下の様に追加します。

 

プラグイン Javascriptの追記

プラグインのJavascript欄を以下の様に記載します。

 

記事内に追加

記事内では、以下の様にショートコードを追加することでグラフを表示させることができます。

 

上手く動作しない場合は、Chrome Developer Toolsを使いました。
Windowsの場合、ChromeでF12押したら表示されますので、コンソールでデバッグしました。

 

「くがとしお」的 まとめ

今回は、IoTっぽく温度を取得してグラフ化してみました。
amCharts等のライブラリを活用すれば、簡単に綺麗なグラフが作成できるので、便利ですね。
アニメーションとか重たければ、もしかしたら外すかもしれませんが。。。

今回はNode.jsを使用しましたが、IoTデバイスが電池で動作するような場合は、
クラウドへはMQTTで送信した方がいいかもしれませんね。

夏にベランダがどれぐらいの温度になるのかは分かりませんが、
温度が指定した値を超過した場合にファンを回すようなモノとモノの自動制御も将来的には作成したいですね。

ハイドロボールの到着が遅れているため、いまだにアクアポニックスに野菜と魚を投入できておりませんが
試運転している限りでは、いい感じに動作してそうです。

 

では!(^^)/

 

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)