From 9255b8ab97665dbc4c43fbb8de25e0656b1eb08e Mon Sep 17 00:00:00 2001 From: Dano van den Bosch Date: Fri, 16 Feb 2024 12:28:41 +0100 Subject: [PATCH] Refactor HTML and JavaScript code, update graph data --- web/index.html | 15 ++++-- web/main.js | 141 +++++++++++++++++++++++++++++++++++++++++++++---- web/styles.css | 12 +++-- 3 files changed, 148 insertions(+), 20 deletions(-) diff --git a/web/index.html b/web/index.html index 4b6129b..cbadbd7 100644 --- a/web/index.html +++ b/web/index.html @@ -8,7 +8,7 @@ Node dev page -a + @@ -24,8 +24,10 @@
+
-
+

Node 1

+
Temperatuur:

Not connected

@@ -59,6 +61,7 @@
+

Node 2

Temperatuur:

Not connected

@@ -87,13 +90,14 @@

Live graph:

-
+
+

Node 3

Temperatuur:

Not connected

@@ -122,10 +126,11 @@

Live graph:

-
+
+

Node 4

Temperatuur:

Not connected

@@ -154,7 +159,7 @@

Live graph:

-
+
diff --git a/web/main.js b/web/main.js index d0875fe..3d37b18 100644 --- a/web/main.js +++ b/web/main.js @@ -6,15 +6,23 @@ 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 newValueArray = [4,5,6]; +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", [ { @@ -26,17 +34,52 @@ Plotly.plot("liveGraph", [ }, ]); +// 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()); + timeArray.push(new Date()); + + pushArray(valueArray); - valueArray.push(Math.random() * 10); - var update = { - x: [[time]], + x: [[timeArray]], y: [[newValueArray]], }; @@ -51,5 +94,83 @@ let interval = setInterval(function () { }; Plotly.relayout("liveGraph", minuteView); - if (cnt === 100) clearInterval(interval); -}, 1); \ No newline at end of file + 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 9739ee8..bed1cae 100644 --- a/web/styles.css +++ b/web/styles.css @@ -51,19 +51,21 @@ p1 { .flex-NodeData { display: flex; - margin-left: 10%; - margin-right: 10; + margin-left: 1%; + margin-right: 1%; + width: 50%; height: 40%; flex-direction: column; border: 1px solid red; - margin-bottom: 40px; + border-radius: 20px; } .nodeData { display: flex; -justify-content: center; +justify-content: left; flex-direction: row; - border: 2px solid red; + margin-bottom: 2%; + /* border: 2px solid red; */ } .flex-LiveData {