2023年03月25日

iOS Web Bluetooth API

前回はBLE5モジュール変換基板BLE5モジュール変換基板V2とブラウザを介してシリアル通信できるツールを紹介しました。実装方法としてWeb Bluetooth APIを用いており、EdgeやChrome等の対応したブラウザが必要になります。iOSのSafari含めてスマートフォンの多くのブラウザではWeb Bluetooth APIに対応していません。今回はiOSでWeb Bluetooth APIに対応したサードパーティのブラウザを使ってブラウザを介してシリアル通信できるツールを利用できるかテストしてみました。

手持ちのiOS16でWeb Bluetooth APIに対応したサードパーティのブラウザとして、BluefyC.ブラウザをテストしてみました。Bluefyでシリアル通信できるツールにアクセスして、接続ボタンを押すと、BLEデバイスが表示され、OS側でのデバイス追加なしで簡単に接続することができました。また、iOS上のBluefyブラウザから文字列を送信したり、逆にBLEデバイスからUARTを介して文字列を送信して、Bluefyブラウザに表示できることが確認できました。実際に接続してみたスクリーンショットは下記の通りです。

bluefy.jpg

一方でC.ブラウザは接続ボタンでデバイス選択画面が表示されるものの、BLE5モジュール変換基板BLE5モジュール変換基板V2のBLEデバイスが表示されず、利用できませんでした。

スマートフォン向けにBLE5モジュール変換基板BLE5モジュール変換基板V2を用いたシリアル通信はBGX Commanderアプリ(iOS/Android)が提供されていますが、独自UIを実装する場合、追加でアプリ開発や登録等の手間が生じます。それらの手間を考えるとブラウザは限定されるものの、Web Bluetooth APIでOSに依存せずにサービスを提供できるのは非常に魅力的だと思いました。今後、Web Bluetooth APIに対応したiOSのBluefyを用いて色々実験や検討をしてみたいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2023年03月11日

Web BLE API

以前にWebシリアルAPIとUSBシリアルI2C変換基板を用いてI2Cデバイスをブラウザから制御して、取得したデータからChart.jsで可視化するデモツールを紹介しました。今回はBLE5モジュール変換基板BLE5モジュール変換基板V2とブラウザを介してシリアル通信できるツールを紹介したいと思います。BLE5モジュール変換基板BLE5モジュール変換基板V2Wireless Xpressファームウェアが実装されているため、簡単にスマートフォン等と通信することが可能です。スマートフォン向けにはBGX Commanderアプリ(iOS/Android)が提供されています。

一方、PC版は提供されていないため、今回はWeb Bluetooth APIを用いて、ブラウザを介してシリアル通信できるツールを実装してみました。ツールはこちらから利用できます。


webbleapi.png

Web Bluetooth APIの制約で事前にOS側の設定画面でBluetoothデバイス追加が必要です。追加後、接続ボタンを押すと検出されたBLE5モジュール変換基板もしくはBLE5モジュール変換基板V2が表示されます。接続後は双方向に文字列を送ることが可能です。今回はモジュールをUSBシリアルに接続してテストしてみました。ブラウザから文字列を送信したり、逆にTeratermからUARTに文字列を送信して、ブラウザに文字列が表示されることを確認しました。デフォルトはシリアル通信を双方向に行うためのストリームモードとなっていますが、モードをコマンドモードに設定することでBLEモジュールの設定を遠隔で行うことも可能です。

実際にはBLE5モジュール変換基板をマイコン等に接続し、BLE5モジュールとペアリングしたPCのブラウザから遠隔でデバッグして使用します。Web Bluetooth APIの制約でOS側で事前にBluetoothデバイスの追加しない場合、データ書き込み時にGATT Error: Not pairedの例外エラーが発生します。事前のデバイス追加が必要なものの、ブラウザから簡単にBLEデバイスと通信することができるのは非常に便利だと思いました。なお、WebシリアルBLEツールのjsコードやcss含めてすべてhtml内に記述しているため、本ツールにアクセスして右クリックで「ページのソース表示」でソースを確認することができます。今後は他にも応用的な機能を実装したいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする