Monsters, brievenbussen en andere onzin @ DomoticaGrunn

Tegenwoordig kun je allerlei ‘Internet of Things’ apparaten in de winkel kopen. Hue lampen, Sonos speakers en nog veel, veel meer. Aan en uit zetten van lampen met een app is een leuk nieuwtje, maar niet zo praktisch en wordt al snel saai. Als developer en all-round geek vind ik het leuk om te spelen met nieuwe technologie, maar ook vooral om te kijken hoe alles werkt onder de motorkap en dingen te bedenken die net even niet mogelijk zijn met de app van de fabrikant.

Deze presentatie gaat over het combineren van sensoren, switches en displays met verschillende technologieën om problemen op de lossen die eigenlijk helemaal niet zo belangrijk zijn. Veel belangrijker, om gewoon lol te hebben met IoT en gewoon geeky dingen maken. Deze presentatie bevat monsters, veel monsters.

Transcript

1. monsters,
   brievenbussen
   en andere onzin
   

   View Slide

2. View Slide

3. een nieuw huis
   

   View Slide

4. View Slide

5. View Slide

6. 10 meter
   

   View Slide

7. het huis 

   van de toekomst
   

   View Slide

8. View Slide

9. View Slide

10. 433MHz
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. IoT is zo ongelofelijk saai
    

    View Slide

17. raspberry pi met domoticz
    

    View Slide

18. View Slide

19. kippenverwarming
    

    View Slide

20. brrrr!
    

    View Slide

21. kippenwaterdrinkbak
    

    View Slide

22. kippenwaterdrinkbakverwarmingselement
    

    View Slide

23. kippenwaterdrinkbakverwarmingselementschakelaar
    

    View Slide

24. kippenwaterdrinkbakverwarmingselementschakelaarthermometer
    

    View Slide

25. View Slide

26. rfxcom
    

    View Slide

27. elke 30 seconden een “ping” met de temperatuur
    

    View Slide

28. temperatuur onder nul → zet de verwarming aan
    

    View Slide

29. zet klikaanklikuit schakelaar aan
    

    View Slide

30. View Slide

31. The “S” in IoT stands for security
    

    View Slide

32. View Slide

33. de vurige 

    heksenpot
    

    View Slide

34. Doe-het-zelf IoT
    

    View Slide

35. brains
    (oftewel 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 serieel 

    geschakelde 

    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? En C?

    Zo'n beetje hetzelfde. Ongeveer.

    Niet helemaal. Nee.
    

    View Slide

44. IKEA
    SOMMAR 2017
    theelichthouder
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. WiFi is vast heel moeilijk…
    

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

    View Slide

55. espruino
    

    View Slide

56. View Slide

57. pixel monsters
    

    View Slide

58. Prolight
    12W plafondlamp
    

    View Slide

59. View Slide

60. Neopixel

    64 serieel 

    geschakelde 

    WS2812 RGB 

    LEDs
    

    View Slide

61. View Slide

62. SD card
    Opslag van
    monsters
    Buzzer
    Piepjes voor
    een notificatie
    Lichtgevoelige
    weerstand
    Nachtstand
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. ben je gek geworden? ja, geen probleem
    kan ik het meenemen in een vliegtuig?
    

    View Slide

72. View Slide

73. progressive

    web app
    

    View Slide

74. http:/
    /pixel.local
    

    View Slide

75. http:/
    /pixel.local
    

    View Slide

76. View Slide

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

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

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

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

81. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

82. {

    "command": "draw",

    "x": 5,

    "y": 5,

    "color": "ffffff"

    }
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

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

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

88. demo
    

    View Slide

89. het mysterie 

    van de 

    spookbrievenbus
    

    View Slide

90. brieven bus
    

    View Slide

91. magneetcontact
    

    View Slide

92. bij openen van de deksel een signaal
    

    View Slide

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

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. oplossing #1
    magneetcontact

    combineren met een 

    bewegingsdetector?
    

    View Slide

98. oplossing #2
    magneetcontact

    uitzetten bij 

    harde westenwind?
    

    View Slide

99. oplossing #3
    

    View Slide

100. de wispelturige

     wasmachine
     

     View Slide

101. View Slide

102. View Slide

103. Standby verbruik

     4,6 watt
     Wasmachine uit

     0,3 watt
     Begin programma

     24,9 watt
     

     View Slide

104. View Slide

105. De was is klaar!
     

     View Slide

106. De was is klaar!
     De was is klaar!
     De was is klaar!
     De was is klaar!
     

     View Slide

107. View Slide

108. 2000 watt
     

     View Slide

109. 20 - 200 watt
     

     View Slide

110. 2 - 5 watt
     

     View Slide

111. De was is klaar!
     De was is klaar!
     De was is klaar!
     De was is klaar!
     

     View Slide

112. View Slide

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

114. De was is klaar!
     

     View Slide

115. View Slide

116. View Slide

117. bedankt!
     vragen? 

     

     @html5test
     

     View Slide