概要

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ビット)に設定。

BlockCode

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上で簡単に試すことができます。