Node-RED MCU EditionでDashboard機能を試してみた。

# はじめに

Node-RED MCU EditionでDashboard機能がサポートされたので試してみました。

https://github.com/phoddie/node-red-mcu/discussions/55

https://flows.nodered.org/node/node-red-dashboard

# Node-REDフローのマイコンデバイスへの書き込み

以下を参考にflows.jsonを変換、ビルド、マイコンデバイスへの書き込みを行います。
mcconfigコマンドを使用して手動で行う、または、node-red-mcu-pluginを使用してフローエディタから行うことができます。
node-red-mcu-pluginでUI Supportメニューが追加されましたので、こちらを利用する方が簡単です。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

## 環境準備

Dashboard機能を使用するためにnode-red-dashboardノードをインストールします。

### 1-1. Node-REDをインストールする

```bash
$ mkdir node-red-mcu && cd node-red-mcu
$ npm init -y
$ npm install node-red
```

### 1-2. node-red-dashboardノードをインストールする

```bash
$ npm install node-red-dashboard
```

### 1-3. node-red-mcu-pluginをインストールする

```bash
$ npm install https://github.com/ralphwetzel/node-red-mcu-plugin
```

以下のコマンドでもインストールできるようになりました。

```bash
$ npm install @ralphwetzel/node-red-mcu-plugin
```

Node-RED起動時のエラー(node-red-mcu-pluginがパッチを適用するutils.jsが存在しない)を回避するため、node_modules/node-redディレクトリで必要なモジュールをインストールします。

```bash
$ cd node_modules/node-red
$ npm install
$ cd ../..
```

### 1-4. Node-REDを起動する

```bash
$ node node_modules/node-red/red.js -u ./
```

# 前提条件

- Intel MacBook Pro (2017)
- macOS Big Sur (バージョン 11.7.1)
- M5Stack Core2

# Node-REDフローを作成する

- 「button」ノード x 2個　・・「Button A」ノードと「Button B」ノードを配置します。
- 「text」ノード

![dashboard_1_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/79f3e559-41a5-20ac-b197-c7b0ff9b5f15.jpeg)

## 「button」ノードを編集する

- Group → 「✏️」鉛筆マークをクリックします
- Label → A、または、Bを入力します
- Payload → A、または、Bを入力します
- 名前 → A、または、Bを入力します

![スクリーンショット 2022-12-15 15.56.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/ebe15a75-e646-afc3-2ab9-130d16fe19e6.png)
![スクリーンショット 2022-12-15 15.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/40deafb5-a1b0-082a-6597-e1612d1dc919.png)

### Groupを編集する

- 名前 → defaultを入力します (Node-RED実行環境によって「デフォルト」となっている場合がありますが、日本語フォントに対応していないため、英数字で入力します)
- タブ → 「✏️」鉛筆マークをクリックします

![スクリーンショット 2022-12-15 16.04.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d3716bcc-5c01-b55b-565c-7435bd52bfb7.png)

### タブを編集する

- 名前 → homeを入力します (Node-RED実行環境によって「ホーム」となっている場合がありますが、日本語フォントに対応していないため、英数字で入力します)

![スクリーンショット 2022-12-15 16.05.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/6af10e69-616d-a891-4937-4d735828e263.png)

## 「text」ノードを編集する

- Group → プルダウンメニューで「[home] default」を選択します

![スクリーンショット 2022-12-15 16.00.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/5d705560-fa93-4a97-2c83-1a16292d7b68.png)

(サンプルフロー)

```json:flows.json
[{"id":"5ed813308402a4b0","type":"tab","label":"フロー 1","disabled":false,"info":"","env":[],"_mcu":{"mcu":true}},{"id":"3c6c04d315fddf06","type":"ui_button","z":"5ed813308402a4b0","name":"A","group":"88ee1734c254e1cb","order":0,"width":0,"height":0,"passthru":false,"label":"A","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"A","payloadType":"str","topic":"topic","topicType":"msg","_mcu":{"mcu":true},"x":230,"y":100,"wires":[["def69a7b250c2736"]]},{"id":"def69a7b250c2736","type":"ui_text","z":"5ed813308402a4b0","group":"88ee1734c254e1cb","order":1,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","_mcu":{"mcu":true},"x":430,"y":140,"wires":[]},{"id":"2c72b81b70d481d9","type":"ui_button","z":"5ed813308402a4b0","name":"B","group":"88ee1734c254e1cb","order":0,"width":0,"height":0,"passthru":false,"label":"B","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"B","payloadType":"str","topic":"topic","topicType":"msg","_mcu":{"mcu":true},"x":230,"y":180,"wires":[["def69a7b250c2736"]]},{"id":"88ee1734c254e1cb","type":"ui_group","name":"default","tab":"5a15d716f5894281","order":1,"disp":true,"width":"6","collapse":false,"className":"","_mcu":{"mcu":false}},{"id":"5a15d716f5894281","type":"ui_tab","name":"home","icon":"dashboard","disabled":false,"hidden":false,"_mcu":{"mcu":false}}]
```

# 「MCU」タブの設定をする

- 「Flows to build for MCU」 → 対象フローのチェックボックスにチェックを入れる

![mcu_tab_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3f2e396c-6e42-3bbe-9e9f-36016e5ffbfe.jpeg)

プルダウンメニューで「ESP32 | Espressif」「esp32/m5stack_core2」を選択し、M5Stack Core2をPCへ接続し、認識された「シリアルポート番号」を入力します。

- 「MCU Build Configurations」 →「Show more options...」を押します

![mcu_tab_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/17a8cb1b-c006-ae8c-1460-e6b3bd241875.jpeg)

- Creation Params: → 以下の内容を設定します。

```json
{
    "static": 0,
    "chunk": {
        "initial": 65536,
        "incremental": 0
    },
    "heap": {
        "initial": 4096,
        "incremental": 0
    },
    "keys": {
        "available": 128
    },
    "stack": 600
}
```

![スクリーンショット 2022-12-15 16.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2f88b09d-aa44-ef72-9fc5-512de1ca6b5e.png)

必要に応じて、Wi-FiのSSIDとパスワードを設定します

- WiFi | SSID:
- WiFi | Password:

![mcu_tab_4_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/05b371a2-3e6e-9382-baea-7a3019275301.jpeg)

- UI Support: → enabledを選択します

![mcu_tab_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/da9159d6-21e7-9d0c-8baa-035852144d18.jpeg)

# Node-REDフローをMCUで実行する

「Build」を押すとNode-REDフローが実行されます。
「Console Monitor」タブを押すと、ターミナル画面でビルド実行の様子を確認できます。
ビルド完了後、実機(M5Stack Core2)へ書き込みまで行われます。

![mcu_tab_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/908f7f8d-9da1-a139-2602-4f89f8a9c729.jpeg)

「button A」を押す(画面をタッチする)と、textにAが表示され、「button B」を押す(画面をタッチする)と、textにBが表示されます。

![Fj_GBgnaUAEKBtn.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/10c7a875-e907-ee8f-900e-929775f8bd7e.jpeg)