152 lines
4.4 KiB
Markdown
152 lines
4.4 KiB
Markdown
|
|
|
|
### parsing JSON
|
|
|
|
```js
|
|
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";
|
|
}
|
|
|