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

M5StackとNode-Redの組み合わせが便利だったので、記録を残します。
プログラムを書かずに色々なことができます。
Windowsで書いていますが、多少の変更でmacなどの他の環境でも可能です。
Env II Unitの温度湿度をJSONで渡しPCで表示させます。
MQTTじゃなくてhttp RESTが良いという人のために
#Node-redのインストール
##Nodejsのインストール
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/73234f50-8db6-9172-e888-1ad2162520e9.png)
#Node-redの準備
MQTTと便利なDashboardを使えるようにしておきます。
右上の横三本線MENUを押し、[パレットの管理]　を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/b29bb803-6c0a-b759-ca78-e2c2e72e5953.png)

[ノードを追加]タブを選択し、node-red-dashboardを追加します。検索にdashを入力したら出てきました。インストールには少し時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/7fd6e962-4b52-6cb8-e80a-1f6de121a8ef.png)

#Node-redのプログラム
URLを/M5Stack、IDをtempとrhで受信をするようにします。(http://IPアドレス/M5Stack?temp=xx.xx&rh=xx.x の形です。)
##普通のホームページ
一応、レスポンスを返す必要があるので、通常のホームページの動作部分を描きます。
"http in"ノード(Flowでは"http"と表示)と"Template"ノード、"http response"ノード(Flowでは"http"と表示)を置きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/3a77d359-7bdc-4108-2285-5705adf35b71.png)

###httpinノードの編集
メソッドを"GET" URLを"/M5Stack"にします。[完了]を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/1b767579-a314-f861-3c82-a306440385b7.png)

###Templateノードの編集
テンプレートに"Done！"のみ入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/ebb198c5-3720-1d45-fb7a-15ea1e695c7d.png)

###確認
http responeseは特に変更しなくて良いので[デプロイ]を押して、他のブラウザ画面から http://localhost:1880/M5Stack を開きます。
Done!と表示されたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/f762bf73-a83f-8bc6-4475-10ae6c175881.png)


##UIFlowから受け取る部分のプログラム
"change"ノード(Flowでは"set msg payload")、”debug”ノード(フローでは"msg payload"と表示）を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/c8b4d5bf-a307-23f4-6fa3-f936b90658b7.png)

###changeノードの編集
msg.payloadにmsg.payload.tempを代入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/f54dee25-4caa-8811-2377-9a8e756f3568.png)

###デプロイ
[デプロイ]を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/82f11fb9-58bc-0713-0f38-f707b0dc29cc.png)

###確認
Node-redの画面に行きデバッグを表示します。他のブラウザから http://localhost:1880/M5Stack?temp=12.3 を開いてデバッグ画面に12.3と表示されたらOkです。(最初にゴミが表示されるかもしれません）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/edbc9c84-297d-43f0-dec2-440bc7d55041.png)

#UIFlowのプログラム
UunitsにEnvII Unitを追加します。
ラベルを2個置きます。(label1,label2)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/5dacafa1-f8f7-435c-7439-9a424e4629ab.png)
変数TEMPとRHを作って代入した後に表示するプログラムを書いて三角ボタンを押して動作確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/704312cb-f2d5-1eeb-d20a-0553bcd8445a.png)
変数HttpDataを作り、代入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/4dd1873a-23b6-4292-2699-d3ab17c78489.png) を多重使用して汚いですが。。。
http://IPアドレス:1880/M5Stack?temp=xx.xx&rh=xx.x の形になるようにします。IPアドレスはパソコンのアドレスです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/ee0ef841-16fc-4f39-ef60-c29531a04586.png)

あと、http出力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/52b8f008-169f-3b5e-5ee7-849fb6ecd42b.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/aaedbebf-291b-3a04-47e1-db1a0714b6e8.png)

#Node-redのDashBoardを使ってみましょう。
##Flowの作成
dashboardのTextノードを置きchangeノードに接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/e9fce69b-95f7-b80c-57a6-6c6ad2041ab6.png)
Textノードをダブルクリックしてノードの編集画面にします。
Groupの右の鉛筆をクリックしてグループを作りTEMPとします。タブは”M5Stack　EnvII”にします。　[追加]もしくは[更新]を押して閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/808caa3b-43d3-d01b-f996-c85d36036f7c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/aa9c738e-5990-f386-33f7-fa53a779f1da.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/f4ff000f-fd29-f9fd-cd31-96a6b8b9aba5.png)

Labelを温度にします。[完了]を押して閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/c3fb083e-6c83-36b2-89ab-4fff53bf59e7.png)

デプロイを押します。
##表示
右上の下三角のボタンを押し[Dashboard]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/8b68f5a6-cc34-7b19-4c15-ee5aa8127427.png)

リンクボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/44bf281d-0133-0745-d725-52b5adddfc14.png)

ブラウザに新しいタブが表示されます。温度がリアルタイムに変わっていくのが判ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/1dfc26ca-3b81-923a-4f2c-baf1fcbf8f6a.png)

##Flowの追加
Chartを追加して、線をつなぎます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/5076daf7-2ce1-bba0-ef60-6b419b1f923d.png)

Chartをダブルクリックしてノードの編集をします。グループが前のTextと同じになっているのを確認して[完了]を押します。
最大、最小は値が入っていないと自動で設定さるみたいです。便利ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/8c5819d5-73cf-6f6a-f18f-ff88e43ae1ec.png)
デプロイを押して、先ほどのDashBoardのページに移ると、グラフが追加されていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/d02e108f-c0cf-c670-d2b2-0a560ad8820a.png)

配置を変えたいときは、Node-redのDashbordの配置を展開して、ドラッグアンドドロップで移動して、再度デプロイをしたら良いみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/700d7d2a-4086-73e9-db94-fbe9b0255412.png)

##湿度の表示の追加
changeノード、textノード、chartノードをコピーし接続したのちに編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/af309953-a269-14f7-e40b-e6afccd67574.png)
###changeノードの編集
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/91bc8b5c-fd01-f840-6a55-b25c3c051d26.png)
###textノードの編集
textノードは新しいUIグループrhを作りつつ設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/9cbfe82f-0f90-773c-27a1-505f74b32820.png)
###Chartノードの編集
Chartノードはグループを選択するだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/71fc5f25-cecf-7dc1-32e2-dfb17baa8032.png)

デプロイして確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/3c641051-6848-3082-fa2a-fa7fb496ade0.png)を多用して汚いですが。。