diff --git a/web/newWebsite/arrow.png b/web/newWebsite/arrow.png new file mode 100644 index 0000000..600ce56 Binary files /dev/null and b/web/newWebsite/arrow.png differ diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 2519ffb..52122e5 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -27,7 +27,9 @@ - + + + \ No newline at end of file diff --git a/web/newWebsite/liveGraph.js b/web/newWebsite/liveGraph.js new file mode 100644 index 0000000..e2aac1d --- /dev/null +++ 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); + } + } \ No newline at end of file