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.