More than 1 year has passed since last update.

ESP32をBlocklyで動かしてみた

Last updated at 2022-04-09Posted at 2022-04-08

以前、以下の投稿で、ESP32上でMakecodeを使ったノーコードプログラミングを動作させました。

・MakeCode for M5Core2 を作った
・MakeCode for micro:bitで作ったプロジェクトをM5Atomで動かす

これをベースに、いろいろ拡張しようと思ったのですが、いろいろ制限がきついので、いっそのこと、素のBlocklyをベースにノーコードプログラミング環境を作ろうかなあと思いました。
UIFlowもBlocklyをベースにしているようで、同様のことを、自分の好きなように作りこんでいこうと思います。

Blockly | Google Developers

ESP32側は以下のファームウェアを使っています。Javascript実行環境をESP32上に構築したもので、手軽にIoTができるようにしています。

電子書籍：M5StackとJavascriptではじめるIoTデバイス制御

全体の構成

全体構成は以下の通りです。

あらかじめJavascript実行環境のファームウェアを、ESP32に書き込んでいます。この書き込みは最初の一回のみです。

①Blockページの表示
　ESP32に書き込んでおいたファームウェアには、Webサーバ機能を搭載しており、BlocklyのWebページを提供しています。それをブラウザから表示します。
②ノーコードプログラミング
　ブラウザ上から、Blocklyページで、ブロックを組み合わせてノーコードプログラミングを行います。ScratchやMakeCodeなど、ブロック操作は一般的になっていますので、特に違和感なく操作できるかと思います。
③Javascript生成＋アップロード
　「Show & Upload Javascript」ボタンを押下することで、作成したブロックがJavascriptコードに変換され、ESP32にアップロードされます。ESP32では、受け取ったJavascriptコードをSPIFFSに保存します。
④Javascript実行
　自動的にJavascript実行環境がリスタートし、SPIFFSに保存したJavascriptコードを実行します。後程示す例では、LEDを1秒間隔で点滅させてます。

SPIFFSに書き込んだ内容は、不揮発メモリへの保存であるため、ESP32電源Off/On後も覚えています。

BlocklyのWebページは以下のような感じです。ESP32がWebサーバになっているので、別途Webサーバを立ち上げる必要はありません。

以下のページを参照し、Blocklyタブを選択後、Create Workspaceボタンを押すことで直接触れられます。
※ただし、ESP32にアップロードする場合は、HTTPとHTTPSでMixed Contentsエラーとなるため、解除するかローカルにダウンロードして直接index.htmlファイルをブラウザから参照する必要があります。

ブロック例（LED自動点滅）

以下例を示します。M5StickCを利用します。

Javascript実行環境で用意してある関数名をそのままブロックにしているため、まだまだ、初めての方にはわかりにくいかと思いますが、Blocklyのカスタムブロックは結構簡単に作れるので、今後ブロックの追加やリバイスをしていこうと思います。

簡単に説明すると、

・以降でGpioライブラリを利用するので、Gpioライブラリをインポートしています。
・Arduinoでいうところの、pinMode()です。LEDは10番にある想定です。
・JavascriptのsetInverval()です。Arduinoでは一般的ではないですが、Javascriptでは超一般的です。1000秒間隔で実行するロジックを定義しています。
・ArduinoでいうところのdigitalWrite()でLEDをOnにしています。
・Arduinoでいうところのdelay()で、500msecのウェイトを入れています。
・ArduinoでいうところのdigitalWrite()でLEDをOffにしています。
・Arduinoでいうところのdelay()で、500msecのウェイトを入れています。
・これをsetIntervalで繰り返し。

これがJavascriptに変換されると以下になります。

import * as gpio from 'Gpio';
gpio.pinMode(10, gpio.OUTPUT);
setInterval( () => {
  gpio.digitalWrite(10, gpio.LOW);
  delay(500);
  gpio.digitalWrite(10, gpio.HIGH);
  delay(500);
}, 1000);

Javascriptをご存じの方は説明はいらないですね。。。とはいっても、ブロックから勝手にJavascriptに変換されて、勝手にESP32にアップロードされて、勝手に実行されるので、内容は気にしなくてもよいでしょう。

ブロック例（LED手動点滅）

ついでに、もう一つ例を示します。
M5Atom Matrixを利用します。ボタンを押すたびに、LED点灯の数が増えていきます。

2つのブロックの塊があります。1つ目は初期化処理、2つ目はボタンが押されたときの処理です。

初期化処理
・以降でInputとPixelsとUtilsライブラリを利用するので、それぞれのライブラリをインポートしています。
・5x5のRGBマトリクスLEDの初期化処理です。27番PINに接続されています。5x5の計25個のLEDがあります。
・いったん、すべてのLEDを消去します。

ボタンが押されたときの処理
・変数counterが示す番号のLEDを赤色で点灯させます。
・変数counterを１インクリメントします。
・もし変数counterが25以上になったら、それ以上LEDは搭載されていないので、以降で示す追加の処理をします。
・変数counterを0にします。
・すべてのLEDを消去します。

これがJavascriptに変換されると以下になります。

var counter;


import * as input from 'Input';
import * as pixels from 'Pixels';
import * as utils from 'Utils';
pixels.begin(27, 25);
pixels.clear();

input.onButtonWasPressed(input.BUTTON_A, () => {
  pixels.setPixelColor(counter, (utils.rgb2Number('#ff0000')));
  counter = (typeof counter === 'number' ? counter : 0) + 1;
  if (counter >= 25) {
    counter = 0;
    pixels.clear();
  }
});