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 = `
+

${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