概要
ADBLE01Pを制御するWebアプリのサンプルを紹介しています。
ADBLE01Pを使用して、便利なアプリケーションを作りたい方はもちろん、BLEデバイス(カスタムプロファイル)と接続して、データを取得したり、設定を変更したりする方法の実験や勉強にも役立ちます。
Web Bluetooth APIを使用したWebアプリの利点
通常、ADBLE01PをiPhoneやiPadで使用するためにはiOS用のアプリを、Androidで使用する場合にはAndroid用のアプリを、Windowsで使用するためにはWindows用のアプリを、Macで使用するためにはMacOS用のアプリを作成する必要があります。Web Bluetooth APIを使用するとChromeやEdgeといった制約はありますがブラウザで動作するため、プラットフォームが異なっていても同一のコードで動作させることができます。ブラウザのバージョンによっては動作しない場合があります。実際、デバッグ中はWindows11のChromeでは動作せず、AndroidのChromeで動作確認をしていましたが、アップデートが入った後はWindows11のChromeでも動作するようになりました。
構成
図に示すような構成で動作します。
Web Bluetooth APIに対応しているブラウザからWebサーバにおいてあるhtmlファイルへアクセスします。このため、ネイティブアプリと違い、インターネットに接続できる環境下にある必要があります。今回は、その例を示していませんが、Webアプリを経由してデータベースサーバに測定値を送ってストアすることも可能です。
サンプルWebアプリ
電源電圧測定、LEDインジケータ設定アプリ
電源電圧測定・LEDインジケータ設定アプリへのリンクです。以下のQRコードを読み込んでも実行できます。
実際のWindows11での動作画面は以下です。ADBLE01Pに接続してバッテリの電圧を取得したり、LED点滅の設定を変更したりします。
静電センサデータ表示アプリ
静電センサデータ表示アプリへのリンクです。以下のQRコードを読み込んでも実行できます。
実際のWindows11での動作画面は以下です。ADBLE01Pに接続して取得した静電センサの値をリアルタイムにチャートに表示します。
静電スイッチアプリ
静電スイッチアプリへのリンクです。以下のQRコードを読み込んでも実行できます。
実際のWindows11での動作画面は以下です。ADBLE01Pに接続してタッチスイッチの動作を制御します。タッチスイッチの感度やオン・オフのしきい値の設定を変更したり、スイッチの状態をポートに出力する形式をHigh/Lowの2値または静電センサ測定値の大きさに応じたPWMで出力するように切り替えたりできます。
LED発光制御アプリ
準備中です。
サンプルアプリの主な動作を説明
ブラウザの「ページのソースを表示」またはCtrl+Uで、ソースファイルを確認できます。動作を理解するのに重要な箇所を以下で説明しています。
電源電圧測定、LEDインジケータ設定アプリ説明
準備中です。
静電センサデータ表示アプリ
準備中です。
静電スイッチアプリ
準備中です。
LED発光制御アプリ
準備中です。