Micro:bit + Web Bluetooth API を使ってスライドを操作する。

Web Bluetooth API + reveal.js#microbit #chibibit pic.twitter.com/kz7GLorrh3

— 清水正行 (@_shimizu) August 12, 2017

概要

以前、node.js + reval.jsで作ったもののWeb Bluetooth版。
バックエンドが必要なくなったので、より手軽に扱える。

事前準備

ペアリングのセキュリティを解除し、すべてのBLEサービスを有効にするために以下の作業を行う必要がある。参考：Flashing micro:bit firmware
1. hexファイルをダウンロードする。
2. USBケーブルを使用してマイクロビットをPCに接続。
3. hexファイルをmicro：bitディスクドライブにコピーする。
4. micro:bitを再起動する。
5. LEDにドットが表示されるので、傾けて円を描く(キャリブレーション)
サービス／キャラクタリスティックのUUIDを調べておく。
ここで確認できます。

サンプル

// reveal初期設定
Reveal.initialize({
	history: true,
});
		
		
var bluetoothDevice;

//chibi:bit BLE UUID
var BUTTON_SERVICE_UUID          = 'e95d9882-251d-470a-a062-fa1922dfa9a8';
var BUTTON_A_CHARACTERISTIC_UUID = 'e95dda90-251d-470a-a062-fa1922dfa9a8';
var BUTTON_B_CHARACTERISTIC_UUID = 'e95dda91-251d-470a-a062-fa1922dfa9a8';




//ボタンイベントリスナー
d3.select("#connect").on("click", connect);
d3.select("#disconnect").on("click", disconnect);    



//chibi:bitに接続する
function connect() {
  let options = {};

  
  //options.acceptAllDevices = true;
  
  options.filters = [
    {services: [BUTTON_SERVICE_UUID]},
    {name: "BBC micro:bit [vaget]"}
  ];
  

  navigator.bluetooth.requestDevice(options)
  .then(device => {
    bluetoothDevice = device;
    return device.gatt.connect();
  })
  .then(server =>{
    return server.getPrimaryService(BUTTON_SERVICE_UUID);
  })
  .then(service => {
    return Promise.all([
        service.getCharacteristic(BUTTON_A_CHARACTERISTIC_UUID),
        service.getCharacteristic(BUTTON_B_CHARACTERISTIC_UUID)
    ]);    
  })
  .then(chara => {
    alert("BLE接続が完了しました。");
    
	//ボタンが押された際の通知を有効化する
    chara[0].startNotifications();
    chara[1].startNotifications();
    
	//ボタンクリックイベントにコールバックを設定
    chara[0].oncharacteristicvaluechanged = changeABtnEvent;
    chara[1].oncharacteristicvaluechanged = changeBBtnEvent;

    return chara;

  })  
  .catch(error => {
    console.log(error);
  });    
}

//Aボタンが押された際の処理
function changeABtnEvent(event) {
  var value = event.currentTarget.value.getInt8(0);
  if (value) Reveal.prev();
}
//Bボタンが押された際の処理
function changeBBtnEvent(evnet) {
  var value = event.currentTarget.value.getInt8(0);
  if (value) Reveal.next(); 
}

//BEL切断処理
function disconnect() {
  if (!bluetoothDevice || !bluetoothDevice.gatt.connected) return ;
  bluetoothDevice.gatt.disconnect();
  alert("BLE接続を切断しました。")
}

// reveal初期設定

Reveal.initialize({

history: true,

});

var bluetoothDevice;

//chibi:bit BLE UUID

var BUTTON_SERVICE_UUID = 'e95d9882-251d-470a-a062-fa1922dfa9a8';

var BUTTON_A_CHARACTERISTIC_UUID = 'e95dda90-251d-470a-a062-fa1922dfa9a8';

var BUTTON_B_CHARACTERISTIC_UUID = 'e95dda91-251d-470a-a062-fa1922dfa9a8';

//ボタンイベントリスナー

d3.select("#connect").on("click", connect);

d3.select("#disconnect").on("click", disconnect);

//chibi:bitに接続する

function connect() {

let options = {};

//options.acceptAllDevices = true;

options.filters = [

{services: [BUTTON_SERVICE_UUID]},

{name: "BBC micro:bit [vaget]"}

];

navigator.bluetooth.requestDevice(options)

.then(device => {

bluetoothDevice = device;

return device.gatt.connect();

})

.then(server =>{

return server.getPrimaryService(BUTTON_SERVICE_UUID);

})

.then(service => {

return Promise.all([

service.getCharacteristic(BUTTON_A_CHARACTERISTIC_UUID),

service.getCharacteristic(BUTTON_B_CHARACTERISTIC_UUID)

]);

})

.then(chara => {

alert("BLE接続が完了しました。");

//ボタンが押された際の通知を有効化する

chara[0].startNotifications();

chara[1].startNotifications();

//ボタンクリックイベントにコールバックを設定

chara[0].oncharacteristicvaluechanged = changeABtnEvent;

chara[1].oncharacteristicvaluechanged = changeBBtnEvent;

return chara;

})

.catch(error => {

console.log(error);

});

}

//Aボタンが押された際の処理

function changeABtnEvent(event) {

var value = event.currentTarget.value.getInt8(0);

if (value) Reveal.prev();

}

//Bボタンが押された際の処理

function changeBBtnEvent(evnet) {

var value = event.currentTarget.value.getInt8(0);

if (value) Reveal.next();

}

//BEL切断処理

function disconnect() {

if (!bluetoothDevice || !bluetoothDevice.gatt.connected) return ;

bluetoothDevice.gatt.disconnect();

alert("BLE接続を切断しました。")

}

概要

事前準備

サンプル

投稿者: shimizu