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
   

   View Slide

2. View Slide

3. a new home
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. 10 meters
   

   View Slide

8. the house 

   of the future
   

   View Slide

9. View Slide

10. 433MHz
    

    View Slide

11. View Slide

12. View Slide

13. IoT is actually incredibly boring
    

    View Slide

14. raspberry pi with domoticz
    

    View Slide

15. View Slide

16. chicken thermostat
    

    View Slide

17. brrrr!
    

    View Slide

18. kippenwaterdrinkbak
    (chicken water trough)
    

    View Slide

19. kippenwaterdrinkbakverwarmingselement
    (chicken water trough heater)
    

    View Slide

20. kippenwaterdrinkbakverwarmingselementschakelaar
    (chicken water trough heater switch)
    

    View Slide

21. kippenwaterdrinkbakverwarmingselementschakelaarthermometer
    (chicken water trough heater switch thermometer)
    

    View Slide

22. View Slide

23. rfxcom
    

    View Slide

24. every 30 seconds a “ping” with the temperature
    

    View Slide

25. temperature below zero → turn on the heater
    

    View Slide

26. turn remote switch on
    

    View Slide

27. “It’s above 

    freezing,

    water trough 

    heating 

    turned off”
    

    View Slide

28. The “S” in IoT stands for security
    

    View Slide

29. View Slide

30. the fiery

    witch kettle
    

    View Slide

31. Do-it-yourself IoT
    

    View Slide

32. brains
    (or microcontrollers)
    

    View Slide

33. Arduino Uno

    ATmega238

    16 Mhz

    2 KB RAM

    32 KB Flash
    

    View Slide

34. ESP-01

    ESP 8266 

    80 Mhz

    128 KB RAM

    512 KB Flash

    

    View Slide

35. NodeMCU

    ESP 8266

    80 Mhz

    128 KB RAM

    4 MB Flash

    

    View Slide

36. NodeMCU
    

    View Slide

37. Neopixel

    24 serial 

    connected 

    WS2812 RGB 

    LEDs
    

    View Slide

38. #include
    #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) {
    }
    

    View Slide

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);
    }
    

    View Slide

40. ?!
    JavaScript? And C?

    Kinda the same. Just about.

    Not quite. No.
    

    View Slide

41. IKEA
    SOMMAR 2017
    lantern
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. WiFi must be very complicated…
    

    View Slide

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();
    }
    

    View Slide

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
    

    View Slide

49. homebridge
    homebridge-better-http-rgb
    

    View Slide

50. siri
    

    View Slide

51. pixel monsters
    

    View Slide

52. Prolight
    12W ceiling lamp
    

    View Slide

53. View Slide

54. Neopixel

    64 serial 

    connected 

    WS2812 RGB 

    LEDs
    

    View Slide

55. View Slide

56. SD card
    Storage of
    monsters
    Buzzer
    Beeps for
    notifications
    Lightsensitive
    resistor
    Night-mode
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. are you kidding? yeah that's fine
    can I take it with me on a plane?
    

    View Slide

66. View Slide

67. progressive

    web app
    

    View Slide

68. http:/
    /pixel.local
    

    View Slide

69. http:/
    /pixel.local
    

    View Slide

70. View Slide

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();
    }
    

    View Slide

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();
    }
    

    View Slide

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
    }));
    }
    }
    

    View Slide

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
    }));
    }
    }
    

    View Slide

75. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

76. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

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 };
    }
    }
    

    View Slide

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 };
    }
    }
    

    View Slide

82. demo
    

    View Slide

83. the mystery

    of the 

    haunted mailbox
    

    View Slide

84. mail box
    

    View Slide

85. magnetic contact
    

    View Slide

86. when the mailbox opens it sends a signal
    

    View Slide

87. http:/
    /pixel.local/api?command=notify&icon=mailbox
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. solution #1
    combine the 

    magnetic contact 

    with a motion sensor?
    

    View Slide

92. solution #2
    turn off the

    magnetic contact with

    strong westerly winds?
    

    View Slide

93. solution #3
    

    View Slide

94. View Slide

95. thanks!
    questions? 

    

    @html5test
    

    View Slide