Order Now

BleuIO

$19.99

Buy Now

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.

← Eddystone example using Javascript libraryScan example using Javascript library →