【Seeed UG 2020】 Wio Terminal のバッテリーベースの情報を見たり Web Bluetooth API と連携させるための準備をしたり

この記事は、Seeed UG Advent Calendar 2020 の 23日目の記事です。

先日入手した Wio Terminal用のバッテリーの情報をチェックしてみたり、また公式サンプルの中で Web Bluetooth API と連携させるサンプルを試す準備を行って、2つのサンプルを試します。

ちなみに、Wio Terminal に関する記事を前に書いたことがあり、公式サンプルの 2つを組み合わせて試した内容を書いていました。
　●Wio Terminal の光センサーの値を画面上にグラフで表示してみた - Qiita
　　https://qiita.com/youtoy/items/997ab110c595fb33263f

Wio Terminal用バッテリーベースの情報を見てみる

先日、Wio Terminal用バッテリーベースを購入しました。

定期投稿
近所のコンビニ（略 pic.twitter.com/fe5KZtFUx2

— you (@youtoy) December 12, 2020

購入元は、以下のスイッチサイエンスさんのオンラインサイトです。
おおまかな内容しか把握してなかったので、あらためて仕様の情報を見直してみます。

●Wio Terminal 用バッテリーベース（650 mAh） - スイッチサイエンス
　https://www.switch-science.com/catalog/6816/

そして、上記のページの下部を見ると、以下のブログへのリンクが記載されていました。

●Wio Terminalのバッテリーが新しくなりました - Seeed K.K. エンジニアブログ
　https://lab.seeed.co.jp/entry/2020/12/10/120000

スイッチサイエンスさんの販売ページや上記のブログ記事を見ると、仕様の詳細の情報を得ることができました。ブログ記事にも書かれている内容で、個人的には、この辺りが気になる/嬉しいところです。

また、Groveコネクタを6つ付いていて、Wio Terminalにより多くのGroveモジュールを接続することを可能にします。（Wio TerminalにはGroveコネクタが2つ）
四つのGroveアナログ/デジタルポート、一つのGrove I2Cポート、一つのGrove UARTポート

マグネット内蔵、ホワイトボードなどに貼り付ける可能

黒い丸は押しボタンで、これをプッシュするとバッテリーからWio Terminalの電源供給をON/OFFできます。バッテリーの付け外しや保管時はOFFしましょう。バチっとなるので。

Wio Terminal とブラウザを通信させる

それでは、 Wio Terminal を使った開発の準備の話へ入ります。

Web Bluetooth API

今回試そうとする内容は、ブラウザから Bluetooth による通信が行える Web Bluetooth API です。

これまでも何度かガジェットとの通信を行う場合に使ったことがあり、例えば以下の記事で書いた内容などに利用しています。

• toio を音で制御してみた（Audio用の Teachable Machine でベルやタンバリンの音を機械学習） - Qiita
• 【JavaScript 2020】 #UIFlow の BLE UART を使ったブラウザから #M5Stack_Core2 （ #M5Stack ）への文字の送信 - Qiita
• 【toio 2020】 #toio のシェイク検出の情報を Web Bluetooth API で受け取り Smoothie Charts（smoothie.js）でリアルタイムにグラフ化 - Qiita
• Web Bluetooth API で BLE（Chrome と micro:bit をつなぐ） - Qiita

公式サンプル

Wio Terminal での Web Bluetooth API 利用について公式の情報を見てみると、日本語版の「Wio Terminalをはじめよう - Seeedウィキ（日本語版）」からたどった先のサンプルでは Web Bluetooth API の話は出てなさそうでした。一方で、英語版の「Get Started with Wio Terminal - Seeed Wiki」からたどると、Web Bluetooth API を使うサンプルのページがありました。

以下が日本語版のページのメニュー。

以下は英語版のメニュー。

メニュー上のほうに「Bluetooth」という項目があり、展開すると以下の項目が出てきます。
その中に、「Web Bluetooth APIs」という部分があります。

そして、Web Bluetooth APIs のページを開くと、デバイスを手で持って回転させたりしていて、それと連動してディスプレイ上にグラフが描画されていく様子が出てきます。

その下に手順が書かれていましたが、手順のポイントになりそうな部分は以下がありました。
（もし、Wio Terminal を使った開発自体が初めての方は、日本語版Wiki の Getting Started のページもご参照ください）

• ファームのアップデート・ライブラリのインストール
  • Realtek RTL8720 Wireless core のファームウェアと、ライブラリが 2つ（Seeed_Arduino_rpcBLE、Seeed_Arduino_rpcUnified）です
    • 手順は、Bluetooth に関する Overview を参照（さらに、こちらの Overviewを参照）
    • RTL8720 のファームを Windows でアップデートする話は、 @matsujirushi さんの Qiita の記事もありました
• バッテリーの情報を使うサンプル
  • Wio Terminal へのプログラムの書き込み
    • Arduino Set-Up を参照
  • 公式の HTML のサンプルをダウンロードし、Chrome/Edge で開いてデバイスとの接続を試す
    • Web Bluetooth API HTML Website を参照
• 加速度センサを使うサンプル
  • 加速度センサ用のライブラリを追加
    • Accelerator Overview を参照
  • Wio Terminal へのプログラムの書き込み
    • Arduino Set-up を参照
  • 公式の HTML のサンプルをダウンロードし、Chrome/Edge で開いてデバイスとの接続を試す
    • Web Bluetooth API HTML Website を参照

ファームのアップデート・ライブラリのインストールは、ダウンロードするファイルや書き込みの作業が複数あるため、公式の情報をよくチェックしながら進めるのが良さそうです。

動作確認結果

サンプルを試した際の画面などをいくつか載せてみます。

サンプル 1つ目： バッテリーの情報の送信

こちらは、Chrome で表示した Webページ上で、Wio Terminal を検出できた状態の画面です。

こちらは、上記のペアリング操作をした後、BLE経由で受信した情報をコンソールに表示した際の画面です。

サンプル 2つ目： 加速度センサの情報の送信

こちらは、Chrome で表示した Webページ上で、Wio Terminal を検出できた状態の画面です。

そして、その Webページ上にグラフが描画されている様子がこちらです。

#WioTerminal の加速度センサの情報を、ブラウザに表示。
公式サンプルを動かしてみた時の様子です！ pic.twitter.com/1w8PSDgpDC

— you (@youtoy) December 23, 2020

無事にサンプルを動作させることができました。

まとめ

サンプルを動かした後に、過去に作ったものと組み合わせてみたり等を試したかったところですが、前準備等に思ったより時間がかかってしまったので、この記事ではサンプルを動作させるところまでとなりました。

また別途、BLE 経由で他デバイスともつなげてみたり、Wio Terminal の外付けモジュールを組み合わせてみたり、いろいろ試してみたいと思います。