Added graphs

web/js-ts/serialv2.js

@@ -1,10 +1,16 @@
-// Define port and reader globally to be used in other functions
+// Declare alle functies
+// lege variabel kan nog ingevult worden
+// getal is een float of int
+// [] betekent array
 let port;
 let reader;
 let decoder = new TextDecoder("utf-8");
 let counterElement = document.getElementById("counter");
 let readibleoutput = 0;
+let xArray = [];
 let tempArray = [];
+let humidArray = [];
+let lichtArray = [];
 let humid = 0;
 let licht = 0;
 
@@ -39,6 +45,7 @@ async function readLoop() {
                 let sensorString = decoder.decode(new Uint8Array(buffer));
                 let SensorValues;
                 
+                //zet alle data in een json array
                 try {
                     SensorValues = JSON.parse(sensorString);
                 } catch (e) {
@@ -48,7 +55,11 @@ async function readLoop() {
                 if (SensorValues) {
                     console.log(SensorValues)
 
-                    tempArray.push(SensorValues[0])
+                    //zet alle data in een array
+                     tempArray.push(SensorValues[0])
+                     humidArray.push(SensorValues[1])
+                     lichtArray.push(SensorValues[2])
+
                 }
 
                 buffer = [];
@@ -57,7 +68,28 @@ async function readLoop() {
                 //                console.log(temp);
                 //                console.log(humid);
                 //                console.log(licht);
-                document.getElementById("temp").innerHTML = tempArray;
+                document.getElementById("temp").innerHTML = SensorValues[0];
+                document.getElementById("humid").innerHTML = SensorValues[1];
+                document.getElementById("licht").innerHTML = SensorValues[2];
+
+                Plotly.newPlot('tempGraph', [{
+                    y: tempArray,
+                    
+                    mode: 'lines',
+                    line: {color: '#80CAF6'}
+                  }]);
+                  Plotly.newPlot('humidGraph', [{
+                    y: humidArray,
+                    
+                    mode: 'lines',
+                    line: {color: '#80CAF6'}
+                  }]);
+                  Plotly.newPlot('lightGraph', [{
+                    y: lichtArray,
+                     
+                    mode: 'lines',
+                    line: {color: '#80CAF6'}
+                  }]);
                   
             }
 
@@ -74,8 +106,10 @@ async function readLoop() {
     }
 }
 
+async function plotly(){
+    Plotly.update(tempgraph, {x: [xArray], y: [tempArray] })
 
-
+}
 
 // Close the port
 async function disconnect() {

web/statestiek.html

@@ -32,7 +32,10 @@
     <h1>Licht is <span id="licht"></span></h1>
     </div>
  </div>
-    <div id="tempgraph"></div>
+    <div id="tempGraph"></div>
+    <div id="humidGraph"></div>
+    <div id="lightGraph"></div>
+
 
     <script src="js-ts/serialv2.js"> </script>
 </body>