Monsters, mailboxes and other nonsense @ Front-Trends

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.

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

May 24, 2017
Tweet

Transcript

  1. monsters, mailboxes and other nonsense

  2. None
  3. a new home

  4. None
  5. None
  6. None
  7. 10 meters

  8. the house 
 of the future

  9. None
  10. 433MHz

  11. None
  12. None
  13. IoT is actually incredibly boring

  14. raspberry pi with domoticz

  15. None
  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)

  22. None
  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

  29. None
  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

  42. None
  43. None
  44. None
  45. None
  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

  53. None
  54. Neopixel
 64 serial 
 connected 
 WS2812 RGB 
 LEDs

  55. None
  56. SD card Storage of monsters Buzzer Beeps for notifications Lightsensitive

    resistor Night-mode
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. are you kidding? yeah that's fine can I take it

    with me on a plane?
  66. None
  67. progressive
 web app

  68. http:/ /pixel.local

  69. http:/ /pixel.local

  70. None
  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"
 }

  77. None
  78. None
  79. None
  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

  88. None
  89. None
  90. None
  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

  94. None
  95. thanks! questions? 
 
 @html5test