はじめに
この記事は、M5StickC から送った数値のデータを Beebotte のダッシュボードで可視化してみる、という内容です。プログラムの作成にはビジュアルプログラミング環境である UIFlow を使っています。
以下が最終的にダッシュボード上に出力されたグラフになります。
Beebotte
この記事で可視化に利用する Beebotte は、MQTT・WebSocket によるデータのやりとりをする機能や REST API のインタフェース、データを可視化するためのダッシュボードといった機能を持ったサービスです。
今回は、MQTT で送られたデータを Beebotte のダッシュボードでグラフとして可視化します。それを進めるにあたり、「ラズパイを使った温度・湿度の取得とデータの可視化を行う公式チュートリアル」を参照します。
Beebotte の設定
チャンネルの作成
上で紹介した公式チュートリアル)の「Create a Channel」の項目を見てみます。
上記の内容を参考にして、以下の内容で設定しました。
- チャンネル名
- M5StickC_Dashboard
- リソース名
- value
- リソースの種別
- number
このチャンネル作成を行った後に、「Channel Token」の情報が得られるので、それを確認してメモしておきます。具体的には、チャンネル一覧の画面で今回作成したチャンネル名「M5StickC_Dashboard」を選択すると、その後の画面で「token_」で始まる文字列が表示されるため、それをメモします。
ダッシュボードの作成（ウィジェットを追加）
次に、ダッシュボードを新規に作成します。以下の画像にあるとおり、左のメニューの「Dashboard」を選択肢、その後に「Add Widget」を押してください。
その後に表示されるメニュー内の「Timeline Chart」を選択します。
そして、以下のように「Title」に分かりやすい名称を入力します。また「Channel・Resource」の部分は、先ほど設定した内容を選んでください。
ウィジェットが追加できたら、「New Dashboard」と書かれている部分を分かりやすい名称に変更し、画面の「Save Changes」を押して設定を保存してください。
そして、以下のダッシュボードが表示された状態になったら Beebotte側の準備は完了です。
MQTT でのデータ送受信に関する設定
UIFlow で MQTT を使ったデータ送信のプログラムを作成するにあたり、Beebotte の公式ドキュメントの MQTT のページをチェックしてみます。
接続先のアドレスやポートについて、SSL を用いない場合は以下となるようです。
- アドレス
- mqtt.beebotte.com
- ポート
- 1883
また、JavaScript を使ったサンプルの部分を見てみると、クライアント側で以下の情報を設定すれば良さそうでした。
- ユーザ名： Channel Token
- パスワード： 【指定無し（空）】 ← ※ これは UIFlow の場合は違っていました（すぐ後で補足）
と思ったのですが、実際に UIFlow からの接続を試すと、上記の設定では接続に失敗しました。
そして、情報をググってみたところ以下の記事を見つけ、「パスワードはユーザ名と同じ Channel Token を設定」 とすることで解決できました。
●家族を集合させるボタンを作る（MESHボタン→M5Stackをブロックプログラミングで） - カワリモノ息子の技術メモ的な〜
https://siroitori.hatenablog.com/entry/2020/03/03/233045
UIFlow で以下のユーザ名・パスワードを設定することで、MQTTブローカーへの接続が無事に行えました。
- ユーザ名： Channel Token
- パスワード： Channel Token
上記のブログ記事を見て、公式ドキュメントに以下の説明があったことに気づくこともできました。
なお、マルチプラットフォーム対応の MQTTクライアントとして使える GUIアプリ（MQTT.fx）をテスト用に使っていたのですが、こちらのアプリではパスワードを空にする設定で接続ができていました。
MQTT のトピックと送信するデータの形式
MQTT のトピックについては、公式ドキュメントを見ると「【チャンネル名/リソース名】」という形式になるようでした。今回の場合は「M5StickC_Dashboard/value」という文字列です。
あとは何らかの数値を MQTT で単純に送れば良いと思って試したのですが、それがうまくいかず、再度公式のドキュメントを見直したところ以下の形式にする必要があるようでした。
UIFlow でプログラムを作成する
これまでの内容をふまえて、UIFlow のプログラムを作成します。
MQTT で JSON形式のデータを送る部分は、情報を検索して出てきた以下を参考にして作成しました。
●How-To: Using JSON & Map with MQTT | M5Stack Community
https://forum.m5stack.com/topic/1730/how-to-using-json-map-with-mqtt
このプログラムを M5StickC に書き込み、プログラムを実行した後にボタン押下を行って数値を複数回送ったところ、Beebotte のダッシュボードで以下のグラフが表示されるのを確認できました。
まとめ
今回、M5StickC から送った数値データを Beebotte上でグラフ化することができました。今後、送信する値をセンサーのデータにするなどして、Beebotte のダッシュボードを活用していければと思います。