Scan example using Javascript library

Introduction

In this example, we're going to set up the dongle using the following Python script to scan for nearby Bluetooth devices.

First create an Html file called index.html, where you can see the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>BleuIO - BLE Scanner</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="container-md mt-5">
      <div class="row">
        <div class="page-header">
          <h1>BleuIO - <small>BLE Scanner</small></h1>
        </div>
      </div>
      <div class="row mt-5 p-0">
        <div id="buttonRow" class="d-flex justify-content-left">
          <div class="d-flex p-1">
            <button type="button" id="connectButton" class="btn btn-success">
              Connect
            </button>
          </div>
          <div class="d-flex p-1">
            <button
              type="button"
              id="scanButton"
              class="btn btn-success disabled"
            >
              Scan BLE devices
            </button>
          </div>
          <div class="d-flex p-1">
            <h6 class="m-2">Time limit(seconds):</h6>
            <input
              type="text"
              id="scanTimeLimitField"
              class="form-control"
              style="width: 100px;"
              value="1"
            />
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-md-12">
          <h5>Output:</h5>
          <div id="output"></div>
        </div>
      </div>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
    <script src="script.js"></script>
  </body>
</html>

Now create a js file called script.js and paste the following code.

import * as my_dongle from "bleuio";
import "regenerator-runtime/runtime";

const output = document.querySelector("#output");
const connectButton = document.querySelector("#connectButton");
const scanButton = document.querySelector("#scanButton");
const scanTimeLimitField = document.querySelector("#scanTimeLimitField");

let connected = false;

/**
 * Connects / disconnects the dongle
 */
const handleConnect = async () => {
  if (!connected) {
    connect();
  } else {
    disconnect();
  }
};

connectButton.addEventListener("click", handleConnect);

/**
 * Connects the the dongle via the computers COM port
 * Prompts the user to choose port from dialog in chrome
 * Enables the button to start the scan
 */
const connect = async () => {
  // Connect to dongle
  await my_dongle.at_connect();

  connectButton.textContent = "Disconnect";
  output.textContent = "Connected to dongle";

  connected = true;

  // Enable the scan button which is disabled by default to avoid errors
  scanButton.addEventListener("click", handleScanButton);
  scanButton.classList.remove("disabled");
};

/**
 * Disconnects the dongle from the browser
 */
const disconnect = async () => {
  // Stop any ongoing process
  await my_dongle.stop();
  // Disconnects the dongle
  await my_dongle.at_disconnect();

  connected = false;

  output.textContent = "Dongle disconnected";

  // Disable the scan button to avoid errors
  scanButton.removeEventListener("click", handleScanButton);
  scanButton.classList.add("disabled");

  connectButton.textContent = "Connect";
};

/**
 * Handles the scan process.
 * First the dongle will be set in central role.
 * Then perform a scan and print out the response.
 */
const handleScanButton = async () => {
  output.textContent = "";

  scanButton.classList.add("disabled");
  // Set the dongle in central role
  await my_dongle.at_central();

  // Start scanning, at_gapscan() returns a promise with the scan data
  const response = await my_dongle.at_gapscan(scanTimeLimitField.value, false);

  // Print the response to the DOM
  printResponse(response);
  scanButton.classList.remove("disabled");
};

/**
 * Prints a response to the DOM
 * @param {String} response the message to be printed to the DOM
 */
const printResponse = (response) => {
  // Some of the dongles functions returns the data in an Array
  if (Array.isArray(response)) {
    response.forEach((data) => {
      const outputLine = document.createElement("p");
      outputLine.setAttribute("style", "margin: 2px");
      outputLine.textContent = data;

      output.appendChild(outputLine);
    });
  } else {
    const outputLine = document.createElement("p");
    outputLine.setAttribute("style", "margin: 2px");
    outputLine.textContent = response;

    output.appendChild(outputLine);
  }
};

Now open the index.html file in a browser and select the COM port for BleuIO dongle.

Full source also available on GitHub.

BleuIO

Python library

JS library

Scan example using Javascript library

Introduction