tkmiumのブログ

tkmium-note

プログラミング中に気づいたことや日々の記録を書いていきます。情報関係基礎の解説記事等も作成します。

micro:bit(マイクロビット)でプログラミング(4 : bluetooth温度計)

こんにちは。マツシマです。

今回は、マイクロビットとPCとをbluetoothで接続して、マイクロビットで得た情報をWebページに表示するというものをやってみようと思います。

 

 

前回

www.tkmium.tech

 

Bluetoothはどこにある?

f:id:tkmium:20190106121424j:plain

 

radio & bluetooth antennaが裏面左上にあります。

 

サンプルプログラム

プログラムはGitHubで公開しています。ご自由にダウンロードしてお使いください。

Clone or download -> Download ZIPでダウンロードできます。

github.com

 

今回作るのはこんな感じのもの。

webページにはマイクロビットから受け取った温度情報を表示

f:id:tkmium:20190119222558g:plain

 

マイクロビット本体にも現在の温度を表示

f:id:tkmium:20190119223140g:plain


 

準備

bluetoothを使えるようにする。

f:id:tkmium:20190119215420p:plain

スパナマーク -> 拡張機能

f:id:tkmium:20190119215527p:plain

bluetoothを選択。これで、bluetoothが作業場に登場したと思います。

 

そうしたら、またスパナマークを押して、

プロジェクトの設定から、No Pairing Required: Anyone can connect via Bluetoothをオンにしておきます。

f:id:tkmium:20190119215556p:plain

これで準備が終わりました!

 

手順

早速作っていきましょう。

 

microbit

f:id:tkmium:20190119215911p:plain

今回のコードです。変数connectionを使ってます。

 

この変数connectionは温度表示のオン・オフに使います。

connectionが0の時は表示せず、1になったら表示します。

 

少しだけ全体の解説をすると、

f:id:tkmium:20190119220059p:plain

この部分で、初期化を行います。

f:id:tkmium:20190119220615p:plain

準備完了の印としてチェックマークを表示します。

 

f:id:tkmium:20190119220257p:plain

ここで、PCとの接続が確立されたら、マイクロビット本体での温度表示を行うための変数connectionを1にして、Hello!と表示します。

 

f:id:tkmium:20190119220405p:plain

ここでは、connectionが1の時に温度を表示するようにしています。

逆に言えば、0の時は表示されません。

 

f:id:tkmium:20190119220513p:plain

ここでは、接続が切れた時にconnectionを0にして、Bye!と表示します。

 

webページ(html)

今回のプログラムは以下です。拡張子は.htmlにしてください。

<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>micro:bitでプログラミング(4:bluetooth温度計)</title>
</head>


<body>
<div style="text-align: center">
  <h1>micro:bitとBluetooth接続して温度を表示する。</h1>
  <form>
    <table border="1" align="center" width="300" height="100">
      <caption>micro:bitとの接続</caption>
      <tr>
        <td>
          <input type="button" value="接続する" onclick="connect();"/>
        </td>
        <td>
          <input type="button" value="切断する" onclick="disconnect();"/>
        </td>
      </tr>
    </table>
  </form>

  <table border="1" align="center" width="300" height="100">
    <caption>温度</caption>
    <tr>
      <td>
        <div><span id="temperature">micro:bitと接続してください。</span></div>
      </td>
    </tr>
  </table>

</div>
</body>

<script>

// UUID
const TEMPERATURE_SERVICE_UUID = 'e95d6100-251d-470a-a062-fa1922dfa9a8'
const TEMPERATURE_PERIOD_UUID = 'e95d1b25-251d-470a-a062-fa1922dfa9a8'
const TEMPERATURE_DATA_UUID = 'e95d9250-251d-470a-a062-fa1922dfa9a8'

// 取得の間隔(1000ms = 1秒)
const INTERVAL = 1000


// 接続
function connect () {
  navigator.bluetooth.requestDevice({
    filters: [{
      namePrefix: "BBC micro:bit"
    }],
    optionalServices: [TEMPERATURE_SERVICE_UUID]
  })

  // GATT
    .then(device => {
      connectDevice = device
      console.log('device', device)
      return device.gatt.connect()
    })

    .then(server => {
      console.log('server', server)
      server.getPrimaryService(TEMPERATURE_SERVICE_UUID)
        .then(service => {
          service.getCharacteristic(TEMPERATURE_PERIOD_UUID)
            .then(characteristic => {
              characteristic.writeValue(new Uint16Array([INTERVAL]))
            })
          startEvent(service, TEMPERATURE_DATA_UUID)
        })
    })
    .catch(error => {
      console.log(error)
      alert('接続できませんでした。')
    })
}

//Event
function startEvent (service, charUUID) {
  service.getCharacteristic(charUUID)
    .then(characteristic => {
      characteristic.startNotifications()
        .then(char => {
          alert('接続しました。')
          characteristic.addEventListener('characteristicvaluechanged',
            onTemperatureChanged)
          console.log('Temperature:', char)
        })
    })
    .catch(error => {
      console.log(error)
      alert('接続できませんでした。')
    })
}

// 温度表示
function onTemperatureChanged (event) {
  let temperature = event.target.value.getUint8(0, true)
  console.log('温度:' + temperature)
  document.getElementById("temperature").innerText = temperature + '℃';
}

// 切断
function disconnect () {
  if (!connectDevice || !connectDevice.gatt.connected) return
  connectDevice.gatt.disconnect()
  alert('切断しました。')
  postDisconnect()
}

</script>
</html>

<!-- 参考にしたサイト様(参照 : 2019.01.19)
https://qiita.com/yokmama/items/5522fabfb5b9623278e2
https://sanuki-tech.net/micro-bit/bluetooth/temperature/ -->

上記2つのサイト様を参考にさせていただきました。

 

Google Chrome等のブラウザで開くと

f:id:tkmium:20190119221626p:plain

このようになります。

接続するボタンを押すと、

f:id:tkmium:20190119221854p:plain

ペア設定をします。

 

無事繋がると以下のアラートが表示されます。

f:id:tkmium:20190119221916p:plain

 

そしたら、以下のように温度がリアルタイムで表示されるようになります。

f:id:tkmium:20190119221949p:plain

 

 

感想

ほんと色々なことができますね〜〜。すごい。

次は、、、ジャイロセンサーを使ってみようかな?