Hardware components | ||||||
_baVEVgguW1.jpg?auto=compress%2Cformat&w=48&h=48&fit=fill&bg=ffffff) |
| × | 1 | |||
Software apps and online services | ||||||
 |
| |||||
The Arduino/Genuino 101 is the result of a collaboration between Arduino/Genuino and Intel. It is based on Intel's Curie module. The board has the same footprint as the Arduino/Genuino UNO board which enables you to use one of the already available shields on your board. The Intel Curie board is equipped with hardware that supports communication using Bluetooth Low Energy and sensors to provide data about movement using a six-axis accelerometer/gyro. The board is also equipped with two microprocessors, one with x86 (Quark) architecture and one with ARC architecture. Both cores run at 32 MHz and share 80 kB ram out of which 24 kB is available to you.
In this tutorial I will show you how you, using nothing but web technologies such as HTML/JavaScript can build a mobile application that runs on both iOS and Android. The application will be able to turn on and off an LED on the development board after it has established a BLE-connection to the device.
In order to try this tutorial you need the follow tools:
- An Arduino/Genuino 101
- iOS / Android phone with BLE support
- Evothings Studio software
The first step in this tutorial is to install support for the Genuino/Arduino 101 on your computer. If you haven't already done that there is an excellent guide named “Getting Started with the Arduino/Genuino 101” available here.
In order to keep things simple this tutorial will be based on one of the examples provided by the community. Open the example LED (File -> Example -> CurieBLE -> LED) compile and upload to your board.
The code in the example is well written and explicit so I don't explain it here. However, if you don't have any previous knowledge about BLE it might be a bit hard to understand. If that is the case I recommend you to read Adafruits article Introduction to Bluetooth Low Energy which will give you the knowledge you need in order to understand the sketch.
Before you move on to the next step in this tutorial you need to have a look on the back of your Arduino/Genuino 101 board. Note the code on the sticker marked with a red box on the image below. This code is MAC address of the Bluetooth Low Energy Chip, the sketch uses the four last characters in order to uniquely identify your board during advertising.
In order to run the example provided you need to install the Evothings Workbench ( 2.1.0-alpha2 or newer) on your computer and the Evothings Viewer (iOS, Android) on your smartphone. There is more detailed instructions available on Evothings homepage.
Open the Evothings Workbench on your computer and press the Connect tab. In this tab you will connect your smartphone with your computer in order to enable live updates of your mobile application project. Press the GET KEY button to receive a key.
Open the Evothings Viewer on your smartphone and enter the key in the Connect Key field and press the Connect button. Now you have connected your workbench to your mobile phone and you are ready to start to develop your mobile application.
Open the Examples tab in Evothings Viewer and locate the example named Arduino101 LED On/Off BLE. Press the Copy-button and press the Create-button without making any changes in the pop up. Press the Code-button to access the application and to make the necessary changes described below.
If you press the Run button the application should load on your smartphone, see the figure below.
Before you can connect to your development board we need to make a change to the source code so that the application can connect to your board.
<!DOCTYPE html>
<html>
<!--
This is an app that demonstrates how to control an Arduino101 board
using BLE (Bluetooth Low Energy).
-->
<head>
<br/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<br/>
<title>Arduino101 LED On/Off BLE</title>
<br/>
<style>
@import 'ui/css/evothings-app.css';
</style>
<br/>
<script>
// Redirect console.log to Evothings Workbench.
if (window.hyper && window.hyper.log) { console.log = hyper.log }
window.onerror = function(msg, url, line)
{
console.log(msg + ": " + url + ":" + line);
};
</script>
<br/>
<script src="cordova.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/evothings/evothings.js"></script>
<script src="libs/evothings/ui/ui.js"></script>
<script src="libs/evothings/arduinoble/arduinoble.js"></script>
<br/>
</head>
<br/>
<body ontouchstart=""><!-- ontouchstart="" enables low-delay CSS transitions. -->
<br/>
<header>
<button class="back" onclick="history.back()">
<img src="ui/images/arrow-left.svg" />
</button>
<br/>
<img class="logotype" src="ui/images/logo.svg" alt="Evothings" />
<br/>
<!--<button class="menu" onclick=""><img src="ui/images/menu.svg" /></button>-->
</header>
<br/>
<h1>Arduino101 LED On/Off BLE</h1>
<br/>
<p id="info">Initializing...</p>
<br/>
<button class="yellow wide" onclick="app.connect()">CONNECT</button>
<br/>
<br />
<br/>
<button class="green wide big" onclick="app.ledOn()">LED ON</button>
<br/>
<br />
<br/>
<button class="red wide big" onclick="app.ledOff()">LED OFF</button>
The first part of the application (that can be seen above) provides the user interface. It consists of three buttons, one button that executes the app.connect() method, one that executes the app.ledOn() method and finally one that executes the app.ledOff() method. In the code below the application logic is defined.
<script>
// Application object.
var app = {}
<br/>
// Connected device.
app.device = null;
<br/>
// Turn on LED.
app.ledOn = function()
{
app.device && app.device.writeDataArray(new Uint8Array([1]), '19b10001-e8f2-537e-4f6c-d104768a1214');
}
<br/>
// Turn off LED.
app.ledOff = function()
{
app.device && app.device.writeDataArray(new Uint8Array([0]), '19b10001-e8f2-537e-4f6c-d104768a1214');
}
<br/>
app.showMessage = function(info)
{
document.getElementById('info').innerHTML = info
};
<br/>
// Called when BLE and other native functions are available.
app.onDeviceReady = function()
{
app.showMessage('Touch the connect button to begin.');
};
<br/>
app.connect = function()
{
evothings.arduinoble.close();
app.showMessage('Connecting...');
<br/>
evothings.arduinoble.connect(
'GENUINO 101-1DD5', // Advertised name of BLE device.
function(device)
{
app.device = device;
app.showMessage('Connected! Touch buttons to turn LED on/off.');
},
function(errorCode)
{
app.showMessage('Connect error: ' + errorCode + '.');
});
};
<br/>
document.addEventListener(
'deviceready',
function() { evothings.scriptsLoaded(app.onDeviceReady) },
false);
</script>
First an application object app is defined. The object contains all methods and properties of the application. The method app.ledOn() and app.ledOff() send the data to turn on respectively off the LED on the development board. The method app.showMessage() prints a status message in the user interface and the method app.onDeviceReady() prints a message that urges the user to press the connect button when the DOM has finished loading. Finally we have the app.connect() method that tries to establish a connection to the development board using Bluetooth Low Energy. The method executes the connect method defined in the arduinoble library. The method expects three arguments, the first one is the advertised name of the development board, the second is a method to execute if a connection is established and the third a method to execute if an error occurs. In order for this application to work you need to change the first argument.
In the source code you need to replace the first argument to match your board. Replace the four last characters in the 'GENUINO 101-1DD5' with the characters you noted in previous chapter.
If you press the connect button now the application should establish a connection between the smart phone and development board and you should be able to turn on and off the led.
TroubleshootingThere seems to be an difference in how iOS/Android detects the Arduino/Genuino 101 board name wise. If you have trouble to connect to the board, run the example named BLE Scan in Evothings Workbench and identify your board (usually named 'LED', 'GENUINO 101-****' or 'ARDUINO 101-****'). The name of the board is the one you should add to index.html.
Conclusion
The tutorial above is a good starting point for anyone who is interested in connecting their smartphone to their Genuino/Arduino 101 using Bluetooth Low Energy. There is no time to spare, download Evothings Studio and start to develop your solutions! Good luck and have fun!
Comments