ラズパイをサーバーにしてMySQLのデータからグラフを作りパソコンで表示している画像。データをラズパイ側から処理して最大値、最小値を表示

IoTってラズパイの登場で身近になりましたよねー(*´艸`*)
個人でも簡単にできるようになりました。

水耕栽培もラズパイでIoT化できます以前の記事でLEDの制御と水の循環を家のネットワークから管理できるようにしました(*´罒`*)ニヒヒ

今回は温度データを”見える化”したいと思います。植物の栽培にとって温度は大事ですもんね。

ラズパイへの導入方法からサンプルプログラムまで細かくご紹介しますよー
(ง°̀ロ°́)ง

どんなものを作ろう?




こんな感じでつくります!

これから作るもの。
  • 日中・日々の変化が見れるようにする。
  • パソコン・スマホから表示できる。お手軽さが重要です。
  • ラズパイだけで完結するものにする。外のサーバーへつなぐのは外部サービスに左右されちゃいます。。

温度データって今の温度じゃなくて変化が重要ですよね。
そのとき調べたい日中の変化だったり、1週間の変化だったり、月の変化だったり。。
ということで、Day(1日前からの変化)、Week(1週間の変化)、1ヶ月の変化(28日分の変化)のグラフを切り替えて表示できるようにしました。プルダウンメニューから変化させます。

完成するとこんな感じで表示されます

これから色々インストールしたり、コーディングしたりして機能を実装していきます。
でもその前にどんなものができるのか気になりますよね?

サンプル画面はこんな感じになります(〃’ω’)

ラズパイをサーバーにしてMySQLのデータからグラフを作りパソコンで表示している画像

1週間と1ヶ月の変化は、1日単位で表示させるのでmin/ave/maxを表示できるようにしました。
ラズパイをサーバーにしてMySQLのデータからグラフを作りパソコンで表示している画像。データをラズパイ側から処理して最大値、最小値を表示
※サンプル画像は古いデータがないので1週間分のデータは表示されていません。

グラフはJavaScript上でGoogle Chartsを使って表示させます。

グラフはJavaScript上でGoogle Chartsで表示させます。

いろんなチャートが無料で利用できちゃいます。

PHPでの表示も考えたのですが、今回は不採用にしちゃいました。

なんでPHPのグラフ表示機能は使わないの?
  • PHPはサーバーサイドなのでグラフの描画がサーバー側で完結してしまう。クライアント側での描画変更ができない。
  • PHPのグラフ描画ライブラリはあんまりおしゃれじゃない。。
    (個人の感想です)
  • PHPのグラフ描画ライブラリに比べてJavaScriptでは無料でおしゃれなものが多い。
    (個人の感想です)

データの保存にはMySQLを使います。

過去のデータを表示させようとするとデータベースにデータを保存させて置く必要があります。

データ処理には高速でデータ処理ができるリレーショナルデータベースが良いですよね。

今回は無料で使えるMySQLを使います。

温度センサーは秋月でDIP化しているHDC1000を使います。

温度センサーはなんでも良いと思います。今回は手元にあったHDC1000を使いました。
HDC1000をraspberry piとつないだ様子

HDC1000はI2Cでアクセスできるし、DIP化されているのでラズパイで簡単に制御できます。

水耕栽培だと水の温度も重要なはずなので今後は違うセンサーも足すかもしれません。

温度見える化のステップ

それでは実際に実装していきましょう(◍•ᴗ•◍)♡ ✧*。

いくつかのSpepに分けてみました。


温度見える化実装のステップ
  1. MySQLのインストール : まずはMySQLがどんなものか確認。
  2. 温度センサーからMySQLにデータ登録。
  3. サーバーの設定 : ラズパイをサーバーにします。
  4. グラフの描画 : 実際にグラフを描画しましょう。

Step 1 : MySQLのインストール

まずはMySQLをラズパイにインストールをしましょう。動作確認もデモしています。

Raspberry Piに MySQLを導入!

Step 2 : 温度センサーのデータをMySQLに登録しよう。

温度センサーHDC1000で取得した温度データをMYSQLに登録できるようにします。まずはラズパイからHDC1000のデータを取得できるようにして、そのあとMySQLに登録する方法をご紹介します。

まずはI2Cで制御できるようにラズパイを設定

ラズパイはデフォルトではI2Cを制御できないんです。まずはI2Cでアクセスできるようにしましょう。

Raspberry Piで温度と湿度を取得する!HDC1000用のプログラムつき!

温度センサーのデータをMySQLに登録できるようにする

次に温度センサーのデータをMySQLに登録します。C++で温度センサーのプログラムを実装し、コマンド実行のスケジュール管理ができるcrontabで定期的にプログラムを実行しましょう。

ラズパイでIoT 温度データを取得してMySQLに保存しよう。

Step 3 : サーバーの設定をしよう。Apache/PHPの準備

ラズパイをサーバーとして動かすためにはApacheをインストールする必要があります。

また、今回はラズパイのMySQLに登録されたデータのやりとりにPHPを使うのでPHPもインストールしましょう。

Apache/PHPの準備

Apache / PHPのインストール方法をご紹介します。

ラズパイにApacheサーバーを入れてPHPのプログラムを動かそう。

PHPからMySQLにアクセスするためのライブラリのインストール

PHPをインストールしただけではMySQLにアクセスするためのクラス”PDO”がインストールされていません。インストール方法をご紹介します。

PHPからMySQLにPDOクラスでアクセスするための準備。

Step 4 : JavaScriptからPHPを呼び出してMySQLのデータを表示する

今回はJavaScript上でGoogle Chartsを呼び出してグラフを描画します。グラフの元となるデータはPHP経由でMySQLから取得するのでその方法についてご紹介します。

まずはJavaScriptからPHPを呼んでみましょう。

JavaScriptからPHPを呼んで、そこからさらにMySQLのデータを取得して。。となると理解が追いつきにくいです。。。

ということでまずは実験的にJavaScriptからPHPを呼んで簡単なグラフを描画して見ましょう。MySQLは使いません。

JavaScriptからPHP経由でMySQLのデータを表示。JSON formatを使います。

JavaScriptからPHPに設定情報を渡すには?

先ほどの設定でJavaScriptからPHPを呼び出し、リスポンスを受け取ることができました。
でもPHPを呼び出すだけじゃなく設定値を渡したいですよね。

グラフに表示させるのを日・週間・月にするのか、温度を表示するのか湿度を表示するのか。。など。

ということでJavaScriptからPHPにどうやって設定を引き渡すかをご紹介します。

JavaScriptからPHPにクエリ情報を渡す方法は?ラズパイで試しました。

ついに完成!JavaScriptからPHP経由でMySQLのデータを表示!

全部の準備ができたのでこのステップで完成です。

パソコンやスマホから現在の温度を表示できますよー(◍•ᴗ•◍)♡ ✧*。

ラズパイでIoT MySQLの温度データを表示しよう

おわりに

ラズパイを使えば簡単に自宅でIoTを導入できることがデモできました。やり方は色々あると思うのでこの記事がお役に立てれば幸いです(◍•ᴗ•◍)♡ ✧*。

記事を読んでいただいてありがとうございます。この記事がいいなと思ったら下記のSNSボタンのクリックをお願いします。励みになります😁