ESP32をJavaScriptで動かすModdable SDK

この記事は何？

マイコン向けJavaScript開発環境 “Moddable SDK” をESP32用としてmacOS上に構築する解説記事です。

Maddable-SDK

Moddable SDKはピュアなJavaScript == ECMAScript でマイコンをプログラムする開発環境です。現在のところターゲットマイコンはESP8266,ESP32,(Gecko)です
Moddable-SDKはソースコードデバッガ、シミュレータを装備しターゲットマイコン上でREPL (Read-Eval-Print Loop) をも動かせる強力な開発環境です。
Moddable提供元のインストールガイドに沿ってModdable SDKをビルドしたとき、コンパイルエラーが発生したりpythonモジュールの不足でSDKの動作が止まることがありました。その都度ググって対策を講じて不具合なく動くようになりました。この記事はその時のメモを元にした、エラー無く一気通貫でModdable SDKの環境をセットアップする解説です。

macOS, Linux用のインストーラ（シェルスクリプト）を作りました。
- macOS用 Moddable SDK 簡単インストーラ
- Linux用 Moddable SDK 簡単インストーラ
Moddable-SDKでESP32単体、M5StackをECMAScriptでプログラムした実験記事です。
- ESP32をjavascriptでプログラミング
- M5Stackをjavascriptでプログラミング

ここから本編

JavaScript(ECMAScript)でシームレスにIoTを開発する野望

先年、Raspberry Pi からNode.jsとjohnny-fiveでESP8266とWifi通信させて簡単なIoT実験を行いました。このとき、実験システムのプログラムはRaspberry Pi側（サーバ）はNode.jsでJavaScriptを用い、ESP8266側（クライアント）はarduinoのC++を用いました。

ESP8266側でJavaScriptが使えれば２つの言語でプログラムする手間がなくなり便利になるだろうと感じました。また、Web系のフロントエンド・エンジニアがIoTシステムを作るときデバイス側のマイコンがJavaScriptでプログラミングできたら、きっとハードウェア・エンジニアの思いも及ばぬモノを作り上げるのではないかとも思ったりもしました。

…と、言うことでマイコンでJavaScript…正式にはECMAScriptが稼働するオープンソースの環境はないか探索を始めました。

JavaScriptのマイコン開発環境は色々あります。micro:bit, ESPruino, Sparcle, Tessel, obniz などがありますが、特定のマイコンボードに依存せずオープンソースかつフルスペックのECMAScriptが動くものは見つけられませんでした。

Node.js + Johnny-five を使えばホスト側（サーバ側）のJavaScriptプログラムだけでマイコンを制御できますが、マイコンが自律稼働しつつホストと連携するようなシステムは構成できません。

ポットキャスト Rebuild.fm 214回の”Moddable”の話題

探索をしばし放置していましたが、何気に聞いたポッドキャストrebuild.fm 214回 (1:52:12) の @basuke さんのお話に釘付けになりました。マイコンで標準JavaScript === ECMAScriptが動く環境があるとのことでした。開発元は Moddable Tech. INC. で開発環境”Moddable SDK”はオープンソースで提供されているとのことです。

さっそく、Moddableのwebサイトやmoddableのgithubリポジトリを開いて見ました。何かすごそうな予感。

moddableのドキュメントを読みながらModdable SDKをビルドし動かして見ると、予想を遥かに上回る環境。ホスト上でマイコンのシュミレータが動く。ソースコード・デバッガがある。ECMAScriptの言語仕様を満足している。等々。これを使えば野望を実現できます。　図１

図１

参考：Moddable Tech. INC.が目指しているところ

Moddableの開発者でありPrincipalのPeter HoddieがMediamに、その目指すところを書いています。

原文：Evolving IoT to put the user in control
翻訳：Evolving IoT to put the user in control（google翻訳）

１．準備

ホストマシン
Moddable SDKを構築したホストマシンと環境構築に用いたソフトウェアは次のとおりだが、ModdableはLinuxやWindowsにも対応している。
1. Mac-mini　macOS ver.10.14.1 Mojave
2. Xcode 10.1
3. Python 2.7.10
4. git tool
実験回路
Moddable社純正ボード ESP32/moddable_zero の互換回路図２
（同様の ESP32 + TFT 構成の M5Stack を実験回路として利用可能）

図２
1. ESP32マイコンボード
  “ESP32 DevKit” or 互換ボードを使用。
  1. 秋月電子通商
    ESP32-DevKitC ESP-WROOM-32開発ボード
  2. Aliexpress
    esp32 development board
2. TFT液晶
  ILI9341コントローラ搭載のSPI接続のものでタッチスクリーン付きのものを使用。
  1. Aitendo
    2.8インチ液晶モジュール(SPI)タッチスクリーン付
  2. Aliexpress
    TFT液晶 ILI9341コントローラタッチスクリーン付
3. 配線接続
  1. 参照ページ
    Display examples using Moddable SDK の ESP32のwiring guideを参照。
  2. ピン接続表 / 実体配線図　図３
    図３
    
    配線接続の注意
    ESP32 DevKit C にはGNDとCMDのピンがあり基板上のピン表記の文字が小さくつぶれていてGNDとCMDはよく見ないと誤認する。

２．Moddable SDK 構築

拙作 Moddable SDK 簡単インストーラ（mac用、Linux用あり）を用いれば以下の操作が全自動で実行されます。

参照ページ
1. Github
  Moddable SDK-Getting Started
2. YouTube
  Getting Started with the Moddable SDK and the ESP8266
「ターミナル」アプリケーションを起動。図４
図４
Moddable SDK XS環境のビルド
アップローダ、シミュレータ、デバッガなどのツール・アプリケーションをビルドします。
1. Projectフォルダの作成とソースパッケージのクローンを得る。
```
$ cd ~
$ mkdir Projects
$ cd ./Projects
$ git clone https://github.com/Moddable-OpenSource/moddable
```
2. 環境変数設定
  nanoエディタで動作環境設定ファイル ~/.profileを開く。
```
$ nano ~/.profile
```
  次の２行を追加記述し保存。nanoエディタの使い方
```
export MODDABLE="/Users/$USER/Projects/moddable"
export PATH="$MODDABLE/build/bin/mac/release:$PATH"
```
3. 環境変数設定を有効にするため、ここで一旦「ターミナル」を閉じて再度開く。
  printenvコマンドを実行し上記２の環境変数が設定されているか否かを確認する。
  ~/.profileが正しく記述されているにもかかわらず環境変数が設定されない場合は、~/.profileではなく~/.bash_profileに記述する。
4. ビルドツールXcodeの事前準備
  XcodeをGUIアプリケーションが生成できるように設定する。
```
$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
```
  “Moddable SDK – Getting Started”にはこの操作の記述がないがxcodeがコマンドラインツールやiOSアプリ生成の動作設定になっていることがあるので確実を期すためやっておく。
5. ビルド
```
$ cd $MODDABLE/build/makefiles/mac
$ make
```
6. デバッガ xsbug の起動確認
  次のようにコマンド入力するとデバッガxsbugが開く。図５
```
$ open $MODDABLE/build/bin/mac/release/xsbug.app
```
  図５
7. シミュレータの起動確認
  1. 次のようにコマンド入力するとデバッガxsbugの表示内容が変化する。図６
    これは、helloworldのコードが実行状態になりブレークポイントで実行が中断している状態。
```
$ cd $MODDABLE/examples/helloworld
$ mcconfig -d -m -p mac
```
  2. xsbugのツールバーの”▶”（実行ボタン）をクリックするとコードが実行される。
  3. xsgugのconsol欄に「hello, world – sample」と表示される。図７
  4. 同時にシミュレータ Screen Test が表示される。図８
    ただし、スクリーンへの描画はプログラムされていないので何も表示されない。
  5. Screen Test のメニュー size からスクリーンの縦横サイズを変更することができる。図９
    
    図６
    
    図７
    
    図８
    
    図９
USB-Serialドライバのインストール
ESP32 DevKit 搭載のCP210x用のドライバをインストールします。
1. ダウンロードとインストール
  Silicon Labsのドライバ配布ページ「CP210x USB – UART ブリッジ VCP ドライバ」からmacOS用ドライバをダウンロードし展開してインストールする。
  https://jp.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers
2. シリアルポート生成の確認
  ESP32 DevKit をUSBポートに接続して次のようにコマンド入力し /dev/cu.SLAB_USBtoUART が表示されることを確認する。
```
$ ls /dev/cu.*
```
EPS-IDF環境のセットアップ
ESP-IDFはESP32用のC/C++開発環境です。バイナリコードのビルドに用います。
1. esptoolのインストール
  1. esptoolをダウンロードして展開する。
    https://github.com/igrr/esptool-ck/releases/download/0.4.12/esptool-0.4.12-osx.tar.gz
  2. 展開生成されたesptoolフォルダをesp32と名前変更する。
  3. esp32フォルダをホームフォルダ(~/)配下に移動する。
  4. と、“Moddable SDK – Getting Started”に書かれているがesptoolにアクセスしている様子がないので、単純にホームフォルダ配下にesp32フォルダを作るだけで良い。
2. ESP32用C/C++コンパイラのインストール
  1. ESP32 GCC toolchainをダウンロードして展開する。
    https://dl.espressif.com/dl/xtensa-esp32-elf-osx-1.22.0-80-g6c4433a-5.2.0.tar.gz
  2. 展開生成された xtensa-esp32-elf フォルダを ~/esp32 フォルダ配下に移動する。
3. ESP-IDFのインストール
  1. ESP-IDF githubリポジトリのクローンを~/esp32フォルダ配下に生成する。
```
$ cd ~/esp32
$ git clone --recursive https://github.com/espressif/esp-idf.git
```
  2. Version 3.1 を使う設定をする。
```
$ cd esp-idf
$ git checkout release/v3.1
$ git submodule update
```
  3. 環境変数設定
    次の行を~/.profile に追加記述する。
```
export IDF_PATH="/Users/$USER/esp32/esp-idf"
```
  4. 環境変数設定を有効にするため「ターミナル」を閉じて再度開く。
  5. Pythonパッケージマネージャ pip をインストールする。
```
$ cd ~/esp32
$ sudo easy_install pip
```
  6. ESP-IDFで用いるpythonパッケージをインストールする。
```
$ python -m pip install --user -r $IDF_PATH/docs/requirements.txt
$ sudo pip install esptool
```
    “Moddable SDK – Getting Started”にはesptoolのインストールは書かれていないがプログラムアップロード時に「esptool.pyが無い」とエラーが出たのでここでインストールしておく。
  7. 環境変数設定
    次の行を~/.profile に追加記述する。
```
export PATH=$PATH:$HOME/esp32/xtensa-esp32-elf/bin
export UPLOAD_PORT=/dev/cu.SLAB_USBtoUART
```
  8. 環境変数設定を有効にするため「ターミナル」を閉じて再度開く。
  9. 【蛇足】ESP-IDFを単独で使ってC/C++でESP32をプログラミングできる –> ESP-IDF programming guide

３．動作テスト

bars
1. barsフォルダに移動。xsbugを起動
```
$ cd $MODDABLE/examples/piu/bars/
$ open $MODDABLE/build/bin/mac/release/xsbug.app
```
  xsbug.appのエイリアスを生成しアプリケーションフォルダに格納してマウスクリックでxsbugを起動する方法でも可。
2. シュミレータにアップロードし実行
```
$ mcconfig -d -m -p mac
```
  ScreenTestが開きModdable SDK開発メンバーのバーコードと写真がスクロール表示される。図１０
  
  図１０
3. ブレークポイント
  1. エディタでbarsフォルダ配下のmain.jsを開く
  2. 14行目にdebugger;を追加記述しファイル保存する。
```
*/
debugger;
import {} from "piu/MC";
```
  3. シュミレータで実行すると、ブレークポイント（debugger;と記述した行）でプログラムの実行が一時停止する。
    Screen Testが表示されているときは表示がフリーズする。
    Screen Testが表示されていないときは何も起こらない。
  4. xsbugツールバーの”▶”（実行ボタン）をクリックするとプログラムが実行され
    Screen Testへの描画が行われる。
  5. debugger;行をコメントアウトしてファイル保存する。(ブレークポイントの解除)
```
*/
// debugger;
import {} from "piu/MC";
```
4. マイコンボードにアップロードし実行
  1. 実験回路のESP32 DevKit CをUSBポートに接続する。
  2. アップロード/実行
```
$ mcconfig -d -m -p esp32/moddable_zero         ;# M5Stackを用いる場合は　esp32/m5stack とする
```
    実験回路のTFT液晶に写真などがスクロール表示される。図１１
    
    図１１
    
    アップロードエラーとなる場合は、再度mcconfigコマンドを投入する。それでもダメな場合は基板のボタン操作でプログラミングモードに遷移させたり、USBコネクタを抜き差しした後mcconfigコマンドを投入する。

４．ビルドエラー対策

~/Project/moddable/ や ~/esp32 フォルダ配下に正しくファイル群をダウンロードしているか確かめる。
環境変数が正しく設定されているか確かめる。
mcconfig実行時に ImportError: No module named ……… が表示されたときはSDKに必要なPythonモジュールがインストールされていないので手動でインストールする。
```
$ sudo pip install esptool
$ sudo pip install future
$ sudo pip install pyserial
$ sudo pip install cryptography
```

５．mcconfig のパラメータ

mcconfig [manifest] [-d] [-f format] [-i] [-m] [-o directory] [-p platform] [-r rotation] [-v] \
[ssid="wifi_ssid"] [password="wifi_password"] [screen=screen_driver] [touch=touch_driver]

manifest: the manifest file. Defaults to the manifest.json file in the current directory or in the parent directory of the current directory.
-d: to build a debug instrumented version.
-f format: to select the screen pixel format: gray16, gray256, rgb332, rgb565be or rgb565le. Defaults to rgb565le. See png2bmp here under.
-i: to build a release instrumented version.
-m: to run make automatically, otherwise mcconfig just generates the make file.
-o directory: the output directory. Defaults to the $MODDABLE/build directory.
-p platform: to select the platform: esp, esp32, win, lin, mac, gecko/mighty, gecko/giant, gecko/blue or gecko/thunderboard2. Defaults to the host build platform:mac, win or lin.
-r rotation: to select the screen rotation: 0, 90, 180 or 270. Defaults to 0. See png2bmp here under.
-v: to trace all commands executed by make
ssid="wifi ssid" and password="wifi password": to specify network credentials and connect to the network before launching the app.
screen=screen_driver and touch=touch_driver: to specify a screen or touch driver. See the examples readme for more information on screen and touch driver configuration.
$ mcconfig -d -m -p mac

 -d:デバッグ機能付きで -m:自動的にアップロード・パッケージを作る -p mac:アップロード先はmacのシミュレータ

$ mcconfig -d -m -p ESP32/moddable_zero

 -p ESP32/moddable_zero:アップロード先は ESP32/moddable_zero ボード

$ mcconfig -d -m -p ESP32/moddable_zero　-r 90

 -r 90: TFT-LCDの描画を90度回転

$ mcconfig -m -p ESP32/moddable_zero　

　デバック機能無しでビルドしアップロードする。
　アップロードが終了するとmcconfigはシリアル・コンソール・モードに遷移する。　コンソール・モード解除は CTRL+]

５．参考ビデオ

字幕をオンにすると簡単な解説が見れます。

６．M5Stackをターゲットにする。

ここまでのModdable SDKの設定ではホストにESP32 DevKit などを複数接続しても１個しか識別しませんのでM5StackだけをUSBボートに接続します。また、M5StackのUSB-SerialはESP32 DevKitと同じCP210xチップを用いているのでデバイスドライバのインストールは不要です。
Moddable SDK はM5Stackのデバイス定義ファイル(ESP32とTFTなどの外部デバイスとの接続情報を記述したファイル)を標準でもっておりターゲットデバイスにesp32/m5stackを指定すればM5Stackのアップロードモジュールのビルドが行われます。
下はサンプルプログラムbarsがM5Stackで動いている様子です。
M5StackでLチカをやってみました。

ー来歴ー

2018.12.19	kimio kosaka	macOS, Linux 全自動簡単インストーラを作成 githuｂにて公開
2018.12.13	kimio kosaka	ubuntu-Linux用インストール・シェルスクリプトを追加
2018.12.12	kimio kosaka	macOS用インストール・シェルスクリプトを追加
2018.12.07	kimio kosaka	M5Stackに関する情報を追加
2018.12.05	kimio kosaka	導入解説記事をアップロード
2018.12.04	kimio kosaka	導入解説記事の制作と実証テスト
2018.12.01	kimio kosaka	Middable SDK 環境構築開始　手順不具合記録
2018.11.30	kimio kosaka	Moddable SDKの存在を知る

MENU

この記事は何？

Maddable-SDK

関連記事

ここから本編

JavaScript(ECMAScript)でシームレスにIoTを開発する野望

ポットキャスト Rebuild.fm 214回の”Moddable”の話題

参考：Moddable Tech. INC.が目指しているところ

１．準備

２．Moddable SDK 構築

３．動作テスト

４．ビルドエラー対策

５．mcconfig のパラメータ

５．参考ビデオ

６．M5Stackをターゲットにする。

ー来歴ー

記事の引用についてはこちらをご覧ください

Make

Make

図６	図７
図８	図９

MENU

ESP32をJavaScriptで動かすModdable SDK

この記事は何？

Maddable-SDK

関連記事

ここから本編

JavaScript(ECMAScript)でシームレスにIoTを開発する野望

ポットキャスト Rebuild.fm 214回 の”Moddable”の話題

参考：Moddable Tech. INC.が目指しているところ

１．準備

２．Moddable SDK 構築

３．動作テスト

４．ビルドエラー対策

５．mcconfig のパラメータ

５．参考ビデオ

６．M5Stackをターゲットにする。

ー 来歴 ー

記事の引用についてはこちらをご覧ください

Make

Make

ポットキャスト Rebuild.fm 214回の”Moddable”の話題

ー来歴ー