Fun with Bluetooth @ DomoticaGrunn

Time for the browser to get physical. With WebBluetooth the browser can actually take control of all kinds of physical devices in the real world like lightbulbs, robots and even drones. This talk will teach you the basics that you need to get started and will show you some more advanced topics like building your own Bluetooth devices using just JavaScript.

Transcript

1. fun with bluetooth
2. bluetooth sucks
3. classic bluetooth the reason everybody 
 hates bluetooth bluetooth low energy vs. control drones and other cool shit
4. bluetooth low energy also known as BLE Bluetooth LE Bluetooth Smart Bluetooth 4
5. playbulb sphere playbulb
6. spherio bb-8
7. parrot mini drone
8. activity tracker
9. the boring theoretical stuff
10. central peripheral
11. central
12. generic attribute profile gatt, because gap was already taken
13. central peripheral client server
14. § i device information light multiple services per device
15. i device information battery flight control
16. i device information battery steering control
17. i device information battery heart rate
18. heart rate i device information battery
19. i device information battery heart rate
20. i device information manufacturer model number serial number hardware revision firmware revision software revision ... multiple characteristics 
 per service
21. server service characteristic value array of objects object property value
22. services and characteristics are identified by uuid’s 16 bit or 128 bit
23. 0x180A 0000180A-0000-1000-8000-00805F9B34FB 16 bit 128 bit i device information
24. 0x180F 0000180F-0000-1000-8000-00805F9B34FB 16 bit 128 bit battery
25. not recommended any UUID outside of the range
 xxxxxxxx-0000-1000-8000-00805F9B34FB 16 bit 128 bit light steering control flight c still, everybody does this
26. i device information manufacturer model number serial number hardware revision firmware revision software revision ...
27. i 0x180A 0x2A29 0x2A24 0x2A25 0x2A27 0x2A26 0x2A28 ... bad for readability, 
 good for saving bandwidth
28. read write write without response notify each characteristic supports one or more of these
29. every value is an array of bytes no fancy datatypes, just bytes
30. pfew...
32. fun with bluetooth boring facts
 about
33. fun with bluetooth
34. web
 bluetooth api still not the fun part :-(
35. connecting to a device
36. 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
37. the user selects the actual device
38. 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
39. 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
40. 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
41. writing data
42. 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
43. reading data
44. 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
45. get notified of changes
46. 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
47. things you need to know: • javascript
 • the webbluetooth api • promises • typed arrays duh!
48. browser support Chrome Opera Samsung
 (behind flag) Servo
 (soon)
49. browser support Chrome Opera Samsung
 (behind flag) kinda works Servo
 (soon) WebBLE
 for iOS
50. and... npm install node-web-bluetooth
51. and... the puck.js
52. command-
 line tools Oh, come on! (linux)
53. hcitool lescan
 LE Scan ... 82:4C:4B:17:AC:E6 PLAYBULB sphere 11:75:58:1B:52:85 TimeBox-mini-light D9:97:A2:35:42:2C BB-422C D5:72:4A:3F:C2:1F Puck.js c21f scan for 
 ble devices
54. gatttool --device=82:4C:4B:17:AC:E6 --characteristics
 
 handle = 0x0002, char properties = 0x20, 
 char value handle = 0x0003, 
 uuid = 00002a05-0000-1000-8000-00805f9b34fb
 handle = 0x0028, char properties = 0x06, 
 char value handle = 0x0029, 
 uuid = 0000fffc-0000-1000-8000-00805f9b34fb handle = 0x004a, char properties = 0x02, 
 char value handle = 0x004b, 
 uuid = 00002a50-0000-1000-8000-00805f9b34fb get a list 
 of all 
 characteristics
55. gatttool --device=82:4C:4B:17:AC:E6 
 --char-read --handle=0x0029
 
 Characteristic value/descriptor: 00 00 00 ff reading the value 
 of a characteristic
56. gatttool --device=82:4C:4B:17:AC:E6 
 --char-write --handle=0x0029 --value=0000ff00
 writing the value 
 of a characteristic
57. custom characteristics. wtf!
58. 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
59. 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
60. 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
61. reading a value: add event listener write a specific value get the event with the color 1 2 3 service 0xffe0
 characteristic 0xffe4 service 0xffe5
 characteristic 0xffe9
62. adafruit
 bluetooth 
 sniffer
65. demo finally the fun part
66. warning experimental technology
 setting low expectations
67. warning wifi interference
 lowering them even further
69. https:/ /bluetooth.rocks/lightbulb
 https:/ /github.com/NielsLeenheer/BluetoothBulb change the colour 
 of a lightbulb
70. https:/ /bluetooth.rocks/racer https:/ /github.com/NielsLeenheer/BluetoothRacer control a lego racer 
 using a gamepad use css animations to 
 define a path
71. https:/ /bluetooth.rocks/drone
 https:/ /github.com/poshaughnessy/web-bluetooth-parrot-drone control a drone 
 from your browser
72. https:/ /bluetooth.rocks/pixel pixel matrix display
73. https:/ /bluetooth.rocks/pulse
 https:/ /github.com/NielsLeenheer/BluetoothPulse find out your 
 current heartbeat
74. fun with bluetooth !
75. questions? @html5test