Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor HTML and JavaScript code, update graph data

Browse Source
This commit is contained in:
Dano van den Bosch
2024-02-16 12:28:41 +01:00
parent 44b1317e33
commit 9255b8ab97
3 changed files with 148 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/index.html
View File

@@ -8,7 +8,7 @@
<title>Node dev page</title> <title>Node dev page</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>a </head>
<body> <body>
<!-- Make a new header with a navigation bar --> <!-- Make a new header with a navigation bar -->
@@ -24,7 +24,9 @@
<!-- Make a new flex container for the live data --> <!-- Make a new flex container for the live data -->
<div class="nodeData"> <div class="nodeData">
<div class="flex-NodeData"> <div class="flex-NodeData">
<p>Node 1</p>
<div class="flex-LiveData"> <div class="flex-LiveData">
<div> <div>
<div>Temperatuur: <p id="temperature">Not connected</p> <div>Temperatuur: <p id="temperature">Not connected</p>
@@ -59,6 +61,7 @@
</div> </div>
<div class="flex-NodeData"> <div class="flex-NodeData">
<p>Node 2</p>
<div class="flex-LiveData"> <div class="flex-LiveData">
<div> <div>
<div>Temperatuur: <p id="temperature">Not connected</p> <div>Temperatuur: <p id="temperature">Not connected</p>
@@ -87,13 +90,14 @@
<div class="flex-graph"> <div class="flex-graph">
<div> <div>
<p>Live graph:</p> <p>Live graph:</p>
<div id="liveGraph"></div> <div id="liveGraph2"></div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- class="nodeData" --> </div> <!-- class="nodeData" -->
<div class="nodeData"> <div class="nodeData">
<div class="flex-NodeData"> <div class="flex-NodeData">
<p>Node 3</p>
<div class="flex-LiveData"> <div class="flex-LiveData">
<div> <div>
<div>Temperatuur: <p id="temperature">Not connected</p> <div>Temperatuur: <p id="temperature">Not connected</p>
@@ -122,10 +126,11 @@
<div class="flex-graph"> <div class="flex-graph">
<div> <div>
<p>Live graph:</p> <p>Live graph:</p>
<div id="liveGraph"></div> <div id="liveGraph3"></div>
</div> </div>
</div> </div>
</div> <div class="flex-NodeData"> </div> <div class="flex-NodeData">
<p>Node 4</p>
<div class="flex-LiveData"> <div class="flex-LiveData">
<div> <div>
<div>Temperatuur: <p id="temperature">Not connected</p> <div>Temperatuur: <p id="temperature">Not connected</p>
@@ -154,7 +159,7 @@
<div class="flex-graph"> <div class="flex-graph">
<div> <div>
<p>Live graph:</p> <p>Live graph:</p>
<div id="liveGraph"></div> <div id="liveGraph4"></div>
</div> </div>
</div> </div>
</div> </div>

137
web/main.js
View File

@@ -6,15 +6,23 @@ let newArrayTemp = [];
let newArrayHumid = []; let newArrayHumid = [];
let newArrayLight = []; let newArrayLight = [];
let timeArray = []; // Array to store time values` let timeArray = []; // Array to store time values`
let dateArray = [1,2,3]; let dateArray = [1, 2, 3];
let valueArray = [1,2,3,4,5]; let valueArray = [1, 2, 3, 4, 5];
let newValueArray = [4,5,6]; 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 myValue = 1;
let intervalDelay = 50;
//const timeArray = [1,2,3,4]; //const timeArray = [1,2,3,4];
//const dateArray = [5,6,7,8]; //const dateArray = [5,6,7,8];
//const valueArray = [1,1,1,3]; //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 // Make lines in the graph of the live data
Plotly.plot("liveGraph", [ Plotly.plot("liveGraph", [
{ {
@@ -26,6 +34,41 @@ 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; let cnt = 0;
// Update the graph every 1 ms // Update the graph every 1 ms
@@ -33,7 +76,33 @@ let interval = setInterval(function () {
var time = new Date(); var time = new Date();
timeArray.push(new Date()); timeArray.push(new Date());
valueArray.push(Math.random() * 10); 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 = { var update = {
x: [[time]], x: [[time]],
@@ -49,7 +118,59 @@ let interval = setInterval(function () {
range: [olderTime, futureTime], range: [olderTime, futureTime],
}, },
}; };
Plotly.relayout("liveGraph", minuteView); Plotly.relayout("liveGraph2", minuteView);
if (cnt === 100) clearInterval(interval); if (cnt === 1000) clearInterval(interval2);
}, 1); }, 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);

12
web/styles.css
View File

@@ -51,19 +51,21 @@ p1 {
.flex-NodeData { .flex-NodeData {
display: flex; display: flex;
margin-left: 10%; margin-left: 1%;
margin-right: 10; margin-right: 1%;
width: 50%;
height: 40%; height: 40%;
flex-direction: column; flex-direction: column;
border: 1px solid red; border: 1px solid red;
margin-bottom: 40px; border-radius: 20px;
} }
.nodeData { .nodeData {
display: flex; display: flex;
justify-content: center; justify-content: left;
flex-direction: row; flex-direction: row;
border: 2px solid red; margin-bottom: 2%;
/* border: 2px solid red; */
} }
.flex-LiveData { .flex-LiveData {