carcon999のブログ

12年間Y!ブログの記載を移行しました。電子工作関連の記事が多いです。

Web Bluetooth APIを使ってNeopixelを制御する

■概要

Web Bluetooth APIを使ってブラウザ経由でNeopixel系LEDをLチカ制御してみました。

イメージ 1

まず、Web Bluetoothが聞きなれないかもしれませんが、みなさんお使いのChromeブラウザ経由でBluetoothが制御できるという画期的?な技術です。個人的には、初めて触ってみたのでそのレポートになります。
少しハマったポイントもあったのでそこもご紹介したいと思います。

■Web Bluetooth APIって何?

私は、詳しく説明できるほどの知識はありませんので、興味あるかたは先生に聞いてください。

だた、私のようなソフトウェアエンジニアの視点から見ると、今までBluetoothを使ったアプリを作る場合は、iOS用、Android用、Mac用、Windows用など、それぞれ別々に開発する必要がありましたが、それがブラウザ用アプリを1本作ればそれで動くようになるのは非常にメリットが高いものになります。
ただし、おそらくセキュリティの面で「できること/できないこと」があると思いますので、全てのアプリがそのようになるかというとそうではないでしょう。

■動作デモ
まずは、動画をご覧ください。80秒で少し長いのですがこんな感じでブラウザから制御することができます。この動画は、Mac上のChromeで動作させていますが、WindowsでもAndroidでも動作しました。iPhoneは持ってないのですが多分動くと思います。



■デモの構成

作った環境は以下のような構成です。

イメージ 2

プログラムとしては、
micro:bit内に配置するプログラム(c言語
②ブラウザのプログラム(javascript)
の2本作成しています。

ハードウェアは、私は自分で作ったkirakira:bitを利用していますが、お手持ちのNeopixelでも動作します。

■①micro:bit用プログラムについて
プログラムは、GitHubからダウンロードすることができます。

kirakira_webbleプログラムは、Adafruitのライブラリ2つを使います。
Adafruit_MicrobitAdafruit_NeoPixelを今回利用しました。

Adafruit_Microbitは、BLEと5x5のLEDマトリックス用です。Adafruit_NeoPixelは、その名の通りNeoPixel用になります。下記のような構造となります。

イメージ 3

通信は、UARTSeriviceクラスを使います。今回のデモでは、micro:bit側はデータの受信のみ行い、送信は行いません。通信するために必要なUUIDは、Adafruit_Microbit内で定義されてます。サービスクラスの値や、キャラクタリスティックス(Characteristic)の値は以下のようになります。

UARTServiceUUID6E400001-B5A3-F393-E0A9-E50E24DCCA9E
UARTTxCharacteristicUUID6E400002-B5A3-F393-E0A9-E50E24DCCA9E

プログラム的には、ブラウザからUARTTxCharacteristicUUIDで送られてきた4バイトを受信し、LEDを制御することを行っています。

■②ブラウザのプログラム(javascript)

ブラウザ側のプログラムも、Githubこちら)でご覧ください。


ここで少しハマったポイントがありました。
103行目周辺で、配列の生成処理があります。
この4バイトの生成処理が重要で、Uint8Arrayで指定しないと、WindowsChromeは動作するが、MacChromeAndroid版はエラーで動作しない現象になりました。微妙に異なるみたいですね。

イメージ 4

あと、htmlファイルをローカルで実行しても動作しません。
かならず、httpsでどこかに配置して呼び出してください。
一応、FC2にファイルを置いてみました。(広告うざいので時間のあるときに移動するかも・・・)

■最後に

Web Bluetooth APIの存在は知っていましたが、使ったことは無く敬遠していましたが、なかなか便利です。ちょっとしたデモや、Web系のエンジニアの方は扱い易いと思います。最初に接続できたときには、『おお~』とチョットした感動がありましたね。

みんな大好き光り物を、ドヤ顔でブラウザからコントロールしちゃいましょう。(笑)

以上です。
最後までお付き合いいただきありがとうございました。