diff --git a/web/classes.js b/web/classes.js
new file mode 100644
index 0000000..be77e3f
--- /dev/null
+++ b/web/classes.js
@@ -0,0 +1,56 @@
+let intervalDelay = 5000;
+let newData = true;
+
+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;
+ }
+
+ // Fuction to create a graph
+ makeGraph() {
+ Plotly.plot("liveGraph", [
+ {
+ x: this.timeArray, // Use timeArray as x values
+ y: this.valueArray,
+ mode: "lines",
+ line: { color: "#80CAF6" },
+ name: "Temperature",
+ },
+ ]);
+ }
+
+ // Function to update the graph with new values
+ updateGraph() {
+ let time = new Date();
+ this.timeArray.push(new Date());
+ this.valueArray.push(Math.random());
+ let update = {
+ x: [[this.timeArray]],
+ y: [[this.valueArray]],
+ };
+ let olderTime = time.setMinutes(time.getMinutes() - 1);
+ let futureTime = time.setMinutes(time.getMinutes() + 1);
+ let minuteView = {
+ xaxis: {
+ type: "date",
+ range: [olderTime, futureTime],
+ },
+ };
+ Plotly.relayout("liveGraph", minuteView);
+ if (this.cnt === 10) clearInterval(interval);
+ }
+}
+
+let graph1 = new liveGraph(1);
+
+graph1.makeGraph();
+
+let interval = setInterval(function () {
+ if (newData) {
+ graph1.updateGraph();
+ }
+}, intervalDelay);
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 22f8295..ecf1faf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -52,6 +52,7 @@
+
-
-
-
Node 2
-
-
-
Temperatuur:
Not connected
-
-
-
-
-
Luchtvochtigheid:
Not connected
-
-
-
-
-
Lichtintensiteit:
Not connected
-
-
-
-
-
-
-
-
-
-
Node 3
-
-
-
Temperatuur:
Not connected
-
-
-
-
-
Luchtvochtigheid:
Not connected
-
-
-
-
-
Lichtintensiteit:
Not connected
-
-
-
-
-
-
-
-
-
Node 4
-
-
-
Temperatuur:
Not connected
-
-
-
-
-
Luchtvochtigheid:
Not connected
-
-
-
-
-
Lichtintensiteit:
Not connected
-
-
-
-
-
-
-
-
diff --git a/web/main.js b/web/main.js
index 3d37b18..e69de29 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,176 +0,0 @@
-let data;
-let measurements;
-let date;
-let value;
-let newArrayTemp = [];
-let newArrayHumid = [];
-let newArrayLight = [];
-let timeArray = []; // Array to store time values`
-let dateArray = [1, 2, 3];
-let valueArray = [1, 2, 3, 4, 5];
-let valueArray2 = [1, 2, 3, 4, 5];
-let valueArray3 = [1, 2, 3, 4, 5];
-let valueArray4 = [1, 2, 3, 4, 5];
-let newValueArray = [4, 5, 6];
-let myValue = 1;
-let intervalDelay = 50;
-
-//const timeArray = [1,2,3,4];
-//const dateArray = [5,6,7,8];
-//const valueArray = [1,1,1,3];
-function pushArray(array) {
- for (let i = 0; i < 10; i++) {
- 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",
- },
-]);
-
-// Make lines in the graph of the live data
-Plotly.plot("liveGraph2", [
- {
- x: timeArray, // Use timeArray as x values
- y: valueArray2,
- mode: "lines",
- line: { color: "#80CAF6" },
- name: "Temperature",
- },
-]);
-
-// Make lines in the graph of the live data
-Plotly.plot("liveGraph3", [
- {
- x: timeArray, // Use timeArray as x values
- y: valueArray3,
- mode: "lines",
- line: { color: "#80CAF6" },
- name: "Temperature",
- },
-]);// Make lines in the graph of the live data
-Plotly.plot("liveGraph4", [
- {
- x: timeArray, // Use timeArray as x values
- y: valueArray4,
- mode: "lines",
- line: { color: "#80CAF6" },
- name: "Temperature",
- },
-]);
-
-// Make lines in the graph of the live data
-
-
-
-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);
-
-// Update the graph every 1 ms
-let interval2 = setInterval(function () {
- var time = new Date();
- timeArray.push(new Date());
-
- pushArray(valueArray2);
-
- var update = {
- x: [[time]],
- 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("liveGraph2", minuteView);
-
- if (cnt === 1000) clearInterval(interval2);
-}, intervalDelay);
-
-// Update the graph every 1 ms
-let interval3 = setInterval(function () {
- var time = new Date();
- timeArray.push(new Date());
-
- pushArray(valueArray3);
-
- var update = {
- x: [[time]],
- 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("liveGraph3", minuteView);
-
- if (cnt === 1000) clearInterval(interval3);
-}, intervalDelay);
-
-// Update the graph every 1 ms
-let interval4 = setInterval(function () {
- var time = new Date();
- timeArray.push(new Date());
-
- pushArray(valueArray4);
-
- var update = {
- x: [[time]],
- 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("liveGraph4", minuteView);
-
- if (cnt === 1000) clearInterval(interval4);
-}, intervalDelay);
\ No newline at end of file
diff --git a/web/styles.css b/web/styles.css
index 519068f..9adefe6 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -53,7 +53,7 @@ p1 {
display: flex;
margin-left: 1%;
margin-right: 1%;
- width: 50%;
+ width: 100%;
height: 40%;
flex-direction: column;
border: 3px solid #1f82d3;