diff --git a/web/index.html b/web/index.html index 22f8295..99ac84f 100644 --- a/web/index.html +++ b/web/index.html @@ -1,5 +1,6 @@ + @@ -16,15 +17,18 @@ +
+
+ -
+

Live graph:

-
- -
-

Node 2

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
- -
-
-

Node 3

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
-

Node 4

-
-
-
Temperatuur:

Not connected

-
-
-

Not connected

-
-
-
-
Luchtvochtigheid:

Not connected

-
-
-

Not connected

-
-
-
-
Lichtintensiteit:

Not connected

-
-
-

Not connected

-
-
-
- - -
-
-

Live graph:

-
-
-
-
-
+ --> - + \ No newline at end of file diff --git a/web/main.js b/web/main.js index 3d37b18..f40b277 100644 --- a/web/main.js +++ b/web/main.js @@ -6,25 +6,105 @@ let newArrayTemp = []; let newArrayHumid = []; let newArrayLight = []; let timeArray = []; // Array to store time values` -let dateArray = [1, 2, 3]; let valueArray = [1, 2, 3, 4, 5]; -let valueArray2 = [1, 2, 3, 4, 5]; -let valueArray3 = [1, 2, 3, 4, 5]; -let valueArray4 = [1, 2, 3, 4, 5]; let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; -//const timeArray = [1,2,3,4]; -//const dateArray = [5,6,7,8]; -//const valueArray = [1,1,1,3]; +// 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", [ +/*Plotly.plot("liveGraph", [ { x: timeArray, // Use timeArray as x values y: valueArray, @@ -34,41 +114,6 @@ Plotly.plot("liveGraph", [ }, ]); -// Make lines in the graph of the live data -Plotly.plot("liveGraph2", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray2, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data -Plotly.plot("liveGraph3", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray3, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]);// Make lines in the graph of the live data -Plotly.plot("liveGraph4", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray4, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data - - - let cnt = 0; // Update the graph every 1 ms @@ -97,80 +142,111 @@ let interval = setInterval(function () { if (cnt === 10) clearInterval(interval); }, intervalDelay); -// Update the graph every 1 ms -let interval2 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); +*/ - pushArray(valueArray2); +//function for making the html elements for the following html code - var update = { - x: [[time]], - y: [[newValueArray]], - }; +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"); +} - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); +// nodeData("Temperature: ", 1); +// nodeData("Humidity: ", 2); - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph2", minuteView); - if (cnt === 1000) clearInterval(interval2); -}, intervalDelay); +function createNodeData(node) { + // Create main div + var nodeData = document.createElement("div"); + nodeData.className = "nodeData"; -// Update the graph every 1 ms -let interval3 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); + // Create flex-NodeData div + var flexNodeData = document.createElement("div"); + flexNodeData.className = "flex-NodeData"; - pushArray(valueArray3); + // Create p element + var pNode = document.createElement("p"); + pNode.textContent = "Node " + node; - var update = { - x: [[time]], - y: [[newValueArray]], - }; + // Append p to flex-NodeData + flexNodeData.appendChild(pNode); - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); + // Create flex-LiveData div + var flexLiveData = document.createElement("div"); + flexLiveData.className = "flex-LiveData"; - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph3", minuteView); + // Create data divs (Temperature, Humidity, Light Intensity) + var dataTypes = ["Temperatuur", "Luchtvochtigheid", "Lichtintensiteit"]; + var ids = ["temperature", "humidity", "lightIntensity"]; + var statusIds = ["tempStatus", "humidStatus", "lightIntensityStatus"]; - if (cnt === 1000) clearInterval(interval3); -}, intervalDelay); + for (var i = 0; i < dataTypes.length; i++) { + var dataDiv = document.createElement("div"); -// Update the graph every 1 ms -let interval4 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); + var dataTypeDiv = document.createElement("div"); + dataTypeDiv.textContent = dataTypes[i] + ": "; - pushArray(valueArray4); + var pElement = document.createElement("p"); + pElement.id = ids[i]; + pElement.textContent = "Not connected"; - var update = { - x: [[time]], - y: [[newValueArray]], - }; + dataTypeDiv.appendChild(pElement); + dataDiv.appendChild(dataTypeDiv); - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); + var statusElement = document.createElement("div"); + statusElement.className = "statusElement"; - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph4", minuteView); + var statusText = document.createElement("p"); + statusText.className = "statusText"; + statusText.id = statusIds[i]; + statusText.textContent = "Not connected"; - if (cnt === 1000) clearInterval(interval4); -}, intervalDelay); \ No newline at end of file + 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); \ No newline at end of file diff --git a/web/styles.css b/web/styles.css index 519068f..42e9256 100644 --- a/web/styles.css +++ b/web/styles.css @@ -43,21 +43,56 @@ p1 { border: solid #1f82d3 2px; border-radius: 10px; width: 90%; + } .statusText{ font-size: 20px; } + +/* body{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-content: center; +} */ + +#randomShit{ + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-content: center; + border: 2px solid purple; +} + +#nodeDataLocation{ + display: flex; + flex-direction: column; + align-items: center; + /* justify-content: center; */ + /* align-content: center; */ + border: 4px solid blue; + /* padding-bottom: 50%; */ + +} + + + .flex-NodeData { display: flex; margin-left: 1%; margin-right: 1%; - width: 50%; - height: 40%; + justify-content: space-evenly; + /* height: 40%; */ flex-direction: column; border: 3px solid #1f82d3; - border-radius: 20px; + /* border-radius: 20px; */ + /* border: 2px solid red; */ + /* margin-right: 90%; */ + /* width: 150vh; */ + /* padding-right: 40%; */ + /* padding-left: 40%; */ } .nodeData { @@ -78,6 +113,8 @@ justify-content: left; justify-content: space-evenly; gap: 5px; padding: 10px; + + } @@ -89,6 +126,8 @@ justify-content: left; border-radius: 10px; height: fit-content; width: 30%; + + } .flex-graph {