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

Refactor liveGraph class and updateNodeData function

Browse Source
This commit is contained in:
Sietse Jonker
2024-03-06 15:38:46 +01:00
parent 951fc64e6d
commit 8ed556d856
3 changed files with 40 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/classes.js
View File

@@ -1,20 +1,21 @@
let intervalDelay = 5000;
class liveGraph { class liveGraph {
// Constructor to initialize the graph // Constructor to initialize the graph
constructor(id) { constructor(id) {
this.timeArray = [4, 5, 6, 7, 9]; this.timeArray = [];
this.valueArray = [1, 3, 4, 8, 10]; this.tempArray = [];
this.humiArray = [];
this.eco2Array = [];
this.tvocArray = [];
this.cnt = 0; this.cnt = 0;
this.nodeId = id; this.nodeId = "liveGraph" + id;
} }
// Fuction to create a graph // Fuction to create a graph
makeGraph() { makeGraph() {
Plotly.plot("liveGraph", [ Plotly.plot(this.nodeId, [
{ {
x: this.timeArray, // Use timeArray as x values x: this.timeArray, // Use timeArray as x values
y: this.valueArray, y: this.tempArray,
mode: "lines", mode: "lines",
line: { color: "#80CAF6" }, line: { color: "#80CAF6" },
name: "Temperature", name: "Temperature",
@@ -26,10 +27,10 @@ class liveGraph {
updateGraph() { updateGraph() {
let time = new Date(); let time = new Date();
this.timeArray.push(new Date()); this.timeArray.push(new Date());
this.valueArray.push(Math.random());
let update = { let update = {
x: [[this.timeArray]], x: [[this.timeArray]],
y: [[this.valueArray]], y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]],
}; };
let olderTime = time.setMinutes(time.getMinutes() - 1); let olderTime = time.setMinutes(time.getMinutes() - 1);
let futureTime = time.setMinutes(time.getMinutes() + 1); let futureTime = time.setMinutes(time.getMinutes() + 1);
@@ -39,7 +40,15 @@ class liveGraph {
range: [olderTime, futureTime], range: [olderTime, futureTime],
}, },
}; };
Plotly.relayout("liveGraph", minuteView); Plotly.relayout(this.nodeId, minuteView);
if (this.cnt === 10) clearInterval(interval); 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);
}
} }

10
web/index.html
View File

@@ -53,17 +53,11 @@
<div class="statusElement"> <div class="statusElement">
<p class="statusText" id="lightIntensityStatus">Not connected</p> <p class="statusText" id="lightIntensityStatus">Not connected</p>
</div> </div>
</div>
</div>
<div class="flex-graph">
<div>
<p>Live graph:</p>
<div id="liveGraph"></div>
</div>
</div>
</div> --> </div> -->
<!-- Include the js file --> <!-- Include the js file -->
<script src="classes.js"></script>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
<html> <html>

70
web/main.js
View File

@@ -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 = {}; const sensorData = {};
let intervalDelay = 1000;
// Create WebSocket connection. // Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws"); const socket = new WebSocket("ws://145.92.8.114/ws");
@@ -99,46 +87,6 @@ function pushArray(array) {
array.push(Math.random() * 10); 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 //function for making the html elements for the following html code
@@ -215,7 +163,7 @@ function createNodeData(node) {
graphP.textContent = "Live graph:"; graphP.textContent = "Live graph:";
var liveGraph = document.createElement("div"); var liveGraph = document.createElement("div");
liveGraph.id = "liveGraph"; liveGraph.id = "liveGraph" + node;
graphDiv.appendChild(graphP); graphDiv.appendChild(graphP);
graphDiv.appendChild(liveGraph); graphDiv.appendChild(liveGraph);
@@ -249,6 +197,13 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
document.getElementById("humidStatus").textContent = "Connected"; document.getElementById("humidStatus").textContent = "Connected";
document.getElementById("CO2Status").textContent = "Connected"; document.getElementById("CO2Status").textContent = "Connected";
document.getElementById("TVOCStatus").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 // Call the function to create the HTML structure
@@ -257,5 +212,12 @@ createNodeData(2);
createNodeData(3); createNodeData(3);
createNodeData(4); createNodeData(4);
// Create a new liveGraph object
let graphNode1 = new liveGraph(1);
graphNode1.makeGraph();
let graphNode2 = new liveGraph(2);
graphNode2.makeGraph();
// openConnection(); // openConnection();