Slide 1

Slide 1 text

☕.js How I hacked my Coffee Machine Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 2

Slide 2 text

HI! ! I'm Dominik! ! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 3

Slide 3 text

About me Developer Evangelist at Get in touch with me! ! @dkundel " [email protected] # github/dkundel Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 4

Slide 4 text

How I hacked my ☕ Machine Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 5

Slide 5 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 6

Slide 6 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 7

Slide 7 text

Why? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 8

Slide 8 text

1. It's interes,ng Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 9

Slide 9 text

2. "Alexa, make me a coffee" Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 10

Slide 10 text

3. APIs for everything! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 11

Slide 11 text

Why JS? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 12

Slide 12 text

Why JS? 1. The last +me I wrote C++ was in university 2. I know JavaScript well which makes coding faster 3. Wri+ng a web server is easy 4. It's more challenging 5. Hardware === eventDriven && JS === eventDriven Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 13

Slide 13 text

Op#ons? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 14

Slide 14 text

Op#on 1: Espruino www.espruino.com Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 15

Slide 15 text

Op#on 1: Espruino Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 16

Slide 16 text

Op#on 2: Tessel tessel.io Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 17

Slide 17 text

Op#on 2: Tessel Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 18

Slide 18 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 19

Slide 19 text

Op#on 3: Johnny-Five johnny-five.io Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 20

Slide 20 text

Op#on 3: Johnny-Five Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 21

Slide 21 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 22

Slide 22 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 23

Slide 23 text

How? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 24

Slide 24 text

Disclaimer Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 25

Slide 25 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 26

Slide 26 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 27

Slide 27 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 28

Slide 28 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 29

Slide 29 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 30

Slide 30 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 31

Slide 31 text

What We Knew • 8 cables/pins • 6 switches • 7 LEDs Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 32

Slide 32 text

Assump&ons 1. One cable is ⚡ 2. We need at least 3 pins + power controlling the " 3. We need at least 3 pins + power controlling the # 4. What is the 8th cable for? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 33

Slide 33 text

The Naive Approach 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 }); }); Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Bu#ons? How About Bu#ons! 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)); }); }); Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 36

Slide 36 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 37

Slide 37 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 38

Slide 38 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 39

Slide 39 text

We Are On To Something ! • Pin 1 is ⚡ (turns on LED4, LED5, LED7) • Pin 4-6 can turn off " LED4, " LED5, " LED7 • Pin 7-8 react on # • Pin 2 can manipulate # S3 && # S4 • Pin 3 can manipulate # S1 && # S2 Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 40

Slide 40 text

Back To The Drawing Board Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 41

Slide 41 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 42

Slide 42 text

To The Rescue! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 43

Slide 43 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

! Progress! ! Pin 1-3 === ⚡ Pin 4-6 === ! Pin 7-8 === !??? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 46

Slide 46 text

Diodes! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

It All Makes Sense! ! S1 = P3 ➡ P7 ! S2 = P3 ➡ P8 ! S3 = P2 ➡ P7 ! S4 = P2 ➡ P8 ! S5 = P1 ➡ P7 ! S6 = P1 ➡ P8 " LED7 (Power) = P1 ➡ P6 Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 49

Slide 49 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 50

Slide 50 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 51

Slide 51 text

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 }); Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 52

Slide 52 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 53

Slide 53 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 54

Slide 54 text

IoT Coffee Machine? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 55

Slide 55 text

418 - I'm a teapot Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 56

Slide 56 text

IETF RFC 2324 HTCPCP Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 57

Slide 57 text

Hyper Text Coffee Pot Control Protocol Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 60

Slide 60 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 61

Slide 61 text

! It's Alive!! ! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 62

Slide 62 text

☕ DEMO ☕ Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 63

Slide 63 text

! github.com/dkundel/htcpcp-delonghi Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 64

Slide 64 text

What I learned: Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 65

Slide 65 text

! Reverse-engineering is a lot of fun Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 66

Slide 66 text

! Reverse-engineering is frustra/ng Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 67

Slide 67 text

JS ❤ Hardware Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 68

Slide 68 text

! Tessel 2 is great! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 69

Slide 69 text

! Johnny-Five is super useful! Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 70

Slide 70 text

What's Next? ! • Programma(cally determine state • Add more relays • Sugges(ons??? Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 71

Slide 71 text

! bit.ly/coffee-js Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 72

Slide 72 text

! bit.ly/halfstack-coffee Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 73

Slide 73 text

Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf

Slide 74

Slide 74 text

Any Ques)ons? Get in touch with me! ! Dominik Kundel " @dkundel # [email protected] $ github/dkundel Dominik Kundel | @dkundel | #coffeejs #htcpcp #halfstackconf