Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monsters, Mailboxes and other nonsense @ IndieWebCamp Düsseldorf

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.

Niels Leenheer

May 13, 2017
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

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