Monsters, Mailboxes and other nonsense @ IndieWebCamp Düsseldorf

Monsters, mailboxes and other non-sense. A talk about 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 non-sense
   

   View Slide

2. a new home
   

   View Slide

3. View Slide

4. View Slide

5. 10 meter
   

   View Slide

6. the house 

   of the future
   

   View Slide

7. View Slide

8. View Slide

9. 433MHz
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. IoT is actually incredibly boring
    

    View Slide

15. View Slide

16. raspberry pi with domoticz
    

    View Slide

17. View Slide

18. View Slide

19. chicken thermostat
    

    View Slide

20. brrrr!
    

    View Slide

21. kippenwaterdrinkbak
    (chicken water trough)
    

    View Slide

22. kippenwaterdrinkbakverwarmingselement
    (chicken water trough heater)
    

    View Slide

23. kippenwaterdrinkbakverwarmingselementschakelaar
    (chicken water trough heater switch)
    

    View Slide

24. kippenwaterdrinkbakverwarmingselementschakelaarthermometer
    (chicken water trough heater switch thermometer)
    

    View Slide

25. View Slide

26. rfxcom
    

    View Slide

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

    View Slide

28. temperature below zero, turn on the heater
    

    View Slide

29. turn klikaanklikuit switch on
    

    View Slide

30. View Slide

31. The “S” in IoT stands for security
    

    View Slide

32. View Slide

33. the fiery

    witches kettle
    

    View Slide

34. Do-it-yourself IoT
    

    View Slide

35. brains
    (or microcontrollers)
    

    View Slide

36. Arduino Uno

    ATmega238

    16 Mhz

    2 KB RAM

    32 KB Flash
    

    View Slide

37. ESP-01

    ESP 8266 

    80 Mhz

    128 KB RAM

    512 KB Flash

    

    View Slide

38. NodeMCU

    ESP 8266

    80 Mhz

    128 KB RAM

    4 MB Flash

    

    View Slide

39. NodeMCU
    

    View Slide

40. Neopixel

    24 serial 

    connected 

    WS2812 RGB 

    LEDs
    

    View Slide

41. #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

42. 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

43. ?!
    JavaScript? And C?

    Kinda the same. Just about.

    Not quite. No.
    

    View Slide

44. IKEA
    SOMMAR 2017
    lantern
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. WiFi must be very complicated…
    

    View Slide

50. 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

51. 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

52. homebridge
    homebridge-better-http-rgb
    

    View Slide

53. siri
    

    View Slide

54. siri
    

    View Slide

55. pixel monsters
    

    View Slide

56. Prolight
    12W ceiling lamp
    

    View Slide

57. View Slide

58. Neopixel

    64 serial 

    connected 

    WS2812 RGB 

    LEDs
    

    View Slide

59. View Slide

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

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. progressive

    web app
    

    View Slide

66. http:/
    /pixel.local
    

    View Slide

67. http:/
    /pixel.local
    

    View Slide

68. View Slide

69. 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

70. 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

71. 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

72. 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

73. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

74. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. 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

79. 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

80. demo
    

    View Slide

81. the mystery

    of the 

    haunted mailbox
    

    View Slide

82. mail box
    

    View Slide

83. magnetic contact
    

    View Slide

84. when the mailbox opens it sends a signal
    

    View Slide

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

    View Slide

86. View Slide

87. View Slide

88. View Slide

89. solution #1
    combine the 

    magnetic contact 

    with a motion sensor?
    

    View Slide

90. solution #2
    turn off the

    magnetic contact with

    strong westerly winds?
    

    View Slide

91. solution #3
    

    View Slide

92. the fickle

    washing machine
    

    View Slide

93. View Slide

94. View Slide

95. Standby usage

    4,6 watt
    Washing machine off

    0,3 watt
    Start program

    24,9 watt
    

    View Slide

96. View Slide

97. Laundry is done
    

    View Slide

98. Laundry is done
    Laundry is done
    Laundry is done
    Laundry is done
    

    View Slide

99. View Slide

100. 2000 watt
     

     View Slide

101. 20 - 200 watt
     

     View Slide

102. 2 - 5 watt
     

     View Slide

103. Laundry is done
     Laundry is done
     Laundry is done
     Laundry is done
     

     View Slide

104. View Slide

105. commandArray = {}
     if (uservariables['WasmachineBezig'] == 2) then
     s = uservariables_lastupdate['WasmachineBezig']
     lastUpdate = os.time{
     year=string.sub(s, 1, 4), month=string.sub(s, 6, 7), day=string.sub(s, 9, 10),
     hour=string.sub(s, 12, 13), min=string.sub(s, 15, 16), sec=string.sub(s, 18, 19)
     }
     difference = os.difftime (os.time(), lastUpdate)
     if (difference > 300) then
     commandArray['Variable:WasmachineBezig'] = '0'
     commandArray['OpenURL'] = 'pixel.local/api?command=notify&icon=shirt'
     end
     end
     return commandArray
     

     View Slide

106. Laundry is done
     

     View Slide

107. View Slide

108. View Slide

109. questions?
     

     View Slide