Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

Browse Source
This commit is contained in:
sietse jonker
2024-03-30 20:43:57 +01:00
parent 79c3c956fe 02b32c33ea
commit 642c4a24ad
5 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/newWebsite/GaugGroup.js
View File

@@ -13,6 +13,7 @@ class GaugeGroup {
this.element.innerHTML = ` this.element.innerHTML = `
<h2 class="groupTitle">${this.nodeId} - ${this.location}</h2> <h2 class="groupTitle">${this.nodeId} - ${this.location}</h2>
<div class="Node"> <div class="Node">
<img src="arrow.png" class="arrowimg" onclick="toggleGraph('${this.nodeId}')">
${Array(this.gaugesCount).fill().map((_, i) => ` ${Array(this.gaugesCount).fill().map((_, i) => `
<div class="Sensorvalues"> <div class="Sensorvalues">
<div id="gaugeContainer${this.nodeId}_${i+1}" class="gaugeContainer"> <div id="gaugeContainer${this.nodeId}_${i+1}" class="gaugeContainer">
@@ -24,7 +25,9 @@ class GaugeGroup {
</div> </div>
</div> </div>
`).join('')} `).join('')}
<div id="graph${nodeId}></div> </div>
<div class="plotly-container">
<div id="liveGraph${this.nodeId}" class="disabled" ></div>
</div> </div>
`; `;

10
web/newWebsite/index.html
View File

@@ -12,7 +12,10 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head> </head>
<nav class="navbar">
<body>
<nav class="navbar">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a href="index.html" class="nav-link">Dashboard</a> <a href="index.html" class="nav-link">Dashboard</a>
@@ -24,10 +27,9 @@
<a href="settings.html" class="nav-link">Settings</a> <a href="settings.html" class="nav-link">Settings</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<body>
<script src="GaugGroup.js"></script> <script src="GaugGroup.js"></script>
<script src="graph-classes.js"></script> <script src="graph-classes.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

20
web/newWebsite/liveGraph.js
View File

@@ -54,15 +54,16 @@ class liveGraph {
} }
// Function to update the graph with new values got from updateData function // 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(); let time = new Date();
this.timeArray.push(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 olderTime = time.setMinutes(time.getMinutes() - 1);
let futureTime = time.setMinutes(time.getMinutes() + 1); let futureTime = time.setMinutes(time.getMinutes() + 1);
let minuteView = { let minuteView = {
@@ -75,11 +76,4 @@ class liveGraph {
if (this.cnt === 10) clearInterval(interval); if (this.cnt === 10) clearInterval(interval);
} }
// function to get the new data for graph // 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);
}
} }

21
web/newWebsite/main.js
View File

@@ -66,6 +66,7 @@ async function handleIncomingData(data) {
sensorData[data.node].updateGauge(2, humidity); sensorData[data.node].updateGauge(2, humidity);
sensorData[data.node].updateGauge(3, CO2); sensorData[data.node].updateGauge(3, CO2);
sensorData[data.node].updateGauge(4, TVOC); sensorData[data.node].updateGauge(4, TVOC);
sensorData[data.node].graph.updateGraph(temperature, humidity, CO2, TVOC);
} else { } else {
console.error('No sensor data for node:', nodeName); 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); let gaugeGroup = new GaugeGroup(nodeName, nodeLocation, dataTypes.length, maxGaugeValues, dataTypes);
sensorData[node] = gaugeGroup; sensorData[node] = gaugeGroup;
gaugeGroup.graph = new liveGraph(nodeName);
sensorData[node] = gaugeGroup;
gaugeGroup.graph.makeGraph();
sensorData[node] = gaugeGroup;
} }
} }
function getNodeInfo(node){ function getNodeInfo(node){
return fetch("http://145.92.8.114/getNodeInfo?macAdress=" + node) return fetch("http://145.92.8.114/getNodeInfo?macAdress=" + node)
.then(response => { .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);
}
}

30
web/newWebsite/styles/dashboard-styles.css
View File

@@ -6,21 +6,20 @@
} }
body { body {
padding-top: 5vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
height: 100vh;
margin: 0; margin: 0;
margin-top: 8vh;
background-color: #f0f0f0; background-color: #f0f0f0;
flex-direction: column; flex-direction: column;
background-color: #afafaf; background-color: #afafaf;
align-items: center;
} }
.gaugeGroup { .gaugeGroup {
width: 98vw; width: 98vw;
height: 20vh; height: auto;
display: flex; display: flex;
flex-direction: column; /* Keep as column */ flex-direction: column; /* Keep as column */
justify-content: flex-start; justify-content: flex-start;
@@ -32,8 +31,8 @@ body {
clear: both; clear: both;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
float: top;
} }
.groupTitle { .groupTitle {
width: 100%; width: 100%;
text-align: center; text-align: center;
@@ -76,6 +75,8 @@ body {
height: 80%; /* Increase the height from 70% to 80% */ height: 80%; /* Increase the height from 70% to 80% */
position: relative; position: relative;
overflow: visible; overflow: visible;
height: 5vh;
margin-bottom: 1vh;
} }
@@ -89,7 +90,6 @@ body {
left: 0; left: 0;
z-index: 1; /* Make the image display below the needle */ z-index: 1; /* Make the image display below the needle */
bottom: 0; bottom: 0;
margin-bottom: 10px;
} }
.gaugeValue, .gaugeText { .gaugeValue, .gaugeText {
@@ -180,3 +180,21 @@ body {
text-decoration: none; text-decoration: none;
font-size: 18px; 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;
}