From 26b35036ec737e740af805963a0a789242b3bb74 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 16:16:08 +0100 Subject: [PATCH 1/7] Added graph --- web/newWebsite/GaugGroup.js | 4 +++- web/newWebsite/index.html | 1 + web/newWebsite/main.js | 8 ++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index 31da446..8b9e427 100644 --- a/web/newWebsite/GaugGroup.js +++ b/web/newWebsite/GaugGroup.js @@ -24,8 +24,10 @@ class GaugeGroup { `).join('')} -
+
+
`; // Append the new div to the body diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 52122e5..05f02b7 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -27,6 +27,7 @@ + diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index a62e059..a97fd96 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -98,9 +98,17 @@ 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 => { From 09e3d7020ef8398af8adfeaadc759d75c5c57ea7 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 19:36:07 +0100 Subject: [PATCH 2/7] moved navbar into body --- web/newWebsite/index.html | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 05f02b7..854fcd6 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -11,22 +11,23 @@ - + + From 0666b21bc57b2799a7d9cad5a19a3c616d952ef3 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Fri, 29 Mar 2024 19:36:12 +0100 Subject: [PATCH 3/7] styling --- web/newWebsite/styles/dashboard-styles.css | 25 ++++++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 2985720..190586e 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,15 @@ 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; } \ No newline at end of file From 9ac39ff74f77e98c534c59f989b7e5ae58bae484 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 12:38:13 +0100 Subject: [PATCH 4/7] removed junk --- web/newWebsite/liveGraph.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) 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 From 92b27ab9b7749d9989536ec41534d7c8ce005483 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 12:38:20 +0100 Subject: [PATCH 5/7] graph works now --- web/newWebsite/main.js | 2 +- web/newWebsite/styles/dashboard-styles.css | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index a97fd96..d55fb12 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); } @@ -102,7 +103,6 @@ async function nodeAdressHandler(node, dataTypes) { sensorData[node] = gaugeGroup; gaugeGroup.graph.makeGraph(); sensorData[node] = gaugeGroup; - } } diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index 190586e..0758c94 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -190,4 +190,6 @@ body { justify-content: center; display: flex; width: 20vw; + z-index: -0; + height: -; } \ No newline at end of file From 3e7a89bf8b8e98665a5b39ea32d5d5995b9e403c Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 17:22:55 +0100 Subject: [PATCH 6/7] Added togglegraph function --- web/newWebsite/main.js | 15 ++++++++++++++- web/newWebsite/styles/dashboard-styles.css | 7 ++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/main.js b/web/newWebsite/main.js index d55fb12..c5e1486 100644 --- a/web/newWebsite/main.js +++ b/web/newWebsite/main.js @@ -103,7 +103,6 @@ async function nodeAdressHandler(node, dataTypes) { sensorData[node] = gaugeGroup; gaugeGroup.graph.makeGraph(); sensorData[node] = gaugeGroup; - } } @@ -129,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 0758c94..d550f41 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -191,5 +191,10 @@ body { display: flex; width: 20vw; z-index: -0; - height: -; + +} +* +.disabled { + opacity: 0; + height: 0; } \ No newline at end of file From 02b32c33ea7a958f18eec8b344836529f6abeaae Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Sat, 30 Mar 2024 17:31:41 +0100 Subject: [PATCH 7/7] made dropdown graph --- web/newWebsite/GaugGroup.js | 3 ++- web/newWebsite/styles/dashboard-styles.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/GaugGroup.js b/web/newWebsite/GaugGroup.js index 8b9e427..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) => `
@@ -26,7 +27,7 @@ class GaugeGroup { `).join('')}
-
+
`; diff --git a/web/newWebsite/styles/dashboard-styles.css b/web/newWebsite/styles/dashboard-styles.css index d550f41..e4e367a 100644 --- a/web/newWebsite/styles/dashboard-styles.css +++ b/web/newWebsite/styles/dashboard-styles.css @@ -190,11 +190,11 @@ body { justify-content: center; display: flex; width: 20vw; - z-index: -0; } * .disabled { opacity: 0; height: 0; + } \ No newline at end of file