monsters, mailboxes and other nonsense
A presentation at Front-Trends 2017 in May 2017 in Warsaw, Poland by Niels Leenheer
monsters, mailboxes and other nonsense
a new home
10 meters
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 remote switch on
“It’s above freezing, water trough heating turned off”
The “S” in IoT stands for security
the fiery witch 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 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 ) {
}
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); }
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
pixel monsters
Prolight 12W ceiling lamp
Neopixel 64 serial connected WS2812 RGB LEDs
SD card Storage of monsters Buzzer Beeps for notifications Lightsensitive resistor Night-mode
are you kidding? yeah that's fine can I take it with me on a plane?
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
solution #1 combine the magnetic contact with a motion sensor?
solution #2 turn off the magnetic contact with strong westerly winds?
solution #3
thanks! questions? @html5test
