fun with bluetooth
A presentation at Frontend NE in April 2018 in Newcastle upon Tyne, UK by Niels Leenheer
fun with bluetooth
why?
progressive web apps
pwa’s are great !
but...
ethernet & wifi
wifi
zigbee?
ethernet
runs a webserver use fetch or xmlhttprequest
[{ "id":"001788fffe100491", "internalipaddress":"192.168.2.23", "macaddress":"00:17:88:10:04:91", "name":"Philips Hue" }, { "id":"001788fffe09a168", "internalipaddress":"192.168.88.252" }, { https://www.meethue.com/api/nupnp 1
http://192.168.2.23/api {"devicetype": "hue_pwa#pixel_xl"} 3 [{"success":{"username": "........"}}] User presses physical button on the hub click save to local storage
http://192.168.2.23/api {"devicetype": "hue_pwa#pixel_xl"} 3 [{"success":{"username": "........"}}] User presses physical button on the hub click save to local storage
4 { "1": { "state": { "on": true, "bri": 144, "hue": 13088, "sat": 212, "xy": [0.5128,0.4147], "ct": 467, "alert": "none", "effect": "none", http://192.168.2.23/api/......../lights
http://192.168.2.23/api/......../lights/1/state { "hue": 50000, "on": true, "bri": 200 } 5 [ {"success":{"/lights/1/state/bri":200}}, {"success":{"/lights/1/state/on":true}}, {"success":{"/lights/1/state/hue":50000}} ]
clickclickreloadclick
this does not work !
https only http only no certificate for you
= network use remote api’s ≠ access to local devices
hue remote api Also allow control from outside the local network
We are currently preparing for release of this remote API which will initially be available to a limited number of partners. “ — Philips
We are currently preparing for release of this remote API which will initially be available to a limited number of partners. “ — Philips two years ago very not yet
fun with bluetooth problems local networks
fun with bluetooth
bluetooth
bluetooth sucks
classic bluetooth the reason everybody hates bluetooth bluetooth low energy vs. control drones and other cool shit
bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4
playbulb sphere playbulb
spherio bb-8
parrot mini drone
activity tracker
the boring theoretical stuff
central peripheral
central
generic attribute profile
generic attribute profile ?
generic attribute profile gatt, because gap was already taken
client server
central
peripheral
§ i device information light multiple services per device
i device information battery flight control
i device information battery steering control
i device information battery heart rate
heart rate
i
device information
battery
i device information battery heart rate
i
device information
manufacturer
model number
serial number
hardware revision
firmware revision
software revision
...
multiple characteristics
per service
server service characteristic value array of objects object property value
services and characteristics are identified by uuid’s 16 bit or 128 bit
0x180A 0000 180A -0000-1000-8000-00805F9B34FB 16 bit 128 bit i device information
0x180F 0000 180F -0000-1000-8000-00805F9B34FB 16 bit 128 bit battery
not recommended any UUID outside of the range xxxxxxxx -0000-1000-8000-00805F9B34FB 16 bit 128 bit light steering control flight control still, everybody does this
i
device information
manufacturer
model number
serial number
hardware revision
firmware revision
software revision
...
i
0x180A
0x2A29
0x2A24
0x2A25
0x2A27
0x2A26
0x2A28
...
bad for readability,
good for saving bandwidth
read
write
write without response
notify
each characteristic supports
one or more of these
every value is an array of bytes no fancy datatypes, just bytes
pfew...
fun
with
bluetooth boring facts about
fun with bluetooth
web
bluetooth
api
still not the fun part
:-(
connecting to a device
navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: 'PLAYBULB' }
],
optionalServices: [ 0xff0f ]
})
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(characteristic => {
return characteristic.writeValue(
new Uint8Array([ 0x00, r, g, b ])
);
})
1
we tell the browser what
kind of device we want
the user selects
the actual device
navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: 'PLAYBULB' }
],
optionalServices: [ 0xff0f ]
})
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(characteristic => {
return characteristic.writeValue(
new Uint8Array([ 0x00, r, g, b ])
);
})
2
connect to the server
navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: 'PLAYBULB' }
],
optionalServices: [ 0xff0f ]
})
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(characteristic => {
return characteristic.writeValue(
new Uint8Array([ 0x00, r, g, b ])
);
})
3
get the service
navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: 'PLAYBULB' }
],
optionalServices: [ 0xff0f ]
})
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(characteristic => {
return characteristic.writeValue(
new Uint8Array([ 0x00, r, g, b ])
);
})
4
get the characteristic
writing data
navigator.bluetooth.requestDevice({ ... }) .then(device => device.gatt.connect()) .then(server => server.getPrimaryService(0xff0f)) .then(service => service.getCharacteristic(0xfffc)) .then(c => { return c.writeValue( new Uint8Array([ 0x00, r, g, b ]) ); }) write some bytes
reading data
navigator.bluetooth.requestDevice({ ... })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(c => c.readValue())
.then(value => {
let r = value.getUint8(1);
let g = value.getUint8(2);
let b = value.getUint8(3);
})
read some bytes
get notified of changes
navigator.bluetooth.requestDevice({ ... })
.then(device => device.gatt.connect())
.then(server => server.getPrimaryService(0xff0f))
.then(service => service.getCharacteristic(0xfffc))
.then(c => {
c.addEventListener('characteristicvaluechanged', e => {
let r = e.target.value.getUint8(1);
let g = e.target.value.getUint8(2);
let b = e.target.value.getUint8(3);
});
c.startNotifications();
})
add event listener
don't forget to start listening
things you need to know: • the webbluetooth api • promises • typed arrays duh!
browser support Chrome Opera Samsung Servo (soon)
browser support Chrome Opera Samsung kinda works Servo (soon) WebBLE for iOS
and... npm install node-web-bluetooth
and... the puck.js
custom
characteristics
.
wtf!
writing a value: function(r, g, b) { return new Uint8Array([ 0x00, r, g, b ]); } reading a value: function(buffer) { return { r: buffer.getUint8(1), g: buffer.getUint8(2), b: buffer.getUint8(3) } } writing to and reading from the same characteristic
writing a value:
function(r, g, b) {
return new Uint8Array([
0x01, g, 0x01, 0x00, 0x01,
b, 0x01, r, 0x01, 0x00
]);
}
reading the current
color is not possible
writing a value: function(r, g, b) { var buffer = new Uint8Array([ 0xaa, 0x0a, 0xfc, 0x3a, 0x86, 0x01, 0x0d, 0x06, 0x01, r, g, b, 0x00, 0x00, (Math.random() * 1000) & 0xff, 0x55, 0x0d ]); for (var i = 1; i < buffer.length - 2; i++) { buffer[15] += buffer[i]; } return buffer; } reading the current color is not possible
writing a value:
function(r, g, b, position) {
let buffer = new Uint8Array([
0x07, 0x02, position + 1, r, g, b
]);
return buffer;
}
writing a value:
function(r, g, b, position) {
let buffer = new Uint8Array([
0x58, r, g, b, 0x01, position
]);
...
writing a value:
function(r, g, b, position) {
let buffer = new Uint8Array([
0x58, r, g, b, 0x01, position
]);
let payload = new Uint8Array(buffer.length + 4);
payload[0] = payload.length - 2;
payload[1] = payload.length - 2 >>> 8;
payload.set(buffer, 2);
let checksum = payload.reduce((a, b) => a + b, 0);
payload[payload.length - 2] = checksum;
payload[payload.length - 1] = checksum >>> 8;
let extra = payload.filter(value => {
value === 0x01 || value === 0x02 || value == 0x03
message[m] = 0x03;
message[m + 1] = 0x05;
m += 2;
}
else if (payload[i] === 0x03) {
message[m] = 0x03;
message[m + 1] = 0x06;
m += 2;
}
else {
message[m] = payload[i];
m++;
}
}
message[0] = 0x01;
message[message.length - 1] = 0x02;
return message;
}
adafruit bluetooth sniffer
decompiling
the apk don't tell anyone!
demofinally the fun part
warning experimental technology setting low expectations
warning wifi interference lowering them even further
#fene2018
https://bluetooth.rocks/lightbulb https://github.com/NielsLeenheer/BluetoothBulb change the colour of a lightbulb
https://bluetooth.rocks/pixel draw pixel art on a led matrix display
https://bluetooth.rocks/racer https://github.com/NielsLeenheer/BluetoothRacer control a lego racer using a gamepad use css animations to define a path
https://bluetooth.rocks/drone https://github.com/poshaughnessy/web-bluetooth-parrot-drone control a drone from your browser
https://bluetooth.rocks/printer print on a receipt printer
https://bluetooth.rocks/pulse https://github.com/NielsLeenheer/BluetoothPulsefind out your current heartbeat
fun with bluetooth !
questions? @html5test
