LoginSignup
5
3

More than 1 year has passed since last update.

@yukimatsuin北菱電興株式会社

M5StickCとAzure IoT Centralを連携してデータを可視化する③　～M5StickCとAzure IoT Centralの接続編～

Last updated at Posted at 2021-09-17

はじめに

この記事はシリーズになっています。
目標は、「M5StickCとAzure IoT Centralを連携してデータを可視化すること」です。必要な人が必要な記事を読んでもらうことで、ゴールまでたどり着けることを意識しています。
構築するシステム構成は、以下のようになります。
image.png

  1. M5StickCとAzure IoT Centralを連携してデータを可視化する① ～M5StickC開発環境準備編～
  2. M5StickCとAzure IoT Centralを連携してデータを可視化する② ～Azure IoT Central環境構築編～
  3. M5StickCとAzure IoT Centralを連携してデータを可視化する③ ～M5StickCとAzure IoT Central接続編～

この記事で出来るようになること

  • M5StickCとAzure IoT Centralを連携する
  • Azur IoT Central で受信したデータをグラフにして可視化する

対象

手順

以下の点を前提として手順を記載します。
以下の点が不明な場合は、以前の記事を参考にして下さい。

  • M5StickCの開発が出来る環境が整っていること
  • Azure IoT Central の環境構築が終わっていて、接続情報などを取得できること

１．UI Flowを開く

UI Flowのリンク

２．接続しているデバイスを追加

今回使用するセンサは以下になります。

こちらの [＋]ボタンからセンサを追加します。
image.png

M5StickC ENV II Hat：Hat側の選択して、[＋]ボタン
image.png

M5Stack用光センサユニット：Units側の選択して、[＋]ボタン
image.png

それぞれのデバイスにチェックを入れて、使用できるようにします。

ブロックに、[Units] と [HAT] が追加されていることを確認します。
[ライト]と[ENV Ⅱ]が確認できたら、これらのセンサモジュールを使用することが出来ます。
image.png

３．Azure IoT Central に接続するブロックを追加

[IoTCloud] - [Azure] を開きます。
image.png

Azure IoT Central に接続するブロックがあるので、これを使います。
image.png

Azure IoT Central で、デバイスを作成した時にメモをした、
[IDスコープ]
[デバイスID]
[主キー]
を、[IoT Central]のブロック内に記述します。
以下がプログラムの全体になります。これで、Azure IoT Centralにデータを送信することが出来ます。
image.png

また、Azure IoT Central にデータを送る場合には、[Publish D2C message] のブロックを使用します。
送信するデータはJSON形式で、[key]に指定される名前は、Azure IoT Central 上のデバイステンプレートで指定した名前と一致させる必要があります。
image.png

[key]のブロックは、[マップを作成] のブロックの [＋] をクリックすることで追加できます。
image.png

※Azure IoT Central で[デバイステンプレート]を作成した時のここの名前を一致させます。
image.png

４．Azure IoT Central でデータが受信できていることを確認

ここからは、Azure IoT Central側の操作になります。
Azure IoT Central の画面から、既に作ってあるデバイス一覧を開き、[デバイス名] から、デバイスを開きます。
image.png

データを受信していない状態は、このように表示されます。
image.png

データを受信した状態は、このように表示されます。
image.png

M5StickCからデータをアップロードして、データを受信していることが確認できます。

１つのデータを更に詳しく見てみると、M5StickC側でJSONにした形式でデータが送られていることが分かります。
image.png

５．ダッシュボードで可視化する

少しずつデータが溜まってきました。
image.png

メニューより、[ダッシュボード] - [新しいダッシュボード] で新しいダッシュボードを作成します。
image.png

適当な名前を付けて、ダッシュボードを作成します（デフォルトでも大丈夫です）。
image.png

新しいダッシュボードが出来ました。
image.png

[ダッシュボードを編集] より、ダッシュボードを編集します。
image.png

様々なタイルが選択可能です。
image.png

[タイル] を設置する場合は、ドラッグ＆ドロップで設置できます。
image.png

[折れ線グラフ] を設置しました。中身はまだありません。
image.png

[設定] ボタンから各種設置を行います。
image.png

[グラフの構成] から [タイル] に表示されるデータや表示の仕方を設定できます。
画像は見切れてますが、[humidity] を選択しています。
image.png

[更新] を押すと、[タイル] の情報が更新されます。
ダッシュボードしても、[保存] しておきます。
image.png

今後は、[ダッシュボード] として、データをグラフ化してみることが出来ます。
image.png

すこしそれっぽくカスタマイズしてみました。
image.png

以上で、以下のことが出来るようになりました。

  • M5StickCとAzure IoT Centralを連携する
  • Azur IoT Central で受信したデータをグラフにして可視化する

５．おまけ：[分析]を使ってグラフ化する

メニューから、[分析] を選択します。
image.png

[デバイスグループ]：グラフ化したいデバイスのグループ
[テレメトリ]：今回は、温度データをグラフ化します
設定が終わったら、[分析] をクリックします。
image.png

以下のようにグラフ化して分析することが出来ます。
時間のスケールなどを調整してみるとより見やすくなると思います。
以下は、温度センサなので変化させるのが難しいですが、後半はちょっとM5StickCのENV HATを掌で握ってみました。ちょっと温度が上がりました。
image.png

以下が、湿度をグラフ化したものになります。
温湿度センサを手で握っていたタイミングと、息を吹きかけてたタイミングで、値が上がっているのが分かります。
image.png

グラフの右上から、以下のオプションも使えます
[データをテーブルとして]：テーブルで表示
[CSVとしてダウンロード]：CSV形式でダウンロード
[マーカーをドロップする]：グラフにマーカーを表示
image.png

[マーカーをドロップする]を選択すると以下のようになります。
image.png

最後に

「M5StickC と Azure IoT Central を連携してデータを可視化する」までの流れが１通り完了しました。
あとは、デバイス側に液晶があるのでそちらでもセンサの値が見えるようにしたり、クラウド側でルール付けを行ってある閾値を超えたらメール送信したりなどの活用を出来ると思います。

Azure IoT Centralにデータがアップされれば、それ以降の処理などもAzure側でいろいろ処理することが可能になります。気が向いたら、もう少しトライした内容を追記したいと思います。

おまけ

本記事は、以下のキャンペーンに参加しています。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3