Make Javascript Apps for Hexiwear 101

This article is all about connecting your NXP Hexiwear device to an iOS or Android phone or tablet using Bluetooth Smart (BLE). If you haven’t already heard of the Hexiwear, it’s a multi-sensor device based on the ARM Cortex M4 architecture, uses a sidekick ARM M0 for the BLE connectivity and most importantly an on-board array of sensors in order to become aware of the world around it.

At 120 MHz, and with 1MB 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, typically 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.

Tips: NXP is currently 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 where I work myself, we wanted to give the Hexiwear a go, starting off with a few small open-ended kitchen sink projects; reading sensor data, and preparing for you to easily modify and make various projects from. These projects are released as open source, under the Apache 2 license, so the code is in a wide sense yours to use and modify once you download it. 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, make a basic graph on canvas et cetera. Thanks to Andreas Lundquist at Stockholm Makerspace who wrote the code for this project.

Getting Evothings Studio up and running

• Download the Studio Workbench desktop application from evothings.com/download, and while you’re lingering on that page, also generate a Cloud Token which will become your desktop (anonymous) identity later on in this tutorial, allowing you to connect to the Evothings cloud services. Start the Workbench on your computer, and enter the Cloud Token in the Connect tab. You’re now connected to the cloud!

• 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)

• tip: If you personalise your copy of Evothings Studio, you won't have to bake new connect keys over and over.

Running the Hexiwear Projects

Start the actual project by downloading the example project zip file(s) here:

• Hexiware Sensors

• Hexiwear Acclerometer Graph

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.

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 accessed.

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 (from the accelerometer example):

var MOTION_SERVICE = "00002000-0000-1000-8000-00805f9b34fb"; 
var MOTION_ACCELEROMETER = "00002001-0000-1000-8000-00805f9b34fb"; 
function initialize() { 
 document.addEventListener("deviceready", onDeviceReady, false); 
} 
function showStatus(text) { 
 console.log(text); 
 document.getElementById("status").innerHTML = text; 
} 
function onDeviceReady() { 
 // UI button actions. 
 document.getElementById("connectButton") 
   .addEventListener("click", onConnectButton, false); 
 document.getElementById("disconnectButton") 
   .addEventListener("click", disconnect, false); 
 showStatus("Ready"); 
} 
function onConnectButton() { 
 // We must not be connected. 
 if (mDevice) return; 
 disconnect(); 
 searchForBondedDevice({ 
   name: 'HEXIWEAR', 
   serviceUUIDs: [MOTION_SERVICE], 
   onFound: connectToDevice, 
   onNotFound: scanForDevice, 
   }); 
}  

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

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).

// This function is called when a device is detected, here 
 // we check if we found the device we are looking for. 
 function onDeviceFound(device) { 
   if (isHexiwear(device)) { 
     // Stop scanning. 
     evothings.ble.stopScan(); 
     showStatus('Found HexiWear Sensor Tag') 
     // Bond and connect. 
     evothings.ble.bond( 
       device, 
       function(state) { 
         // Android returns 'bonded' when bonding is complete. 
         // iOS will return 'unknown' and show paring dialog 
         // when connecting. 
         if (state == 'bonded' || state == 'unknown') { 
           connectToDevice(device); 
         } 
         else if (state == 'bonding') { 
           showStatus('Bonding in progress'); 
         } 
         else if (state == 'unbonded') { 
           showStatus('Bonding aborted'); 
         } 
       }, 
       function(error) { 
         showStatus('Bond error: ' + error); 
       }); 
   } 
 } 

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, and from there do the polling of data:

function poll() { 
 var service = evothings.ble.getService(mDevice, MOTION_SERVICE); 
 var characteristic = evothings.ble.getCharacteristic(service, MOTION_ACCELEROMETER); 
 evothings.ble.readCharacteristic( 
   mDevice, 
   characteristic, 
   function(data) { 
     var v = new Int16Array(data); 
     var ax = v[0] / 100.0; 
     var ay = v[1] / 100.0; 
     var az = v[2] / 100.0; 
     drawDiagram({ x: ax, y: ay, z: az }); 
   }, 
   function(errorCode) { 
     // On Android we get read errors now and then. Log this to the console. 
     console.log("readCharacteristic error: " + errorCode); 
   }); 
}  

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!