275 lines
6.5 KiB
HTML
275 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>light up</title>
|
|
<link rel="icon" type="image/png" href="static/favicon.png">
|
|
</head>
|
|
<style>
|
|
:root {
|
|
--color-p-0: #7688A9;
|
|
--color-p-1: #D5DCE8;
|
|
--color-p-2: #A6B3CB;
|
|
--color-p-3: #50668F;
|
|
--color-p-4: #2D4571;
|
|
|
|
--color-c-0: #FEE0A9;
|
|
--color-c-1: #FFF7E8;
|
|
--color-c-2: #FFEDCC;
|
|
--color-c-3: #D7B26E;
|
|
--color-c-4: #AA8239;
|
|
|
|
--color-on: var(--color-c-0);
|
|
--color-off: var(--color-p-2);
|
|
}
|
|
|
|
.light-on, .light-off, .light-disabled, .light-hidden {
|
|
stroke-width: 0.07;
|
|
stroke: var(--color-p-0);
|
|
}
|
|
|
|
.light-hidden {
|
|
fill: var(--color-off);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.light-on {
|
|
fill: var(--color-on);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.light-off {
|
|
fill: var(--color-off);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.light-disabled {
|
|
fill: var(--color-off);
|
|
opacity: 0.2;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#walls {
|
|
fill: none;
|
|
stroke: var(--color-p-4);
|
|
stroke-width: 0.07;
|
|
}
|
|
|
|
</style>
|
|
<body style="background-color:var(--color-p-1)">
|
|
<header style="margin:auto;font-family:DejaVu Sans,sans-serif;text-align:center;color:var(--color-p-4);">
|
|
<h1 id="up" style="cursor:pointer">light your space <strong style="color:var(--color-c-3)">up</strong></h1>
|
|
</header>
|
|
<div style="margin-left:auto;margin-right:auto;width:480px">
|
|
<svg width="480px" viewBox="-1 -1 16 14" >
|
|
<g
|
|
id="layer1">
|
|
<g id="walls" >
|
|
<path
|
|
d="M 0,0 V 12.0 H 14 V 0 Z"
|
|
id="path2101" />
|
|
<path
|
|
d="M 3.5,0 V 6.0 H 7.0 V 7.5"
|
|
id="path2103" />
|
|
<path
|
|
d="M 7.0,12.0 V 9.0 h 0.875"
|
|
id="path2105" />
|
|
<path
|
|
d="M 10.5,12.0 V 9.0 H 9.625"
|
|
id="path2107" />
|
|
<path
|
|
d="m 14.0,3.75 h -2.625 v 3.75 h 2.625"
|
|
id="path2109" />
|
|
<path
|
|
d="M 11.8125,7.5 V 9.0"
|
|
id="path2111" />
|
|
<path
|
|
d="m 14,10.5 h -2.1875 l 0,-0.375"
|
|
id="path2113" />
|
|
<path
|
|
d="m 14,9.0 h -1.3125"
|
|
id="path2115" />
|
|
<path
|
|
d="M 11.375,6.0 H 9.625 v 0"
|
|
id="path2117" />
|
|
</g>
|
|
<g id="lights">
|
|
<rect
|
|
class="light-hidden"
|
|
id="l4"
|
|
width="9.625"
|
|
height="2.25"
|
|
x="3.9374995"
|
|
y="0.375"
|
|
ry="0.375" />
|
|
<rect
|
|
class="light-hidden"
|
|
id="l5"
|
|
width="6.125"
|
|
height="2.25"
|
|
x="3.9374995"
|
|
y="3.375"
|
|
ry="0.375" />
|
|
<rect
|
|
class="light-hidden"
|
|
id="l6"
|
|
width="2.625"
|
|
height="2.25"
|
|
x="7.4375"
|
|
y="6.375"
|
|
ry="0.375" />
|
|
<rect
|
|
class="light-hidden"
|
|
id="l7"
|
|
width="2.625"
|
|
height="2.25"
|
|
x="7.4375"
|
|
y="9.374999"
|
|
ry="0.375" />
|
|
<rect
|
|
class="light-hidden"
|
|
id="l8"
|
|
width="1.75"
|
|
height="3.0"
|
|
x="11.8125"
|
|
y="4.125"
|
|
ry="0.375" />
|
|
<rect
|
|
class="light-hidden"
|
|
width="6.125"
|
|
height="2.25"
|
|
x="0.4375"
|
|
y="6.375"
|
|
ry="0.375"
|
|
id="l2" />
|
|
<rect
|
|
class="light-hidden"
|
|
width="6.125"
|
|
height="2.25"
|
|
x="0.4375"
|
|
y="9.375"
|
|
ry="0.375"
|
|
id="l3" />
|
|
<rect
|
|
class="light-hidden"
|
|
id="l1"
|
|
width="2.625"
|
|
height="5.25"
|
|
x="0.4375"
|
|
y="0.375"
|
|
ry="0.375" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
<p id="status" style="font-family:DejaVu Sans,sans-serif;color:var(--color-p-4)">MQTT: connecting</p>
|
|
</div>
|
|
<script src="static/paho-mqtt.js"></script>
|
|
<script>
|
|
window.onload = function() {
|
|
var config_request = new XMLHttpRequest();
|
|
config_request.onreadystatechange = function() {
|
|
if (config_request.readyState == 4 && config_request.status == 200) {
|
|
onConfig(JSON.parse(config_request.responseText));
|
|
}
|
|
}
|
|
config_request.open("GET", "/config", true);
|
|
config_request.send(null);
|
|
}
|
|
|
|
|
|
var onConfig = function(config) {
|
|
var lights = [];
|
|
for (i = 1; i <= 8; i++) {
|
|
id = "l" + i;
|
|
element = document.getElementById(id);
|
|
lights[i] = {
|
|
"element": element,
|
|
"id" : id,
|
|
}
|
|
if ( id in config.lights ) {
|
|
lights[i].mqtt_path = config.lights[id].mqtt_path;
|
|
}
|
|
}
|
|
|
|
function disable_lights(){
|
|
for ( i in lights ) {
|
|
lights[i].element.classList = ["light-disabled"];
|
|
}
|
|
}
|
|
disable_lights()
|
|
|
|
var name = "web-client-" + Math.round(Math.random() * 100000);
|
|
var client = new Paho.MQTT.Client(config.mqtt_server, Number(config.mqtt_port), "", name);
|
|
|
|
client.onMessageArrived = function(message) {
|
|
for ( i in lights ) {
|
|
var light = lights[i];
|
|
if ( message.topic == light.mqtt_path ) {
|
|
if (message.payloadString == "true") {
|
|
light.element.classList = ["light-on"];
|
|
} else {
|
|
light.element.classList = ["light-off"];
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
function onConnect(){
|
|
document.getElementById("status").innerText = "MQTT: connected";
|
|
for ( i in lights ) {
|
|
light = lights[i];
|
|
if ( "mqtt_path" in light ) {
|
|
client.subscribe(light.mqtt_path);
|
|
};
|
|
light.element.onclick=function(light){
|
|
return function(){
|
|
var toggle_request = new XMLHttpRequest();
|
|
toggle_request.open("POST", "/light/" + light.id + "/on/toggle", true);
|
|
toggle_request.setRequestHeader("Content-Type", "application/json");
|
|
toggle_request.send(JSON.stringify(true));
|
|
};
|
|
}(light);
|
|
};
|
|
document.getElementById("up").onclick = function(lights){
|
|
return function ( lights ) {
|
|
for ( i in lights ) {
|
|
light = lights[i];
|
|
var on_request = new XMLHttpRequest();
|
|
on_request.open("POST", "/light/" + light.id + "/on/set", true);
|
|
on_request.setRequestHeader("Content-Type", "application/json");
|
|
on_request.send(JSON.stringify(true));
|
|
};
|
|
};
|
|
}(lights);
|
|
};
|
|
|
|
client.onConnectionLost = function (code, message){
|
|
console.log("MQTT: connection lost");
|
|
console.log(code);
|
|
console.log(message);
|
|
document.getElementById("status").innerText = "MQTT: reconnecting";
|
|
disable_lights();
|
|
};
|
|
|
|
function onFailure(response) {
|
|
console.log("Failed to connect to MQTT server");
|
|
console.log(response);
|
|
mqtt_connect()
|
|
}
|
|
|
|
function mqtt_connect() {
|
|
client.connect({
|
|
onSuccess: onConnect,
|
|
userName: config.mqtt_username,
|
|
password: config.mqtt_password,
|
|
reconnect: true,
|
|
onFailure: onFailure,
|
|
});
|
|
};
|
|
mqtt_connect();
|
|
};
|
|
|
|
</script>
|
|
</html>
|