LoginSignup
0
2
@Rinatamu(Ryota Nakamura)inBizOptimars

M5Stack UiFlow x Azure IoT Central で簡単に双方向連携デバイスを作る方法

Last updated at Posted at 2023-11-08

皆さん、こんにちわ！りなたむです。
様々なIoTデバイスを提供している M5Stack さんには、 Scratch ライクに開発可能な UiFlow という開発ツールがあります。

image.png

UiFlow には、クラウド連携用のブロックが用意されており、様々なクラウドと連動させることが可能です。

image.png

もちろん、Azure もあります。
Azure の連携サービスとしては、 Azure IoT Hub と、Azure IoT Central の2つのブロックが用意されています。

今回は、この Azure IoT Central と UiFlow を組み合わせて

  • M5Stackに搭載されているセンサー情報をテレメトリとして送信
  • Azure IoT Central から M5Stack に メッセージ情報を表示

この2点をそれぞれ解説していきたいと思います。

1. Azure IoT Central

1.1. Azure IoT Central の作成

まずは、M5Stack と連動させるための、Azure IoT Central を作成しないことには始まりませんので、こちらを作成していきます

  1. IoT Central アプリケーションを追加する
    image.png

  2. リソースグループや名称を入力する
    image.png

  3. 使用するデバイスの用途を選択する
    image.png

  4. リージョンや料金プランを選択する
    image.png
    ※料金プランは以下の通り。やり取りするメッセージ想定量などに応じて料金プランを指定する。
    image.png

  5. 確認と作成をクリックし、結果が問題なければ、「作成」をクリックする。
    image.png

1.2. Azure IoT Central デバイステンプレートの作成

Azure IoT Central を作成したら、デバイスを登録する前に、テレメトリ情報やデバイスへのコマンドを定義する、デバイステンプレートを作成します。

  1. リソース画面から、URLのリンクをクリックする。
    image.png

  2. デバイステンプレートをクリックする。
    image.png

  3. 新規をクリックする。
    image.png

  4. カスタムデバイステンプレートの作成から、IoTデバイスをクリックし、次へをクリックする。
    image.png

  5. 任意のテンプレート名を入力して次をクリックする。
    image.png

  6. 作成をクリックする。
    image.png

  7. カスタムモデルをクリックする。
    image.png

1.2.1. テレメトリ受信用の機能を追加

M5Stack デバイスのセンサー情報（テレメトリ）を Azure IoT Central にて受信するための機能を追加します。

  1. 機能の追加をクリックする。
    image.png

  2. センサーに対応した表示名、名前、セマンティックの種類を設定する。
    image.png

  3. 必要に応じて追加で機能を追加する
    image.png

1.2.2. コマンド送信用の機能を追加

クラウドサービスから M5Stack に情報を送信する機能を追加します。

  1. 機能の追加をクリックする。
    image.png

  2. 表示名、名前を入力する
    image.png

  3. 機能の種類をコマンドに変更する。
    image.png

  4. 展開をクリックする。
    image.png

  5. 要求にチェックを入れる
    image.png

  6. 表示名、名前、スキーマ（データ型）をそれぞれ入力する。
    image.png

  7. 保存をクリックし、公開をクリックする。
    image.png

  8. 再度、公開をクリックする。
    image.png

1.3. Azure IoT Central デバイス追加

デバイステンプレート を作成したら、実際に管理画面で今回使用するデバイスを登録します。

  1. デバイスから、新規をクリックする。
    image.png

  2. デバイス名を入力する。
    image.png

  3. デバイステンプレートに作成したテンプレートを指定し、作成をクリックする。
    image.png

2. UiFlow 開発

UiFlowをつかって、M5StackデバイスとAzure IoT Central を接続していきます。

2.1. Azure IoT Central 接続前まで

基本的に、デバイスの構成やセンサーの設定をした上で、Wifi 接続部分までを以下のように定義していきます。

image.png

2.2. Azure IoT Central 接続部分

時刻同期の下ブロックを以下のように変更していきます。

  1. IoTCloud > Azure > Classic から IoT Central のブロックを選択する。
    image.png

  2. 入力パラメータは、Azure IoT Central のデバイスから、接続をクリックすると取得できるので、それぞれに入力していく。
    image.png
    image.png
    image.png

  3. IoTCloud > Azure > Classic から Start azure のブロックを選択する。
    image.png

  4. この状態で Run を実行する
    image.png

  5. しばらくすると、Azure IoT Central 側で、デバイスが接続済みとなる
    image.png

2.3. テレメトリ送信

予め作成しているイベントタイマーにて、Azure IoT Central にテレメトリを送信する部分を作成していきます。

  1. IoTCloud > Azure > Classic から Publish D2C Message ブロックを選択する
    image.png

  2. イベントタイマーに配置する
    image.png

  3. 送信データを、マップとJSON変換のブロックを使い、デバイステンプレートに定義した名前をキー項目として、以下のようにする
    image.png

  4. この状態で Run を実行する
    image.png

  5. イベントタイマーが実行されると、Azure IoT Central 側の生データに、受信したセンサー情報が出力される
    image.png

2.4. コマンド実行

Azure IoT Central からのコマンドを M5Stack デバイスに受信する部分を作成していきます。

  1. IoTCloud > Azure > Classic から Subscribe Direct Method ブロックを選択する
    image.png

  2. メソッド名を、Azure IoT Central のデバイステンプレートに定義した機能の名前に変更する。
    image.png

  3. デバイスのディスプレイ表示部を変更するブロックなどを入れて、以下のように定義する。
    image.png

  4. この状態で Run を実行する。
    image.png

  5. Azure IoT Central のデバイスにあるコマンド実行画面でテキストを入れると、文字がデバイスに表示されることを確認する。
    image.png

3. まとめ

いかがだったでしょうか？
M5Stack UiFlow と Azure IoT Central を組み合わせることで、双方向にやり取り可能なデバイスを簡単に作ることが出来ました！
次回は、Microsoft の Power Platform 製品である、Power Automate と Power Apps を組み合わせて、スマホから簡単にデバイスに文字を反映する部分を作成していきたいと思います。

0
2
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
0
2