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

はじめに

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

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

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

環境準備

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

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

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

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

$ npm install node-red-dashboard

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

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

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

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

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

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

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

$ 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」ノード

「button」ノードを編集する

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

Groupを編集する

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

タブを編集する

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

「text」ノードを編集する

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

(サンプルフロー)

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」 → 対象フローのチェックボックスにチェックを入れる

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

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

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

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

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

• WiFi | SSID:
• WiFi | Password:

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

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

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

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