obniz developer team
Published

Display the list of BLE devices in the select box of HTML

Use the obniz Board to search for and display a list of BLE devices in the vicinity.

IntermediateFull instructions provided1 hour225
Display the list of BLE devices in the select box of HTML

Things used in this project

Hardware components

obniz
Cambrian Robotics obniz
×1

Story

Read more

Code

source code

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
  </head>

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

    <script>
      /* eslint-disable no-undef, no-unused-vars */
      let deviceSelector = $("#deviceSelector");
      var 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>

Credits

obniz developer team
80 projects • 36 followers
Development board "obniz" is controlled via the internet.

Comments