Files
J1B3-Sensor-boxes/docs/brainstorm/SoftwareDocumentatie/Dev_page.md
2024-03-06 11:25:58 +01:00

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