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

WaffleJS Apr '19 - CoffeeJS

WaffleJS Apr '19 - CoffeeJS

Slides for "CoffeeJS - How I hacked a coffee machine using JavaScript".
More about project: bit.ly/coffee-js

Dominik Kundel

April 03, 2019
Tweet

More Decks by Dominik Kundel

Other Decks in Programming

Transcript

  1. Coffee.js
    How I Hacked a Coffee Machine Using JavaScript
    Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  2. Dominik Kundel | @dkundel | #wafflejs |
    console.log(`
    Hi! I’m Dominik Kundel
    `);
    dkundel.com
    @dkundel
    [email protected]
    github/dkundel
    Developer Evangelist
    !&& JavaScript Hacker
    #coffeejs #htcpcp

    View full-size slide

  3. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    How I Hacked a Coffee
    Machine Using JavaScript

    View full-size slide

  4. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  5. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  6. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    But Why?

    View full-size slide

  7. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. It’s Interesting

    View full-size slide

  8. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    2. “Alexa, make me a coffee”

    View full-size slide

  9. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    3. APIs

    View full-size slide

  10. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Why JavaScript?

    View full-size slide

  11. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Why JavaScript?

    View full-size slide

  12. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. The last time I wrote C++ was in university
    Why JavaScript?

    View full-size slide

  13. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. The last time I wrote C++ was in university
    2. I know JavaScript well === faster prototyping
    Why JavaScript?

    View full-size slide

  14. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. The last time I wrote C++ was in university
    2. I know JavaScript well === faster prototyping
    3. Writing a web server is easy
    Why JavaScript?

    View full-size slide

  15. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. The last time I wrote C++ was in university
    2. I know JavaScript well === faster prototyping
    3. Writing a web server is easy
    4. It’s more of a challenge
    Why JavaScript?

    View full-size slide

  16. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. The last time I wrote C++ was in university
    2. I know JavaScript well === faster prototyping
    3. Writing a web server is easy
    4. It’s more of a challenge
    5. Hardware === eventDriven && JS === eventDriven
    Why JavaScript?

    View full-size slide

  17. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Options?

    View full-size slide

  18. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  19. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Espruino

    View full-size slide

  20. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Espruino Johnny-Five

    View full-size slide

  21. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Espruino Johnny-Five Tessel

    View full-size slide

  22. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    +

    View full-size slide

  23. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    How?

    View full-size slide

  24. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Disclaimer

    View full-size slide

  25. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Disclaimer

    View full-size slide

  26. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  27. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  28. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  29. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  30. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  31. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  32. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    The Facts
    • 8 cables
    • 6 switches
    • 7 LEDs

    View full-size slide

  33. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    The Facts
    • 8 cables
    • 6 switches
    • 7 LEDs
    The Assumptions
    • One cable for power
    • At least 3 pins + power for buttons
    • At least 3 pins + power for LEDs

    View full-size slide

  34. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    const five = require('johnny-five');
    const Tessel = require('tessel-io');
    const board = new five.Board({
    io: new Tessel(),
    });
    board.on('ready', () !=> {
    const p1 = new five.Pin({
    pin: 'b0',
    mode: 2,
    });
    !//!!...
    const p8 = new five.Pin({
    pin: 'b7',
    mode: 2,
    });
    const pins = [p1 !/* !!... !*/, , p8];
    board.repl.inject({ pins: pins });
    });
    The Naive Approach

    View full-size slide

  35. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    board.on('ready', () !=> {
    !// PIN declaration !!...
    const b2 = new five.Button('b1');
    const b3 = new five.Button('b2');
    const b7 = new five.Button('b6');
    const b8 = new five.Button('b7');
    const buttons = [b2, b3, b7, b8];
    buttons.forEach(btn !=> {
    btn.on('press', () !=>
    console.log('Pressed button no.%d', btn.pin)
    );
    btn.on('release', () !=>
    console.log('Released button no.%d', btn.pin)
    );
    });
    });
    How about Buttons?
    const b2 = new five.Button('b1');
    const b3 = new five.Button('b2');
    const b7 = new five.Button('b6');
    const b8 = new five.Button('b7');
    const buttons = [b2, b3, b7, b8];
    buttons.forEach(btn !=> {
    btn.on('press', () !=>
    console.log('Pressed button no.%d', btn.pin)
    );
    btn.on('release', () !=>
    console.log('Released button no.%d', btn.pin)
    );
    });

    View full-size slide

  36. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  37. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  38. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  39. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    A Small Success
    • Pin 1 is power (turns LED 4,5,7)
    • Pin 4-6 control LEDs 4,5,7
    • Pin 7-8 react on switches
    • Pin 2 manipulates switches 3 & 4
    • Pin 3 manipulates switches 1 & 2

    View full-size slide

  40. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Back to the Drawing Board

    View full-size slide

  41. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  42. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  43. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  44. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Pin 1-3 =
    Pin 4-6 =
    Pin 7-8 = (???)

    View full-size slide

  45. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Diodes!

    View full-size slide

  46. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  47. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    • Switch 1 = P3 → P7
    • Switch 2 = P3 → P8
    • Switch 3 = P2 → P7
    • Switch 4 = P2 → P8
    • Switch 5 = P1 → P7
    • Switch 6 = P1 → P8
    • LED 7 = P1 → P6
    • …

    View full-size slide

  48. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  49. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  50. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Controlling Relays
    const espresso = new five.Relay({
    pin: 'a4',
    type: 'NO',
    });
    const grande = new five.Relay({
    pin: 'a5',
    type: 'NO',
    });
    const power = new five.Relay({
    pin: 'a6',
    type: 'NO',
    });
    espresso.close();
    grande.close();
    power.close();
    board.repl.inject({ espresso, grande, power });

    View full-size slide

  51. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  52. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  53. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  54. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    IoT Coffee Machine?

    View full-size slide

  55. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    418 - I’m a teapot

    View full-size slide

  56. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    IETF RFC 2324

    View full-size slide

  57. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    HTCPCP

    View full-size slide

  58. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Hyper Text Coffee Pot
    Control Protocol

    View full-size slide

  59. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    • Built on top of HTTP
    • Adds BREW method
    • Safe and Accept-Additions Headers
    • HTTP code 418
    • coffee:!// URI scheme
    • Many more things
    Hyper Text Coffee Pot Control Protocol

    View full-size slide

  60. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  61. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide

  62. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    Check out the Code
    github.com/dkundel/htcpcp-delongi

    View full-size slide

  63. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    My Learnings

    View full-size slide

  64. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    1. Reverse-engineering is a lot of fun

    View full-size slide

  65. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    2. Reverse-engineering is frustrating

    View full-size slide

  66. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    3. JS + Hardware !!===

    View full-size slide

  67. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    4. Tessel 2 is great!

    View full-size slide

  68. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    5. Johnny-Five Is Super Useful

    View full-size slide

  69. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    bit.ly/coffee-js

    View full-size slide

  70. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    d-k.im/nodebots

    View full-size slide

  71. Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp
    d-k.im/waffle-coffee

    View full-size slide

  72. console.log(`
    Thank You!
    `);
    dkundel.com
    @dkundel
    [email protected]
    github/dkundel
    d-k.im/waffle-coffee
    Dominik Kundel | @dkundel | #wafflejs | #coffeejs #htcpcp

    View full-size slide