micro:bitを利用して、爆破スイッチを作りました。まずはmicro:bitの加速度センサーをPCブラウザで読み込む部分のプログラムを作ります。
ブラウザで棒の傾きを可視化
分かりやすいように、micro:bitを取り付けた棒の傾きを可視化してみます。
検証はchromeブラウザ（フルスクリーン）で行っています。
micro:bitからブラウザで加速度を取得するところまでは、パソコン工房のmicro:bitで始めるプログラミング入門［Bluetoothでコントローラー編］で勉強させて頂きました。
micro:bitのプログラム
まずはmicro:bitでビジュアルプログラミングです。
micro:bitでは、bluetooth通信を簡単に設定できます。
パソコン工房に設定の仕方は詳しく書かれており、ここでは割愛します。
最低限だと「最初だけ＞bluetooth 加速度計サービス」でおしまいです。
分かりやすいよう、接続状況にによってmicro:bitのアイコンが変わるようにします。
ブラウザのプログラム
bluetoothで加速度の値を受け取るプログラムをHTMLに書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Angle</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style media="screen"> body { background-color: #000; } #controller { position: relative; width: 480px; height: 480px; margin: auto; } #lever { width: 40px; height: 480px; margin-left: 220px; border: #FFF solid 2px; box-sizing: border-box; background-color: #000; } #connect { margin: 20px; padding: 5px 20px; font-size: 20px; } </style> </head> <body> <div id="controller"> <div id="lever"></div> </div> <button id="connect">接続</button> <script> $(function(){ let $lever = $('#lever'); setAngle = (angle) => { $lever.css("transform", "rotateZ("+angle+"deg)"); }; $('#connect').on('click',function(){ connect(); }); // 加速度UUID ※以下https://www.pc-koubou.jp/magazine/12416参考 const ACCELEROMETER_SERVICE_UUID = 'e95d0753-251d-470a-a062-fa1922dfa9a8'; const ACCELEROMETER_CHARACTERISTICS_UUID = 'e95dca4b-251d-470a-a062-fa1922dfa9a8'; let microbit = null; function connect(){ console.log('connect'); let options = {}; // BLEデバイスをスキャンする navigator.bluetooth.requestDevice({ filters: [{ namePrefix: 'BBC micro:bit' }], optionalServices: [ACCELEROMETER_SERVICE_UUID] }) .then(device => { console.log(device); microbit = device; return device.gatt.connect(); }) .then(server => { console.log(server); return server.getPrimaryService(ACCELEROMETER_SERVICE_UUID); }) .then(service => { console.log(service); return service.getCharacteristic(ACCELEROMETER_CHARACTERISTICS_UUID); }) .then(characteristic => { console.log(characteristic); characteristic.startNotifications(); characteristic.addEventListener('characteristicvaluechanged', accelerometerChanged); }) .catch(error => { console.log(error); }); function accelerometerChanged(event){ // 加速度X座標 let //accelX = event.target.value.getInt16(0, true)/1000.0, accelY = event.target.value.getInt16(2, true)/1000.0, accelZ = event.target.value.getInt16(4, true)/1000.0; // 角度 setAngle(Math.atan2(accelZ, accelY) * (180.0 / Math.PI)); } } }); </script> </body> </html> |
私がmicro:bitの傾きで取得したかったのは、加速度YとZで求める角度でした。
|
1 |
Math.atan2(accelZ, accelY) * (180.0 / Math.PI) |
accelZ、accelYは、どの軸の角度を取得したいかによって入れ替えます。
ブラウザで実行
ローカルでお手軽に動作します。
上記のHTMLをブラウザで開き、接続ボタンを押すと、ペアリング設定が始まります。
接続可能なmicro:bit一覧が表示されるので、選択し、ペア設定ボタンを押します。
そして数秒後に加速度の取得が始まり、ブラウザに表示された棒が動くようになりました。