dev page documentation added to pages

docs/.pages

@@ -22,4 +22,6 @@ nav:
         - Infrastructure: brainstorm/UML-infrastructure
         - Taskflow: brainstorm/Taskflow
         - Design: Sp1SchetsProject/FirstDesign
+    - 🖨️ Software:
+        - Dev page: brainstrom/SotwareDocumentatie/Dev_page
         

docs/brainstorm/SoftwareDocumentatie/Dev_page.md

@@ -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";
+}
+