Dialog IoT Sensor Starter Guide

The SmartBond™ IoT Sensor Development Kit makes developing motion and environmental sensing applications easy. Merging cutting-edge Bluetooth® Smart hardware, sensors and sensor fusion software, it enables the world’s lowest power 12 Degrees-of-Freedom (DoF) wireless sensor module. Highly integrated, it cuts system size and cost and includes all essential hardware and software to speed creation of advanced IoT devices.

This complete development platform developed by Dialog on the basis of Bosch Sensortec sensors, combines Bluetooth wireless communications and an ARM Cortex-M0 processor with an accelerometer, gyroscope, magnetometer and environmental sensors. All this on a board measuring just 16 x 15 mm.

IoT Sensor Starter Guide

Evothings Studio is a development tool that makes it easy to create mobile apps for the Internet of Things (IoT) in JavaScript and HTML. In this tutorial you will learn how to create a mobile application for Dialog’s IoT Sensor using the Evothings Workbench.

You can order your own IoT Sensor via Digi-Key or Mouser. For other distributors, visit the website.

Dialog Semiconductor’s IoT Sensor is a 12-DOF wireless sensor module development platform.

DA14583 low-power Bluetooth Smart SoC
BMI160 6-axis inertial measurement unit (accelerometer and gyroscope)
BMM150 3-axis geomagnetic field sensor (magnetometer)
BME280 integrated environmental unit (pressure, temperature and humidity)

The sensor also includes SmartFusion™, Dialog’s unique smart sensor fusion software library for data acquisition, sensor calibration and fusion. Ideal for resource-constrained systems, it minimizes memory, processing requirements and power consumption.

By the end of this tutorial your app can connect to the IoT Sensor and display the accelerometer data graphically. Some experience with Evothings and JavaScript is required. Follow the Getting Started to learn more.

Prerequisites

Libraries

Download the following JavaScript libraries from GitHub

dialog-iotsensor (Make sure to download all JavaScript files)
evothings.easyble
evothings.util
Smoothie.js

Hardware

Mobile device connected to Evothings Workbench
Dialog IoT Sensor, running the latest SFL firmware

For more information about installing new firmware on your IoT Sensor, see the user manual on Dialog’s Customer Support site (registration required).

Create a new application

Start by creating a new application in the Evothings Workbench. For this tutorial, we will name our app ‘Dialog IoT Sensor’

In the ‘My Apps’ tab of the Workbench, click the ‘CODE’ button to find the source for the app. Edit the index.html file in your favourite text editor such as Notepad++ and look for the line

<title>Basic Template App</title>

Change the title to your liking (we will use ‘Dialog IoT Sensor’). This changes the app name displayed in the ‘My Apps’ screen

Include the libraries

To be able to connect to our IoT Sensor, we must first include the libraries we downloaded earlier.

In the ‘libs’ folder, create a new folder called smoothie and copy smoothie.js

In the ‘libs/evothings’ folder, create three new folders called easyble, dialog-iotsensor and util. Copy the corresponding JavaScript files to these folders.

After copying the files, it is time to add some functionality to our application using JavaScript.

Manually add a new JavaScript file (app.js) to the root folder of the application.

Include the app.js and iotsensor.js files in index.html.

Find the following line in index.html

<script src="libs/evothings/ui/ui.js"></script>

Add these lines to load app.js and iotsensor.js when the application runs.

<script src="libs/evothings/dialog-iotsensor/iotsensor.js"></script>
<script script src="app.js"></script>

Initializing

The following lines of code will initialize everything we need to use the IoT Sensor library.

In app.js, add a new event listener. This will call the initialize function when all libraries are loaded.

document.addEventListener('deviceready',	
	function() { evothings.scriptsLoaded(initialize) }, false
);

In app.js, create a new global variable named ‘iotsensor’. This object will contain all functions and variables regarding the IoT Sensor.

var iotsensor;

Add a new function ‘initialize’. This function initializes the ‘iotsensor’ object and stores it for later use

function initialize() 
{ 
	console.log("Initialize function called"); 
	iotsensor = evothings.iotsensor.createInstance(evothings.iotsensor.SFL);
}

Debugging

Clicking the “Tools” button in the Evothings Workbench opens the JavaScript Tools window. The window consists of two parts: a JavaScript coding space and a log view. You can use the hyper.log() or console.log() function to display log messages like we did in the initialize() function. By using the log function in your code, you can output debug information from connected devices. The log also informs you if there are syntax errors or missing functions.

Connecting

In index.html, add a new button which calls the ‘connect’ function when clicked. This function will automatically connect to the closest IoT Sensor available. Find the following lines in index.html

<h1>TODO: Add app title</h1>
<p>This is a basic template for an Evothings app.</p>

Now replace these lines to create a new button

<button class="blue wide" onclick="connect()">Connect</button>

In app.js, create a new function called ‘connect.

This function uses the iotsensor object to automatically connect to the closest IoT Sensor available. If your mobile device does not connect, check the IoT Sensor to make sure it is advertising (blue LED blinking)

function connect()
{
	iotsensor.connectToClosestSensor(
		7500, // Scan for 7500 ms
		function()
		{
			console.log("Connected to IoT Sensor");
		},
		function(error)
		{
			console.log('Disconnect error ' + error);
		}
	);
}

When the connection is successful, it will ‘Connected to IoT Sensor’ to the log. If for some reason the connection is lost, a disconnection error is sent to the log. Once connected, the blue LED stops blinking.

Receiving data

Now that we are connected to the IoT Sensor, it is time to read the data from the sensor.

In index.html, add a second button to turn on the accelerometer.

<button class="blue wide" onclick="accelerometerOn()">Accelerometer On</button>

In app.js, add a new function called ‘accelerometerOn’ to turn on the accelerometer when the button is pressed.

function accelerometerOn()
{
	iotsensor.accelerometerOn();
}

To receive data, we must first set a callback function, in the ‘initialize’ function, add the following line

iotsensor.accelerometerCallback(handleAccelerometerData);

This function will be called everytime new data is available.

Now add the ‘handleAccelerometerData’ function to app.js

function handleAccelerometerData(data)
{
	console.log('x: ' + data.x + 'y: ' + data.y + 'z: ' + data.z);
}

Data from the accelerometer is automatically converted to the correct unit measurement and passes to the function.

If you are connected to the IoT Sensor and the accelerometer is turned on, it will output the values to the console.

Visualizing data

As you may have noticed, the log is flooded with data. We will now visualize this data in a graph using the Smoothie.js library we downloaded earlier.

First, create a new 300×200 canvas in index.html

Below ‘Accelerometer button’, add the following line:

<canvas width="300" height="200" id="chart_canvas"></canvas>

Also, we need to include the Smoothie Chart library.

Add the following line to index.html, and make sure it is above the ‘include app.js’ line

<script src="libs/smoothie/smoothie.js"></script>

In app.js, declare a chart variable and three line variables.

Below ‘var iotsensor’, add the following global variables

var chart = new SmoothieChart({minValue: -2, maxValue: 2});
var line_x = new TimeSeries();
var line_y = new TimeSeries();
var line_z = new TimeSeries();

Add a new function called ‘initializeChart’.

In this function we will initialize a new chart and redirect the data to the canvas using the variables we just created.

function initializeChart()
{
	chart.streamTo(document.getElementById("chart_canvas"));
	chart.addTimeSeries(line_x);
	chart.addTimeSeries(line_y);
	chart.addTimeSeries(line_z);
}

We want to initialize the chart as soon as the device is ready.

Add the following line to the ‘initialize’ function to initialize the chart.

initializeChart();

Your app will now show an empty graph. In order to see the accelerometer data in our graph, we must write our data to the line variables we declared earlier.

Add the following lines to the ‘handleAccelerometerData’ function

var now = Date.now();
line_x.append(now, data.x);
line_y.append(now, data.y);
line_z.append(now, data.z);

Save your changes and connect to the IoT Sensor. Enable the accelerometer and your app should look like this:

As you may have noticed, it is hard to keep track of which line corresponds to which axis. The Smoothie Chart library provides functionality to change the appearance of the lines. You can do so by replacing the ‘addTimeSeries’ lines in app.js

chart.addTimeSeries(line_x, {lineWidth:3, strokeStyle: "rgb(255, 0, 0)"});
chart.addTimeSeries(line_y, {lineWidth:3, strokeStyle: "rgb(0, 255, 0)"});
chart.addTimeSeries(line_z, {lineWidth:3, strokeStyle: "rgb(0, 0, 255)"});

This will color the lines as follows:

line_x: red
line_y: green
line_z: blue

For more information about Smoothie Charts, see the website or use the builder to create your own charts!

Evothings Instrumentation

Evothings Studio alpha version 2.1.0 introduces a new feature known as ‘Instrumentation’. This feature allows us to pass data back to our Workbench for more advanced logging.

Note: This feature is currently only available as an early release for testers and enthusiasts. To use this feature, download the latest alpha release and make sure you are using at least version 1.3.0 of the Evothings Viewer App.

For more information about the instrumentation feature, read the tutorial.

This part is not mandatory for a functional app, but provides extra insight about the Evothings Studio

In this part, we will push the accelerometer data to our desktop and display the data graphically in our Evothings Workbench.

In order to add a new graph in our Instrumentation Viewer, create a new button in index.html

<button class="blue wide" onclick="initWatcher()">Instrumentation</button>

This button will call the ‘initWatcher’ function.

Create the ‘initWatcher’ function in app.js

function initWatcher()
{
	window.accel_xyz = 0;
	window.evo.watcher.watch('acceleroPlot', window, 'accel_xyz', 'plot');
}

This function adds a new watch called ‘acceleroPlot’ under our watcher in the instrumentation view.

The watcher looks for the variable ‘accel_xyz’. In order for the watcher to see updates of the data, we must pass the accelerometer data to ‘accel_xyz’.

In the ‘handleAccelerometerData’ function in app.js, add the following line:

window.accel_xyz = data;

In order to load and use the instrumentation tools, you must follow the following sequence:

Connect the Viewer app to the workbench.
Run the application by pressing the ‘RUN’ button.
Open the ‘Viewers’ tab (upper-right corner).
In the new window called viewers, click ‘START INSTRUMENTATION’.
Click ‘watch’ next to the small gear.
Click ‘watches’.
In the app, click ‘INSTRUMENTATION’. This loads our graph.
On your desktop in the viewers window, click ‘acceleroPlot’.

This will show an empty graph in the viewers window. Now connect to your IoT Sensor using the ‘CONNECT’ button and turn the accelerometer on!

The instrumentation tool offers lots of functionality, for example, try to expand the code to see graphs for all the different sensors as shown below:

Learn more

So far you have learned

How to include libraries in your project
How to connect to your IoT Sensor
How to enable the sensors on your IoT Sensor
How to read the data from those sensors
How to visualize the data in a chart
How to use the new Evothings’ instrumentation tool

Now try to build your own app, but this time, use the gyroscope or temperature sensor to visualize the data!

The Dialog IoT Sensor library also includes functionality to change any of the settings of your IoT Sensor. See the README or documentation to learn more!

Also, check out the IoT Sensor App. This app is able to display all the sensor data and change the settings of the sensor using the IoT Sensor library!

app.js

The entire JavaScript code only consists of 58 lines:

document.addEventListener('deviceready',	
	function() { evothings.scriptsLoaded(initialize) }, false
);

var iotsensor;

var chart = new SmoothieChart({minValue: -2, maxValue: 2});
var line_x = new TimeSeries();
var line_y = new TimeSeries();
var line_z = new TimeSeries();

function initialize() 
{ 
	console.log("Initialize function called"); 
	iotsensor = evothings.iotsensor.createInstance(evothings.iotsensor.SFL);
	iotsensor.accelerometerCallback(handleAccelerometerData);
	initializeChart();
}

function initializeChart()
{
	chart.streamTo(document.getElementById("chart_canvas"));
	chart.addTimeSeries(line_x, {lineWidth:3, strokeStyle: "rgb(255, 0, 0)"});
	chart.addTimeSeries(line_y, {lineWidth:3, strokeStyle: "rgb(0, 255, 0)"});
	chart.addTimeSeries(line_z, {lineWidth:3, strokeStyle: "rgb(0, 0, 255)"});
}

function initWatcher()
{
	window.accel_xyz = 0;
	window.evo.watcher.watch('acceleroPlot', window, 'accel_xyz', 'plot');
}

function connect()
{
	iotsensor.connectToClosestSensor(
		7500, // Scan for 7500 ms
		function() { console.log("Connected to IoT Sensor"); },
		function(error) { console.log('Disconnect error ' + error); }
	);
}

function accelerometerOn()
{
	iotsensor.accelerometerOn();
}

function handleAccelerometerData(data)
{
	console.log('x: ' + data.x + ' y: ' + data.y + ' z: ' + data.z);
	var now = Date.now();

	line_x.append(now, data.x);
	line_y.append(now, data.y);
	line_z.append(now, data.z);

	window.accel_xyz = data;
}