diff --git a/web/classes.js b/web/classes.js index 03160e5..3f67eb3 100644 --- a/web/classes.js +++ b/web/classes.js @@ -1,20 +1,21 @@ -let intervalDelay = 5000; - class liveGraph { // Constructor to initialize the graph constructor(id) { - this.timeArray = [4, 5, 6, 7, 9]; - this.valueArray = [1, 3, 4, 8, 10]; - this.cnt = 0; - this.nodeId = id; + this.timeArray = []; + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; + this.cnt = 0; + this.nodeId = "liveGraph" + id; } // Fuction to create a graph makeGraph() { - Plotly.plot("liveGraph", [ + Plotly.plot(this.nodeId, [ { x: this.timeArray, // Use timeArray as x values - y: this.valueArray, + y: this.tempArray, mode: "lines", line: { color: "#80CAF6" }, name: "Temperature", @@ -26,10 +27,10 @@ class liveGraph { updateGraph() { let time = new Date(); this.timeArray.push(new Date()); - this.valueArray.push(Math.random()); + let update = { x: [[this.timeArray]], - y: [[this.valueArray]], + y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]], }; let olderTime = time.setMinutes(time.getMinutes() - 1); let futureTime = time.setMinutes(time.getMinutes() + 1); @@ -39,7 +40,15 @@ class liveGraph { range: [olderTime, futureTime], }, }; - Plotly.relayout("liveGraph", minuteView); + Plotly.relayout(this.nodeId, minuteView); if (this.cnt === 10) clearInterval(interval); } + + updateData(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2); + this.tvocArray.push(TVOC); + } } \ No newline at end of file diff --git a/web/index.html b/web/index.html index 7398036..767972c 100644 --- a/web/index.html +++ b/web/index.html @@ -28,7 +28,7 @@ - - + + + \ No newline at end of file diff --git a/web/main.js b/web/main.js index 090c1b3..c3425b9 100644 --- a/web/main.js +++ b/web/main.js @@ -1,17 +1,5 @@ -let data; -let measurements; -let date; -let value; -let newArrayTemp = []; -let newArrayHumid = []; -let newArrayLight = []; -let timeArray = []; // Array to store time values` -let valueArray = [1, 2, 3, 4, 5]; -let newValueArray = [4, 5, 6]; -let myValue = 1; -let intervalDelay = 50; const sensorData = {}; - +let intervalDelay = 1000; // Create WebSocket connection. const socket = new WebSocket("ws://145.92.8.114/ws"); @@ -99,46 +87,6 @@ function pushArray(array) { array.push(Math.random() * 10); } } -// Make lines in the graph of the live data -/*Plotly.plot("liveGraph", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -let cnt = 0; - -// Update the graph every 1 ms -let interval = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); - - pushArray(valueArray); - - var update = { - x: [[timeArray]], - y: [[newValueArray]], - }; - - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); - - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph", minuteView); - - if (cnt === 10) clearInterval(interval); -}, intervalDelay); - -*/ //function for making the html elements for the following html code @@ -215,7 +163,7 @@ function createNodeData(node) { graphP.textContent = "Live graph:"; var liveGraph = document.createElement("div"); - liveGraph.id = "liveGraph"; + liveGraph.id = "liveGraph" + node; graphDiv.appendChild(graphP); graphDiv.appendChild(liveGraph); @@ -249,6 +197,13 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) { document.getElementById("humidStatus").textContent = "Connected"; document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("TVOCStatus").textContent = "Connected"; + + // Update the graph + graphNode1.updateData(temperature, humidity, eCO2, TVOC); + graphNode1.updateGraph(); + + graphNode2.updateData(temperature, humidity, eCO2, TVOC); + graphNode2.updateGraph(); } // Call the function to create the HTML structure @@ -257,5 +212,12 @@ createNodeData(2); createNodeData(3); createNodeData(4); +// Create a new liveGraph object +let graphNode1 = new liveGraph(1); +graphNode1.makeGraph(); + +let graphNode2 = new liveGraph(2); + +graphNode2.makeGraph(); // openConnection();