bluetooth IoT javascript

Sensortagの温度データをJavaScript (Web Bluetooth API)で取得して表示する

投稿日:

SensorTagとは

 周辺光、デジタル・マイク、磁気センサ、湿度、圧力、加速度計、ジャイロスコープ、磁力計、物体の温度、周囲温度を含む 10 個の低消費電力センサを搭載し、コイン電池1個で数年間に渡る動作が可能なTI社製のセンサキット

image.png

Web Bluetooth APIとは

 JavaScriptだけでBluetooth機器と接続できるAPI.今回はWebBluettoothAPIを簡単に使用できるBlueJellyというライブラリを活用させて頂きました。開発ソフトをインストールせずにできる手軽さが便利。

下記のサイトを全面的に引用させて頂きました。
https://jellyware.jp/kuragemd/bluejelly/getting_started.html

 

成果物

 SensorTagの温度データを自動的に画面表示し続けるプログラム(HTML/JavaScript)を作成。
動かし方は任意のフォルダにHTML/CSS/JavaScriptを置いてChromeで起動するだけです。

image.png

使用ツール

 ・Macbook OS:Catalina (Windows10のPCでも動作を確認)
 ・GoogleChrome
 ・SensorTag

 

SensorTagデータ取得の概要

SensorTagに限らず、BLEデータのやり取りはServiceとCharacteristicsを指定して、
CharacteristicsにRead/Write/Notifyを設定する。
どのService、Characteristicsかを指定するためにUUIDという長い(128bit)のIDが存在する。
 
SensorTagのServiceとCharacteristicsのUUIDは下記を参照
https://processors.wiki.ti.com/index.php/CC2650_SensorTag_User%27s_Guide

今回のSensorTagの場合には、サービスには温度、湿度、大気圧等があり、更に温度サービスの中にData,Configuration,PeriodというCharacteristicsが存在する。
Configrationに0x01を書き込まないとデータを出力してくれないので、まずは

Serive Characteristics Access Value
温度 Configuration Write 0x01

と書いて、データを取得するには

Serive Characteristics Access Value
温度 Data Read -

のように設定するイメージ。

BlueJellyライブラリは、
ble.setUUID("UUID1", SERVICE, CHARACTERISTIC);
の一文でServiceとCharacteristicsを指定できます。

ソースコード

ほとんど上記のjellywareさんのものを活用し、少しだけ変更

(1) htmlファイル

 

ロード時の処理


window.onload = function

html読み込み時に動作する処理。
 ble.setUUID("UUID1", BlueJelly.SENSORTAG_SERVICE_IR_TEMPERATURE,BlueJelly.SENSORTAG_CHAR_IR_TEMPERATURE_ENABLE);
 の箇所でSensorTagの温度データ出力のON/OFFを設定するCharacteristicsを指定。
 この処理内で有効化しようとしたらユーザーの動作無くしてCharacteristicsの書き込みを行うべからずと
 エラーが出たので断念。

接続処理


 //connect
document.getElementById('connect').addEventListener('click', function()
で実施。

//データ出力ON
 ble.write('UUID1', [0x01]);
で温度データ出力のONとなるよう書き込みを行う。
初回はまだ接続処理が終わっていないため、Scan→Connectの処理が実行され、それが終わったら
書き込みが行われる。

 

データ取得処理


 データはReadかNotifyで取得する。Readは単発でのデータ取得、Notifyは1秒毎等の定期的に自動で
 取得可能。

 notifyは下記の箇所で処理している。
 //notify
 document.getElementById('startNotifications').addEventListener('click', function() {
ble.startNotify('Tempature');
 });
 

(2) bluejelly.js

 

最後付近の行でSensorTagのServiceとCharacteristicsのUUIDを指定。

やってみて

特別な環境構築なくChromeとHTML/CSS/JavaScriptだけでBluetoothのデータ取得ができるのは簡単で便利だと思いました。
可視化やWebアプリ化との相性も良さそうです。
複数のBluetooth機器を1台の端末にぶら下げることもできるようなのでまた試してみようと思います。

以上。

-bluetooth, IoT, javascript
-, ,

Copyright© IT系でないエンジニアの転身 , 2020 All Rights Reserved Powered by STINGER.