ESP32を使ってみた(その2)

皆さんこんにちは!今回の実験は前回に引き続き、ESP32です。前回はESP32のWiFi機能を使った実験を行いましたが、今回はもう一つの無線機能である、Bluetooth Low Energy(BLE)の機能を使ってみました。WiFiの場合は、ESP32の中にWebサーバーの機能を持たせていたので通信の相手としてはWebブラウザを用意するだけで良かったのですが、BLEを使う場合はESP32側のF/W開発と通信相手のアプリの開発が必要となり、二種類の物を開発しなくてはならないためハードルが高くなってしまいます。今回はそのハードルを少しでも低くするために、通信相手のアプリとしてはWebブラウザ+Web bluetooth APIと言う物を使っています。これにより、ネイティブのアプリを開発するよりは大分楽に開発が出来ます。

BLEは「Low Energy」と名が付くとおり、従来のBluetoothの規格とは互換性が有りませんが低消費電力化出来るのがウリです。一回の送信で送れるデータの量は少ないですが、消費電力を凄く小さくする事が出来るので電池でも長時間動作させる事が出来ます。何かを無線化するには電源をどうするかなども考えないといけません。こちらのページがヒントになると思います。

実験の内容としては、前回WiFi版で行った様にESP32に接続されたIOポートの制御とI2C接続の温度センサーの値を表示する実験を行います。但し、今回の記事ではIOポートの実験迄とし、次回の記事でI2C接続の温度センサーの表示実験を行います。

実験システムとしてはBLE機能を内蔵したPC(又はタブレット)とESP32が直接通信する形になります。WiFiと違って無線ルーターが不要ですので簡単に実験が出来ます。

ESP32(BLE)実験システム構成図
BLEを用いた場合の実験システム構成図

左図が無線機能としてBLEを用いた場合の実験システムです。BLE搭載のPCはノートPCしか(手元に)有りませんでしたのでノートPCで実験しています。BLEではセントラル(PC側)とペリフェラル(ESP32)が直接通信を行うのでWiFiと違いルーターの様な機器が要りません。

いつもの様に説明は、
 ・用意するもの
 ・事前設定
 ・実験
の順に進めて行きます。

準備

1.用意するもの

用意するものは、ほぼ前回の記事と同じです。念のため列挙しておきます。

・ESP32-DevKitC ESP-WROOM-32開発ボード 1台

ESP32-DevKitC ESP-WROOM-32開発ボード

秋月電子通商様で購入したESP32-DevKitC ESP-WROOM-32開発ボードです。

・実験用回路 1台
開発ボードにスイッチ/LED/センサーを取り付けるため、ユニバーサルボードで回路を組みました。回路図と簡単な説明はこちら

実験回路
実験回路

・マイクロUSBケーブル 1本

マイクロUSBケーブル
マイクロUSBケーブル

・PC 1台
BLE機能が搭載されたPCを用意してください。(前回の記事では「ノートPC」と書きましたがBLEが搭載されていればデスクトップPCでも構いません)最近のノートPCなら大抵載っていると思います。ESP32のF/W開発もこれで行います。もし、BLE搭載のPCが用意できなければESP32のF/W開発はPCで行い、動作実験はアンドロイド端末で行う事も出来るようです。(Web bluetooth APIの仕様上、可能なハズです。)

・開発環境(ArduinoIDE) 一式
ESP32のF/W開発のため、開発環境一式をこちらからダウンロードし、インストールしてください。開発環境はwindows/linux/MAC OSの何れでも動作するようです。お使いの環境に合わせてダウンロード/インストールをお願いします

・Webブラウザ
現時点では「Web bluetooth API」は全てのブラウザ、OSで動作する訳では無いようです。googleChromeであれば色々なOSで動作するようですが、残念ながらiOSに関してはアップル社のポリシーにより動作しないようです。
その他ブラウザはwindowsですと、マイクロソフトエッジの最新版では動作するようです。それ以外のブラウザはコチラで調べてみてください。

2.事前設定

事前設定が必要なものは、前回記事にある開発環境のインストールです。そちらを参照して開発環境のインストールを行ってください。

実験

それでは実験を始めましょう。先に説明しましたとおり、今回の記事ではESP32に接続したIOの制御までとします。

1.ESP32に接続したIOの制御

WebブラウザからWeb bluetooth APIを通してPC内蔵のBLEモジュールを制御し、ESP32に接続したスイッチの情報を読み取ったり、LEDの点灯/消灯を制御する実験を行います。

(1)ESP32側F/Wの開発

前回の記事でも説明しましたが、ESP32側の開発言語はC/C++をベースとした「Arduino言語」を使っています。
以下のリストがESP32に書き込んたソースコード(スケッチ)です。開発環境のスケッチ例(ESP32 BLE Arduino内のBLE_notify)を参考に作っています。スケッチ例ではキャラクタリスティックスが一つでしたが、今回はスイッチ情報とLED情報の二つのキャラクタリスティックスが必要ですので少し拡張しています。通信に必要なUUIDは「RN4020を使ってみた」でも紹介しました「UUDIgenerator」で作りました。スイッチ情報はタイマー割り込みにより1秒毎にBLEのキャラクタリスティックス内に書き込んでいます。よって、読み取ったデータは最大で1秒前の情報となります。また、スイッチ情報には「notify」の属性を持たせていますので、ブラウザ側からnotifyを有効とすれば1秒毎にESP32側から更新されたスイッチ情報が送られてきます。
LEDの制御ですが、基本的にはwrite(書き込み)の属性だけ有れば良いのですが、ブラウザの起動時に一旦ESP32側の状態を読み取りブラウザの表示に反映させるためにread/writeの両方の属性を与えています。F/Wの動作に関してはコメントを参考に考えて見てください。

esp32_02_Sketch1.ino

(2)ブラウザ側の開発

 ブラウザ側はhtml+JavaScript(によってWeb bluetooth APIを動かす)で構成されます。もう少し正確に言うと、「Web bluetooth API」を使いこなすには、それなりの知識が無いと難しいらしく、(ちなみにこの記事の筆者はハード屋です)これを使い易くしてくれる「BlueJelly」と言う物を「JellyWare株式会社」様が作られており、これを利用させてもらっています。「Web bluetooth API」は、Bluetoothのネイティブアプリを作るよりは簡単とは言え、私の様な素人にはハードルが高いです。しかし、JellyWare株式会社様が作られた「bluejelly.js」と言う「Web bluetooth API」を使いやすくしてくれるラッパーライブラリによって見よう見まねでも何とかブラウザ側のアプリ?を作る事ができました。感謝です。
さて、htmlもJavaScriptも良く判らない筆者が何とか動作確認用に作ったhtmlとJavaScriptのコードが以下のとおりです。実際に動作させるには以下のコード達と「bluejelly.js」が必要となります。「bluejelly.js」はこちらのサイトのsrcフォルダ内からダウンロード出来ますので準備願います。

先ずは作成したhtmlです。これを「.html」の拡張子で名前を付けて保存し、次に示すJavaScriptと、先にダウンロードした「bluejelly.js」を同じフォルダに入れ、ブラウザからhtmlを起動すれば動作します。

esp32_02_index1.html

次に作成したJavaScriptのコードを示します。こちらは「io.js」のファイル名で保存し、先のhtmlと同一フォルダに入れてください。なお、文字化けを防ぐため保存の際は文字コードを”utf-8″にしてください。

io.js

(3)動作確認

ESP32のスケッチを書き込み、作成したhtmlをchromeで立ち上げたら実際に動作させてみましょう。

IOテスト起動画面
起動時の画面(クリックで拡大)

ブラウザが起動すると左の様な画面になっていると思います。接続デバイスは未だ無いので「No Device」に、スイッチやLEDの状態も判らないので「No Data」と、なっています。

コネクト画面
コネクト画面(クリックで拡大)

上の状態から「Connect」ボタンを押すと左の画面の様に接続先を選択するボックスが出てきます。(一部セキュリティ上の理由でボカシてあります)この画面の「ESP32_IO」が今回作った物ですので、これを選択して「ペア設定」ボタンを押して接続してください。

IOテストコネクト後画面
コネクト後画面(クリックで拡大)

接続すると、「接続デバイス:」の右側に「ESP32_IO」の表示が出ると共に、ESP32側の状態を読み取り、スイッチ、LEDの状態が表示されます。ESP32起動後はIO32/33(LED)はオフ(消灯)しています。IO25/26(スイッチ)は、その時の状態次第です。(今回は両方オフの状態で起動しました。)

IOテストIO25オン時の読み取り画面
IO25(スイッチ)オン後にReadを押した時の画面(クリックで拡大)

ここから基板上のIO25(スイッチ)をオンし、「Read」ボタンを押した状態が左の画面です。「Start Notify」ボタンを押せば、一秒ごとに最新のスイッチ情報が上がってきますが、Notifyが有効になっていない場合は「Read」釦を押さないと現在の状態がどうなっているかは判りません。

IOテストIO25とIO32オン時の画面
更にIO32をオンした時の画面(クリックで拡大)
実験基板側の状態
実験基板側の状態

更に、ブラウザ上の「IO32_ON」を押すと実験基板の該当するLEDが点灯すると共に、ブラウザ側の表示も左の様に変化します。(実験基板は前回の最後の実験で冷蔵庫に入れましたので、その時に繋いだ電池で動かしています。電池の接続箇所はEXT_5Vです。)

上記の状態で「Disconnect」のボタンを押すと、ブラウザ側は「接続デバイス:」の項目が「No Device」に戻ります。(その他表示は変化有りません)
ここから一旦ブラウザを終了させ、再度立ち上げなおすと最初に見た起動時の画面に戻りますが、「Connect」ボタンを押して再度接続すると、その時の実験基板のスイッチ/LEDの状態が正しくブラウザ側に表示されると思います。ご確認ください。

今回は以上の様に制御する側/される側のアプリとF/Wを作り、動作の確認を行いました。今までに当コラムではBLEを幾つか取り扱って来ましたが、通信相手としてはメーカー製のツールだったり、汎用の通信ソフト(TeraTermなど)を使ってきました。これはBLEを制御するアプリの開発のハードルが高いため、その様な方法を採って来ましたが、今回JellyWare株式会社様が作られた「bluejelly.js」を使わせていただき、何とかアプリ側も作る事が出来ました。次回はI2C接続の温度センサーをESP32に繋げ、この値をBLE経由でWebブラウザ上に表示させます。

無線モジュール.comでは無線モジュールを利用した様々な提案・開発を行っております。こちらのページには無線化の際のヒントを載せています。

開発実績や会社案内はこちらに有ります。併せてご覧になってください。

前の記事

ESP32を使ってみた