ESP-WROOM-02を使ったWi-Fi機能付き温度ロガーを作る（3）

第三回：取得した温度などをSDカードに記録して、ウェブブラウザから見る

こんにちは、岸田です。本記事は、ESP-WROOM-02開発ボードを使った製作を紹介していく三回目の記事です。

第一回：ESP-WROOM-02を使ったWi-Fi機能付き温度ロガーを作る（1）：SPI通信とI2C通信を使う
 第二回：ESP-WROOM-02を使ったWi-Fi機能付き温度ロガーを作る（2）：NTPサーバーから時刻を取得する&インターネットブラウザ経由でSDカードの中をみる

さて、前回までの2回でほとんどの準備は終えました。各回の内容を簡単に紹介します。

●第一回

ESP-WROOM-02開発ボードでSPI通信を利用しmicroSDにアクセスする
ESP-WROOM-02開発ボードでI2C通信を利用しBME280 温度気温湿度センサにアクセスする

●第二回

ESP-WROOM-02開発ボードでNTPサーバーから時刻を取得する
ESP-WROOM-02開発ボードを使いウェブブラウザ経由でSDカードの中身を見る

以上の内容を組み合わせて、ウェブブラウザに温度データをグラフ表示するというのが目標でした。今回が最終回です。

■いままでのサンプルスケッチを組み合わせる

いままでの準備で使った4つのサンプルスケッチを組み合わせましょう。具体的な実装は完成したコードをGitHubでごらんください。

主な変更点は以下のとおりです。

各サンプルスケッチのクラス化（.cpp, .hの作成）
いくつかの関数の引数を変更
重複するアクセスポイントやSDカードの設定の削除
Arduino Time Libraryを使った記述の簡略化

内部の動作を簡単に説明します。

●指定されたタイミングになったら測定を開始する

指定された頻度であればNTPサーバーから時刻を取得する
- ここは第二回で紹介した内容をベースにしています
BME280から温度などを取得する
- ここは第一回で紹介した内容をベースにしています
取得された日時、温度をSDカードに記録する
- ここは第一回で紹介した内容をベースにしています

●ブラウザからアクセスが有った場合に所定の応答をする

ここは第二回で紹介した内容をベースにしています

記録する際は、「日時分,温度,気圧,湿度」という形式のCSV形式で記録しています。これは、最後のグラフ表示で扱いやすくするためです。

例えば、2/29 19:00分に気温25.56℃、湿度28.05%、気圧1011.34hPaが測定された場合、「2/29-19:00,25.56,1011.34,28.56」という一行がファイルに書き込まれます。ファイル名は年月で、例えば2016年2月なら「2016-02.csv」となるようにしています。

ここまでの手順が正しく行われている場合、ブラウザのアドレスバーに、ESP-WROOM-02のIPアドレス/ファイル名.csvと入力すると記録されたデータがダウンロードできる状態になりました。
ここまでくると、あとはブラウザでどう表示するかの問題となります。

■JavaScriptを使ってデータを可視化する

せっかく取得した温度データなのですから、グラフに表示したいと思います。ここで使おうと思うのがJavaScriptです。

JavaScrpitは、主にブラウザ上で実行されるスクリプト言語です。主な流れとしては、サーバー（今回はマイコン）はコードを転送するだけ、ブラウザはコードを解釈して実行するというものです。マイコン上でグラフの表示データを生成しなくていいので、あまり高度な処理を行わせたくないマイコンをサーバーにしている状況と相性がいいですね。

データの可視化にはD3.jsを利用しました。

電子工作そのものからは外れる上に説明も長くなってしまうので、これについてもGitHub上のコードを御覧ください。以下には結果だけ示します。

さて、ながい準備を終え、とうとうセンサーのデータをグラフとしてブラウザに表示することができるようになりました。JavaScriptを埋め込んだhtmlにアクセスすると、このように表示されます。URLは、http://(IPアドレス)/graph.htmにしてあります。

うまく表示されています。感激モノです。

最後は駆け足となってしまいましたが、ESP-WROOM-02を使ったWi-Fi機能付き温度ロガーの紹介はこれで終わろうと思います。

今回はJavaScriptを自前で用意してCSVを読み込んで…といった手順を踏みましたが、APIを用いてデータを送信するだけでグラフにしてくれるサービスもいくつかあります。複雑なことはちょっと…という方は、まずそういったサービスを利用してみるのも良いかもしれません。

電子工作といえば、机の上で完結してしまう印象がどうしてもあったように思いますが、Arduinoとして扱えるマイコン内蔵Wi-Fiモジュールが登場したことで一気に世界が広がった印象を受けます。皆さんも、ぜひ電子工作で触れる領域を広げてみてください。