Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fun with Bluetooth @ Halfstack

Fun with Bluetooth @ Halfstack

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.

Niels Leenheer

November 17, 2017
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

Transcript

  1. fun with
    bluetooth

    View full-size slide

  2. progressive 

    web apps

    View full-size slide

  3. pwa’s
    are great
    !

    View full-size slide

  4. bluetooth
    sucks

    View full-size slide

  5. classic bluetooth
    the reason everybody 

    hates bluetooth
    bluetooth low energy
    vs.
    control drones and other cool shit

    View full-size slide

  6. bluetooth low energy
    also known as
    BLE
    Bluetooth LE
    Bluetooth Smart
    Bluetooth 4

    View full-size slide

  7. playbulb sphere
    playbulb

    View full-size slide

  8. spherio bb-8

    View full-size slide

  9. parrot mini drone

    View full-size slide

  10. activity tracker

    View full-size slide

  11. the boring theoretical stuff

    View full-size slide

  12. central peripheral

    View full-size slide

  13. generic attribute profile

    View full-size slide

  14. generic attribute profile ?

    View full-size slide

  15. generic attribute profile
    gatt, because gap was already taken

    View full-size slide

  16. central peripheral
    client server

    View full-size slide

  17. §
    i device information
    light
    multiple services per device

    View full-size slide

  18. i device information
    battery
    flight control

    View full-size slide

  19. i device information
    battery
    steering control

    View full-size slide

  20. i device information
    battery
    heart rate

    View full-size slide

  21. heart rate
    i device information
    battery

    View full-size slide

  22. i device information
    battery
    heart rate

    View full-size slide

  23. i device information
    manufacturer
    model number
    serial number
    hardware revision
    firmware revision
    software revision
    ...
    multiple characteristics 

    per service

    View full-size slide

  24. server
    service
    characteristic
    value
    array of objects
    object
    property
    value

    View full-size slide

  25. services and characteristics
    are identified by uuid’s
    16 bit or 128 bit

    View full-size slide

  26. 0x180A
    0000180A-0000-1000-8000-00805F9B34FB
    16 bit
    128 bit
    i device information

    View full-size slide

  27. 0x180F
    0000180F-0000-1000-8000-00805F9B34FB
    16 bit
    128 bit
    battery

    View full-size slide

  28. 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

    View full-size slide

  29. i device information
    manufacturer
    model number
    serial number
    hardware revision
    firmware revision
    software revision
    ...

    View full-size slide

  30. i 0x180A
    0x2A29
    0x2A24
    0x2A25
    0x2A27
    0x2A26
    0x2A28
    ...
    bad for readability, 

    good for saving bandwidth

    View full-size slide

  31. read
    write
    write without response
    notify
    each characteristic supports
    one or more of these

    View full-size slide

  32. every value is an array of bytes
    no fancy datatypes, just bytes

    View full-size slide

  33. fun with
    bluetooth
    boring facts

    about

    View full-size slide

  34. fun with
    bluetooth

    View full-size slide

  35. web

    bluetooth
    api
    still not the fun part
    :-(

    View full-size slide

  36. connecting to a device

    View full-size slide

  37. 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

    View full-size slide

  38. the user selects
    the actual device

    View full-size slide

  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 ])
    );
    })
    2
    connect to the server

    View full-size slide

  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 ])
    );
    })
    3
    get the service

    View full-size slide

  41. 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

    View full-size slide

  42. writing data

    View full-size slide

  43. 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

    View full-size slide

  44. reading data

    View full-size slide

  45. 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

    View full-size slide

  46. get notified of changes

    View full-size slide

  47. 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

    View full-size slide

  48. things you need to know:
    • the webbluetooth api
    • promises
    • typed arrays
    duh!

    View full-size slide

  49. browser support
    Chrome Opera Samsung

    (behind flag)
    Servo

    (soon)

    View full-size slide

  50. browser support
    Chrome Opera Samsung

    (behind flag)
    kinda works
    Servo

    (soon)
    WebBLE

    for iOS

    View full-size slide

  51. and...
    npm install node-web-bluetooth

    View full-size slide

  52. and... the puck.js

    View full-size slide

  53. custom
    characteristics.
    wtf!

    View full-size slide

  54. 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

    View full-size slide

  55. 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

    View full-size slide

  56. 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

    View full-size slide

  57. writing a value:

    function(r, g, b, position) {
    let buffer = new Uint8Array([
    0x07, 0x02, position + 1, r, g, b
    ]);
    return buffer;
    }

    View full-size slide

  58. writing a value:

    function(r, g, b, position) {
    let buffer = new Uint8Array([
    0x58, r, g, b, 0x01, position
    ]);
    ...

    View full-size slide

  59. 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 => {


    View full-size slide

  60. 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;
    }

    View full-size slide

  61. adafruit

    bluetooth 

    sniffer

    View full-size slide

  62. decompiling 

    the apk
    don't tell anyone!

    View full-size slide

  63. demo
    finally the fun part

    View full-size slide

  64. warning
    experimental technology

    setting low expectations

    View full-size slide

  65. warning
    wifi interference

    lowering them even further

    View full-size slide

  66. https:/
    /bluetooth.rocks/lightbulb

    https:/
    /github.com/NielsLeenheer/BluetoothBulb
    change the colour 

    of a lightbulb

    View full-size slide

  67. https:/
    /bluetooth.rocks/pixel
    draw pixel art on 

    a led matrix display

    View full-size slide

  68. https:/
    /bluetooth.rocks/racer
    https:/
    /github.com/NielsLeenheer/BluetoothRacer
    control a lego racer 

    using a gamepad
    use css animations to 

    define a path

    View full-size slide

  69. https:/
    /bluetooth.rocks/drone

    https:/
    /github.com/poshaughnessy/web-bluetooth-parrot-drone
    control a drone 

    from your browser

    View full-size slide

  70. https:/
    /bluetooth.rocks/printer
    print on a receipt printer

    View full-size slide

  71. https:/
    /bluetooth.rocks/pulse

    https:/
    /github.com/NielsLeenheer/BluetoothPulse
    find out your 

    current heartbeat

    View full-size slide

  72. fun with
    bluetooth
    !

    View full-size slide

  73. questions?
    @html5test

    View full-size slide