dev page documentation added to pages
This commit is contained in:
151
docs/brainstorm/SoftwareDocumentatie/Dev_page.md
Normal file
151
docs/brainstorm/SoftwareDocumentatie/Dev_page.md
Normal file
@@ -0,0 +1,151 @@
|
||||
|
||||
|
||||
### 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";
|
||||
}
|
||||
|
Reference in New Issue
Block a user