こんにちは。
今回は、マイクロビットとPCとをbluetoothで接続して、マイクロビットで得た情報をWebページに表示するというものをやってみようと思います。
前回
www.tkmium.tech
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にしてください。
<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>
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'
const INTERVAL =1000
function connect() {
navigator.bluetooth.requestDevice({
filters:[{
namePrefix:"BBC micro:bit"
}],
optionalServices:[TEMPERATURE_SERVICE_UUID]
})
.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('接続できませんでした。')
})
}
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>
上記2つのサイト様を参考にさせていただきました。
Google Chrome等のブラウザで開くと
このようになります。
接続するボタンを押すと、
ペア設定をします。
無事繋がると以下のアラートが表示されます。
そしたら、以下のように温度がリアルタイムで表示されるようになります。
感想
ほんと色々なことができますね〜〜。すごい。
次は、、、ジャイロセンサーを使ってみようかな？
スイッチエデュケーション編集部 オライリー・ジャパン 2017年11月25日
石井 モルナ/阿部 和広 翔泳社 2018年04月19日
コメント