Node-RED MCU Editionを試してみた。（Windows版）


この記事は、Kitazakiさんの投稿をWindowsで行ったものです。(Windowsで動かしたメモです）
https://qiita.com/kitazaki/items/15cba2f4622bf3682083


# Node-Red MCU バージョンとは
GitHubのREADMEが情報源になります。

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

>リソースに制約のあるマイクロコントローラ(MCU)上で実行される Node-RED ランタイムの実装を紹介します。Node-REDは、「ハードウェアデバイス、API、オンラインサービスを新しく興味深い方法で配線するためのプログラミングツール」と自称する人気のあるビジュアル環境です。
>Node-REDはNode.js上に構築されているため、デスクトップコンピューターやRaspberryPiのようなシングルボードコンピューターなど、Node.jsが実行する場所で実行されます。Node.jsに依存しているため、Node-REDは、特に多くのIoT製品に見られ、メーカーコミュニティで人気のある低コストのMCUができない場所では実行できません。
>これらのMCUは、Moddable SDKのXS JavaScriptエンジンのおかげで、Node-REDで使用されているのと同じJavaScript言語を実行することができます。ただし、これらのMCUは、RAMがはるかに少なく、CPUパワーがはるかに少なく、Unix由来のOSの代わりにRTOSを備えています。その結果、それらは非常に異なる実装を必要とします。典型的なターゲットマイクロコントローラはESP32で、約280KBの空きRAMと160MHzのCPUクロックを備えたFreeRTOSを実行します。
>この実装は、Node-RED によって出力された JSON 記述を、MCU と互換性のある JavaScript オブジェクトに変換します。この実装では、Moddable SDK ランタイムで実行されている標準の JavaScript を使用します。ECMA-419 標準である ECMAScript® Embedded Systems API Specificationは、ピンハードウェアやネットワークへのアクセスなどのI/Oに使用されます。
>この取り組みは、MCUでNode-REDをサポートすることが可能かどうかを評価することを目的としています。その目標を達成するために、焦点は深さではなく幅にあります。Node-REDには豊富な機能があり、うまく実装するにはかなりの時間がかかります。この概念実証作業には、次の特徴があります。
>基本構造を実装
>* アーキテクチャ全体の調査に役立つコアノードをサポート
>* ノード RED を変更する必要はありません
>* 効率に過度に関心がない
>効率はリソースに制約のあるデバイスに不可欠ですが、まだ優先事項ではありません。MCUでNode-REDをサポートすることが現実的かどうかを判断するという現在の目標では、プロジェクトは最適に実行されるのではなく、実行する必要があります。
>Microsoft Edgeで翻訳

と書かれています。ので
1. NodeREDからJavaScriptで出力。
1. マイコン(MCU)でJavaScriptをModable SDKのXS JavaScriptエンジンで実行
という手順になります。

# 試した環境
* M5Stack Core2
* Windows10
* Visual Studio Community 2022
<!-- 
* Python3.9以降
* Git
-->
# インストール
## 1. Moddable SDKをインストールする。

https://github.com/Moddable-OpenSource/moddable#esp32-by-espressif

### 1-1. Microsoft Visual Studio 2022 Community installerをダウンロードし、インストール
https://www.visualstudio.com/downloads/

C++を選択、個別コンポーネントの”Windows 10 SDK (10.0.19041.0)”を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/0d575d8b-7db8-babd-64fa-1102a6a76ea1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/dd00fffd-1d07-3481-3946-d162e2a55203.png)

### 1-2. Moddableのリポジトリを置くためのフォルダを作成、ダウンロード

~~Profile(C:\Users\\\<your-user-name>)の下にProjectsフォルダを作製し~~、任意のフォルダを作成し、GitHubからリポジトリを取得する。

:::note warn
フォルダ名が長いとビルド時にエラーが発生します。
:::

```
mkdir c:\pjt
cd \pjt
git clone https://github.com/Moddable-OpenSource/moddable
```
### 1-3. 環境変数（USER）を設定。
検索で"環境変数の編集"

ユーザー環境変数(上段)に[新規]ボタンで項目を追加
名前：MODDABLE
値：c:\pjt\moddable
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/052706d7-4ce1-b070-138e-5a638bed75ed.png)

Pathに追加。(Path)を選択して編集で値を追加
値：c:\pjt\moddable\build\bin\win\release

### 1-4. ビルド
"x86 Native Tools Command Prompt for VS 2022" command line console.を起動して、Moddable　Command Lineツールとデバッガーをビルド　(x64ではない）

```
cd %MODDABLE%\build\makefiles\win
build
```

:::note info
```\# link xsbug.exe``` で表示されて無応答になったら、数秒して[Enter]キーを押してみましょう。
~~build途中で無応答になったので、Ctrl+Cで一旦停止して、再```build```したらすぐに終わった。~~
:::
### 1-5. xsbug debugger をコマンドラインから起動
```
xsbug
```
こんな画面が起動するか確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/d98be1c3-1cf7-b507-425d-6a6adc50f853.png)

### 1-6. サンプルで動作確認
helloworld サンプルで動作確認
```
cd %MODDABLE%\examples\helloworld
mcconfig -d -m -p win
```
<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/42f4cf2c-bbdd-bea4-196a-aeadf971e967.png' height='24' />を押して実行するとCONSOLEに”Hello, world - sample”って表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/592aad7d-d3f7-da72-b586-6afc0641187a.png)

別サンプルを動かしてみます。
```
cd %MODDABLE%\examples\piu/balls
mcconfig -d -m -p win
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/8793ef91-2919-95e1-1034-874e57446acd.png)


## 2. 実機（M5Stack Core2)で動作させる。
M5Stack Core2(ESP32)で動作させるために、ESP32用のビルド環境を構築します。
ESP32なのでこちらに沿ってインストール(Platform identifier:esp32/m5stack_core2)

https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/devices/esp32.md

### 2.1 USB-UARTドライバーのインストール
M5Stack Core 2は、https://docs.m5stack.com/en/core/core2 のUSB Driverからダウンロードして、インストール。インストールしたらデバイスマネージャで接続を確認(COMxを確認)

:::note info
今回は古いCore2なので"CP210x_VCP_Windows"
これはx64
:::

### 2.2 ESP-IDFをインストールする
#### 2.2.1 ダウンロード
ESP-IDF v4.4.3 (commit 6407ecb) が必要。
https://dl.espressif.com/dl/esp-idf/?idf=4.4 から"ESP-IDF v4.4.3 - Offline Installer Windows 10,11" をクリック

#### 2.2.2 インストール
"Full Instllation"を選択
gitは"C:\Espressif\frameworks\esp-idf-v4.4.3"にクローンされた。

:::note alert
Lognpath を有効にするとNode-red MCU PlugInが動きません。Pluginでない版は動きます。
間違って有効にしたら、入れ直す。
1. アプリと機能から　"ESP-IDF Tools Offline 4.4.3"をアンインストール
2. レジストリHKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystemの[LongPathsEnabled]を0にセット
3. 再起動
4. c:\Espressif フォルダを削除
5. 再度インストールします。
:::


#### 2.2.3 環境変数の設定
変数名：IDF_PATH
値：C:\Espressif\frameworks\esp-idf-v4.4.3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/3843396d-84fe-4717-c2b7-7be5dde64575.png)

#### 2.2.4 ESP-IDFのインストール
"x86 Native Tools Command Prompt for VS 2022" command line console.を起動する(開いている場合はいったん閉じて、再度開く）。
PythonのPATHを通すために```idf_cmd_init.bat```を実行
```
cd %IDF_PATH%
%IDF_TOOLS_PATH%\idf_cmd_init.bat
install.bat
```

#### 2.2.5 試し
```
cd %MODDABLE%\examples\helloworld
mcconfig -d -m -p esp32/m5stack_core2
```
他の例も試してみましょう。x86 Native Tools Command Prompt を再度開いて動きます。（Pythonの環境は自動で設定されるみたいですね）
```
cd %MODDABLE%\examples\piu/balls
mcconfig -d -m -p esp32/m5stack_core2
```

# NodeRED MCU Editionを使用する。

@kitazaki さんのをそのまま実行します。
## 3. Node-RED-MCU plugin
### 3.1 Install
パレットからはインストールできなかったのでNodejsのコマンドプロンプトで実行
```
npm install https://github.com/ralphwetzel/node-red-mcu-plugin
```
### 3.2 試し
Node-REDを起動すると"Node-Red MCU"のタブが
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/fae71bd0-564e-f37a-9479-993b0c6a481a.png)
1秒ごとにTimeStampをDebugに送るFlowを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/68c14238-e7e8-cd22-bcf3-6482c93d0be4.png)
フロー１にチェックして、[Add config]ボタンをクリック
諸々設定して[BUILD]ボタンを押すとコンパイル＆インストールが始まります(実機を接続しておくこと）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/f31a5875-a7ca-cb85-664a-014f0fa84720.png)
[Console Monitor]タブにすると見れます。(日本語は化けますね。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/6ee4a4dc-2d35-9c0d-81bf-9a4d3a078814.png)

インストールが終わると実行が始まりました。デバッガーで動作が見れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/44e84702-a495-97ec-e32c-50bcdd647bcf.png)
### 3.3 Dashboardを試す。
#### Install
パレットから"node-red-dashboard"を普通にインストールします。
#### Flowの作成
Buttonを2とTextを作成します。ラベルなど日本語はなるべく避けるようにします。
Button1を押すとTextにButton-A、Button2を押すとTextにButton-Bを表示するFlowです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/4105f404-f53b-9422-0399-29e5dd5790a3.png)

#### Windowsマシンで確認
MCU　EditionのFlowにチェックが入っているとデプロイ（表示）されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/36b28793-78df-6fe3-9b08-ee8c01357e24.png)
#### M5StackCore2で表示
”Show More Options”を開いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/5bf52ec0-6b04-d716-b0d8-0d0712072004.png)

Creation Paramsは次の値
```
{
    "static": 0,
    "chunk": {
        "initial": 65536,
        "incremental": 0
    },
    "heap": {
        "initial": 4096,
        "incremental": 0
    },
    "keys": {
        "available": 128
    },
    "stack": 600
}
```
UI SupportをEnableに設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/43067cbd-f577-2798-42d8-12c6543f775b.png)

##### BUILD & RUN
BUILDしてみる.
動いた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/41a1293e-1c5d-7237-7674-4bff395ae450.png)