new location floorplan
parent
474e2fd1cf
commit
681c7dd589
|
@ -3,6 +3,8 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>light up</title>
|
<title>light up</title>
|
||||||
|
<!--<link rel="stylesheet" href="style.css"> -->
|
||||||
|
<!--<script src="script.js"></script> -->
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
@ -17,6 +19,36 @@
|
||||||
--color-c-2: #FFEDCC;
|
--color-c-2: #FFEDCC;
|
||||||
--color-c-3: #D7B26E;
|
--color-c-3: #D7B26E;
|
||||||
--color-c-4: #AA8239;
|
--color-c-4: #AA8239;
|
||||||
|
|
||||||
|
--color-on: var(--color-c-0);
|
||||||
|
--color-off: var(--color-p-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-on, .light-off, .light-disabled {
|
||||||
|
stroke-width: 0.07;
|
||||||
|
stroke: var(--color-p-0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
|
@ -24,126 +56,153 @@
|
||||||
<header style="margin:auto;font-family:DejaVu Sans,sans-serif;text-align:center;color:var(--color-p-4);">
|
<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>
|
<h1 id="up" style="cursor:pointer">light your space <strong style="color:var(--color-c-3)">up</strong></h1>
|
||||||
</header>
|
</header>
|
||||||
<div style="margin-left:auto;margin-right:auto;width:240px">
|
<div style="margin-left:auto;margin-right:auto;width:480px">
|
||||||
<svg width="240px" height="240px" style="margin:auto;">
|
<svg width="480px" viewBox="-2 -2 18 16" >
|
||||||
|
<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
|
<rect
|
||||||
y="20"
|
id="l4"
|
||||||
x="19.999992"
|
width="9.625"
|
||||||
height="25"
|
height="2.25"
|
||||||
width="50"
|
x="3.9374995"
|
||||||
id="rect4145"
|
y="0.375"
|
||||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
ry="0.375" />
|
||||||
<rect
|
<rect
|
||||||
y="115"
|
id="l5"
|
||||||
x="114.99999"
|
width="6.125"
|
||||||
height="10"
|
height="2.25"
|
||||||
width="10"
|
x="3.9374995"
|
||||||
id="rect4149"
|
y="3.375"
|
||||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
ry="0.375" />
|
||||||
<path
|
|
||||||
id="path4151"
|
|
||||||
d="m 124.99999,120 95,0"
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
id="path4153"
|
|
||||||
d="m 119.99999,115 0,-40"
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
id="path4155"
|
|
||||||
d="m 119.99999,60 0,-40"
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
id="path4157"
|
|
||||||
d="m 99.999992,20 -80,0 0,200 199.999998,0 0,-200 -105,0"
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
d="m 133.14724,67.221494 a 15,15 0 0 1 -13.17405,7.778482"
|
|
||||||
id="path4161"
|
|
||||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
id="path4163"
|
|
||||||
d="M 133.25892,67.767857 119.99999,60"
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
|
||||||
<path
|
|
||||||
transform="matrix(0,-1,-1,0,0,0)"
|
|
||||||
style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
id="path4165"
|
|
||||||
d="m -7.0534165,-107.93734 a 15,15 0 0 1 -13.1740505,7.77848" />
|
|
||||||
<path
|
|
||||||
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
||||||
d="m 107.39099,6.941734 7.76786,13.258928"
|
|
||||||
id="path4167" />
|
|
||||||
<rect
|
<rect
|
||||||
ry="5"
|
id="l6"
|
||||||
y="30"
|
width="2.625"
|
||||||
x="30"
|
height="2.25"
|
||||||
height="80"
|
x="7.4374995"
|
||||||
width="80"
|
y="6.375"
|
||||||
id="rec_light_3"
|
ry="0.375" />
|
||||||
style="opacity:0;fill:#ffff00;fill-opacity:0.50196078;stroke:#000000;stroke-width:0.66942149;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
|
||||||
<rect
|
<rect
|
||||||
style="opacity:0;fill:#000000;fill-opacity:0.50196078;stroke:#000000;stroke-width:0.66942149;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
id="l7"
|
||||||
id="rec_light_4"
|
width="2.625"
|
||||||
width="80"
|
height="2.25"
|
||||||
height="80"
|
x="7.4374995"
|
||||||
x="30"
|
y="9.374999"
|
||||||
y="130"
|
ry="0.375" />
|
||||||
ry="5" />
|
|
||||||
<rect
|
<rect
|
||||||
style="opacity:0;fill:#ffff00;fill-opacity:0.50196078;stroke:#000000;stroke-width:0.66942149;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
id="l8"
|
||||||
id="rec_light_2"
|
width="1.75"
|
||||||
width="80"
|
height="3.0"
|
||||||
height="80"
|
x="11.8125"
|
||||||
x="130"
|
y="4.125"
|
||||||
y="30"
|
ry="0.375" />
|
||||||
ry="5" />
|
|
||||||
<rect
|
<rect
|
||||||
ry="5"
|
width="6.125"
|
||||||
y="130"
|
height="2.25"
|
||||||
x="130"
|
x="0.4375"
|
||||||
height="80"
|
y="6.375"
|
||||||
width="80"
|
ry="0.375"
|
||||||
id="rec_light_1"
|
id="l2" />
|
||||||
style="opacity:0;fill:#000000;fill-opacity:0.50196078;stroke:#000000;stroke-width:0.66942149;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
<rect
|
||||||
|
width="6.125"
|
||||||
|
height="2.25"
|
||||||
|
x="0.4375"
|
||||||
|
y="9.375"
|
||||||
|
ry="0.375"
|
||||||
|
id="l3" />
|
||||||
|
<rect
|
||||||
|
id="l1"
|
||||||
|
width="2.625"
|
||||||
|
height="5.25"
|
||||||
|
x="0.4375"
|
||||||
|
y="0.375"
|
||||||
|
ry="0.375" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script src="https://unpkg.com/mqtt@2.1.3/dist/mqtt.min.js" ></script>
|
<script src="paho-mqtt.js"></script>
|
||||||
<!-- <script src="mqtt.min.js"></script> -->
|
|
||||||
<script>
|
<script>
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
var mqtt_server = 'ws://sound.waw.hackerspace.pl:1881';
|
|
||||||
var client = mqtt.connect(mqtt_server, {username: "light", password: "MG4Dhp6vCZjgbTzJ"});
|
|
||||||
var lights = [];
|
var lights = [];
|
||||||
for (i = 1; i <= 4; i++) {
|
for (i = 1; i <= 8; i++) {
|
||||||
lights[i] = document.getElementById("rec_light_" + i);
|
lights[i] = document.getElementById("l" + i);
|
||||||
|
lights[i].classList = ["light-disabled"];
|
||||||
}
|
}
|
||||||
client.on("message", function (topic, payload) {
|
|
||||||
var match = /devices\/light_904649\/light_(.*)\/on/.exec(topic);
|
var mqtt_server = 'sound.waw.hackerspace.pl';
|
||||||
|
var mqtt_port = 1881;
|
||||||
|
var name = "web-client-" + Math.round(Math.random() * 100000);
|
||||||
|
console.log(name)
|
||||||
|
var client = new Paho.MQTT.Client(mqtt_server, Number(mqtt_port), "/", name);
|
||||||
|
|
||||||
|
client.onMessageArrived = function(message) {
|
||||||
|
console.log(message)
|
||||||
|
var match = /devices\/light_904649\/light_(.*)\/on/.exec(message.topic);
|
||||||
var n = parseInt(match[1]);
|
var n = parseInt(match[1]);
|
||||||
if(~isNaN(n) && n > 0 && n <= 4){
|
if(~isNaN(n) && n > 0 && n <= 4){
|
||||||
lights[n].style.opacity = 1;
|
if (message.payloadString == "true") {
|
||||||
if (payload == "true") {
|
lights[n].classList = ["light-on"];
|
||||||
lights[n].style.fill = "var(--color-c-0)";
|
|
||||||
} else {
|
} else {
|
||||||
lights[n].style.fill = "var(--color-p-3)";
|
lights[n].classList = ["light-off"];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
};
|
||||||
|
|
||||||
|
function onConnect(){
|
||||||
for (i = 1; i <= 4; i++) {
|
for (i = 1; i <= 4; i++) {
|
||||||
client.subscribe("devices/light_904649/light_" + i + "/on");
|
client.subscribe("devices/light_904649/light_" + i + "/on");
|
||||||
lights[i].onclick=function(value){
|
lights[i].onclick=function(value){
|
||||||
console.log("Fuck pass-by-reference");
|
|
||||||
return function(){
|
return function(){
|
||||||
client.publish("devices/light_904649/light_" + value + "/on/toggle", 'true');
|
client.publish("devices/light_904649/light_" + value + "/on/toggle", 'true');
|
||||||
};
|
};
|
||||||
} (i);
|
} (i);
|
||||||
};
|
};
|
||||||
document.getElementById("up").onclick = function(){
|
document.getElementById("up").onclick = function(){
|
||||||
for (i = 3; i <= 4; i++) {
|
for (i = 1; i <= 8; i++) {
|
||||||
client.publish("devices/light_904649/light_" + i + "/on/set", 'true');
|
client.publish("devices/light_904649/light_" + i + "/on/set", 'true');
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
client.connect({
|
||||||
|
onSuccess: onConnect,
|
||||||
|
userName: "light",
|
||||||
|
password: "MG4Dhp6vCZjgbTzJ",
|
||||||
|
onFailure: function(response) {
|
||||||
|
console.log(response);
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue