154 lines
4.8 KiB
Markdown
154 lines
4.8 KiB
Markdown
|
|
|
|
### parsing JSON
|
|
|
|
The data that is send by the nodes is send in json data. We chose this becouse we can easily use the data within javascript, this is called parsing. We use the parced data and send that in to the next function to make the data more acceseble to use in further instences.
|
|
|
|
```js
|
|
const jsonData = JSON.parse(event.data);
|
|
// Use the parsed JSON data as needed
|
|
handleIncomingData(jsonData);
|
|
```
|
|
|
|
Here is the function that receves the parced JSON data and set it into variables.
|
|
|
|
```js
|
|
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";
|
|
}
|
|
|