fist commit web

silves10 · Oct 15, 2019 · 8b37e2bac55256e0065712513a5a139a1c8c2e5c · 8b37e2b
1 parent ebc11f6
commit 8b37e2bac55256e0065712513a5a139a1c8c2e5c
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/Lights.html b/Lights.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Team 2 agile work. </title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  margin: 0;
+}
+.header { /* Style the header */
+  background-color: #f1f1f1;
+  padding: 20px;
+  text-align: center;
+}
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: rgb(216, 216, 216);
+  top: 0;
+}
+
+.active {
+  background-color: rgb(6, 247, 174);
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+}
+
+.inactive {
+  background-color: rgb(230, 6, 6);
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+}
+.active2 {
+  background-color: rgb(48, 130, 207);
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover {
+  background-color: rgb(206, 206, 206);
+}
+</style>
+</head>
+<body>
+<div class="header">
+  <h1>Lights Page!</h1>
+</div>
+<ul>
+  <li>
+    <a class="active2" href="#Lights">Lights</a>
+  </li>
+  <li><a href="Tempature.html">Tempautre</a></li>
+  <li><a href="#Data">Data</a></li>
+</ul>
+<script type="text/javascript" src="script.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" type="text/javascript"></script>
+<input class = "inactive" type="button" id="button" value="Interior Light" onclick="setColor(event);" />
+<input class = "inactive" type="button" id="button" value="Exterior Light" onclick="setColor(event);" />
+<input class = "inactive" type="button" id="button" value="Proximity Sensor" onclick="startConnect()" />
+<div id="messages">
+</div>
+</body>
+</html>
diff --git a/Tempature.html b/Tempature.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Team 2 agile work. </title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  margin: 0;
+}
+.header { /* Style the header */
+  background-color: #f1f1f1;
+  padding: 20px;
+  text-align: center;
+}
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: rgb(216, 216, 216);
+  top: 0;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+.div2 
+{
+  width: 150px;
+  height: 150px;  
+  border: 5px solid rgba(247, 92, 92, 0.938);
+  box-sizing: border-box;
+  color: rgb(0, 0, 0);
+  padding: 14px 16px;
+  font-size: 50px;
+  text-align: center;
+  margin: 0 auto;
+}
+li a:hover {
+  background-color: rgb(206, 206, 206);
+}
+
+.active2 {
+  background-color: rgb(48, 130, 207);
+}
+</style>
+</head>
+<body>
+<script src ="index.js"></script>
+<div class="header">
+  <h1>Tempautre Page!</h1>
+</div>
+<ul>
+  <li>
+    <a href="Lights.html">Lights</a>
+  </li>
+  <li><a class = "active2" href="Lights.html" >Tempautre</a></li>
+  <li><a href="#Data">Data</a></li>
+</ul>
+<div class="div2">50°C</div>
+<button >Press for tempature</button>
+</body>
+</html>
diff --git a/mqtt.crt b/mqtt.crt
@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFYDCCA0igAwIBAgIURFc0JFuBiZs18s64KztbpybwdSgwDQYJKoZIhvcNAQEL
+BQAwSDELMAkGA1UEBhMCQk0xGTAXBgNVBAoTEFF1b1ZhZGlzIExpbWl0ZWQxHjAc
+BgNVBAMTFVF1b1ZhZGlzIFJvb3QgQ0EgMiBHMzAeFw0xMjAxMTIxODU5MzJaFw00
+MjAxMTIxODU5MzJaMEgxCzAJBgNVBAYTAkJNMRkwFwYDVQQKExBRdW9WYWRpcyBM
+aW1pdGVkMR4wHAYDVQQDExVRdW9WYWRpcyBSb290IENBIDIgRzMwggIiMA0GCSqG
+SIb3DQEBAQUAA4ICDwAwggIKAoICAQChriWyARjcV4g/Ruv5r+LrI3HimtFhZiFf
+qq8nUeVuGxbULX1QsFN3vXg6YOJkApt8hpvWGo6t/x8Vf9WVHhLL5hSEBMHfNrMW
+n4rjyduYNM7YMxcoRvynyfDStNVNCXJJ+fKH46nafaF9a7I6JaltUkSs+L5u+9ym
+c5GQYaYDFCDy54ejiK2toIz/pgslUiXnFgHVy7g1gQyjO/Dh4fxaXc6AcW34Sas+
+O7q414AB+6XrW7PFXmAqMaCvN+ggOp+oMiwMzAkd056OXbxMmO7FGmh77FOm6RQ1
+o9/NgJ8MSPsc9PG/Srj61YxxSscfrf5BmrODXfKEVu+lV0POKa2Mq1W/xPtbAd0j
+IaFYAI7D0GoT7RPjEiuA3GfmlbLNHiJuKvhB1PLKFAeNilUSxmn1uIZoL1NesNKq
+IcGY5jDjZ1XHm26sGahVpkUG0CM62+tlXSoREfA7T8pt9DTEceT/AFr2XK4jYIVz
+8eQQsSWu1ZK7E8EM4DnatDlXtas1qnIhO4M15zHfeiFuuDIIfR0ykRVKYnLP43eh
+vNURG3YBZwjgQQvD6xVu+KQZ2aKrr+InUlYrAoosFCT5v0ICvybIxo/gbjh9Uy3l
+7ZizlWNof/k19N+IxWA1ksB8aRxhlRbQ694Lrz4EEEVlWFA4r0jyWbYW8jwNkALG
+cC4BrTwV1wIDAQABo0IwQDAPBgNVHRMBAf8EBTADAQH/MA4GA1UdDwEB/wQEAwIB
+BjAdBgNVHQ4EFgQU7edvdlq/YOxJW8ald7tyFnGbxD0wDQYJKoZIhvcNAQELBQAD
+ggIBAJHfgD9DCX5xwvfrs4iP4VGyvD11+ShdyLyZm3tdquXK4Qr36LLTn91nMX66
+AarHakE7kNQIXLJgapDwyM4DYvmL7ftuKtwGTTwpD4kWilhMSA/ohGHqPHKmd+RC
+roijQ1h5fq7KpVMNqT1wvSAZYaRsOPxDMuHBR//47PERIjKWnML2W2mWeyAMQ0Ga
+W/ZZGYjeVYg3UQt4XAoeo0L9x52ID8DyeAIkVJOviYeIyUqAHerQbj5hLja7NQ4n
+lv1mNDthcnPxFlxHBlRJAHpYErAK74X9sbgzdWqTHBLmYF5vHX/JHyPLhGGfHoJE
++V+tYlUkmlKY7VHnoX6XOuYvHxHaU4AshZ6rNRDbIl9qxV6XU/IyAgkwo1jwDQHV
+csaxfGl7w/U2Rcxhbl5MlMVerugOXou/983g7aEOGzPuVBj+D77vfoRrQ+NwmNtd
+dbINWQeFFSM51vHfqSYP1kjHs6Yi9TM3WpVHn3u6GBVv/9YUZINJ0gpnIdsPNWNg
+KCLjsZWDzYWm3S8P52dSbrsvhXz1SnPnxT7AvSESBT/8twNJAlvIJebiVDj1eYeM
+HVOyToV7BjjHLPj4sHKNJeV3UvQDHEimUF+IIDBu8oJDqz2XhOdT+yHBTw8imoa4
+WSr2Rz0ZiC3oheGe7IUIarFsNMkd7EgrO3jtZsSOeWmD3n+M
+-----END CERTIFICATE-----
diff --git a/script.js b/script.js
@@ -0,0 +1,55 @@
+function setColor(e) {
+    var target = e.target,
+        status = e.target.classList.contains('active');
+
+    e.target.classList.add(status ? 'inactive' : 'active');
+    e.target.classList.remove(status ? 'active' : 'inactive');
+  }
+
+  function startConnect() {
+    // Generate a random client ID
+    clientID = "clientID-" + parseInt(Math.random() * 100);
+
+
+    // Print output for the user in the messages div
+    document.getElementById("messages").innerHTML += '<span>Connecting to: ' + "test.mosqutto.org" + ' on port: ' + "8080" + '</span><br/>';
+    document.getElementById("messages").innerHTML += '<span>Using the following client value: ' + clientID + '</span><br/>';
+
+    // Initialize new Paho client connection
+    client = new Paho.MQTT.Client("test.mosqutto.org", 8080 , clientID);
+
+    // Set callback handlers
+    client.onConnectionLost = onConnectionLost;
+    client.onMessageArrived = onMessageArrived;
+
+    // Connect the client, if successful, call onConnect function
+    client.connect({ 
+        onSuccess: onConnect,
+    });
+}
+// Called when the client connects
+function onConnect() {
+    // Fetch the MQTT topic from the form
+
+    // Print output for the user in the messages div
+    document.getElementById("messages").innerHTML += '<span>Subscribing to: ' + topic + '</span><br/>';
+
+    // Subscribe to the requested topic
+    client.subscribe("302CEM/Team2/lights01");
+}
+
+// Called when the client loses its connection
+function onConnectionLost(responseObject) {
+    document.getElementById("messages").innerHTML += '<span>ERROR: Connection lost</span><br/>';
+    if (responseObject.errorCode !== 0) {
+        document.getElementById("messages").innerHTML += '<span>ERROR: ' + + responseObject.errorMessage + '</span><br/>';
+    }
+}
+
+// Called when a message arrives
+function onMessageArrived(message) {
+    console.log("onMessageArrived: " + message.payloadString);
+    document.getElementById("messages").innerHTML += '<span>Topic: ' + message.destinationName + '  | ' + message.payloadString + '</span><br/>';
+}
+
+