🎉

micro:bitとノートPCをBluetooth接続して「上を向いた」タイミングをブラウザにリアルタイム表示する

2020/12/02に公開

初心者

やりたいこと

「上を向いた」タイミングをお手軽にブラウザ上でリアルタイムに表示したい。
加速度センサーを積んだmicro:bitをメガネに装着すれば、いつ上を向いたかがわかる。
できるだけ簡単に、かつ、お金はそんなにかけたくない。

用意するもの

micro:bit（マイクロビット）
https://www.switch-science.com/catalog/5263/
micro:bit用バングルモジュールキット
https://www.switch-science.com/catalog/5272/
コイン電池（CR2032）
マイクロUSBケーブル
ノートPC（Bluetooth機能付きのOS:Windows10端末）
chromeブラウザ（バージョン56以上）
メモ帳（ソース編集のためのテキストエディタ、サクラエディタとか秀丸とかVisual Studio Codeのほうがよい）
メガネ
ダブルクリップ
　https://www.askul.co.jp/p/826351/

使う技術

html
JavaScript
Web bluetooth API
　https://www.w3.org/community/web-bluetooth/

参考にしたサイト

手順

1 「用意するもの」をそろえる。

無いものは買いましょう。

2 micro:bitを組み立てる。

micro:bitとmicro:bit用バングルモジュールキットを繋ぎ、コイン電池（CR2032）を差し込みます。

こんな感じ
※2020年11月から新しくなったみたい
　https://microbit.org/ja/new-microbit/

3 ブラウザ上でmicro:bitのプロジェクト作成。

組み立てたmicro:bitをマイクロUSBケーブルでノートPCにつなぎます。ノートPCはインターネット接続済みという前提です。
適当なブラウザでmicro:bitのMakeCodeエディターを開いてプロジェクト開始します。

適当なプロジェクト名

右上の歯車マークをクリックして「拡張機能」を選択

「Bluetooth」を選択

「一部の拡張機能を削除してBluetoothを追加する」を選択

こんなブロックを作る

外部ドライブとして認識されたmicro:bitへ「ダウンロード」
これで、micro:bitの準備は完了です。

4 ノートPCの設定を行う。

Windowsの設定から「デバイス」を選択

Bluetoothを「オン」にする
これでノートPCの準備は完了です。

5 htmlを用意する。

メモ帳などで、以下ソースをコピペして保存します。保存時に拡張子を.htmlにします。保存先はどこでもいいです。困ったらとりあえず、デスクトップにでも保存しましょう。

test.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web Bluetooth機能で傾き(加速度)を取得する</title>
<script>
 
var targetDevice;
 
//////////////////////////////////////////////////
/// 接続
//////////////////////////////////////////////////
function getAccelerometer() {
 
  //////////////////////////////////////////////////
  /// 定数の定義
  //////////////////////////////////////////////////
  /// UUID
  const UUID_ACCELEROMETER_SERVICE = 'e95d0753-251d-470a-a062-fa1922dfa9a8'
  const UUID_ACCELEROMETER_SERVICE_CHARACTERISTIC_DATA   = 'e95dca4b-251d-470a-a062-fa1922dfa9a8'
  const UUID_ACCELEROMETER_SERVICE_CHARACTERISTIC_PERIOD = 'e95dfb24-251d-470a-a062-fa1922dfa9a8'
 
  /// 取得間隔(ミリ秒)
  const INTERVAL = 1000
 
  //////////////////////////////////////////////////
  /// デバイスのスキャン
  //////////////////////////////////////////////////
  navigator.bluetooth.requestDevice({
    filters: [
      { namePrefix: "BBC micro:bit" }
    ],
    optionalServices: [UUID_ACCELEROMETER_SERVICE]
  })
  //////////////////////////////////////////////////
  /// GATT接続
  //////////////////////////////////////////////////
  .then(device => {
    targetDevice = device;
    console.log("device", device);
    return device.gatt.connect();
  })
  //////////////////////////////////////////////////
  /// プライマリーサービスの取得
  //////////////////////////////////////////////////
    .then(server => {
    console.log('server', server);
    server.getPrimaryService(UUID_ACCELEROMETER_SERVICE)
    //////////////////////////////////////////////////
    /// 傾き(加速度)の取得
    //////////////////////////////////////////////////
    .then(service => {
      /// 傾き(加速度)の取得間隔の設定
      service.getCharacteristic(UUID_ACCELEROMETER_SERVICE_CHARACTERISTIC_PERIOD)
      .then(characteristic => {
        characteristic.writeValue(new Uint16Array([INTERVAL]));
      })
      .catch(error => {
        console.log(error);
        alert('取得間隔の設定に失敗しました。');
      })
 
      /// 傾き(加速度)の取得開始
      service.getCharacteristic(UUID_ACCELEROMETER_SERVICE_CHARACTERISTIC_DATA)
      .then(characteristic => {
        characteristic.startNotifications()
        .then(char => {
          alert('接続しました。');
          characteristic.addEventListener('characteristicvaluechanged',onAccelerometerChanged);
          console.log('Accelerometer : ', char);
        })
      })
      .catch(error => {
        console.log(error);
        alert('取得開始に失敗しました。');
      })
    })
  })
  .catch(error => {
    console.log(error);
    alert('接続に失敗しました。');
  });
 
  //////////////////////////////////////////////////
  /// 傾き(加速度)の表示
  //////////////////////////////////////////////////
  function onAccelerometerChanged (event) {
    let accelerometer_x = event.target.value.getInt16(0, true);
    let accelerometer_y = event.target.value.getInt16(2, true);
    let accelerometer_z = event.target.value.getInt16(4, true);
    console.log('傾き(加速度) X: ' + accelerometer_x + ' Y: ' + accelerometer_y +' Z: ' + accelerometer_z);
    document.getElementById("accelerometer").innerText = ' X: ' + accelerometer_x + ' Y: ' + accelerometer_y +' Z: ' + accelerometer_z ;

    //////////////////////////////////////////////////
    /// 上を向いた時だけ画面に何かを表示させる
    //////////////////////////////////////////////////
    if(accelerometer_x > 700){ // どれくらい傾いたら上を向いたと判断するかを指定

        //////////////////////////////////////////////////
        /// 上を向いた回数を画像で累積表示
        //////////////////////////////////////////////////
        let addimg = document.getElementById("showimg").innerHTML ;
        document.getElementById("showimg").innerHTML = addimg + "<img src ='../img/lookup.png'>";

        //////////////////////////////////////////////////
        /// 上を向いた日時を追記していく表示
        //////////////////////////////////////////////////
        let lookupText = document.getElementById("lookup").innerText ;
        let youbi = ["日","月","火","水","木","金","土"];
        let fullDate = new Date();
        let dateTime = fullDate.getFullYear() + "年" + 
			(fullDate.getMonth() + 1)  + "月" + 
			fullDate.getDate() + "日　" + 
			fullDate.getHours() + "時" + 
			fullDate.getMinutes() + "分" + 
			fullDate.getSeconds() + "秒" +
                        fullDate.getMilliseconds() + "ミリ秒　" + 
			youbi[fullDate.getDay()] + "曜日" ; // 0は日曜日～6は土曜日;
        document.getElementById("lookup").innerText = lookupText + ' 上を見た！ ' + dateTime + '\n';
    }
  }
}

//////////////////////////////////////////////////
/// 切断
//////////////////////////////////////////////////
function disconnect() {
 
  if (!targetDevice || !targetDevice.gatt.connected){
    return;
  }
  targetDevice.gatt.disconnect();
  document.getElementById("showimg").innerHTML = '' ;
  document.getElementById("accelerometer").innerText = 'micro:bitと接続して、傾き(加速度)を取得してください。' ;
  document.getElementById("lookup").innerText = '' ;
  alert("切断しました。");
 
}
 
</script>
</head>

<body>
<div id="BLE_accelerometer">
  <div id="BLE_title">
    <h3>Web Bluetooth機能で傾き(加速度)を取得する</h3>
  </div>
  <div id="BLE_button">
    <input type="button" value="micro:bitと接続する" onclick="getAccelerometer();"/> 
    <input type="button" value="切断する" onclick="disconnect();"/> 
  </div>
  <div id="showimg"></div>
  <div id="BLE_display">
    <p>傾き(加速度)：<span id="accelerometer">micro:bitと接続して、傾き(加速度)を取得してください。</span></p>
    <p><span id="lookup"></span></p>
  <div>
</div>
</body>
</html>

6 メガネへmicro:bitを取り付ける。

今回は、X軸が700を超えると「上を向いた」と判定するようにしましたので、メガネの左側に取り付けます。

こんな感じ

7 micro:bitとノートPCをBluetooth接続する。

micro:bitは電源をオンにしておきます。

chromeをインストールします。
インストールできたら、chromeを起動します。

上記「⑤」で作成したhtmlをchromeで表示して、「micro:bitと接続する」ボタンを押します。

micro:bitが出てきますので、選択して接続します。

5秒くらい待つとポップ表示されますので、OKを押します。

これで、接続は完了。