言語切り替え

BLEデバイス一覧をHTMLのセレクトボックスに表示する

obnizBoardをつかって周辺のBLEデバイスを検索して、一覧表示をします。

用意するもの

  • BLEデバイス(指定はなく何でも良いです。複数あるとわかりやすいです)
  • obniz Board
  • モバイルバッテリーなど
  • スマートフォン or PC

手順 / 接続方法

BLEは無線ですので、obnizBoardのピンには何も接続しなくて大丈夫です。USBだけ接続して、電源を入れてください。

プログラム

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>BLE</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.2.0/obniz.js"></script>
</head>

<body>

<div id="obniz-debug"></div>
<select name="device" id="deviceSelector" size="8" style="width:200px"></select>

<script>
  let deviceSelector = $("#deviceSelector");
  let obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = async function () {
    await obniz.ble.initWait();
    obniz.ble.scan.start({duration: 30});
    obniz.ble.scan.onfind = function (peripheral) {
      let address = peripheral.address;
      let localName = (peripheral.localName ? "(" + peripheral.localName + ")" : "");
      let optionTag = `<option value="${address}">${address}${localName}</option>`;
      deviceSelector.append(optionTag);
    }
  };
</script>

</body>
</html>

うごかす

プログラムを起動すると、リストにデバイスアドレスの一覧が表示されます。
時間とともに発見したデバイスが順次追加されます。

関連記事