diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index 31da446..cf3c1f4 100644 --- a/web/newWebsite/GaugGroup.js +++ b/web/newWebsite/GaugGroup.js @@ -13,6 +13,7 @@ class GaugeGroup { this.element.innerHTML = `

${this.nodeId} - ${this.location}

+ ${Array(this.gaugesCount).fill().map((_, i) => `
@@ -24,8 +25,10 @@ class GaugeGroup {
`).join('')} -
+
+
`; // Append the new div to the body diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 7c81dcf..dfe847a 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -12,22 +12,24 @@ - + + + diff --git a/web/newWebsite/liveGraph.js b/web/newWebsite/liveGraph.js index e2aac1d..6668620 100644 --- a/web/newWebsite/liveGraph.js +++ b/web/newWebsite/liveGraph.js @@ -54,15 +54,16 @@ class liveGraph { } // Function to update the graph with new values got from updateData function - updateGraph() { + updateGraph(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2 / 10); + this.tvocArray.push(TVOC / 10); + let time = new Date(); this.timeArray.push(new Date()); - let update = { - x: [[this.timeArray]], - y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] - }; - let olderTime = time.setMinutes(time.getMinutes() - 1); let futureTime = time.setMinutes(time.getMinutes() + 1); let minuteView = { @@ -75,11 +76,4 @@ class liveGraph { if (this.cnt === 10) clearInterval(interval); } // function to get the new data for graph - updateData(temperature, humidity, eCO2, TVOC) { - // Update the graph - this.tempArray.push(temperature); - this.humiArray.push(humidity); - this.eco2Array.push(eCO2 / 10); - this.tvocArray.push(TVOC / 10); - } } \ No newline at end of file diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index a62e059..c5e1486 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -66,6 +66,7 @@ async function handleIncomingData(data) { sensorData[data.node].updateGauge(2, humidity); sensorData[data.node].updateGauge(3, CO2); sensorData[data.node].updateGauge(4, TVOC); + sensorData[data.node].graph.updateGraph(temperature, humidity, CO2, TVOC); } else { console.error('No sensor data for node:', nodeName); } @@ -98,9 +99,15 @@ async function nodeAdressHandler(node, dataTypes) { let gaugeGroup = new GaugeGroup(nodeName, nodeLocation, dataTypes.length, maxGaugeValues, dataTypes); sensorData[node] = gaugeGroup; + gaugeGroup.graph = new liveGraph(nodeName); + sensorData[node] = gaugeGroup; + gaugeGroup.graph.makeGraph(); + sensorData[node] = gaugeGroup; } } + + function getNodeInfo(node){ return fetch("http://145.92.8.114/getNodeInfo?macAdress=" + node) .then(response => { @@ -121,3 +128,17 @@ function getNodeInfo(node){ } +// create a function to enable and disable the graph using .disabled using the id of the graph +function toggleGraph(nodeId) { + let graph = document.querySelector('#liveGraph' + nodeId); + + if (graph) { + if (graph.classList.contains('disabled')) { + graph.classList.remove('disabled'); + } else { + graph.classList.add('disabled'); + } + } else { + console.error('No element found with id: liveGraph' + nodeId); + } +} \ No newline at end of file diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 2985720..e4e367a 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -6,21 +6,20 @@ } body { - padding-top: 5vw; display: flex; justify-content: center; - align-items: center; - height: 100vh; margin: 0; + margin-top: 8vh; background-color: #f0f0f0; flex-direction: column; background-color: #afafaf; + align-items: center; } .gaugeGroup { width: 98vw; - height: 20vh; + height: auto; display: flex; flex-direction: column; /* Keep as column */ justify-content: flex-start; @@ -32,8 +31,8 @@ body { clear: both; margin-bottom: 10px; position: relative; - float: top; } + .groupTitle { width: 100%; text-align: center; @@ -76,7 +75,9 @@ body { height: 80%; /* Increase the height from 70% to 80% */ position: relative; overflow: visible; - + height: 5vh; + margin-bottom: 1vh; + } .gaugeImage { @@ -89,7 +90,6 @@ body { left: 0; z-index: 1; /* Make the image display below the needle */ bottom: 0; - margin-bottom: 10px; } .gaugeValue, .gaugeText { @@ -179,4 +179,22 @@ body { color: #fff; text-decoration: none; font-size: 18px; +} + +.plotly-container { + + float: bottom; + margin: auto; + padding: 1vw; + align-items: center; + justify-content: center; + display: flex; + width: 20vw; + +} +* +.disabled { + opacity: 0; + height: 0; + } \ No newline at end of file