Using Web Bluetooth in Chrome to visualize IMU data

(Note: these posts are migrated from my previous medium.com blog)

The Web Bluetooth API allows you to interact with Bluetooth LE peripherals from your browser using JavaScript. It’s been available since Chrome 45+, but you’ll have to enable it manually since it’s still an experimental feature. You can check out the API and examples here.

To start, I combined code examples for the Arduino 101 on using the built-in IMU and Bluetooth LE features; all of the Curie’s IMU readings are sent as notifications over Bluetooth LE by updating the characteristic’s value. The sketch below shows how to do so with the CurieBLE and CurieIMU libraries.

On the web side, Chrome’s Web Bluetooth APIs were used to detect, connect, and read notifications from a Bluetooth LE peripheral device (our Arduino 101). For security reasons, all of this is enabled only after the user interacts with the page, so the navigator.bluetooth method is called after you click connect. From then on, you can discover the peripherals services and characteristics; we subscribe to these characteristics and receive IMU data in the callback function:

The IMU data (roll, pitch, & yaw) gets updated, and we update them as globals as well in our script; this allows our Processing.js sketch to read from the global scope the IMU data, and update the canvas WebGL rendering.

Since everything is done in Chrome and no additional server side processing is required, I hosted everything on GitHub pages, so everyone can try it out for themselves https://w4ilun.github.io/web-bluetooth-curie-imu/

You can also find all of the code above on GitHub: https://github.com/w4ilun/web-bluetooth-curie-imu

Enjoy!