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 socket = new WebSocket("ws://127.0.0.1:8001");  

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

/*
function openConnection() {
// Connection opened
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);
});

// Message handling
socket.addEventListener("message", (event) => {
  console.log('Message from server:', event.data);
});

openConnection();
*//////////////////////

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) => {
    console.log('Message from server:', event.data);
  });

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

// Open the connection
openConnection();




// socket.onopen = function(e) {
//   alert("[open] Connection established");
//   alert("Sending to server");
//   socket.send("My name is John");
// };

// socket.onmessage = function(event) {
//   // alert(`[message] Data received from server: ${event.data}`);
//   console.log("Data received from server: ", event.data);
// };

// socket.addEventListener("message", (event) => {
//   console.log(event.data);
// });

// function openPort() {
// socket.addEventListener('open', function (event) {
//   console.log('Connected to the WebSocket server');
// });
// console.log("Connected to the WebSocket server");
// }

// socket.addEventListener('message', function (event) {
//   console.log('Message from server:', event.data);
//   // Here you can handle the received message and update your UI accordingly
// });


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

// nodeData("Temperature: ", 1);
// nodeData("Humidity: ", 2);


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", "Lichtintensiteit"];
  var ids = ["temperature", "humidity", "lightIntensity"];
  var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"];

  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];
      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.");
  }
}

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