p5jsを使ったウェブアプリ上でBLEデバイスを接続して使用する際に、データを受信するタイミングが気になったので調べてみた。
概要
- BLEで接続した入力デバイスを使ったウェブアプリを作成中
- 加速度センサの検出データを使って画面上の物を動かそうとしている
- 動きがいまいちスムーズにならない
- 描画の処理落ちということではなさそう
BLEデバイスについて
- センサ情報を取得して10ms周期でBLEのNotifyでデータ送信
- ESP32C3使用
ウェブアプリについて
- p5js v1.10.0
- Web Bluetooth APIを使用
調査方法
- millis()で現在時刻を取得し、1秒経過するごとに受信したデータ数を調べた
- characteristicvaluechangedのコールバック内で毎回millis()で時刻を取得し、前回からの経過時間を記録した
調べた結果
- 1秒経過ごとの確認ではほぼ100個ずつデータが受信されていて、10ms周期でのデータをほぼ落とさずに受信できていることがわかった
- characteristicvaluechangedは10ms間隔で発生するわけではなく、50ms程度の間隔があいてその後にほぼ間隔なしで数回連続するという形を繰り返していた
- 横軸が時間
- 黄色がデバイス側の送信間隔 約10msで一定
- 青がcharacteristicvaluechangedの発生間隔
考察
10ms間隔でデータが受信できているものと思い、受信できたデータをすぐに描画に反映させるようにしていた。
しかし実際には数回分のデータが一気に受信されるような形になっていたため、描画にも数回分のデータが一気に反映されるようになっていた。
このために描画が飛んでいるように見えていたと考えられる。
対策
- 受信したデータをすぐに処理せず、一度バッファに入れて等間隔になるように時間を調整して処理する
補足
- 今回調査したのはWindowsのPC
- Androidのタブレットやスマホでも同様に調査した
- 受信間隔が少し違っているものの、大体同じ傾向の結果だった
