Connecting to a Bluetooth device from the web

At the ColdFront 2017 conference in Copenhagen, I got my hands on a Nordic Thingy:52 IoT Sensor kit. It has been laying on my desk for some months now, but this week I got some time to play with it.

Just here for the code? Jump to GitHub.

The device is basically a box that has a lot of sensors and a Bluetooth 5 connection. Part of the newer Bluetooth 5 standard is Bluetooth Low Energy (BLE). Some browsers lets you communicate directly with a BLE devices via JavaScript, without install drivers to the operation system – so connecting devices is much more easy than before.


Basic Bluetooth from your browser

A BLE device has a GATT server, this server has one or more services.

Each service has one or more characteristics. Depending on the device, some characteristic can be READ, some can be WRITTEN and some can NOTIFY you of a change. Or it can be a mix of the attributes.

From the browser it looks something like this:

BLE overview

Overview of a Bluetooth Low Energy device from the browser perspective

To connect, both your operation system and your browser would have to support BLE, to get it to work.
Next, the user must have initiated an event before (Chrome) lets you scan for a device. So no smart code that connects automatically on page load, the user must have started with a pointerup, click or touchend event.

Windows 10 users: Currently (November 2017) you would have to install this polyfill into your browser (not just the page, but your browser): AND disable experimental features in Chrome.

There is a lot of Bluetooth devices around, and the list of possible devices is quite large in my office. To help the user select the intended device, you can filter on what kind of device you are looking for.

Basic with a button

Lets try to connect to the Thingy device and after that get a notification when the push button i pressed.
The button is a characteristic of the user interface service, so after connection to the device, we need to get the user interface service and then the button characteristic.

Assume that we are in a click handler, then check for Bluetooth support and start connecting to the Bluetooth device. We end up with the server:

Next up is finding the the user interface service that holds the characteristic we are looking for. In the Thingy 52 firmware overview, we can see the id of both the UI service and the button characteristic:

After you are connected to the service, you can get a characteristic:

Each characteristic have a type, the type describes if you can read, write or get notifications from the characteristic. Some even has a mix of the types.
It took me some time to find out where to lookup how the different sensors in the Thingy 52 works. The firmware architecture page gives a good hint.

Now we need to add an eventlistener to see if something changes and read the state.

Final example for the button can be found at GitHub.

Let there be LED light

Lets continue and try to write something to a characteristic of the Thingy device.  We will jump directly to where we have connection to the user interface service and the LED characteristic. After that we can write to the LED characteristics and change what the LED does, this will turn it off (default is not the off mode):

According to the Thingy manual (look in the firmware architecture section) we can write to the LED characteristic. We use the writeValue function of the characteristic, it accepts an array of bytes. From the manual, we can find that the LED has 4 modes: Off, Constant color, Breathe and One Shot:

0: Off is pretty straight what it does.
1: Constant color lights the LED with the color code we write.
2: Breathe will cycle the LED on and off with one of a few prefixed colors, using the intensity and delay we write.
3: One Shot is like Breathe, but only once, so no delay.

The length of the byte array depends on the mode we want to activate. Setting a constant colour will need us to write the constant color mode and the color we would have to set it into mode 1 and then add the color:

Breathe mode is a little more tricky. The delay is an 16 bit unsigned integer, but we can only write to an array of 8 bit unsigned int’s. To write the delay value, it has to be split into two bytes, we can do that like this:

To read more about the bitwise AND operation and the bitwise shifting, here are some useful articles from MDN web docs and a little more visual at TUTS+.

Final example of the LED can be found at GitHub.

Its getting hot in here

Inside the Thingy 52 is a weather station that can measure temperature, pressure, humidity, air quality and then it has a light sensor. I wanted just to use the thermometer, and then leave out the other sensors to keep my experiment simple.
But it turns out that in the Thingy, you have to configure the entire environment service to get just the temperature.
It turns out that understanding the device you are talking to, might be the most difficult part in combination with the format of the byte array the device delivers or accepts.

The configuration of the weather station service looks like this:

As you can see, the service for the environment sensor has a four 16 bit unsigned integers and four 8 bit unsigned integers that needs to be set in the correct span.

After setting up the service, we can attach an event listener to each of the sensors, and then read the temperature like this:

After putting the Thingy 52 in my fridge it took about 10 minutes to go below zero degrees Celsius. So the build in sensor is not one the I would use for cooking or some other application where you would like fast temperature readings. But for the example of communicating with a weather station, it is just fine.

Working with the weather station example is found here.

Summing up

Working with Bluetooth on the web is coming, but might not be ready for production yet – unless you have a setup that only is accessed from supported devices.

If you are into playing with communication with a Bluetooth device, the Thingy 52 could be a good option, as you have access to many different sensors to play with. There is environment sensors, accelerometer, gyroscope and it even has a microphone and speaker.



Kategorier: Frontend, Mobil, Udvikling

Tagged as: ,

1 kommentar »