Ambientというiotデータ可視化サービスを使って、ESP32＋BME280から取得した温度・湿度・気圧をWeb上で可視化してみます。その方法を解説です。
概要
データをWEB上で簡単に可視化（表示やグラフ化）してくれるAmbientという無料の Iot クラウドサービスがあり、今回はそのAmbientを利用して、WEB上で温度、湿度、気圧を可視化してみます。
マイコン（Arduino、RaspberryPIやESP32など）から情報をサーバー（Ambient）へ送信。可視化はAmbient側で自動で行ってもらいます。今回は、情報を送信して可視化する方法をメインに説明です。
Ambientの準備
まずはAmbient（サーバー）側の準備からです。
ユーザー登録
上記のサイトからユーザー登録します。
▲サイト右上のボタンからユーザー登録して、ログインします。
チャンネルを作成
次に送信データを格納するチャンネルという入れ物を作ります。
▲「チャンネルを作る」ボタンをクリックするとチャンネルが新しく作られるので、そのまま右にあるプルダウンから「設定変更」をクリックします。ここで表示されている「チャンネルID」と「ライトキー」はESP32（Arduino）のソースコードに使用するので控えておきます。
チャンネル設定の画面で、「チャンネル名」「説明」「データー１」～「データー３」に任意で記入します。今回は、気温、気圧、湿度の3データを可視化するのでその名前をそのまま記載してます。最後に下段にある「チャンネル属性を設定する」をクリックして完了します。
ボード・チャートの作成
次にボード・チャートを作成していきます。チャンネル一覧から作成したチャンネルをクリックしてチャンネルボードを開きます。
▲画面上にある歯車アイコンをクリックしてボードの設定を行います。
▲ボード名を任意で設定。公開ボードにチェックを入れておくと誰でもデータがモニターできるようになります。特に問題ない場合はチェック入れておくと外出先とかでID、パスなしでもモニター出るので少し便利です。画面下にある「ボード属性を設定する」をクリックすると元の画面に戻ります。
▲次にチャートを配置していきます。今この時点では何も配置されていないので画面は真っ白かと思います。上にある「＋アイコン」をクリックしてチャートを作成・配置していきます。このアイコンをクリックすると「チャートの作成中」というウィンドウが現れるのでその中にある「チャンネル/データ作成」というところをクリックします。
▲表示された設定画面で、「チャート名」任意名前、「チャンネル」先ほど作成したチャンネルを選択、「チャート種類」はメーターを選択しておきます。表示するデータは気温を選択。最大/最小、赤ゾーンを上図のような数字を入力して、最後に「設定する」ボタンをクリックします。
▲こういったメーター型のチャートが配置されます。同様に、気圧、湿度のメーターチャートを配置します。チャートにはメーター以外にも棒グラフや線グラフなど時系列で可視化できるものや他にいろいろ準備されています。サイトのチュートリアルページにも細かく説明されているので慣れたら試してみるといいと思います。
これでambient側の設定は完了です。この状態では何もデータが送信されていないので値が「0」となっています。続いてESP32（センサー側）からデータを送信するソースコードを準備します。
ESP32からデータを送信する
ESP32の使い方、BME280から温度、湿度、気圧を取得する方法は下記リンク先を参照。ここではAmbientへデータを送信するソース部分を中心に説明します。
▼ESP32をArduinoIDEへ使う方法▼
▼BME280の使い方▼
では要所を切り取って説明です。
#include "Ambient.h" Ambient ambient; unsigned int channelId = *****; // AmbientのチャネルID(数字) const char* writeKey = "*************"; // ライトキー
▲Ambientライブラリを読み込んでインスタンス化してます。あとチャンネルIDとライトキーをそれぞれ変数に格納。
ambient.begin(channelId, writeKey, &client);
▲Ambientを開始（初期化）します。第3引数はwifiのポインター。これは初回に一度実行すればいいので void setup() 内に記述しておけばOK。
ambient.set(1, temp); // 温度をデータ1にセット //校正 ambient.set(2, pres); // 湿度をデータ2にセット ambient.set(3, hum); // 気圧をデータ3にセット ambient.send(); // データをAmbientに送信
▲Ambientにデータを送信する部分です。温度、湿度、気圧を順にパケットに設定。最後に send で送信して完了です。
基本的な送信方法はこれだけです。ライブラリには他にもいくつかメソッドが準備されてますがデータ送信するだけでよければこれだけ使用すればOKです。
▲実際にリアルタイムにモニターしているところです。
割と簡単に使用できますし、外出先からでも確認できるので、データーロガーとして使うには便利でいいですね。
コメント