Monsters, mailboxes and other nonsense @ Front-Trends

The Internet of Things can become quite boring pretty fast. Turning on the lights in your apartment with an app is a nice novelty, but it isn’t really very creative. And as developers we like to tinker and look under the hood, but manufacturers like their walled gardens. This talk is about combining sensors, switches and displays with different technologies to solve problems that don’t really exist and more importantly just to have fun with IoT and make geeky stuff. This talk contains monsters, and lots of them.

Transcript

1. monsters, mailboxes and other nonsense
3. a new home
7. 10 meters
8. the house 
 of the future
10. 433MHz
13. IoT is actually incredibly boring
14. raspberry pi with domoticz
16. chicken thermostat
17. brrrr!
18. kippenwaterdrinkbak (chicken water trough)
19. kippenwaterdrinkbakverwarmingselement (chicken water trough heater)
20. kippenwaterdrinkbakverwarmingselementschakelaar (chicken water trough heater switch)
21. kippenwaterdrinkbakverwarmingselementschakelaarthermometer (chicken water trough heater switch thermometer)
23. rfxcom
24. every 30 seconds a “ping” with the temperature
25. temperature below zero → turn on the heater
26. turn remote switch on
27. “It’s above 
 freezing,
 water trough 
 heating 
 turned off”
28. The “S” in IoT stands for security
30. the fiery
 witch kettle
31. Do-it-yourself IoT
32. brains (or microcontrollers)
33. Arduino Uno
 ATmega238
 16 Mhz
 2 KB RAM
 32 KB Flash
34. ESP-01
 ESP 8266 
 80 Mhz
 128 KB RAM
 512 KB Flash

35. NodeMCU
 ESP 8266
 80 Mhz
 128 KB RAM
 4 MB Flash

36. NodeMCU
37. Neopixel
 24 serial 
 connected 
 WS2812 RGB 
 LEDs
38. #include <Adafruit_NeoPixel.h> #define PIN D1 #define PIXELS 24 Adafruit_NeoPixel strip = Adafruit_NeoPixel(PIXELS, PIN, NEO_GRB + NEO_KHZ800); void setup(void) { strip.begin(); strip.setBrightness(255); strip.setPixelColor(0, strip.Color(0, 0, 255)); strip.show(); } void loop(void) { }
39. int i = 0; void setup(void) { strip.begin(); strip.setBrightness(255); } void loop(void) { i = (i + 1) % PIXELS; strip.setPixelColor(i % PIXELS, strip.Color(0, 0, 0)); strip.setPixelColor((i + 1) % PIXELS, strip.Color(0, 0, 63)); strip.setPixelColor((i + 2) % PIXELS, strip.Color(0, 0, 127)); strip.setPixelColor((i + 3) % PIXELS, strip.Color(0, 0, 195)); strip.setPixelColor((i + 4) % PIXELS, strip.Color(0, 0, 255)); strip.show(); delay(8); }
40. ?! JavaScript? And C?
 Kinda the same. Just about.
 Not quite. No.
41. IKEA SOMMAR 2017 lantern
46. WiFi must be very complicated…
47. const char* ssid = "........"; const char* password = "........"; ESP8266WebServer server(80); void setup(void) { WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) delay(500); server.on("/on", [](){ server.send(200, "text/plain", "on"); }); server.on("/off", [](){ server.send(200, "text/plain", "off"); }); server.begin(); } void loop(void) { server.handleClient(); }
48. http:/ /sparkle.local/api?command=power&status
 command=power&on
 command=power&off command=brightness&status
 command=brightness&set=50 command=color&status
 command=color&set=f34d0d
49. homebridge homebridge-better-http-rgb
50. siri
51. pixel monsters
52. Prolight 12W ceiling lamp
54. Neopixel
 64 serial 
 connected 
 WS2812 RGB 
 LEDs
56. SD card Storage of monsters Buzzer Beeps for notifications Lightsensitive resistor Night-mode
65. are you kidding? yeah that's fine can I take it with me on a plane?
67. progressive
 web app
68. http:/ /pixel.local
69. http:/ /pixel.local
71. editor.addEventListener('touchstart', handleTouch); editor.addEventListener('touchmove', handleTouch); function handleTouch(e) { for (var i = 0; i < e.changedTouches.length; i++) { let elem = document.elementFromPoint( e.changedTouches[i].pageX, e.changedTouches[i].pageY ); if (elem.tagName && elem.tagName == 'TD' && 
 editor.contains(elem)) 
 { drawPixel(elem); } } e.preventDefault(); }
72. editor.addEventListener('touchstart', handleTouch); editor.addEventListener('touchmove', handleTouch); function handleTouch(e) { for (var i = 0; i < e.changedTouches.length; i++) { let elem = document.elementFromPoint( e.changedTouches[i].pageX, e.changedTouches[i].pageY ); if (elem.tagName && elem.tagName == 'TD' && 
 editor.contains(elem)) 
 { drawPixel(elem); } } e.preventDefault(); }
73. let socket = new WebSocket( "ws://" + window.location.host + "/ws" ); function drawPixel(elem) { if (elem.dataset.color != currentColor) { elem.dataset.color = currentColor; elem.style.backgroundColor = '#' + currentColor; socket.send(JSON.stringify({ command: "draw", x: elem.dataset.x, y: elem.dataset.y, color: currentColor })); } }
74. let socket = new WebSocket( "ws://" + window.location.host + "/ws" ); function drawPixel(elem) { if (elem.dataset.color != currentColor) { elem.dataset.color = currentColor; elem.style.backgroundColor = '#' + currentColor; socket.send(JSON.stringify({ command: "draw", x: elem.dataset.x, y: elem.dataset.y, color: currentColor })); } }
75. {
 "command": "draw",
 "x": 5,
 "y": 5,
 "color": "ffffff"
 }
76. {
 "command": "draw",
 "x": 5,
 "y": 5,
 "color": "ffffff"
 }
80. socket.onmessage = function(msg) { let data = JSON.parse(msg.data); if (data.command == "draw") { let elem = document.querySelector( 'td[data-x=' + data.x + ']' + 
 '[data-y=' + data.y + ']' ); elem.dataset.color = data.color; elem.style.backgroundColor = '#' + data.color }; } }
81. socket.onmessage = function(msg) { let data = JSON.parse(msg.data); if (data.command == "draw") { let elem = document.querySelector( 'td[data-x=' + data.x + ']' + 
 '[data-y=' + data.y + ']' ); elem.dataset.color = data.color; elem.style.backgroundColor = '#' + data.color }; } }
82. demo
83. the mystery
 of the 
 haunted mailbox
84. mail box
85. magnetic contact
86. when the mailbox opens it sends a signal
87. http:/ /pixel.local/api?command=notify&icon=mailbox
91. solution #1 combine the 
 magnetic contact 
 with a motion sensor?
92. solution #2 turn off the
 magnetic contact with
 strong westerly winds?
93. solution #3
95. thanks! questions? 
 
 @html5test