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

こんにちは。

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

前回

www.tkmium.tech

Bluetoothはどこにある？
サンプルプログラム
感想

Bluetoothはどこにある？

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

サンプルプログラム

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

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

github.com

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

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

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

準備

bluetoothを使えるようにする。

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

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

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

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

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

手順

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

microbit

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

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

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

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

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

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

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

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

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

ここでは、接続が切れた時に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等のブラウザで開くと

このようになります。

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

ペア設定をします。

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

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

感想

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

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

micro:bitではじめるプログラミング

posted with ヨメレバ

スイッチエデュケーション編集部オライリー・ジャパン 2017年11月25日

楽天ブックス

Amazon

Kindle

手づくり工作をうごかそう！ micro:bitプログラミング

posted with ヨメレバ

石井モルナ/阿部和広翔泳社 2018年04月19日

楽天ブックス

Amazon

Kindle