Merge branch 'main' of https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59
This commit is contained in:
56
web/classes.js
Normal file
56
web/classes.js
Normal file
@@ -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);
|
102
web/index.html
102
web/index.html
@@ -52,6 +52,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Make a new flexcontainer for the graphs and API request time -->
|
||||
<div class="flex-graph">
|
||||
<div>
|
||||
@@ -60,113 +61,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-NodeData">
|
||||
<p>Node 2</p>
|
||||
<div class="flex-LiveData">
|
||||
<div>
|
||||
<div>Temperatuur: <p id="temperature">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="tempStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Luchtvochtigheid: <p id="humidity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="humidStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Lichtintensiteit: <p id="lightIntensity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="lightIntensityStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- class="nodeData" -->
|
||||
<!-- Make a new flexcontainer for the graphs and API request time -->
|
||||
<div class="flex-graph">
|
||||
<div>
|
||||
<p>Live graph:</p>
|
||||
<div id="liveGraph2"></div>
|
||||
<div id="liveGraph1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- class="nodeData" -->
|
||||
<div class="nodeData">
|
||||
<div class="flex-NodeData">
|
||||
<p>Node 3</p>
|
||||
<div class="flex-LiveData">
|
||||
<div>
|
||||
<div>Temperatuur: <p id="temperature">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="tempStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Luchtvochtigheid: <p id="humidity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="humidStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Lichtintensiteit: <p id="lightIntensity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="lightIntensityStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Make a new flexcontainer for the graphs and API request time -->
|
||||
<div class="flex-graph">
|
||||
<div>
|
||||
<p>Live graph:</p>
|
||||
<div id="liveGraph3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <div class="flex-NodeData">
|
||||
<p>Node 4</p>
|
||||
<div class="flex-LiveData">
|
||||
<div>
|
||||
<div>Temperatuur: <p id="temperature">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="tempStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Luchtvochtigheid: <p id="humidity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="humidStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>Lichtintensiteit: <p id="lightIntensity">Not connected</p>
|
||||
</div>
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="lightIntensityStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Make a new flexcontainer for the graphs and API request time -->
|
||||
<div class="flex-graph">
|
||||
<div>
|
||||
<p>Live graph:</p>
|
||||
<div id="liveGraph4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- class="nodeData" -->
|
||||
|
||||
<!-- Include the js file -->
|
||||
<script src="main.js"></script>
|
||||
<script src="classes.js"></script>
|
||||
</body>
|
||||
<html>
|
||||
|
176
web/main.js
176
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);
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user