Androidのメモとか

実際のイメージがこんな感じ。

bootstrap pokiiio

フォントだけでなく、NavBarもそれっぽく。

bootstrap pokiiio

ダイアログもそれっぽく。

bootstrap pokiiio

モバイルもそれっぽく。

チョッパヤでいい感じに！

2018-02-03

micro:bitをWeb Bluetooth APIで通信するときにハマったポイント

たくさんハマりました。

micro:bit Web Bluetooth API

メモメモ

micro:bitを買ってから色々といじってましたが、色んな所でハマったのでメモしておきます。

メディア:

JavaScript Block EditorでBluetoothのブロックが見つからない

デフォルトで非表示という罠。

Web Bluetooth APIが使えるOS/ブラウザの組み合わせが意外と少ない

Chrome on Macは優秀。Safariが対応してなくてビビる。

BLEデバイスのスキャン

Web Bluetooth

ページ上でユーザーアクションをトリガーに、ブラウザのBLEデバイスリスト画面をnavigator.bluetooth.requestDevice()で表示させることで、特定のBLEデバイスと接続し通信するわけですが。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

結論から言うと、こんな感じで書くとうまく動作しました。ここで、LED_SERVICEというのは、サービスのUUIDで、

// micro:bit LEDサービス
const LED_SERVICE = "e95dd91d-251d-470a-a062-fa1922dfa9a8";

こんな感じです。

例えば、servicesを指定しないと、

SecurityError: Origin is not allowed to access any service. Tip: Add the service UUID to 'optionalServices' in requestDevice() options. https://goo.gl/HxfxSQ

セキュリティ観点でブラウザに怒られてしまい、機器リストには表示されるものの、いざ接続してRead/Writeしようとすると失敗してしまいます。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] }
    ]
  })

じゃあservicesだけならいいのかと思うと、そういうわけでなく、これだとデバイスをうまく見つけられません。

  navigator.bluetooth.requestDevice({
    services: [LED_SERVICE]
  })

むしゃくしゃしてこういう書き方をしてしまうと、

TypeError: Failed to execute 'requestDevice' on 'Bluetooth': Either 'filters' should be present or 'acceptAllDevices' should be true, but not both.

と言われてしまいます。acceptAllDevicesをtrueにしてもいいですが、そうすると関係ないBLEデバイスも機器リストに表示されてしまい、見づらくなってしまいます。servicesでサービスを指定しつつ、名前のprefixでフィルターするには、

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

やっぱりこういう書き方がジャスティスっぽいです。filtersで条件をつなげていくといい感じにANDでフィルターしてくれます。

サービス、キャラクタリスティックのUUIDや仕様がわからない

ここの情報を信じて実装しました。

ちなみに、先程のLEDサービスのUUIDは、プロファイルの仕様書上はE95DD91D251D470AA062FA1922DFA9A8と書かれていますが、このままJavaScriptのコードに書いてしまうとエラーになってしまいました。ちゃんとハイフンを入れてあげて、e95dd91d-251d-470a-a062-fa1922dfa9a8みたいな感じで書いてあげなければ行けません。キャラクタリスティックのUUIDも同様です。

一部未実装？だったり、セキュリティ的にアクセスできないキャラクタリスティックがある

先程のプロファイルの仕様書では、Device Informationというサービスがあり、

Model Number String
Serial Number String
Hardware Revision String
Firmware Revision String
Manufacturer Name String

という5つのキャラクタリスティックがあるようですが、実際にアクセスしてみると、Serial Number Stringは

SecurityError: getCharacteristic(s) called with blocklisted UUID. https://goo.gl/4NeimX

セキュリティ的にアクセスが封じられているようです。また、Hardware Revision StringとManufacturer Name Stringは、そもそもキャラクタリスティックが見つかりませんでした。

2018-02-02

micro:bitのLEDをWeb Bluetooth APIで制御してみる

micro:bit x Web Bluetooth APIの最終章。

micro:bit web bluetooth api

最後はLED

micro:bitのBLEを色々いじってきました。

~~ちょっとキリがないので、~~今回のLED制御で一旦シメたいと思います。

メディア:

micro:bit側は、BLE系のサービスを開始するだけ

相変わらず、Bluetooth系のサービスをすべて初期化するコードです。

micro:bit web bluetooth api

今回も変える必要がないので、このままの実装で進めます。

bluetooth.startAccelerometerService()
bluetooth.startButtonService()
bluetooth.startIOPinService()
bluetooth.startLEDService()
bluetooth.startTemperatureService()
bluetooth.startMagnetometerService()

IOピンサービスっていうのもあります。たまには思い出してあげてください。

HTML側のプログラミング

例によって、このプロファイル仕様書を参考にしています。

LED系のサービスは少し特殊で、今表示しているLEDの状態を取得したり、任意の状態を書き込んで、好きな用に光らせることもできます（ReadもWriteもできる）。また、文字列を流し込んでスクロール表示させたり、スクロール速度も変えられます。

今回は、5x5のチェックボックスをページ上に表示して、チェックした位置に対応するLEDを光らせるというプログラミングにしました。

Octet 0 represents the first row of LEDs i.e. the top row when the micro:bit is viewed with the edge connector at the bottom and USB connector at the top.

Octet 1 represents the second row and so on.

In each octet, bit 4 corresponds to the first LED in the row, bit 3 the second and so on.

Bit values represent the state of the related LED: off (0) or on (1).

So we have:

Octet 0, LED Row 1: bit4 bit3 bit2 bit1 bit0

Octet 1, LED Row 2: bit4 bit3 bit2 bit1 bit0

Octet 2, LED Row 3: bit4 bit3 bit2 bit1 bit0

Octet 3, LED Row 4: bit4 bit3 bit2 bit1 bit0

Octet 4, LED Row 5: bit4 bit3 bit2 bit1 bit0

こんな感じで、LEDの一列をUint8で表す、Uint8Arrayデータをmicro:bitに流し込めばOKです。

BBC micro:bit go スターターキットリテールBOX(CFD販売 6ヶ月製品保証付)

#microbit のLEDを #webbluetooth で制御してみる。

A post shared by pokio (@pokiiiiio) on Feb 2, 2018 at 5:04am PST

いやー、BLEでなんでもできちゃうんですね・・・。

micro:bit、奥が深いわ・・・。

2018-02-02

電池ボックスを改造してmicro:bitの電源をスマートな感じで供給できるようにした

なんかいい感じ！

micro:bit battery 電池

所謂、電源どうするんだ問題

マイコンを触ってて、いつもぶち当たる問題の一つが電源。

発売日: 2017/08/05
メディア: Personal Computers

micro:bit battery 電池

購入したのはスターターキットだったので、電池ボックスが付属していたものの、単4電池2本ということもありバッテリー駆動時間が心配なのと、電源コードがどうもスマートではないような印象でした。

そこで電池ボックス

既存の電池ボックスを改造して、GNDと3V端子に直接電気を流してやればいいのでは？そう思ってぐぐると、すでに先人がやっていました。

qiita.com

僕は単3電池が大好きなので、単3電池3本が入るスイッチ付き電池ボックスを改造して、micro:bitに給電してみたいと思います。

いざ工作

Linkman スイッチ付電池ボックス単三電池×3本 SBH331AS

メディア:

こういう電池ボックスを買ってきまして、

micro:bit battery 電池

電極を取り外していきます。単3電池1本分のスペースを、micro:bitの端子を接続するために使って、残りの2本分のスペースを電池用にアサインします。

micro:bit battery 電池

micro:bitの穴と同じように、電池ボックスにも穴を開けていきます。

micro:bit battery 電池

端子といっても、ボルトとナットでなんとかしていきます。それぞれ2個づつつかって、3V端子とGND端子を作って、それをmicro:bitに接続します。

micro:bit battery 電池

micro:bitに表面実装されている素子が電池ボックスと干渉するので、スペーサを噛ませて固定します。これで完成！

うーん！いい感じ！

micro:bit battery 電池

コンパクトなmicro:bitのよさみをスポイルすることなく、低コストでコンパクトに、スマートに電源供給ができるようになりました！やったね！

以下、ごめんなさい案件です。

リセットボタンが押せなくなった
穴を5個も開ける必要はなかった

2018-02-01

micro:bitのボタンのステータスをWeb Bluetooth APIで読み取ってみる

第４弾！

micro:bit web bluetooth api

ボタンのステータスを読み取ります

さてさて、加速度、磁気、温度、そして今回はボタンです。

micro:bit、今回は百均で売ってた単三電池→USB5V出力するモバイルバッテリーで動かしてみました。いい感じ。

メディア:

micro:bit側のプログラミングは全く変わりません！

相変わらず、Bluetooth系のサービスをすべて初期化するコードです。

micro:bit web bluetooth api

今回も変える必要がないので、このままの実装で進めます。

bluetooth.startAccelerometerService()
bluetooth.startButtonService()
bluetooth.startIOPinService()
bluetooth.startLEDService()
bluetooth.startTemperatureService()
bluetooth.startMagnetometerService()

残すはあとLEDとIOピンか・・・。

HTML側のプログラミング

例によって、このプロファイル仕様書を参考にしています。

AボタンとBボタンにそれぞれキャラクタリスティックが割り振られていて、それぞれNotifyを受けることができます。ステータスは3種類で、押されていない/押されている/長押しされている。Androidとかの長押し判定と違って、2-3秒ボタンを押してないと長押判定されません。

早速ですが、コードはこちら。

で、サンプルページはこちら。

ボタンを押したり、長押しすると、表示が変わります。

#microbit のボタンのステータスを #webbluetooth で受信する。

A post shared by pokio (@pokiiiiio) on Jan 31, 2018 at 6:13am PST

はい。月食見忘れた！

2018-01-30

micro:bitの温度センサーの値をWeb Bluetooth APIで読み取ってみる

夜な夜なコーディング、第３弾。

micro:bit web bluetooth api

今回は温度センサー

加速度センサー、磁気センサーとやってきました。今回は温度センサー。温度も取れちゃうんですね、早速Web Bluetoothしてしまいましょう。

micro:bit、もう一個ほしい・・・。

メディア:

micro:bit側のプログラミングは全く変わりません！

相変わらず、Bluetooth系のサービスをすべて初期化するコードです。

micro:bit web bluetooth api

今回も変える必要がないので、このままの実装で進めます。

bluetooth.startAccelerometerService()
bluetooth.startButtonService()
bluetooth.startIOPinService()
bluetooth.startLEDService()
bluetooth.startTemperatureService()
bluetooth.startMagnetometerService()

JavaScriptはこんな感じ。はい。

HTML側のプログラミング

例によって、このプロファイル仕様書を参考にしています。やっぱり、これが公式資料なのかな・・・。

温度センサーは、キャラクタリスティックが２つで、温度を読み取るものと、通知間隔を変えるもの。もう慣れっこですね。

コードはgithubをごらんください。micro:bitから温度情報を逐次読み取って、ブラウザに表示します。温度変化があれば、背景色が赤くなったり青くなったりするコードを書きました。

娘に #microbit を握らせて、温めてもらった。そこを #webbluetooth で温度センサーの値を拾う（笑）

A post shared by pokio (@pokiiiiio) on Jan 30, 2018 at 5:12am PST

娘にmicro:bitを握らせて、温めて頂きました。

眠かったのか手が温かく、すぐにmicro:bitも温まりました（笑）

2018-01-30

micro:bitの磁気センサーの値をWeb Bluetooth APIで読み取ってみる

micro:bitはBLEのインターフェイスが充実！

micro:bit web bluetooth api

今度は磁気センサー

前回は、加速度センサーの値をWeb Bluetooth APIを使ってブラウザから読み込んでみました。

そして、今回は磁気センサーの値を読んでみました。

メディア:

micro:bit側のプログラミングは前回と同じ。

とりあえず、Bluetooth系のサービスをすべて初期化するコードです。

micro:bit web bluetooth api

前回と変える必要がないので、このままの実装で進めます。

bluetooth.startAccelerometerService()
bluetooth.startButtonService()
bluetooth.startIOPinService()
bluetooth.startLEDService()
bluetooth.startTemperatureService()
bluetooth.startMagnetometerService()

JavaScriptはこんな感じ。

HTML側のプログラミング

例によって、このプロファイル仕様書を参考にしています。

磁気センサー系のサービスには、

x,y,zそれぞれの生値を返すサービス
更新間隔の調整するサービス
0-360の方角を返すサービス

この3つがありますが、今回は下の2つを使いました。