Super Ball

Introduction

This project shows how to use the Super Ball which has the ST Sensor Tile. Sensor Tile has various sensors built in and connected via Bluetooth. This project uses Web Bluetooth to connect with Super Ball from browsers to read the sensor data. The application uses simple HTML, CSS & Javascript.

Prerequisites

• Familiarity with Javascript, HTML, CSS

• Blueapp.io

• Getting Started

Understanding the Code

Let's start with HTML code that we have. Only HTML file is index.html, which is used to display all the stuff that we have: rotating ball, live data and graphs. Basically we use angular binding to render live data. Here is one example of that.

<h4 ng-hide="sensorFusion.data.envData.temperature == undefined" style="margin-top:8%">  {{
    sensorFusion.data.envData.temperature }} &deg;F</h4>

In this project our main Javascript code is placed in two files. One is sensorFusion.js which is responsible for connecting to Bluetooth device and for parsing sensor data.

var SENSOR_SERVICE = "00000000-0001-11e1-9ab4-0002a5d5c51b"; 

The data that we want to use from sensor is placed in one main service, and from that service we are using the data like environment data, microphone data, battery, motion data and sensor fusion data. We use sensor fusion data for 3d ball rotation.

After defining UUID constants and initial variable values, we are defining method for connecting to the sensor. First we have to define variable filters which is an array of object.

var options = {filters: [{name: 'BM2V220'},{services: [SENSOR_SERVICE]}]};

Once we connect to the device, we are calling getPrimaryService in promise function, and after getting that service we are reading values from all characteristics that we need using Promise.all. We are subscribing to characteristics with 'characteristicvaluechanged' listener, and we are getting called every time sensor read new values.

if (navigator.bluetooth) {
 return navigator.bluetooth.requestDevice(options)
 /* Connecting to the device */
 .then(function (device) {
 self.bluetoothDevice = device;
 return device.gatt.connect();
        })
   .then(

For each characteristic we have to parse the readout in order to get meaningful data.

Since we are using angular, we have app.js file which is responsible for displaying the data. We are defining stuff like loading indicator and toasters. Also, since we have rotating ball, we are using WebGl library for that - three.js. So here we also have to instantiate it and pass our data.

/* Function for rendering ball 3d object */
var init = function init() {
 try {
 /* Initializing webGL renderer */
 renderer = new THREE.WebGLRenderer({
 antialias: true,
 alpha: true
 });

In this project we have graphs for displaying historical data from the sensor. Basically, we are pushing new data every second and displaying it on the graph, and for that we are using nvd3 library.

/* Calling function for updating graphs and icon colors every second */
setInterval(function () {
 if(sensorFusion.connected){
 utility.updateData($scope.sensorFusion.data, $scope);
    }
}, 1000);

For displaying the graph, we have to use predefined hvd3 tag.

<

At the end, we are listening for user to click the Bluetooth icon to start the whole process.

$scope.onConnect = function () {
 showLoadingIndicator('', 'Connecting ....');
    $scope.sensorFusion.connect()