はじめに

今年(2022年)も10月7日にNode-RED Con 2022が開催されました。

English TrackでPETER HODDIEさんが「Bringing Node-RED to Microcontrollers」というタイトルでNode-RED MCU Editionを紹介されていたので、さっそく試してみました。

「すべてのデバイスをプログラマブルにする」というミッションに共感しました。

(発表スライドから抜粋)

今回はM5Stack Core2(ESP32)でシンプルなNode-REDフロー(injectノードとdebugノード)を動かしてみます。

(2022年10月12日追記: M5Stack Basic、M5Stack Greyでも動きました)

手順

GithubのREADMEが情報源になります。

PCのNode-REDはNode.js(V8 JavaScriptエンジン)で動作させますが、MCU(マイクロコントローラー)はModdable SDKのXS JavaScriptエンジンで動作させます。

(発表スライドから抜粋)

環境構築

前提条件

Intel MacBook Pro (2017)
macOS Big Sur (バージョン 11.7)
Xcode (バージョン 13.1)

~~※ 実機(M5Stack Core2)で動作させるためにESP-IDFを使用する必要がありますが、M1 Macはサポートされていません。~~

(2022年10月11日追記: M1 Macでも動きました。)

M1 MacBook Air (2020)
macOS Monterey (バージョン 12.6)
Xcode (バージョン 13.4.1)

エラーが出る方はApple Rosetta 2をインストールしてください。

1. Moddable SDKをインストールする

Githubの「Moddable SDK – Getting Started」が情報源になります。

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

App StoreからXcodeをインストールします。

※ CommandLineToolsが正しく設定されていないと、Moddable SDKのビルドでエラーになるので、メニューから「Preferences」→「Locations」でCommand Line Toolsのプルダウンメニューから設定します。

1-2. Moddableのレポジトリをダウンロードする

ホームディレクトリにダウンロード、インストールする前提で説明します。

$ git clone https://github.com/Moddable-OpenSource/moddable

1-3. 環境変数を設定する

使用しているシェル環境によって環境変数を設定するファイルが異なります。

(bashの場合) ~/.profile

(zshの場合) ~/.zshrc

以下の設定を追加します。

export MODDABLE="/Users/ユーザー名/moddable"
export PATH="${MODDABLE}/build/bin/mac/release:$PATH"

※ 環境変数を有効にするため、ターミナルを閉じて新しく開きます。

1-4. Moddable SDKをビルドする

$ cd ${MODDABLE}/build/makefiles/mac
$ make

1-5. xsbug デバッガーツールを開く

$ open ${MODDABLE}/build/bin/mac/release/xsbug.app

※ デバッガーが正常に起動されることを確認したら、閉じます。

1-6. サンプルプログラムを実行する

サンプルプログラム(helloworld)を実行するとシミュレータ(Moddable One)とデバッガーが起動します。

$ cd ${MODDABLE}/examples/helloworld
$ mcconfig -d -m -p mac

mcconfigコマンドの引数(オプション)の意味は以下のとおりです。

-d デバッグモードでビルドを行う
-m ビルドとデバイスへの書き込みを同時に行う
-p ビルドのプラットフォームを指定するオプション
- macはmacOSのModdableシミュレータ
- 実機(M5Stack(ESP32))の場合はターゲットによって値が異なります
  - M5Stack Basic、M5Stack Greyの場合はesp32/m5stack
  - M5Stack Core2の場合はesp32/m5stack_core2
  - M5Stick-Cの場合はesp32/m5stick_c

左上のメニューからシミュレータの種類を変更できます。

再生ボタンを押すとhelloworldと表示されます。

別のサンプルも試してみます。

$ cd ${MODDABLE}/examples/piu/balls
$ mcconfig -d -m -p mac

実機(M5Stack Core2、M5Stack Basic、M5Stack Grey)で動作させる

M5Stack(ESP32)で動作させるために、ESP32用のビルド環境を構築します。

2. ESP-IDFをインストールする

Githubの「Using the Moddable SDK with ESP32」が情報源になります。

2-1. ESP-IDFのレポジトリをダウンロードする

ホームディレクトリにダウンロード、インストールする前提で説明します。

$ mkdir esp32 && cd esp32
$ git clone --recursive https://github.com/espressif/esp-idf.git
$ cd esp-idf
$ git checkout v4.4.3
$ git submodule update --init --recursive

2-2. HomebrewでESP-IDFの実行に必要なツールをインストールする

$ brew update
$ brew install python cmake ninja

既にインストールされている場合はアップデートします。

$ brew upgrade python cmake ninja

2-3. 環境変数を設定する

使用しているシェル環境によって環境変数を設定するファイルが異なります。

(bashの場合) ~/.profile

(zshの場合) ~/.zshrc

以下の設定を追加します。

export IDF_PATH=$HOME/esp32/esp-idf

※ 環境変数を有効にするため、ターミナルを閉じて新しく開きます。

2-4. ESP-IDFをビルド、インストールする

$ cd $IDF_PATH
$ ./install.sh

2-5. ESP-IDFのビルド環境を設定する

$ source $IDF_PATH/export.sh

ターミナルを開く度に毎回実行するのが面倒な場合はシェルの初期化ファイル(~/.profile、または、~/.zshrc)に追加します。
手順2-3.で設定した環境変数(IDF_PATH)の後ろに追加します。

export IDF_PATH=$HOME/esp32/esp-idf
source $IDF_PATH/export.sh

2-6. M5Stackを接続し、シリアルポート番号を確認する

M5Stackを接続する前と後で以下のコマンドを実行して、M5Stackが認識されたシリアルポート番号を確認します。

$ ls /dev/cu.*

私の場合は
/dev/cu.usbserial-01F05577
として認識されました。

認識されたシリアルポート番号を環境変数(UPLOAD_PORT)に設定します。

$ export UPLOAD_PORT=/dev/cu.usbserial-01F05577

mcconfigコマンドを実行する時に指定することもできます。

(実行例: M5Stack Core2の場合)

$ UPLOAD_PORT=/dev/cu.usbserial-01F05577 mcconfig -d -m -p esp32/m5stack_core2

(実行例: M5Stack Basic、M5Stack Greyの場合)

$ UPLOAD_PORT=/dev/cu.usbserial-015F99BB mcconfig -d -m -p esp32/m5stack

2-7. サンプルプログラムを実行する

ボールのサンプルプログラムをM5Stack用にビルドし、実機へ書き込みます。

(実行例: M5Stack Core2の場合)

$ cd ${MODDABLE}/examples/piu/balls
$ UPLOAD_PORT=/dev/cu.usbserial-01F05577 mcconfig -d -m -p esp32/m5stack_core2

(実行例: M5Stack Basic、M5Stack Greyの場合)

$ cd ${MODDABLE}/examples/piu/balls
$ UPLOAD_PORT=/dev/cu.usbserial-015F99BB mcconfig -d -m -p esp32/m5stack

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

ようやく環境準備が整いました。
Node-REDフローをMCU(マイクロコントローラー)で動かす分かりやすいイメージはこちらです。

(引用元)

Node-RED MCU Editionとは、Node-REDフローエディタからJSON形式でエクスポートされたフローを、Moddable SDKのXS JavaScriptエンジンで動作する形式へ変換します。

Node-REDフローエディタ上でMCU用にビルド、実機へ書き込めるツール(node-red-mcu-plugin)がリリースされていますので、こちらを利用する方が楽でした。

まずは仕組みを理解するために、手動で変換、ビルド、書き込みを行います。

3. Node-RED MCU Editionを使用する

3-1. Node-RED MCU Editionのレポジトリをダウンロードする

$ git clone https://github.com/phoddie/node-red-mcu

3-2. Node-REDフローをJSON形式でエクスポートする

injectノードとdebugノードを接続し、injectノードは繰り返し動作に設定します。

右上のメニューから「書き出し」を選択します。

「JSON」タブを選択します。

「書き出し」を選択します。

クリップボードにNode-REDフローがJSON形式でコピーされます。

3-3. Node-REDフロー(JSON形式)をflows.jsonファイルに保存する

node-red-mcu ディレクトリに空のflows.jsonファイルがあるので、クリップボードにコピーしたNode-REDフローを書き込みます。(viコマンドでflows.jsonファイルを編集する例)

$ cd node-red-mcu
$ vi flows.json

(変更前)

flows.json

[
]

(変更後)

flows.json

[
    {
        "id": "8e0e0125ce64fc32",
        "type": "tab",
        "label": "フロー 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b26f7a4723afecfe",
        "type": "inject",
        "z": "8e0e0125ce64fc32",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 230,
        "y": 140,
        "wires": [
            [
                "d6cb10fdeae23781"
            ]
        ]
    },
    {
        "id": "d6cb10fdeae23781",
        "type": "debug",
        "z": "8e0e0125ce64fc32",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 480,
        "y": 180,
        "wires": []
    }
]

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

(シミュレータで動かす場合)

$ mcconfig -d -m -p mac

(実機(M5Stack Core2)で動かす場合)

$ UPLOAD_PORT=/dev/cu.usbserial-01F05577 mcconfig -d -m -p esp32/m5stack_core2

(実機(M5Stack Basic、M5Stack Grey)で動かす場合)

$ UPLOAD_PORT=/dev/cu.usbserial-015F99BB mcconfig -d -m -p esp32/m5stack

4. node-red-mcu-pluginを使用する

既存のNode-REDの実行環境を壊さないために、Node-RED MCU Edition用の環境を作成する前提で手順を書きます。

(前提条件)

Node.js (v16.14.0)

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

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

4-2. node-red-mcu-pluginをインストールする

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

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

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

Node-RED起動時に以下のエラーが出力されます。

*** Error while loading node-red-mcu-plugin:
Failed to calculate correct patch path.
Please raise an issue @ our GitHub repository, stating the following information:
> require.main.path: /Users/kitazaki/node-red-mcu/node_modules/node-red
> utils.js: /Users/kitazaki/node-red-mcu/node_modules/node-red/node_modules/@node-red/registry/lib/util.js

node-red-mcu-pluginがパッチを適用するutils.jsが存在しないためにエラーが出力されているようです。
node_modules/node-redディレクトリで必要なモジュールをインストールします。

$ cd node_modules/node-red
$ npm install

もう一度、Node-REDを起動します。

$ cd ../..
$ node node_modules/node-red/red.js -u ./

サイドパネルに「MCU」タブが追加されます。

4-4. 「MCU」タブの設定をする

いつもの通り、Node-REDフローを作成します。

「MCU」タブの「Flows to build for MCU」でチェックボックスにチェックを入れます。

「MCU」タブの「MCU Build Configurations」で「Add config」を押します。

「Add config」を2回押して、シミュレータ用と実機(M5Stack)用の設定を追加します。
実機(M5Stack Core2)用の設定についてはプルダウンメニューから「ESP32|Espressif」「esp32/m5stack_core2」を選択します。
実機(M5Stack Basic、M5Stack Grey)用の設定についてはプルダウンメニューから「ESP32|Espressif」「esp32/m5stack」を選択します。
シリアルポート番号は手順2-6.で認識された値を入力します。