WaffleJS Apr '19 - CoffeeJS

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide