JavaScript mobile apps for your NXP Hexiwear BLE device

Alex JonssonBlogs, Tutorials

hexiweare_logo_main_black_600x120
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Screen Shot 2016-08-19 at 12.00.46This article is all about connecting your NXP Hexiwear device to an iOS or Android phone or tablet using Bluetooth Smart (BLE). The Hexiwear is a multi-sensor device based on the ARM Cortex M4 architecture, with a sidekick ARM M0 for the BLE connectivity and an on-board array of sensors in order to become aware of the world around it.

At 120 MHz, and with 1M Flash and 256K SRAM, there is a wide range of things you can do with it, and there is a range of other product modules to extend its functionality as well, via the Hexiwear docking station. By connecting to a phone over BLE opens up for more new functionality, and it can be done easily in javaScript using Evothings Studio.

plugins_hexiwear

Tips: NXP is running a Kickstarter Challenge, a competition on the subject ending on September 30, where you can showcase your mobile IoT skills and win fame and prizes.

At Evothings, we wanted to give it a go, starting off with a small open-ended kitchen sink project reading accelerometer data, for you to easily modify and make various projects from. It’s released as open source, under the Apache 2 license, so the code is yours to use and modify. In order to follow this step-by-step article, you’ll need a computer with Evothings Studio and internet connection, a smartphone with the Evothings Viewer app installed and of course a charged Hexiwear device. We’ll connect the Hexiwear to your phone, and read some accelerometer data off the Hexiwear board in realtime. Thanks to Andreas Lundquist at Stockholm Makerspace who wrote the code for this project.

Getting Evothings Studio up and running

  1. Download the Studio Workbench desktop application from evothings.com/download, and while you’re lingering on that page, also generate your Cloud Token which will be your desktop (anonymous) identity, and allows you to connect to the Evothings cloud services. Start the Workbench, and enter the Cloud Token in the Connect tab. You’re now connected to the cloud services.
  2. Click GET KEY – which generates a key for connecting clients (phones & tablets) to the Workbench. Download the Evothings Viewer app from the app stores, enter the connect key and press CONNECT. We’re up and running! Go to the Examples tab and press the RUN button for the Hello World project, to see it load on your connected phone(s).

Running the Hexiwear project

Screen Shot 2016-08-19 at 09.37.32

Start by downloading any (or all) of these example projects (zip files)

Then add this project to your Workbench. Adding new project to Evothings Studio is easy, just drag-n-drop the index.html file of your project to the Workbench to add it to the project list in My Apps. To execute the code on your mobile device, just press RUN to launch any of the Hexiwear demo project. Make sure your phone’s bluetooth is on and that your Hexiwear device is powered up; soon it connects and starts delivering accelerometer data to the graph in the app.

Now, the fun begins. Press CODE to see where your code is at, and open up the index.html file and change some of the text. When you save, the code running on the mobile device is updated in real time. No compiling or signing, since we’re changing code that runs inside the webcontainer of the app. Go into any file, including the images, and as soon as there is a change, the diff is synced with the cloud version to which your phone(s) subscribe. Shiny!



The code

An Evothings Studio project is created similar to your typical Apache Cordova or Phonegap project.
Screen Shot 2016-08-19 at 14.02.41
You’ll see an index.html file containing the document (DOM) structure and links to the bits and pieces involved, and the elements to be displayed in the app; input field for the device name, button for connecting, a paragraph to display status info plus a canvas object onto which the x,y,z acceleration graph is drawn. The app also uses local storage, and will remember the name of a connected BLE device, even after the you quit the app. Local store is much like cookies, and can store 50MB of data per domain, that the web container accesses.

<h1>HEXIWEAR</h1>
<h2>Enter name of your BLE device</h2>
 
<input id="deviceName" value="ChangeMe!!" type="text" />
<button id="connectButton" class="blue">Connect</button>

<p id="info"></p>
<canvas id="canvas" width="300" height="150"></canvas>

The action takes place in the app.js file, where all the dynamic objects and methods are declared. Here are some key structures from the app.js file:

app.onDeviceReady = function() {

	// Report status.
	app.showInfo('Enter BLE device name and tap Connect');

	// Show the saved device name, if any.
	var name = localStorage.getItem('deviceName');
	if (name) {

		app.deviceName = name;
	}
	$('#deviceName').val(app.deviceName);

	// Register callback for connectButton
	$('#connectButton').click(app.onConnectButton);	
};

If there is a device name already in local store from previous sessions, go ahead and pick it up.

   const ACCELERATION_SAMPLE_PERIOD = 200; 
   const MOTION_SERVICE_UUID = '2000';
   const ACCELERATION_CHARACTERISTIC_UUID = '2001';

The UUID for acceleration and motion services are defined as constants in the top of the file, along with the interval between samples (in milliseconds).

app.timer = setInterval(function() {
   app.gattServer.getPrimaryService(MOTION_SERVICE_UUID)
   .then(service => {
        app.motionService = service;
        return app.motionService
       .getCharacteristic(ACCELERATION_CHARACTERISTIC_UUID);
       })
   .then(characteristic => {
       app.accelerationCharacteristic = characteristic;
       return app.accelerationCharacteristic.readValue(); 
      })
 .then(accelerationBuffer => {     // Parse acceleration variables. 
     var ax = accelerationBuffer.getInt16(0, true) / 100.0;
     var ay = accelerationBuffer.getInt16(2, true) / 100.0;
     var az = accelerationBuffer.getInt16(4, true) / 100.0;
     app.drawDiagram({ x: ax, y: ay, z: az });
     })
.catch(error => {
    app.showInfo(error);
    });   }, ACCELERATION_SAMPLE_PERIOD);

This snippet from app.js is the workhorse of this hybrid app; calling the primary services, its characteristics and ultimately the acceleration data to be displayed in the mobile app, with a timer set to the sample interval in ACCELERATION_SAMPLE_PERIOD.

Go fourth and make apps

So now you can also get going with developing apps for the NXP Hexiwear (http://www.hexiwear.com/) using HTML5 and javaScript. Just download Evothings Studio and start making great apps today!