added script + image

2024-03-29 14:38:01 +01:00
parent 345acda615
commit 0b079798cd
3 changed files with 88 additions and 1 deletions
--- a/web/newWebsite/arrow.png
+++ b/web/newWebsite/arrow.png
--- a/web/newWebsite/index.html
+++ b/web/newWebsite/index.html
@@ -27,7 +27,9 @@


 <body>
-    <script src="main.js"></script>
    <script src="GaugGroup.js"></script>
+    <script src="main.js"></script>
+    <script src="liveGraph.js"></script>
+
 </body>
 </html>
--- a/web/newWebsite/liveGraph.js
+++ b/web/newWebsite/liveGraph.js
@@ -0,0 +1,85 @@
+class liveGraph {
+    // Constructor to initialize the graph
+    constructor(id) {
+      this.timeArray = [];
+      this.tempArray = [];
+      this.humiArray = [];
+      this.eco2Array = [];
+      this.tvocArray = [];
+      this.cnt = 0;
+      this.nodeId = "liveGraph" + id;
+    }
+    // Fuction to create a graph
+    makeGraph() {
+      // Create a new line for temperature
+      Plotly.plot(this.nodeId, [
+        {
+          x: this.timeArray, // Use timeArray as x values
+          y: this.tempArray,
+          mode: "lines",
+          line: { color: "#FF0000" },
+          name: "Temperature",
+        },
+      ]);
+      // Create a new line for humidity
+      Plotly.plot(this.nodeId, [
+        {
+          x: this.timeArray, // Use timeArray as x values
+          y: this.humiArray,
+          mode: "lines",
+          line: { color: "#80CAF6" },
+          name: "Humidity",
+        },
+      ]);
+      // Create a new line for eCO2
+      Plotly.plot(this.nodeId, [
+        {
+          x: this.timeArray, // Use timeArray as x values
+          y: this.eco2Array,
+          mode: "lines",
+          line: { color: "#FFA500" },
+          name: "eCO2 / 10",
+        },
+      ]);
+      // Create a new line for TVOC
+      Plotly.plot(this.nodeId, [
+        {
+          x: this.timeArray, // Use timeArray as x values
+          y: this.tvocArray,
+          mode: "lines",
+          line: { color: "#000000" },
+          name: "TVOC / 10",
+        },
+      ]);
+    }
+  
+    // Function to update the graph with new values got from updateData function
+    updateGraph() {
+      let time = new Date();
+      this.timeArray.push(new Date());
+  
+      let update = {
+        x: [[this.timeArray]],
+        y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]]
+      };
+  
+      let olderTime = time.setMinutes(time.getMinutes() - 1);
+      let futureTime = time.setMinutes(time.getMinutes() + 1);
+      let minuteView = {
+        xaxis: {
+          type: "date",
+          range: [olderTime, futureTime],
+        },
+      };
+      Plotly.relayout(this.nodeId, minuteView);
+      if (this.cnt === 10) clearInterval(interval);
+    }
+    // function to get the new data for graph
+    updateData(temperature, humidity, eCO2, TVOC) {
+      // Update the graph
+      this.tempArray.push(temperature);
+      this.humiArray.push(humidity);
+      this.eco2Array.push(eCO2 / 10);
+      this.tvocArray.push(TVOC / 10);
+    }
+  }