概要
UIFlowを使ったM5Stackの開発で、必要な機能ブロックがなかったため
こちらの記事「自作モジュール用のUI Flowのカスタムブロックを作る」を参考にカスタムブロックを作成しました。
今回はM5Stack上の背景色をMQTT受信値で変更するUIFlow機能ブロックの作成方法について説明します。
前回説明した、自作「呼出システム」の中で、状態を色で表現するUIに利用しています。
M5Stack開発環境の準備(UIFlow)
M5StackのプログラムをUIFlowを使って作成します。
先にM5Stack側のファームウェアUIFlowの準備が必要です。
こちらを確認しながら環境を準備してください。開発環境の準備は下記のような手順となります。
M5Stack側の手順
- M5Burn最新版をダウンロード
- M5Burn内でUIFlowをダウンロード（2020年7月末、最新は1.6.0です）
- M5Stackのファーウェア書換えを行う(一緒にWifi設定も行います）
- M5StackはInternetMode(クラウド上のUIFlowと接続)モードとなります
- M5Stackが正しくネットワークに接続されているとAPIキーが画面に表示されます
M5StackがInternetModeになっていない場合は、一度リセットしてすぐに表示されるSetupボタン(画面右下ボタン)を押すことでモード切り替えができます
次にPC側の手順
- ブラウザ上でUIFlowを立上げて、M5Stackに表示されたAPIキーを入力すると、UIFlowの開発環境とM5Stackが接続されます
- UIFlowでは作成したプログラムを転送して簡易的に確認ができます。
MQTTブローカと通信を行う場合はUIFlowから実機にプログラムを「ダウンロード」する必要があります。
RUNだけではMQTT通信部分が機能しないためエラーとなります。
UIFlow Block Master 構成
UIFlow Block Masterの画面と各要素の説明を下記に示します。
Block Group
| 名称 | 機能 | 備考 |
|---|---|---|
| Namespace | ブロックグループ名 | UIFlow上に表示される機能グループ |
| Block Color | ブロックグループ色 | UIFlow上で表示される色 |
| Added | グループに定義されているブロックリスト | 1つのグループに複数のブロックを定義できます |
Block Setting
| 名称 | 機能 | 備考 |
|---|---|---|
| Name | コード上のブロック名称 | 任意 |
| Type | ブロックの種類 | Value(値)/Execute(関数) |
| Parameter | 入力とする引数 | name(引数名),Type(String/Number/Variable) |
| Block Code | Pythonプログラム | 任意 |
Parameterで定義した引数は${ParameterName}の形で使用する
ブロックの追加は下部のボタン「Add Block」(追加)で行う。
ボタンはほかに「Remove Block」(削除)、「Open.m5b」(開く)、「Download」(保存) がある
今回作成したPythonコードは下記となります。
機能：MQTTで受取ったmsgの第一要素をColorとして取得。Circle0の背景色をColor(Integerの16ビット)に設定。
clolor=${msg}[1:]
circle0.setBgColor(int(color,16))
自作のカスタムブロックの保存と読込
自作のカスタムブロックはWeb上に保存することはできないため、下部に設置されたボタン「Download」で行う。
「*.m5b」の形式でPCにダウンロードされます。
保存と読込の流れ
- カスタムブロック作成(UIFlow)
- 保存(Downloadで*.m5bファイルを保存)
- Customブロックの読込(Custom>Open *.m5b file)
- 利用(利用ブロックと同じくブロックグループ>ブロックで使用する)
自作ノードを使ったブロックプログラムの例
左下の青い部分が自作ノードとなります。
まとめ
M5Stack開発にUIFlowを使うと、既存のブロックを組み合わせるだけですぐにプロトタイピングを作成することができます。
基本ブロックでは提供されていない制御をしたいとき、Pythoを直接書き換えるとブロックプログラムに戻れなくなってしまいます。
ですが、自作ブロックを使って既存のブロック以外の機能をPythonプログラムで組み込む・保存することができるので、
色々なIoTプロトタイプをUIFlow上で簡単に試すことができます。