From 681c7dd589a32f9720ed6139bea51e9de44c15c4 Mon Sep 17 00:00:00 2001
From: vuko <vuko@hackerspace.pl>
Date: Mon, 23 Nov 2020 12:11:05 +0100
Subject: [PATCH] new location floorplan

---
 static/index.html | 277 ++++++++++++++++++++++++++++------------------
 1 file changed, 168 insertions(+), 109 deletions(-)
diff --git a/static/index.html b/static/index.html
index 70cfef3..218e2f2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3,6 +3,8 @@
 	<head>
 		<meta charset="utf-8">
 		<title>light up</title>
+		<!--<link rel="stylesheet" href="style.css"> -->
+		<!--<script src="script.js"></script> -->
 	</head>
 	<style>
 		:root {
@@ -17,6 +19,36 @@
 			--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 {
+			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>
@@ -24,126 +56,153 @@
 		<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="30"
-			     height="80"
-			     width="80"
-			     id="rec_light_3"
-			     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
-			     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="rec_light_4"
-			     width="80"
-			     height="80"
-			     x="30"
-			     y="130"
-			     ry="5" />
-			  <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="rec_light_2"
-			     width="80"
-			     height="80"
-			     x="130"
-			     y="30"
-			     ry="5" />
-			  <rect
-			     ry="5"
-			     y="130"
-			     x="130"
-			     height="80"
-			     width="80"
-			     id="rec_light_1"
-			     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" />
-			</svg>
+		<div style="margin-left:auto;margin-right:auto;width:480px">
+			<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
+               id="l4"
+               width="9.625"
+               height="2.25"
+               x="3.9374995"
+               y="0.375"
+               ry="0.375" />
+            <rect
+               id="l5"
+               width="6.125"
+               height="2.25"
+               x="3.9374995"
+               y="3.375"
+               ry="0.375" />
+            <rect
+               id="l6"
+               width="2.625"
+               height="2.25"
+               x="7.4374995"
+               y="6.375"
+               ry="0.375" />
+            <rect
+               id="l7"
+               width="2.625"
+               height="2.25"
+               x="7.4374995"
+               y="9.374999"
+               ry="0.375" />
+            <rect
+               id="l8"
+               width="1.75"
+               height="3.0"
+               x="11.8125"
+               y="4.125"
+               ry="0.375" />
+            <rect
+               width="6.125"
+               height="2.25"
+               x="0.4375"
+               y="6.375"
+               ry="0.375"
+               id="l2" />
+            <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>
+
 		</div>
-		<script src="https://unpkg.com/mqtt@2.1.3/dist/mqtt.min.js" ></script>
-		<!-- <script src="mqtt.min.js"></script> -->
+		<script src="paho-mqtt.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 = 1; i <= 4; i++) { 
-					lights[i] = document.getElementById("rec_light_" + i);
+				for (i = 1; i <= 8; 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]);
 					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)";
-		    	        }
+						if (message.payloadString == "true") {
+		    	    lights[n].classList = ["light-on"];
+		    	  } else {
+		    	    lights[n].classList = ["light-off"];
+		    	  }
 					}
-				})
-				for (i = 1; 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');
+
+				function onConnect(){
+					for (i = 1; i <= 4; i++) { 
+						client.subscribe("devices/light_904649/light_" + i + "/on");
+						lights[i].onclick=function(value){
+							return function(){
+								client.publish("devices/light_904649/light_" + value + "/on/toggle", 'true');
+							};
+						} (i);
+					};
+					document.getElementById("up").onclick = function(){
+						for (i = 1; i <= 8; i++) { 
+							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>
 </html>
