J1B3-Sensor-boxes/web/main.js

let data;
let measurements;
let date;
let value;
let newArrayTemp = [];
let newArrayHumid = [];
let newArrayLight = [];
let timeArray = []; // Array to store time values`
let valueArray = [1, 2, 3, 4, 5];
let newValueArray = [4, 5, 6];
let myValue = 1;
let intervalDelay = 50;
const sensorData = {};

// Create WebSocket connection.
const socket = new WebSocket("ws://145.92.8.114/ws");

function openConnection() {
  // Open connection
  socket.addEventListener("open", (event) => {
    console.log("Connected to the WebSocket server");
    socket.send("Hello Server!");
  });

  // Error handling
  socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
    // Attempt to reconnect
    setTimeout(openConnection, 1000); // Retry after 1 second
  });

  // Message handling
  socket.addEventListener("message", (event) => {
    try {
      const jsonData = JSON.parse(event.data);
      // Use the parsed JSON data as needed
      handleIncomingData(jsonData);

  } catch (error) {
      console.error("Error parsing JSON:", error);
  }
  });

  // Close handling
  socket.addEventListener('close', (event) => {
    console.log('Connection closed');
    // Attempt to reconnect
    setTimeout(openConnection, 1000); // Retry after 1 second
  });
  console.log("Connected to the WebSocket server!!!!!!!!");
}

// Open the connection
openConnection();



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 pushArray(array) {
  for (let i = 0; i < 10; i++) {
    array.push(Math.random() * 10);
  }
}
// Make lines in the graph of the live data
/*Plotly.plot("liveGraph", [
  {
    x: timeArray, // Use timeArray as x values
    y: valueArray,
    mode: "lines",
    line: { color: "#80CAF6" },
    name: "Temperature",
  },
]);

let cnt = 0;

// Update the graph every 1 ms
let interval = setInterval(function () {
  var time = new Date();
  timeArray.push(new Date());

  pushArray(valueArray);

  var update = {
    x: [[timeArray]],
    y: [[newValueArray]],
  };

  var olderTime = time.setMinutes(time.getMinutes() - 1);
  var futureTime = time.setMinutes(time.getMinutes() + 1);

  var minuteView = {
    xaxis: {
      type: "date",
      range: [olderTime, futureTime],
    },
  };
  Plotly.relayout("liveGraph", minuteView);

  if (cnt === 10) clearInterval(interval);
}, intervalDelay);

*/

//function for making the html elements for the following html code

function nodeData(data, node) {
  let nodeData = document.createElement("div");
  nodeData.innerHTML = data;
  // nodeData.setAttribute("id", "node" + node);
  document.body.appendChild(nodeData);
  // console.log("Hello World");
}

function createNodeData(node) {
  // Create main div
  var nodeData = document.createElement("div");
  nodeData.className = "nodeData";

  // Create flex-NodeData div
  var flexNodeData = document.createElement("div");
  flexNodeData.className = "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";
}

// Call the function to create the HTML structure
createNodeData(1);
createNodeData(2);
createNodeData(3);
createNodeData(4);


// openConnection();