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

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.

Niels Leenheer

May 24, 2017
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

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