Files
J1B3-Sensor-boxes/web/main.js

252 lines
6.4 KiB
JavaScript

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