UIFlow(on M5Atom Matrix)で値をNode-RedのUIとMQTTで送る その１：UIFlowからNode-Redへ

shuzo-kino.hateblo.jp
ではNode-Redの中で完結するMQTT通信でしたが、これを外のM5Atom Matrixと通信させてみます。
M5Atom Matrixの挙動はUIFlowで記述。
Node-RedのMQTTまわりのアプローチは前の記事と同様。

実際のところ

UIFlow

後々の拡張も考えJSONで送信
送る値は内部クロックとIMUのXYZ値にしときます

Node-Red

JSONで受け取ったペイロードはchangeノードで置き換えをしてからUIにおくります

全体構成はこんな感じ

Node-Red UI

先ほどのUIノード群を整えてあげると、画面はこんな塩梅になります