Smikkelbakje/J1B1-CMB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added advice that says what you need to do

Browse Source
This commit is contained in:
Sam
2023-10-26 16:08:22 +02:00
parent 130d3a7dea
commit bf06b4bd98
2 changed files with 110 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/js-ts/serialv2.js
View File

@@ -13,6 +13,10 @@ let humidArray = [];
let lichtArray = []; let lichtArray = [];
let humid = 0; let humid = 0;
let licht = 0; let licht = 0;
let TempAdvies;
let HumidAdvies;
let LichtAdvies;
let VolledigAdvies;
// Request a port and open a connection. // Request a port and open a connection.
async function connect() { async function connect() {
@@ -60,6 +64,8 @@ async function readLoop() {
humidArray.push(SensorValues[1]) humidArray.push(SensorValues[1])
lichtArray.push(SensorValues[2]) lichtArray.push(SensorValues[2])
} }
buffer = []; buffer = [];
@@ -71,10 +77,18 @@ async function readLoop() {
document.getElementById("temp").innerHTML = SensorValues[0]; document.getElementById("temp").innerHTML = SensorValues[0];
document.getElementById("humid").innerHTML = SensorValues[1]; document.getElementById("humid").innerHTML = SensorValues[1];
document.getElementById("licht").innerHTML = SensorValues[2]; document.getElementById("licht").innerHTML = SensorValues[2];
plotly(tempGraph, tempArray) plotly(tempGraph, tempArray)
plotly(humidGraph, humidArray) plotly(humidGraph, humidArray)
plotly(lightGraph, lichtArray) plotly(lightGraph, lichtArray)
Advies("Temparatuur", SensorValues[0])
Advies("Luchtvochtigheid", SensorValues[1])
Advies("Licht", SensorValues[2])
VolledigAdvies = TempAdvies + HumidAdvies + LichtAdvies;
document.getElementById("Advies").innerHTML = VolledigAdvies;
} }
// Show the received data in the console // Show the received data in the console
@@ -97,12 +111,57 @@ async function disconnect() {
console.log("Port is closed!"); console.log("Port is closed!");
} }
//plotly grafiek //plotly grafiek
function plotly(graph, dataArray){ function plotly(graph, dataArray) {
Plotly.newPlot(graph, [{ Plotly.newPlot(graph, [{
y: dataArray, y: dataArray,
mode: 'lines', mode: 'lines',
line: {color: '#80CAF6'} line: { color: '#80CAF6' }
}]); }]);
} }
//eigen library maken voor serial //eigen library maken voor serial
async function Advies(Soort, Waardes) {
if (Soort = "Temparatuur") {
if (Waardes = -10 < 0) {
// document.getElementById("TempAdvies").innerHTML = "Ga naar binnen of trek een dikke jas aan. Het is vriest!";
TempAdvies = "Ga naar binnen of trek een dikke jas aan. Het is vriest!"
}
if (Waardes = 0 < 10) {
// document.getElementById("TempAdvies").innerHTML = "Het is redelijk koud, pak een jas";
TempAdvies = "Het is redelijk koud, pak een jas.";
}
if (Waardes = 10 < 20) {
TempAdvies = "Je kan zonder jas rondlopen. Een hoodie zou perfect zijn.";
}
if (Waardes = 20 < 35) {
TempAdvies = "Het is lekker warm je kan in een shirt rondlopen.";
}
if (Waardes => 35) {
TempAdvies = "Blijf buiten de zon anders smelt je en drink vooral veel water.";
}
}
if (Soort = "Luchtvochtigheid") {
if (Waardes = 0 < 10) {
HumidAdvies = "De lucht is kurkdroog."
}
if (Waardes = 10 < 50) {
HumidAdvies = "De lucht voelt normaal aan."
}
if (Waardes = 50 < 75) {
HumidAdvies = "De lucht voelt wat vochtig aan."
}
if (Waardes = 75 < 100) {
HumidAdvies = "De lucht voelt heel vochtig aan."
}
}
if (Soort = "Licht") {
if (Waardes = 0 < 400) {
LichtAdvies = "Zet het licht aan holbewoner."
}
}
}

16
web/statestiek.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="icon" type="image/png" href="icon.png"> <link rel="icon" type="image/png" href="icon.png">
<script src='https://cdn.plot.ly/plotly-2.26.0.min.js'></script> <script src='https://cdn.plot.ly/plotly-2.26.0.min.js'></script>
@@ -7,12 +8,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css"> <link rel="stylesheet" href="css.css">
<title>Weerstation</title> <title>Weerstation</title>
<style> html{ <style>
html {
background-image: url(background.png); background-image: url(background.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
} </style> }
</style>
</head> </head>
<nav> <nav>
@@ -38,6 +41,7 @@
<div class="textblack"> <div class="textblack">
<h1>Tempratuur is <span id="temp"></span></h1> <h1>Tempratuur is <span id="temp"></span></h1>
<div id="tempGraph"></div> <div id="tempGraph"></div>
<div id="TempAdvies" class="textblack"></div>
</div> </div>
</div> </div>
<div class="Datadisplay"> <div class="Datadisplay">
@@ -56,7 +60,15 @@
</div> </div>
<div class="Datadisplay">
<div class="textblack">
<h1>Het advies voor nu is</h1>
<div id="Advies" class="textblack"></div>
</div>
</div>
<script src="js-ts/serialv2.js"> </script> <script src="js-ts/serialv2.js"> </script>
</body> </body>
</html> </html>