M5StickC Plusとp5.jsを接続してWebブラウザで図形を描画する

スポンサーリンク
Processing

先日、「M5StickC Plus」と「Processing」というビジュアルデザイン用のプログラム開発環境をBluetoothで接続し、M5StickC Plusで取得したデータに基づいて、パソコンの画面上に図形をアニメーション表示してみました（記事は こちら）。
また、Processingの代わりに「p5.js」というJavaScriptライブラリを使うことで、パソコンに特別なアプリをインストールすることなく、Webブラウザで図形をアニメーション表示できることも確認しました（記事は こちら）。

今回は、「M5StickC Plus」と「p5.js」をBluetoothで接続し、M5StickC Plusで取得したデータに基づいて、Webブラウザで図形をアニメーション表示してみたいと思います。
p5.jsとマイコンデバイスをBluetooth接続するために「p5.ble.js」というJavaScriptライブラリも使います。


「p5.ble.js」公式サイトのプログラム例（こちら）と こちら のブログ記事を参考にして、プログラムをつくってみました。

M5StickC Plus用のスケッチは以下のとおりです。

#include <M5StickCPlus.h>
#include "BLESerial.h"

BLESerial bleSerial;

float accX = 0.0f;
float accY = 0.0f;
float accZ = 0.0f;
float x = 120.0f;
float v = 0.0f;

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
  bleSerial.begin("ESP32");
}

void loop() {
  M5.update();
  M5.IMU.getAccelData(&accX, &accY, &accZ);
  v += accY;
  x += v;
  if(x>=230.0) { v=0.0; x=230.0; }
  if(x<=10.0)  { v=0.0; x=10.0; }
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.fillCircle((int)x, 68, 10, YELLOW);
  bleSerial.println((int)x);
  delay(20);
}

こちら の記事で紹介したスケッチに対し、使用するBluetooth通信用ライブラリを「BluetoothSerial.h」から「BLESerial.h」に変更しただけのものです。
「BLESerial.h」ライブラリは こちら からインストールできます。

このスケッチをM5StickC Plusに書き込んでおきます。

以下のHTMLファイルを準備します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>p5.js & p5.ble.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/p5ble@0.0.7/dist/p5.ble.js"></script>
<script src="ble.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>

こちら の記事で紹介したHTMLファイルに対し、「p5.ble.js」「p5.dom.min.js」というふたつのライブラリ、および「ble.js」「sketch.js」というふたつのJavaScriptプログラムの読み込みを追加したものです。
「ble.js」と「sketch.js」は、これからつくるプログラムです。

「ble.js」の内容は以下のとおりです。

const serviceUuid = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";
const txCharacteristic = "6e400002-b5a3-f393-e0a9-e50e24dcca9e";
const rxCharacteristic = "6e400003-b5a3-f393-e0a9-e50e24dcca9e";

let myCharacteristic;
let myBLE;
let receiveText;

function bleSetup() {
  myBLE = new p5ble();

  const connectButton = createButton("Connect and Start Notifications");
  connectButton.mousePressed(connectAndStartNotify);

  const stopButton = createButton("Stop Notifications");
  stopButton.mousePressed(stopNotifications);
}

function connectAndStartNotify() {
  myBLE.connect(serviceUuid, gotCharacteristics);
}

function gotCharacteristics(error, characteristics) {
  if (error) console.log("error: ", error);
  for(let i=0; i<characteristics.length; i++) {
    if(rxCharacteristic == characteristics[i].uuid) {
      myCharacteristic = characteristics[i];
      myBLE.startNotifications(myCharacteristic, handleNotifications, "string");
    }
  }
}

function handleNotifications(data) {
  receiveText += data;
  if (data === "\n") {
    getValue(receiveText);
    receiveText = "";
  }
}

function stopNotifications() {
  myBLE.stopNotifications(myCharacteristic);
}

プログラムに記載している「serviceUuid」「txCharacteristic」「rxCharacteristic」については、M5StickC Plus用スケッチで使用した「BLESerial.h」ライブラリにも同じ値が書き込まれており、この情報を使って両者を接続するようです。

「sketch.js」の内容は以下のとおりです。

let xpos = 480;

function setup() {
  bleSetup();
  createCanvas(960, 540);
}

function draw() {
  background(0,0,0);
  fill(255,255,0);
  ellipse(xpos, 270, 80, 80);
}

function getValue(value) {
  xpos = value * 4;
}

こちら の記事で紹介したプログラムをp5.js対応に修正した上で、シリアル通信のための処理を削除し、Bluetooth通信のための処理を追加しています。

HTMLファイル、「ble.js」、「sketch.js」の計3ファイルをWebサーバの同一フォルダに設置します。

WebブラウザでHTMLファイルを開きます。
M5StickC Plusの電源が入っている状態で「Connect and Start Notifications」ボタンをクリックすると、接続先を選択するウィンドウが表示されます。
「ESP32」を選択して「ペア設定」をクリックすると、M5StickC Plusの傾きにあわせて画面上の○が左右に移動するようになります。

Androidスマホでも同様に操作できました。

M5StickC Plusで取得したデータに基づいて、Webブラウザで図形をアニメーション表示することができました。

なお、今回のプログラムでは、Webブラウザの「Web Bluetooth」という仕組みを使っているのですが、「Web Bluetooth」はSSL化されたWebサイト（https://でアクセスするサイト）でなければ動作しません。よってWebサーバに設置する3ファイル（HTMLファイル、「ble.js」、「sketch.js」）はSSL化した場所に設置する必要があります。

また、「Web Bluetooth」は現状、Google Chromeなどの一部のWebブラウザでしか動かすことができません。
私は普段、MacintoshでSafariを利用しているのですが、Safariではこのプログラムを動かすことはできず、Mac版Chromeをインストールして使う必要があります。

その上、iOS版chromeでも「Web Bluetooth」は動かないため、現時点では、iPhoneやiPadでこのプログラムを動かす手段はありません。
ネット検索したところ、「Bluefy」というiOS用Webブラウザをつかえば利用可能との情報を見つけたので試してみましたが、今回のプログラムは動きませんでした。

つくったプログラムをWebブラウザで動かすことができれば、端末や使用環境に依存せずに使えるので大変便利なのでは？と期待していましたが、実際にはいろいろと制約が多く、思っていたほど活用できなさそうな気もしてきました。

 

なお、私がM5Stack、M5StickCの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。


ごく基本的なところから、かなり複雑なスケッチや、ネットワーク接続など、比較的高度なものまで、つまづかずに読み進めていけるような構成になっており、大変わかりやすい本です。

スポンサーリンク