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

28
web/newWebsite/index.html
View File

@@ -12,22 +12,24 @@
<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>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">Dashboard</a>
</li>
<li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a>
</li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
</ul>
</nav>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">Dashboard</a>
</li>
<li class="nav-item">
<a href="graphs.html" class="nav-link">Graphs</a>
</li>
<li class="nav-item">
<a href="settings.html" class="nav-link">Settings</a>
</li>
</ul>
</nav>
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<script src="GaugGroup.js"></script>
<script src="graph-classes.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
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);
}
}

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(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);
}
}

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

@@ -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,6 +75,8 @@ body {
height: 80%; /* Increase the height from 70% to 80% */
position: relative;
overflow: visible;
height: 5vh;
margin-bottom: 1vh;
}
@@ -89,7 +90,6 @@ body {
left: 0;
z-index: 1; /* Make the image display below the needle */
bottom: 0;
margin-bottom: 10px;
}
.gaugeValue, .gaugeText {
@@ -180,3 +180,21 @@ body {
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;
}