From db9c984446aaa6fe1cfa05bb168f4e0162342d2f Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 5 Mar 2024 16:36:42 +0100 Subject: [PATCH 1/4] adds class for graph --- web/main.js | 207 +++++++++++++--------------------------------------- 1 file changed, 52 insertions(+), 155 deletions(-) diff --git a/web/main.js b/web/main.js index 3d37b18..4d23f7d 100644 --- a/web/main.js +++ b/web/main.js @@ -5,7 +5,7 @@ let value; let newArrayTemp = []; let newArrayHumid = []; let newArrayLight = []; -let timeArray = []; // Array to store time values` +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]; @@ -15,162 +15,59 @@ 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); + +class liveGraph { + + constructor() { + this.timeArray = []; + this.dateArray = []; + this.valueArray = []; + } + pushArray(array) { + for (let i = 0; i < 10; i++) { + array.push(Math.random() * 10); + } + } + makeGraph() { + Plotly.plot("liveGraph", [ + { + x: this.timeArray, // Use timeArray as x values + y: this.valueArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "Temperature", + }, + ]); + } + + updateGraph() { + let cnt = 0; + let interval = setInterval(function () { + var time = new Date(); + this.timeArray.push(new Date()); + this.pushArray(this.valueArray); + var update = { + x: [[this.timeArray]], + y: [[this.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); } } -// 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 graph = new liveGraph(); +graph.makeGraph(); + graph.updateGraph(); + graph.pushArray(); + console.log("test"); - -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 From 67d77d59d13dba89e987b3fcce70c8d32543e31a Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 5 Mar 2024 16:36:58 +0100 Subject: [PATCH 2/4] changes html and css for testing class --- web/index.html | 105 +------------------------------------------------ web/styles.css | 2 +- 2 files changed, 2 insertions(+), 105 deletions(-) diff --git a/web/index.html b/web/index.html index 22f8295..6643c14 100644 --- a/web/index.html +++ b/web/index.html @@ -52,6 +52,7 @@ +
@@ -60,110 +61,6 @@
- -
-

Node 2

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
- -
-
-

Node 3

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
-

Node 4

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
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; From 9b01523f0e086a70f551a9a6d1ccc742241a27be Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:01:20 +0100 Subject: [PATCH 3/4] makes class for graphs --- web/index.html | 10 +++++- web/main.js | 87 ++++++++++++++++++++------------------------------ 2 files changed, 44 insertions(+), 53 deletions(-) diff --git a/web/index.html b/web/index.html index 6643c14..63e7113 100644 --- a/web/index.html +++ b/web/index.html @@ -62,7 +62,15 @@ - + +
+
+

Live graph:

+
+
+
+ + diff --git a/web/main.js b/web/main.js index 4d23f7d..be77e3f 100644 --- a/web/main.js +++ b/web/main.js @@ -1,33 +1,16 @@ -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; - +let intervalDelay = 5000; +let newData = true; class liveGraph { - - constructor() { - this.timeArray = []; - this.dateArray = []; - this.valueArray = []; - } - pushArray(array) { - for (let i = 0; i < 10; i++) { - array.push(Math.random() * 10); - } + // 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", [ { @@ -40,34 +23,34 @@ class liveGraph { ]); } + // Function to update the graph with new values updateGraph() { - let cnt = 0; - let interval = setInterval(function () { - var time = new Date(); - this.timeArray.push(new Date()); - this.pushArray(this.valueArray); - var update = { - x: [[this.timeArray]], - y: [[this.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); + 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 graph = new liveGraph(); -graph.makeGraph(); - graph.updateGraph(); - graph.pushArray(); - console.log("test"); +let graph1 = new liveGraph(1); +graph1.makeGraph(); +let interval = setInterval(function () { + if (newData) { + graph1.updateGraph(); + } +}, intervalDelay); \ No newline at end of file From 65783ac3b68139a163aceba3b67fe1d40c24ae4b Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:02:34 +0100 Subject: [PATCH 4/4] Add liveGraph class and update index.html --- web/classes.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++ web/index.html | 1 + web/main.js | 56 -------------------------------------------------- 3 files changed, 57 insertions(+), 56 deletions(-) create mode 100644 web/classes.js 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 63e7113..ecf1faf 100644 --- a/web/index.html +++ b/web/index.html @@ -73,5 +73,6 @@ + diff --git a/web/main.js b/web/main.js index be77e3f..e69de29 100644 --- a/web/main.js +++ b/web/main.js @@ -1,56 +0,0 @@ -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