New: Updated for Evothings Studio 2.0. Apple created a lot of interest in the IoT scene with the introduction of iBeacon. However, Apple placed restrictions such that generic BLE devices could not be used as beacons. In this tutorial we will show you how to have a fun time making a mobile app and create a custom beacon implementation – based on the Arduino micro controller using standard BLE hardware.
In this tutorial, we will create a mobile app for Android and iOS, that uses an Arduino compatible board with a BLE shield to create a beacon. This can be thought of as a Do-It-Yourself version of Apple’s iBeacon technology – which is proprietary and restricts the way you can scan for beacons.
The reason we are using the Arduino for the beacons is that it can be easily programmed and that it is a cool tinker-friendly piece of technology that you can evolve far beyond the limits of iBeacon. The foundation of the iBeacon technology is the use of a small BLE (Bluetooth Low Energy) device that periodically advertises a UUID (Universally Unique Identifier) – however we will use the BLE name which is accessible across all mobile devices.
Arduino compatible boards with built in BLE will also work fine, such as the RedBearLab Blend Micro board, the RFduino or the LightBlue Bean.
The example app – Beacons for relaxation
The mobile application we have built for this tutorial is meant for use in a location where we want to give people time to relax and experience calm, for example a museum, an airport, a hospital or a public place such as a park. When approaching a beacon, the app will display a page that suggests a method for relaxation.
The beacon itself (the Arduino board) could be used as is, or be placed inside an object or display case that signifies the existence of the beacon, or be visually hidden. BLE devices have a range of up to 30 meters depending on the surroundings. You can be as many beacons as you like for your application, however we will use three of them to display the various relaxation states in the app.
Screenshots from the app:
Below is a photo of an Arduino Uno we used as one of our beacons with a ReadBearLab BLE Shield Shield mounted on a SparkFun prototyping board:
The LightBlue Bean is a small Arduino device with integrated BLE that we also used as DIY beacons:
How to make the Arduino work as a Beacon
When a beacon is sending out signals, it uses the BLE advertising mode. The device repeatedly sends out an advertised name that you can set in your Arduino code. Additionally, you get the signal strength (RSSI = Received Signal Strength Indicator), which can be used to determine which beacon is the closest one.
As you walk around with your mobile device, another beacon will eventually become the closest one and the app will detect this and switch to the information that associated with that beacon. As you will see below it is remarkably simple to program this kind of mobile application using Evothings Studio.
The Arduino sketch will in essence do just one thing, set the name of the BLE shield. A limitation of the BLE name is that it is restricted to 10 characters, however with careful definition it can be enough to make the beacon IDs unique within your project setup.
It is important to note that you will have to set a unique BLE name onto every Arduino board you want to use as a beacon – if you would use the same name, there would be no way to tell the difference between them.
The Arduino sketch for the ReadBearLab BLE Shield and RedBearLab Blend Micro is shown below (file ArduinoBeacon.ino):
// Arduino code for example Arduino BLE Beacon.
// Evothings AB, 2014
// Include BLE files.
#include <SPI.h>
#include <boards.h>
#include <RBL_nRF8001.h>
#include <services.h>
// This function is called only once, at reset.
void setup()
{
// Enable serial debug.
Serial.begin(9600);
Serial.println("Arduino Beacon example started");
Serial.println("Serial rate set to 9600");
// Set a custom BLE name for the beacon.
// Note that each Arduino should be given a unique name!
ble_set_name("BEACON1");
// Initialize BLE library.
ble_begin();
Serial.println("Beacon activated");
}
// This function is called continuously, after setup() completes.
void loop()
{
// Process BLE events.
ble_do_events();
}
How the mobile application works
The mobile app that monitors beacons is developed in HTML5 and JavaScript using Evothings Studio. During the development process we used the Evothings Viewer app to utilize the HyperReload technology to effortlessly debug and develop our app.
When development is finished, there are several ways you can share your app. You can host the app on a web server so that visitors of the location where we have placed the beacons can easily access it. You could also build a native app and publish it on the app stores using exactly the same code.
The app continuously scans for advertising BLE devices and determines which of them belong to our application, then determines which beacon is closest and displays the HTML content associated with that beacon. The individual information pages are found in the file index.html. Each page is defined within its own div tag, which can be dynamically shown or hidden. If no beacons are in range, a default information page is shown.
Monitoring beacons and selecting which page to show is done in JavaScript code, found in the file app.js. The beacon to page mappings are defined as follows:
// Mapping of beacon names to page ids.
app.beaconPages =
{
'BEACON1':'page-feet',
'BEACON2':'page-shoulders',
'BEACON3':'page-face'
}
Note that the names of your beacons must match the names used as keys in the above dictionary. Here is the code that gets called each time a BLE device advertisement is received by the app (this happens continuously):
app.deviceFound = function(deviceInfo)
{
// Have we found one of our beacons?
if (app.beaconPages[deviceInfo.name] && deviceInfo.rssi < 0)
{
// Update signal strength for beacon.
app.beaconRSSI[deviceInfo.name] =
{
rssi: deviceInfo.rssi,
timestamp: Date.now()
}
}
}
Logic for selection the closest beacon is found in the timer function app.runSelectPageTimer, which gets called at regular intervals.
In total, the app has the following code files:
- index.html – main page, contains div tags for info pages
- app.js – the JavaScript code for the app, included in index.html
- page.css – style sheet definitions
- ArduinoBeacon – folder with the ArduinoBeacon.ino file
There are also images used in the application. You will find all the project files on GitHub.
Running the app using Evothings Studio
- To run the app, first download Evothings Studio.
- Then install and start the Evothings Viewer app on your mobile device(s).
- Connect from Evothings Viewer using the connect key obtained in the Workbench.
- Download the code for the app from GitHub into a folder on your computer.
- Drag the file index.html into Evothings Workbench.
- Press RUN in the Workbench window, right next to the app.
- Remember to configure your Arduinos with the proper names for the app to work!
Running the app from a web server
To share the app with others, you can host it on a web server. Do as follows:
- Download the code for the app from GitHub and put it on a web server.
- Ask your users to install and start the Evothings Viewer app on their mobile device(s).
- Connect from the Evothings Viewer by entering the address of the web server (such as http://myserver.com/mybeaconapp) and tap CONNECT to start the application.
- Remember to configure your Arduinos with the proper names for the app to work!
Use any BLE device as a beacon
You should be able to use almost any BLE device for this project. Being able to set the device name is a requirement for more serious projects – just enter the name in the dictionary app.beaconPages as shown above. You can use the app BLE Scan that comes as an example included with Evothings Studio to determine the names of your BLE devices.
The advantage of using an Arduino as a beacon is that you can change its advertising name. You can also change the name of the LightBlue Bean, by connecting to a bean using the Bean Loader App and clicking on the name and edit it (no coding required). Other devices may have other procedures for setting the name, and some devices you cannot change the name for.
Where to go from here
This tutorial introduced the concept of “Do-It-Yourself” beacons to allow you to use any BLE device as a beacon without using Apple’s proprietary iBeacon technology.
However, Evothings Viewer also supports Apple’s iBeacon by including the Cordova iBeacon plugin. If you wish to explore iBeacon technology, Evothings Studio makes it easy to get started. Check out the iBeacon Scan example app to get going.
You are always welcome to drop in on the Evothings Forum, to discuss technology, applications, ask questions, and share experiences.
Interesting links:
- iBeacons: Lessons Learned (blogpost by Sean McMains at Mutual Mobile)
- CoreBluetooth Doesn’t Let You See Beacons (blogpost by David G. Young at Radius Networks)