vuko
/
lights-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mqtt in js two lights

master
vuko 2020-11-23 12:09:51 +01:00
parent 69a443c8a8
commit 929961c3c8
3 changed files with 151 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app.py
View File

@ -1,62 +0,0 @@
import flask
import threading
import paho.mqtt as mqtt
import paho.mqtt.client
import paho.mqtt.publish
import re
import json
c = threading.Condition()
application = flask.Flask(__name__)
application.msg="ab"
application.lights = [False, False, False, False]
def on_message(client,userdata,message):
c.acquire()
application.msg = str(message.payload)
print(message.payload)
light_status = re.compile('devices/light_[^/]+/light_([0-9]+)/on')
m = light_status.search(message.topic)
if m:
n = int(m.group(1))
if n > 0 and n < 5:
if message.payload == "true":
application.lights[n-1] = True
else:
application.lights[n-1] = False
c.release()
print("MQTT Thread: " + str(threading.current_thread()))
mc = mqtt.client.Client()
mc.username_pw_set("light","MG4Dhp6vCZjgbTzJ")
mc.connect("10.8.1.16")
mc.on_message = on_message
mc.subscribe("devices/#")
mc.loop_start()
@application.route("/")
def main():
return flask.render_template('index.html')
@application.route("/status")
def status():
print("Main Thread: " + str(threading.current_thread()))
c.acquire()
st = {"lights" : application.lights}
c.release()
return json.dumps(st)
@application.route('/light/<int:lid>/on/set/true', methods=['POST'])
def set_light(lid):
mqtt.publish.single("devices/light_904649/light_" + str(lid) + "/on/set", "true", qos=1, hostname="10.8.1.16", auth = {'username':"light", 'password':"MG4Dhp6vCZjgbTzJ"})
return "Succes"
@application.route('/light/<int:lid>/on/toggle', methods=['POST'])
def toggle_light(lid):
mqtt.publish.single("devices/light_904649/light_" + str(lid) + "/on/toggle", "true", qos=1, hostname="10.8.1.16", auth = {'username':"light", 'password':"MG4Dhp6vCZjgbTzJ"})
return "Succes"
if __name__ == "__main__":
application.run(host='127.0.0.1',port=8000,debug=True)

151
static/index.html Normal file
View File

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>light up</title>
</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;
}
</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:240px">
<svg width="240px" height="240px" style="margin:auto;">
<rect
y="20"
x="19.999992"
height="25"
width="50"
id="rect4145"
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" />
<rect
y="115"
x="114.99999"
height="10"
width="10"
id="rect4149"
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="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
ry="5"
y="30"
x="29.999992"
height="80"
width="180"
id="rec_light_3"
style="opacity:0;fill:#ffff00;fill-opacity:0.50196078;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;cursor:pointer" />
<rect
style="opacity:0;fill:#000000;fill-opacity:0.50196078;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;cursor:pointer"
id="rec_light_4"
width="180"
height="80"
x="29.999992"
y="130"
ry="5" />
</svg>
</div>
<center>
<b>wyciag:</b> <span id="exhaust"></span>
<button id="exhaust_on">on</button>
<button id="exhaust_off">off</button>
</center>
<script src="https://unpkg.com/mqtt@2.1.3/dist/mqtt.min.js" ></script>
<!-- <script src="mqtt.min.js"></script> -->
<script>
window.onload = function() {
var mqtt_server = 'ws://sound.waw.hackerspace.pl:1881';
var client = mqtt.connect(mqtt_server, {username: "light", password: "MG4Dhp6vCZjgbTzJ"});
var lights = [];
for (i = 3; i <= 4; i++) {
lights[i] = document.getElementById("rec_light_" + i);
}
client.on("message", function (topic, payload) {
if(topic == "iot/c0dbe7/relay/on") {
document.getElementById('exhaust').innerText = payload;
return;
}
var match = /devices\/light_904649\/light_(.*)\/on/.exec(topic);
var n = parseInt(match[1]);
if(~isNaN(n) && n > 0 && n <= 4){
lights[n].style.opacity = 1;
if (payload == "true") {
lights[n].style.fill = "var(--color-c-0)";
} else {
lights[n].style.fill = "var(--color-p-3)";
}
}
})
for (i = 3; i <= 4; i++) {
client.subscribe("devices/light_904649/light_" + i + "/on");
lights[i].onclick=function(value){
console.log("Fuck pass-by-reference");
return function(){
client.publish("devices/light_904649/light_" + value + "/on/toggle", 'true');
};
} (i);
};
document.getElementById("up").onclick = function(){
for (i = 3; i <= 4; i++) {
client.publish("devices/light_904649/light_" + i + "/on/set", 'true');
};
};
client.subscribe('iot/c0dbe7/relay/on');
document.getElementById('exhaust_on').onclick = function() {
client.publish('iot/c0dbe7/relay/on/set', 'true');
}
document.getElementById('exhaust_off').onclick = function() {
client.publish('iot/c0dbe7/relay/on/set', 'false');
}
};
</script>
</html>

101
templates/index.html
View File

@ -1,101 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<h1 style='color:blue'>Warsaw Hackespace lights switching panel</h1>
<svg height="240" width="240">
<rect
y="20"
x="19.999992"
height="25"
width="50"
id="rect4145"
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" />
<rect
y="115"
x="114.99999"
height="10"
width="10"
id="rect4149"
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="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
ry="5"
y="30"
x="29.999992"
height="80"
width="180"
id="rec_light_1"
style="opacity:0.5;fill:#ffff00;fill-opacity:0.50196078;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:0.5;fill:#000000;fill-opacity:0.50196078;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rec_light_2"
width="180"
height="80"
x="29.999992"
y="130"
ry="5" />
</svg>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
//document.getElementById("btn_l1").onclick=function(){ $.post("http://localhost/light/1/on/toggle"); };
//document.getElementById("btn_l2").onclick=function(){ $.post("http://localhost/light/2/on/toggle"); };
//document.getElementById("btn_l3").onclick=function(){ $.post("http://localhost/light/3/on/toggle"); };
//document.getElementById("btn_l4").onclick=function(){ $.post("http://localhost/light/4/on/toggle"); };
document.getElementById("rec_light_1").onclick=function(){ $.post("http://localhost/light/3/on/toggle"); };
document.getElementById("rec_light_2").onclick=function(){ $.post("http://localhost/light/4/on/toggle"); };
var updateStatus = function() {
$.getJSON("/status", function(data) {
if (data.lights[2] == true) {
document.getElementById("rec_light_1").style.fill = "#ffff00";
} else {
document.getElementById("rec_light_1").style.fill = "#000000";
}
if (data.lights[3] == true) {
document.getElementById("rec_light_2").style.fill = "#ffff00";
} else {
document.getElementById("rec_light_2").style.fill = "#000000";
}
});
};
updateStatus();
setInterval(updateStatus, 100);});
</script>
</body>