adding _files

experiment/simulation/script.js

@@ -0,0 +1,34 @@
+
+
+document.getElementById("pushbuttonPower").onclick = function() {
+    document.getElementById("mqttPopup").style.display = "block";
+};
+
+document.querySelector(".connect").onclick = function() {
+    // Get form field values
+    const name = document.getElementById("name").value;
+    const host = document.getElementById("host").value;
+    const port = document.getElementById("port").value;
+    const username = document.getElementById("username").value;
+    const password = document.getElementById("password").value;
+
+    // Check if required fields are filled
+    if (name && host && port) {
+        // Optional: check if username and password are also filled if required
+        document.getElementById("mqttPopup").style.display = "none";
+        alert("Connection Successful...");
+    } else {
+        alert("Please fill in all required fields (Name, Host, and Port) to connect.");
+    }
+};
+
+document.querySelector(".close").onclick = function() {
+    document.getElementById("mqttPopup").style.display = "none";
+};
+
+window.onclick = function(event) {
+    if (event.target === document.getElementById("mqttPopup")) {
+        document.getElementById("mqttPopup").style.display = "none";
+    }
+};
+

experiment/simulation/src/css/style.css

@@ -0,0 +1,302 @@
+/* for chart animation  */
+#chartdiv {
+  width: 50%;
+  height: 300px;
+  max-width: 100%;
+}
+
+/* #gaugediv {
+  width: 50%;
+  height: 300px;
+
+} */
+
+.text-container {
+  border: 2px solid rgb(146, 146, 146);
+  width: 520px;
+  height: 480px;
+  position: relative;
+  top: 2px;
+  border-radius: 8px;
+
+}
+
+#Code-slave {
+  display: none;
+  padding: 20px;
+  width: 27vw;
+  height: 55vh;
+  resize: none;
+  position: relative;
+  top: -450px;
+  right: 0px;
+
+}
+
+.box2 ::-webkit-scrollbar {}
+
+.box2 {}
+
+textarea {
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  color: green;
+}
+
+#arduinoCode {
+  padding: 20px;
+  width: 27vw;
+  height: 55vh;
+  resize: none;
+}
+
+/* 
+ */
+a {
+  cursor: pointer;
+}
+
+header {
+  height: 10vh;
+  border-bottom: 4px solid cadetblue;
+}
+
+header h2 {
+  color: cadetblue;
+  display: inline-block;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  overflow-x: hidden;
+  /* overflow: hidden; */
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+.entier-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  /* align-items: center; */
+  background-color: #dddddd;
+}
+
+#ifimg {
+  margin-top: 50px;
+  width: 90%;
+  height: auto;
+}
+
+#textBox {
+  font-size: 14px;
+  width: 40%;
+  height: auto;
+  padding: 20px;
+}
+
+.nav {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 2px;
+  background-color: #c4c4c4;
+  height: auto;
+  align-items: center;
+}
+
+.nav h1 {
+  background-color: transparent;
+  margin-left: 20px;
+}
+
+.nav button {
+  background-color: #04AA6D;
+  margin-right: 20px;
+  border: none;
+  outline: none;
+  color: white;
+  padding-top: 2px;
+  height: 40px;
+  border-radius: 5px;
+  font: bold;
+}
+
+.startStop {
+  width: auto;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 5px;
+  flex-direction: row;
+}
+
+.startStop h2 {
+  background-color: #2ea361;
+  color: #fff;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  padding: 5px 30px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin: 5px;
+  width: auto;
+  text-wrap: nowrap;
+}
+
+.leftcont {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.startStop h2 {
+  bottom: 18px;
+  height: 26px;
+  width: 200px;
+  background-color: #009C4E;
+  color: #fff;
+  padding: 5px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.icon {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  margin-top: -40px;
+  text-decoration: none;
+}
+
+.fa-solid {
+  font-size: 3rem;
+  color: #009C4E;
+}
+
+.dash {
+  background-color: #dddddd;
+  width: 100%;
+  height: auto;
+}
+
+.top {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.top .chartbox {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+
+}
+.gauge {
+  background-color: white;
+  width: 24%;
+  height: 260px;
+  margin: 5px;
+  border-radius: 10px;
+}
+
+.bottum {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+#chartdiv {
+  width: 36.5%;
+  height: 300px;
+  background-color: white;
+  margin: 5px;
+  border-radius: 10px;
+}
+.temp2 {
+  width: 36.5%;
+  height: 300px;
+  background-color: white;
+  margin: 5px;
+  border-radius: 10px;
+}
+
+.gauge2 {
+  background-color: white;
+  width: 24%;
+  height: 300px;
+  margin: 5px;
+  border-radius: 10px;
+}
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: white;
+  color: white;
+  padding: 7px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 100px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  background-color: #3e8e41;
+}