Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59
This commit is contained in:
sietse jonker
@@ -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>
|
||||
`;
|
||||
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<nav class="navbar">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
@@ -26,8 +29,7 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<body>
|
||||
<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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user