I did it 😊
This commit is contained in:
115
web/main.js
115
web/main.js
@@ -10,35 +10,11 @@ let valueArray = [1, 2, 3, 4, 5];
|
||||
let newValueArray = [4, 5, 6];
|
||||
let myValue = 1;
|
||||
let intervalDelay = 50;
|
||||
const sendorDataNode1 = [];
|
||||
const sendorDataNode2 = [];
|
||||
|
||||
// const socket = new WebSocket("ws://127.0.0.1:8001");
|
||||
const sensorData = {};
|
||||
|
||||
// Create WebSocket connection.
|
||||
const socket = new WebSocket("ws://145.92.8.114/ws");
|
||||
|
||||
/*
|
||||
function openConnection() {
|
||||
// Connection opened
|
||||
socket.addEventListener("open", (event) => {
|
||||
console.log("Connected to the WebSocket server");
|
||||
socket.send("Hello Server!");
|
||||
});}
|
||||
|
||||
// Error handling
|
||||
socket.addEventListener('error', (event) => {
|
||||
console.error('WebSocket error:', event);
|
||||
});
|
||||
|
||||
// Message handling
|
||||
socket.addEventListener("message", (event) => {
|
||||
console.log('Message from server:', event.data);
|
||||
});
|
||||
|
||||
openConnection();
|
||||
*//////////////////////
|
||||
|
||||
function openConnection() {
|
||||
// Open connection
|
||||
socket.addEventListener("open", (event) => {
|
||||
@@ -85,52 +61,39 @@ function handleIncomingData(data) {
|
||||
humidity = data.Humi;
|
||||
CO2 = data.eCO2;
|
||||
TVOC = data.TVOC;
|
||||
|
||||
// console.log("Temperature: ", temperature);
|
||||
// console.log("Humidity: ", humidity);
|
||||
// console.log("CO2: ", CO2);
|
||||
// console.log("TVOC: ", TVOC);
|
||||
|
||||
if (nodeNumber == 1) {
|
||||
sendorDataNode1.push({
|
||||
'node': nodeNumber,
|
||||
'temp': temperature,
|
||||
'humi': humidity,
|
||||
'CO2': CO2,
|
||||
'TVOC': TVOC,
|
||||
});
|
||||
} else if (nodeNumber == 2) {
|
||||
sendorDataNode2.push({
|
||||
'node': nodeNumber,
|
||||
'temp': temperature,
|
||||
'humi': humidity,
|
||||
'CO2': CO2,
|
||||
'TVOC': TVOC,
|
||||
});
|
||||
processNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
|
||||
}
|
||||
|
||||
function processNodeData(nodeNumber, temperature, humidity, CO2, TVOC) {
|
||||
// Initialize the array for this node if it doesn't exist yet
|
||||
if (!sensorData[nodeNumber]) {
|
||||
sensorData[nodeNumber] = [];
|
||||
}
|
||||
|
||||
// sendorData.push({
|
||||
// 'node': nodeNumber,
|
||||
// 'temp': temperature,
|
||||
// 'humi': humidity,
|
||||
// 'CO2': CO2,
|
||||
// 'TVOC': TVOC,
|
||||
// });
|
||||
// Push the new data onto the array for this node
|
||||
sensorData[nodeNumber].push({
|
||||
'node': nodeNumber,
|
||||
'temp': temperature,
|
||||
'humi': humidity,
|
||||
'CO2': CO2,
|
||||
'TVOC': TVOC,
|
||||
});
|
||||
|
||||
if (nodeNumber == 1) {
|
||||
console.log(sendorDataNode1);
|
||||
} else if (nodeNumber == 2) {
|
||||
console.log(sendorDataNode2);
|
||||
}
|
||||
// updateNodeData(node, temperature, humidity, lightIntensity)
|
||||
updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
|
||||
|
||||
if (sendorDataNode1.length >= 10) {
|
||||
sendorDataNode1.shift();
|
||||
}
|
||||
if (sendorDataNode2.length >= 10) {
|
||||
sendorDataNode2.shift();
|
||||
// Log the array for this node
|
||||
console.log(sensorData[nodeNumber]);
|
||||
|
||||
// If the array for this node has more than 10 elements, remove the oldest one
|
||||
if (sensorData[nodeNumber].length >= 10) {
|
||||
sensorData[nodeNumber].shift();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function pushArray(array) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
array.push(Math.random() * 10);
|
||||
@@ -187,10 +150,6 @@ function nodeData(data, node) {
|
||||
// console.log("Hello World");
|
||||
}
|
||||
|
||||
// nodeData("Temperature: ", 1);
|
||||
// nodeData("Humidity: ", 2);
|
||||
|
||||
|
||||
function createNodeData(node) {
|
||||
// Create main div
|
||||
var nodeData = document.createElement("div");
|
||||
@@ -212,9 +171,9 @@ function createNodeData(node) {
|
||||
flexLiveData.className = "flex-LiveData";
|
||||
|
||||
// Create data divs (Temperature, Humidity, Light Intensity)
|
||||
var dataTypes = ["Temperatuur", "Luchtvochtigheid", "Lichtintensiteit"];
|
||||
var ids = ["temperature", "humidity", "lightIntensity"];
|
||||
var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"];
|
||||
var dataTypes = ["Temperatuur", "Luchtvochtigheid", "CO2", "TVOC"];
|
||||
var ids = ["temperature", "humidity", "CO2", "TVOC"];
|
||||
var statusIds = ["tempStatus", "humidStatus", "CO2Status", "TVOCStatus"];
|
||||
|
||||
for (var i = 0; i < dataTypes.length; i++) {
|
||||
var dataDiv = document.createElement("div");
|
||||
@@ -223,7 +182,7 @@ function createNodeData(node) {
|
||||
dataTypeDiv.textContent = dataTypes[i] + ": ";
|
||||
|
||||
var pElement = document.createElement("p");
|
||||
pElement.id = ids[i];
|
||||
pElement.id = ids[i] + node;
|
||||
pElement.textContent = "Not connected";
|
||||
|
||||
dataTypeDiv.appendChild(pElement);
|
||||
@@ -278,6 +237,20 @@ function createNodeData(node) {
|
||||
}
|
||||
}
|
||||
|
||||
function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
|
||||
// Update the temperature, humidity and light intensity values
|
||||
document.getElementById("temperature" + node).textContent = temperature;
|
||||
document.getElementById("humidity" + node).textContent = humidity;
|
||||
document.getElementById("CO2" + node).textContent = eCO2;
|
||||
document.getElementById("TVOC" + node).textContent = TVOC;
|
||||
|
||||
// Update the status text
|
||||
document.getElementById("tempStatus").textContent = "Connected";
|
||||
document.getElementById("humidStatus").textContent = "Connected";
|
||||
document.getElementById("CO2Status").textContent = "Connected";
|
||||
document.getElementById("TVOCStatus").textContent = "Connected";
|
||||
}
|
||||
|
||||
// Call the function to create the HTML structure
|
||||
createNodeData(1);
|
||||
createNodeData(2);
|
||||
|
Reference in New Issue
Block a user