ESP32＋QuickJS＋Blocklyの例

2022/3/21に、ESP32＋QuickJSで初めて電子書籍を出版してから、細かな機能アップをたくさんしてきました。
その中でも、Blocklyへの対応が一番楽しかったです。

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

今回は、そのBlocklyでのスケッチ例をいくつか示したいと思います。なかなか、電子書籍への記載の追記のペースよりも、機能アップの方が楽しいので、反映が遅れがちでしたが、この例示が参考になってくれるとうれしいです。

Lチカ

一番単純なLチカです。M5StackモジュールはM5Stick-Cです。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.js

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);

RGBマトリクスLEDを手動で点灯

M5Stackモジュールは、M5Atom Matrixです。
ボタンを押すたびに、25個のRGBマトリクスLEDに、ランダムな色が増えていきます。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.js

var counter;

function colourRandom() {
  var num = Math.floor(Math.random() * Math.pow(2, 24));
  return '#' + ('00000' + num.toString(16)).substr(-6);
}


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

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

SDカードにあるMP3を再生

ボタンを押すと、MP3の再生を開始します。
M5Stack Core2を使っています。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.js

import * as audio from 'Audio';
import * as input from 'Input';
import * as utils from 'Utils';
audio.begin(audio.EXTERNAL_I2S);
audio.setPinout(12, 0, 2);

input.onButtonWasPressed(input.BUTTON_A, () => {
  audio.playSd('/g_07.mp3');
});

esp32.setLoop(() => {
  audio.update();
});

サーボを動かす

M5StickCとM5StickC用のServo Hatを使います。
ボタンを押すとサーボが動き出し、再度押すと停止します。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.js

var enable, count;


import * as ledc from 'Ledc';
import * as input from 'Input';
ledc.setup(1, 50, 16);
ledc.attachPin(26, 1);
count = 1500;
enable = false;

input.onButtonWasPressed(input.BUTTON_A, () => {
  enable = !enable;
});

esp32.setLoop(() => {
  if (enable) {
    ledc.write(1, count);
    count = (typeof count === 'number' ? count : 0) + 100;
    if (count >= 8500) {
      count = 1500;
    }
    delay(50);
  }
});

LCDに図形や文字を表示

M5Stack Core2を使います。
ボタンを押すと、表示カウンタがインクリメントされます。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.ns

var counter;


import * as lcd from 'Lcd';
import * as input from 'Input';
import * as utils from 'Utils';
lcd.fillScreen((utils.rgb2Number('#000000')));
lcd.drawLine(0, 0, 40, 40, (utils.rgb2Number('#ffffff')));
lcd.fillRect(50, 0, 40, 40, (utils.rgb2Number('#009900')));
lcd.fillRoundRect(100, 0, 40, 40, 5, (utils.rgb2Number('#ff6600')));
lcd.fillCircle(170, 20, 20, (utils.rgb2Number('#6600cc')));
lcd.setTextSize(2, 2);
counter = (typeof counter === 'number' ? counter : 0) + 0;
lcd.setCursor(0, 50);
lcd.println(('counter=' + String(counter)));

input.onButtonWasPressed(input.BUTTON_A, () => {
  counter = (typeof counter === 'number' ? counter : 0) + 1;
  lcd.fillRect(0, 50, (lcd.width()), (lcd.fontHeight()), (utils.rgb2Number('#000000')));
  lcd.setCursor(0, 50);
  lcd.println(('counter=' + String(counter)));
});

M5Core2の画面には以下のように表示されます。

MQTTで送受信

トピックに対するメッセージを受信すると、エコーバックでトピックに返します。
ボタンを押しても、トピックにメッセージを送ります。
事前に、mqtt.setServer(host, port)でMQTTブローカのURLを設定しておきます。

以下のようなJavascriptに展開されてM5Stackモジュールにアップロードされます。

main.js

import * as mqtt from 'Mqtt';
import * as input from 'Input';
mqtt.connect('TestClient');
mqtt.subscribe('TestTopic_M5Stack', () => {
  mqtt.publish('TestTopic_Response', ('echoback: ' + String(mqtt.getPayload().payload)));
});

input.onButtonWasPressed(input.BUTTON_A, () => {
  mqtt.publish('TestTopic_Response', 'Button pressed');
});

終わりに

まだまだ、いろんなことができそうで、日曜プログラミングのネタ探しにはちょうどよいです。

〇電子書籍とファームウェアのサポートサイト

以上