IBeacon example using Javascript library
Introduction
iBeacon technology allows Mobile Apps to understand their position on a micro-local scale, and deliver content to users based on location. It is a Bluetooth Low Energy technology. Here is an example of how you can setup the BleuIO to advertise as an iBeacon.
First create an Html file called index.html, where you can see the output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BleuIO - iBeacon</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>iBeacon</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="iBeaconButton"
class="btn btn-success disabled"
>
Create an iBeacon
</button>
</div>
<div class="d-flex p-1">
<h6 class="m-2">UUID:</h6>
<input
type="text"
id="uuidInputField"
class="form-control"
style="width: 616px;"
value="5f2dd896-b886-4549-ae01-e41acd7a354a0203010400"
/>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12">
<h5>Output:</h5>
<p id="output"></p>
</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'
// Works the first time I drive
// If I stop it and try to start again, nothing happens
// After trying to insert a sleep () after at_advdatai () (line 102)
// does it work to run it over and over again
// The dongles I have work differently when I run this.
// On the marked dongle I can start a beacon once (if I do not use sleep ())
// so it can not start again if I have stopped it.
// The unmarked dongle will be reset as soon as I try to create an iBeacon
const output = document.querySelector ("# output");
const connectButton = document.querySelector ('# connectButton');
const iBeaconButton = document.querySelector ('# iBeaconButton');
const uuidInputField = document.querySelector ('# uuidInputField');
let isConnected = false;
let isAdvertising = false;
/ **
* Connects / disconnects the dongle
* /
const handleConnectButton = async () => {
if (! isConnected) {
connect ();
} else {
disconnect ();
}
}
connectButton.addEventListener ('click', handleConnectButton);
/ **
* Connects the dongle via the computers COM port
* Prompts the user to choose port from dialog in chrome
* Enables the button to start the beacon
* /
const connect = async () => {
// Connect to dongle
await my_dongle.at_connect ();
isConnected = true;
connectButton.textContent = 'Disconnect';
output.textContent = 'Connected to dongle';
// Enable the iBeacon button which is disabled by default to avoid errors
iBeaconButton.addEventListener ('click', handleIBeaconButton);
iBeaconButton.classList.remove ('disabled');
}
/ **
* Stops advertising and disconnects the dongle
* and disables the button to start the beacon
* /
const disconnect = async () => {
// Stop advertising
await my_dongle.at_advstop ();
// Disconnects the dongle
await my_dongle.at_disconnect ();
// Reset dongle status
isConnected = false;
isAdvertising = false;
output.textContent = 'Dongle disconnected';
connectButton.textContent = 'Connect';
// Disable the iBeacon button
iBeaconButton.classList.add ('disabled');
iBeaconButton.removeEventListener ('click', handleIBeaconButton);
}
/ **
* Calls the dongles advertise function (at_advdatai ())
* and provides a UUID as the data
* Please notice the "i" in the function .at_advdatai ()
* which is used when creating an iBeacon
* /
const handleIBeaconButton = async () => {
// If the dongle is not advertising, start advertising the iBeacon
if (! isAdvertising) {
startAdvertising ();
} else {
stopAdvertising ();
}
}
/ **
* Starts advertising
* /
const startAdvertising = async () => {
// Sets the advertise data
await my_dongle.at_advdatai (uuidInputField.value);
// Start advertising
await my_dongle.at_advstart ();
isAdvertising = true;
output.textContent = 'iBeacon created';
iBeaconButton.textContent = 'Stop the iBeacon';
}
/ **
* Stops advertising
* /
const stopAdvertising = async () => {
// Stop the dongle from advertising
await my_dongle.at_advstop ();
isAdvertising = false;
output.textContent = 'iBeacon stopped';
iBeaconButton.textContent = 'Create an iBeacon';
}
Now open the index.html file in a browser and select the COM port for BleuIO dongle.
Full source also available on GitHub.