Added advice that says what you need to do

web/js-ts/serialv2.js

@@ -13,6 +13,10 @@ let humidArray = [];
 let lichtArray = [];
 let humid = 0;
 let licht = 0;
+let TempAdvies;
+let HumidAdvies;
+let LichtAdvies;
+let VolledigAdvies;
 
 // Request a port and open a connection.
 async function connect() {
@@ -36,7 +40,7 @@ async function readLoop() {
 
         for (let iByte = 0; iByte < value.length; iByte++) {
             let singleByte = value[iByte];
-                //functie maken er van met boolean!!!
+            //functie maken er van met boolean!!!
             if (singleByte != 10) {
                 buffer.push(singleByte);
             }
@@ -44,7 +48,7 @@ async function readLoop() {
             else {
                 let sensorString = decoder.decode(new Uint8Array(buffer));
                 let SensorValues;
-                
+
                 //zet alle data in een json array
                 try {
                     SensorValues = JSON.parse(sensorString);
@@ -56,9 +60,11 @@ async function readLoop() {
                     console.log(SensorValues)
 
                     //zet alle data in een array
-                     tempArray.push(SensorValues[0])
+                    tempArray.push(SensorValues[0])
-                     humidArray.push(SensorValues[1])
+                    humidArray.push(SensorValues[1])
-                     lichtArray.push(SensorValues[2])
+                    lichtArray.push(SensorValues[2])
+
+
 
                 }
 
@@ -71,10 +77,18 @@ async function readLoop() {
                 document.getElementById("temp").innerHTML = SensorValues[0];
                 document.getElementById("humid").innerHTML = SensorValues[1];
                 document.getElementById("licht").innerHTML = SensorValues[2];
-
                 plotly(tempGraph, tempArray)
                 plotly(humidGraph, humidArray)
                 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        
@@ -97,12 +111,57 @@ async function disconnect() {
     console.log("Port is closed!");
 }
 //plotly grafiek
-function plotly(graph, dataArray){
+function plotly(graph, dataArray) {
     Plotly.newPlot(graph, [{
         y: dataArray,
         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."
+        }
+    }
+
+
+}

web/statestiek.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <link rel="icon" type="image/png" href="icon.png">
     <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">
     <link rel="stylesheet" href="css.css">
     <title>Weerstation</title>
-    <style>  html{
+    <style>
-        background-image: url(background.png);
+        html {
-        background-repeat: no-repeat;
+            background-image: url(background.png);
-        background-size: 100%;
+            background-repeat: no-repeat;
+            background-size: 100%;
 
-    }    </style>
+        }
+    </style>
 </head>
 
 <nav>
@@ -20,9 +23,9 @@
         <a href="index.html">Home</a>
         <a class="active" href="statestiek.html">Station statestieken</a>
         <div class="commandbar">
-                <button class="button" onclick="connect()">Connect</button>
+            <button class="button" onclick="connect()">Connect</button>
-                <button class="button" onclick="disconnect()">Disconnect</button>
+            <button class="button" onclick="disconnect()">Disconnect</button>
-      
+
         </div>
     </div>
 
@@ -31,32 +34,41 @@
 
 <body>
 
-    
+
     <p id="counter"></p>
- <div id="block" class="centerdata">
+    <div id="block" class="centerdata">
+        <div class="Datadisplay">
+            <div class="textblack">
+                <h1>Tempratuur is <span id="temp"></span></h1>
+                <div id="tempGraph"></div>
+                <div id="TempAdvies" class="textblack"></div>
+            </div>
+        </div>
+        <div class="Datadisplay">
+            <div class="textblack">
+                <h1>Luchtsvochtigheid is <span id="humid"></span></h1>
+                <div id="humidGraph"></div>
+            </div>
+        </div>
+
+        <div class="Datadisplay">
+            <div class="textblack">
+                <h1>Licht is <span id="licht"></span></h1>
+                <div id="lightGraph"></div>
+            </div>
+        </div>
+
+    </div>
+
     <div class="Datadisplay">
-     <div class="textblack">  
+        <div class="textblack">
-          <h1>Tempratuur is <span id="temp"></span></h1>
+            <h1>Het advies voor nu is</h1>
-          <div id="tempGraph"></div>
+            <div id="Advies" class="textblack"></div>
-     </div>
+        </div>
-    </div>
-    <div class="Datadisplay">
-     <div class="textblack">
-        <h1>Luchtsvochtigheid is <span id="humid"></span></h1>
-        <div id="humidGraph"></div>
-     </div>
-    </div>
 
-   <div class="Datadisplay">
-     <div class="textblack">
-     <h1>Licht is <span id="licht"></span></h1>
-     <div id="lightGraph"></div>
-   </div>
     </div>
 
- </div>
-
-
     <script src="js-ts/serialv2.js"> </script>
 </body>
+
 </html>