4.4 KiB
parsing JSON
const jsonData = JSON.parse(event.data);
// Use the parsed JSON data as needed
handleIncomingData(jsonData);
Pro
function handleIncomingData(data) { nodeNumber = data.node; temperature = data.Temp; humidity = data.Humi; CO2 = data.eCO2; TVOC = data.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] = []; }
// Push the new data onto the array for this node sensorData[nodeNumber].push({ 'node': nodeNumber, 'temp': temperature, 'humi': humidity, 'CO2': CO2, 'TVOC': TVOC, });
// updateNodeData(node, temperature, humidity, lightIntensity) updateNodeData(nodeNumber, temperature, humidity, CO2, TVOC);
// 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 createNodeData(node) { // Create main div var nodeData = document.createElement("div"); nodeData.className = "nodeData";
// Create flex-NodeData div var flexNodeData = document.createElement("div"); flexNodeData.clsName = "flex-NodeData";
// Create p element var pNode = document.createElement("p"); pNode.textContent = "Node " + node;
// Append p to flex-NodeData flexNodeData.appendChild(pNode);
// Create flex-LiveData div var flexLiveData = document.createElement("div"); flexLiveData.className = "flex-LiveData";
// Create data divs (Temperature, Humidity, Light Intensity) 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");
var dataTypeDiv = document.createElement("div");
dataTypeDiv.textContent = dataTypes[i] + ": ";
var pElement = document.createElement("p");
pElement.id = ids[i] + node;
pElement.textContent = "Not connected";
dataTypeDiv.appendChild(pElement);
dataDiv.appendChild(dataTypeDiv);
var statusElement = document.createElement("div");
statusElement.className = "statusElement";
var statusText = document.createElement("p");
statusText.className = "statusText";
statusText.id = statusIds[i];
statusText.textContent = "Not connected";
statusElement.appendChild(statusText);
dataDiv.appendChild(statusElement);
flexLiveData.appendChild(dataDiv);
}
// Append flex-LiveData to flex-NodeData flexNodeData.appendChild(flexLiveData);
// Create flex-graph div var flexGraph = document.createElement("div"); flexGraph.className = "flex-graph";
var graphDiv = document.createElement("div");
var graphP = document.createElement("p"); graphP.textContent = "Live graph:";
var liveGraph = document.createElement("div"); liveGraph.id = "liveGraph";
graphDiv.appendChild(graphP); graphDiv.appendChild(liveGraph); flexGraph.appendChild(graphDiv);
// Append flex-graph to flex-NodeData flexNodeData.appendChild(flexGraph);
// Append flex-NodeData to main div nodeData.appendChild(flexNodeData);
// Check if nodeDataLocation element exists var nodeDataLocation = document.getElementById("nodeDataLocation"); if (nodeDataLocation) { // Append main div to nodeDataLocation nodeDataLocation.appendChild(nodeData); } else { console.error("Element with ID 'nodeDataLocation' does not exist."); } }
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"; }