Go to Qiita Advent Calendar 2024 Top
LoginSignup
29
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@NWLab(NextWorld Lab)

M5StackのUIFlowとNode-Redの組み合わせが、ノープログラミング/ロープログラミングで便利(MQTT編）

Last updated at Posted at 2021-03-21

M5StackとNode-Redの組み合わせが便利だったので、記録を残します。
UI-FlowとNode-redを組み合わせると、プログラムを書かずに色々なことができます。
※Node-redもUI-Flowも初心者です。間違いがあったら教えてください。

ここでは、Env II Unitの温度湿度をJSONで渡しPCで表示させる例を記します。

#はじめに
##Node-Redとは
Node.js上で動く、ローコード・ノーコード環境です。GUIで楽しくプログラミングできます。詳しくは https://nodered.jp/ を参照
ここでは、Windowsで書いていますが、多少の変更でmacやRasberryPI、クラウドなど、他の環境でも可能です。インストール＆使い方は
https://nodered.jp/docs/getting-started/ を参照

##MQTTとは
データを送るための通信プロトコルです。Brokerを介して通信を行います。
特徴としてQoSのコントロールが可能です。0なら届くかどうかをわからないけど送信を1回行います。2は、確実に届けます。というような感じで、重要度を変えることができます。
image.png
まず、最初に下のような構成で動かしてみます。
image.png

#Node-redのインストール

##Node.jsのインストール
https://nodejs.org/ja/ からファイルをダウンロードしてインストールします。LTS版が安定していて良いと思います。
ネットワークにPROXYを使用している場合は　https://qiita.com/LightSpeedC/items/b273735e909bd381bcf1 を参考

##Node-redのインストール
スタートメニューから[Node.js]-->[Node.js command prompt]を選択
コマンドプロンプトで　npm install -g --unsafe-perm node-red を実行　
#Node-redの起動
Node.js Command Promptでnode-redと入力し、起動します。この画面にエラーの詳細とかでますので、たまに見ると良いでしょう。

ブラウザで http://127.0.0.1:1880/ につなぎます。下の画面が出たらOKです。
終了は、コマンドプロンプトの画面でCtrl＋Cです。
image.png
#Node-redの準備
MQTTと便利なDashboardを使えるようにしておきます。
右上の横三本線MENUを押し、[パレットの管理]　を選択します。
image.png

[ノードを追加]タブを選択し、node-red-dashboardを追加します。検索にdashを入力したら出てきました。インストールには少し時間がかかります。
image.png
同様にnode-red-contribute-aedesを追加します。これはmqtt通信の中心になるものです。大規模なものは外部のBrokerを利用した方が良いでしょう。
image.png
#Node-redのプログラム
##MQTTのBroker
Node-redのプログラムは左からノードを取り出し、繋ぎます。削除はフロー内のノードやつないだ線をクリックしてDELきーを押します。
mqttのブローカーは"aedes Broker"ノード(フローでは"aedes MQTT Broker"と表示)と"debug"(フローでは"msg payload"と表示）ノードを使います。特に設定は必要ありません。（IDやPasswordを使う場合は必要）
image.png

##UIFlowから受け取る部分のプログラム
Node-redの新しいフローに書いても良いですが、ここでは同じフローに書いています。
UIFlowからはJsonデータをMQTTのTopic”M5”で受信
"mqtt in"ノード（Flowでは今の段階では"mqtt")と"change"ノード(Flowでは"set msg payload")、”debug”ノード(フローでは"msg payload"と表示）を使います。
image.png
###mqtt in の設定
フローのノードをダブルクリックで設定できます。
サーバは右の鉛筆マークから新規に設定
サーバを "localhost" (自分のPCに設定）にします。追加で終了
image.png
トピックを"M5"に、出力を"JSONオブジェクト"にします。[完了]を押します。フローの表示がM5になります。
image.png

###changeノードの設定
jsonのmsg.payload.tempをpayload.msgに代入します。つまりtempの値のみ取り出して(選択して）msg.payload(出力)とします。
image.png

##デプロイ
デプロイを押します。
image.png

#UIFlowのプログラム
UunitsにEnvII Unitを追加します。
ラベルを2個置きます。(label1,label2)
image.png
変数TEMPとRHを作って代入した後に表示するプログラムを書いて動作確認します。
image.png
JSONにするには一旦MAPに書いてそれを出力（DUMP)します。
MapDataとJsonDataという変数を作ります。
CreateMapの中はCreateMapの下の＋を押すと出てきます。キーはTextで”temp”、”rh"とします。キーは小文字にしてください。エラーが出ます。
image.png

MQTTの部分を加えます。MQTTのブロックはAdvanceの中にあります。
Setupの下にMQTTのパラメータブロックと"mqtt start"のブロック、Loop内に"publish topic"を加えます。
serverにPCのIPアドレスを入力します。
publish topic "M5" msgを JsonData にします。
image.png

慣れると変数を使わなくても、こんな感じでもよくなります。
image.png

M5Stackで三角マークを押して実行します。

#動作確認
Node-redの画面に行きデバッグを表示します。すでにM5Stack側は動いているので温度が表示されていたら成功です。

image.png

#Node-redのDashBoardを使ってみましょう。
##Flowの作成
dashboardのTextノードを置きchangeノードに接続します。
image.png
Textノードをダブルクリックしてノードの編集画面にします。
Groupの右の鉛筆をクリックしてグループを作りTEMPとします。タブは”M5Stack　EnvII”にします。　[追加]もしくは[更新]を押して閉じます。
image.png

image.png

image.png

Labelを温度にします。[完了]を押して閉じます。
image.png

デプロイを押します。
##表示
右上の下三角のボタンを押し[Dashboard]をクリックします。
image.png

リンクボタンを押します。
image.png

ブラウザに新しいタブが表示されます。温度がリアルタイムに変わっていくのが判ります。
image.png
##Flowの追加
Chartを追加して、線をつなぎます。
image.png

Chartをダブルクリックしてノードの編集をします。グループが前のTextと同じになっているのを確認して[完了]を押します。
最大、最小は値が入っていないと自動で設定さるみたいです。便利ですね。
image.png
デプロイを押して、先ほどのDashBoardのページに移ると、グラフが追加されていると思います。
image.png

配置を変えたいときは、Node-redのDashbordの配置を展開して、ドラッグアンドドロップで移動して、再度デプロイをしたら良いみたいです。
image.png

##湿度の表示の追加
changeノード、textノード、chartノードをコピーし接続したのちに編集します。
image.png
textノードは新しいUIグループrhを作りつつ設定します。
image.png

Chartノードはグループを選択するだけです。
image.png

デプロイして確認してみましょう。
image.png

##mqtt in(M5)からの出力(参考）
mqtt in にDebugをつなぎdebugの設定をmsgオブジェクト全体にすると、メッセージの全体像が見えます。ここでは

{"topic":"M5","payload":{"rh":48.41,"temp":25.01},"qos":0,"retain":false,"_topic":"M5","_msgid":"331b627c.316c8e"}

となっていました。なのでchangeノードでmsg.payload.temp等の設定でよかったことがわかります。

#同報通知
IoTなどで、警報機をたくさん置きたいときとかは同報通知が出来ると便利ですね。ここでは温度をM5StickC Plusに表示させます。
image.png

##ラベルを置きます。
image.png

##コード
mqttのパラメータはPCのIPアドレスに変更します
image.png

これで受信できます。複数台でも同じなので、簡単に受信機が作れます。

#Node-redからM5StickC Plusへ
M5StickCのテキスト(温度）の色を変えるプログラムを考えてみましょう。
image.png

##Node-redのプログラム
新しいフローを作ります。
ブローカーはすでにほかのフローで動いているので、不要です。
###ノードの配置
DashBoardのスイッチノードとmqtt outノードを使います。
image.png

###Switchの編集
On Payloadを文字列に変更し"red"にします。Off　Playloadも同様に"blue"に変更します。
image.png

###mqtt outの設定
トピックをCOLORにQoSを２に変更します。
image.png

###デプロイ
設定が編集出来たらデプロイします。
##UIFlowのプログラム
右下の部分が追加になります。今回はjsonじゃないので、そのまま文字列で評価できます。
image.png

##実行
DASHボードのTEMPの下にスイッチが出来ています。スイッチを動かすとM5StickC Plusの表示色が変わります。
image.png

29
33
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
29
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?