Temperatuur:
Not connected
@@ -154,7 +159,7 @@
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 {