A presentation at IndieWebCamp in in Düsseldorf, Germany by Niels Leenheer
monsters, mailboxes and other non-sense
a new home
10 meter
the house of the future
433MHz
IoT is actually incredibly boring
raspberry pi with domoticz
chicken thermostat
brrrr!
kippenwaterdrinkbak (chicken water trough)
kippenwaterdrinkbakverwarmingselement (chicken water trough heater)
kippenwaterdrinkbakverwarmingselementschakelaar (chicken water trough heater switch)
kippenwaterdrinkbakverwarmingselementschakelaarthermometer (chicken water trough heater switch thermometer)
rfxcom
every 30 seconds a “ping” with the temperature
temperature below zero, turn on the heater
turn klikaanklikuit switch on
The “S” in IoT stands for security
the fiery witches kettle
Do-it-yourself IoT
brains (or microcontrollers)
Arduino Uno ATmega238 16 Mhz 2 KB RAM 32 KB Flash
ESP-01 ESP 8266 80 Mhz 128 KB RAM 512 KB Flash
NodeMCU ESP 8266 80 Mhz 128 KB RAM 4 MB Flash
NodeMCU
Neopixel 24 serial connected WS2812 RGB LEDs
#include <Adafruit_NeoPixel.h> #define PIN #define PIXELS D1 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) { }
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, strip.setPixelColor((i + 2) % PIXELS, strip.Color(0, 0, strip.setPixelColor((i + 3) % PIXELS, strip.Color(0, 0, strip.setPixelColor((i + 4) % PIXELS, strip.Color(0, 0, strip.show(); delay(8); } 63)); 127)); 195)); 255));
?! JavaScript? And C? Kinda the same. Just about. Not quite. No.
IKEA SOMMAR 2017 lantern
WiFi must be very complicated…
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(); }
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
homebridge homebridge-better-http-rgb
siri
siri
pixel monsters
Prolight 12W ceiling lamp
Neopixel 64 serial connected WS2812 RGB LEDs
SD card Storage of monsters Lightsensitive resistor Night-mode Buzzer Beeps for notifications
progressive web app
http://pixel.local
http://pixel.local
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(); }
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(); }
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 })); } }
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 })); } }
{ "command": "draw", "x": 5, "y": 5, "color": "ffffff" }
{ "command": "draw", "x": 5, "y": 5, "color": "ffffff" }
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 }; } }
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 }; } }
demo
the mystery of the haunted mailbox
mail box
magnetic contact
when the mailbox opens it sends a signal
http://pixel.local/api?command=notify&icon=mailbox
combine the magnetic contact with a motion sensor? solution #1
turn off the magnetic contact with strong westerly winds? solution #2
solution #3
the fickle washing machine
Start program 24,9 watt Washing machine off 0,3 watt Standby usage 4,6 watt
Laundry is done
Laundry is done Laundry is done Laundry is done Laundry is done
2000 watt
20 - 200 watt
2 - 5 watt
Laundry is done Laundry is done Laundry is done Laundry is done
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
Laundry is done
questions?
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.
Here’s what was said about this presentation on Twitter.
Really fun talk about diy iot by @html5test at #fronttrends 😁 pic.twitter.com/tdeEr4qv9y
— Luis Confraria (@lconfraria) May 24, 2017
I've fried 1 out of 3 of my microcontrollers (arduino), @html5test fried 5 of 15... I guess the industry standard is 33% accident ratio :D
— Cezar Pokorski (@ikari) May 25, 2017
"The 'S' in 'IoT' stands for Security" @rakaz #FrontTrends
— Cezar Pokorski (@ikari) May 24, 2017
@rakaz says “Demotime”!!!! #famousLastWords #fronttrends
— Dennis (@dennisausbremen) May 24, 2017