Refactor liveGraph class and updateNodeData function
This commit is contained in:
@@ -1,20 +1,21 @@
|
||||
let intervalDelay = 5000;
|
||||
|
||||
class liveGraph {
|
||||
// Constructor to initialize the graph
|
||||
constructor(id) {
|
||||
this.timeArray = [4, 5, 6, 7, 9];
|
||||
this.valueArray = [1, 3, 4, 8, 10];
|
||||
this.timeArray = [];
|
||||
this.tempArray = [];
|
||||
this.humiArray = [];
|
||||
this.eco2Array = [];
|
||||
this.tvocArray = [];
|
||||
this.cnt = 0;
|
||||
this.nodeId = id;
|
||||
this.nodeId = "liveGraph" + id;
|
||||
}
|
||||
|
||||
// Fuction to create a graph
|
||||
makeGraph() {
|
||||
Plotly.plot("liveGraph", [
|
||||
Plotly.plot(this.nodeId, [
|
||||
{
|
||||
x: this.timeArray, // Use timeArray as x values
|
||||
y: this.valueArray,
|
||||
y: this.tempArray,
|
||||
mode: "lines",
|
||||
line: { color: "#80CAF6" },
|
||||
name: "Temperature",
|
||||
@@ -26,10 +27,10 @@ class liveGraph {
|
||||
updateGraph() {
|
||||
let time = new Date();
|
||||
this.timeArray.push(new Date());
|
||||
this.valueArray.push(Math.random());
|
||||
|
||||
let update = {
|
||||
x: [[this.timeArray]],
|
||||
y: [[this.valueArray]],
|
||||
y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]],
|
||||
};
|
||||
let olderTime = time.setMinutes(time.getMinutes() - 1);
|
||||
let futureTime = time.setMinutes(time.getMinutes() + 1);
|
||||
@@ -39,7 +40,15 @@ class liveGraph {
|
||||
range: [olderTime, futureTime],
|
||||
},
|
||||
};
|
||||
Plotly.relayout("liveGraph", minuteView);
|
||||
Plotly.relayout(this.nodeId, minuteView);
|
||||
if (this.cnt === 10) clearInterval(interval);
|
||||
}
|
||||
|
||||
updateData(temperature, humidity, eCO2, TVOC) {
|
||||
// Update the graph
|
||||
this.tempArray.push(temperature);
|
||||
this.humiArray.push(humidity);
|
||||
this.eco2Array.push(eCO2);
|
||||
this.tvocArray.push(TVOC);
|
||||
}
|
||||
}
|
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Make a new flex container for the live data -->
|
||||
<!-- <div class="nodeData">
|
||||
<!-- <div class="nodeData">
|
||||
|
||||
<div class="flex-NodeData">
|
||||
<p>Node 1</p>
|
||||
@@ -53,17 +53,11 @@
|
||||
<div class="statusElement">
|
||||
<p class="statusText" id="lightIntensityStatus">Not connected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-graph">
|
||||
<div>
|
||||
<p>Live graph:</p>
|
||||
<div id="liveGraph"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Include the js file -->
|
||||
<script src="classes.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
<html>
|
70
web/main.js
70
web/main.js
@@ -1,17 +1,5 @@
|
||||
let data;
|
||||
let measurements;
|
||||
let date;
|
||||
let value;
|
||||
let newArrayTemp = [];
|
||||
let newArrayHumid = [];
|
||||
let newArrayLight = [];
|
||||
let timeArray = []; // Array to store time values`
|
||||
let valueArray = [1, 2, 3, 4, 5];
|
||||
let newValueArray = [4, 5, 6];
|
||||
let myValue = 1;
|
||||
let intervalDelay = 50;
|
||||
const sensorData = {};
|
||||
|
||||
let intervalDelay = 1000;
|
||||
// Create WebSocket connection.
|
||||
const socket = new WebSocket("ws://145.92.8.114/ws");
|
||||
|
||||
@@ -99,46 +87,6 @@ function pushArray(array) {
|
||||
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",
|
||||
},
|
||||
]);
|
||||
|
||||
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);
|
||||
|
||||
*/
|
||||
|
||||
//function for making the html elements for the following html code
|
||||
|
||||
@@ -215,7 +163,7 @@ function createNodeData(node) {
|
||||
graphP.textContent = "Live graph:";
|
||||
|
||||
var liveGraph = document.createElement("div");
|
||||
liveGraph.id = "liveGraph";
|
||||
liveGraph.id = "liveGraph" + node;
|
||||
|
||||
graphDiv.appendChild(graphP);
|
||||
graphDiv.appendChild(liveGraph);
|
||||
@@ -249,6 +197,13 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
||||
document.getElementById("humidStatus").textContent = "Connected";
|
||||
document.getElementById("CO2Status").textContent = "Connected";
|
||||
document.getElementById("TVOCStatus").textContent = "Connected";
|
||||
|
||||
// Update the graph
|
||||
graphNode1.updateData(temperature, humidity, eCO2, TVOC);
|
||||
graphNode1.updateGraph();
|
||||
|
||||
graphNode2.updateData(temperature, humidity, eCO2, TVOC);
|
||||
graphNode2.updateGraph();
|
||||
}
|
||||
|
||||
// Call the function to create the HTML structure
|
||||
@@ -257,5 +212,12 @@ createNodeData(2);
|
||||
createNodeData(3);
|
||||
createNodeData(4);
|
||||
|
||||
// Create a new liveGraph object
|
||||
let graphNode1 = new liveGraph(1);
|
||||
|
||||
graphNode1.makeGraph();
|
||||
|
||||
let graphNode2 = new liveGraph(2);
|
||||
|
||||
graphNode2.makeGraph();
|
||||
// openConnection();
|
||||
|
Reference in New Issue
Block a user