Added graphs

This commit is contained in:
sam
2023-10-17 15:33:20 +02:00
parent 153e328824
commit 6e5137712b
2 changed files with 43 additions and 6 deletions

View File

@@ -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;
@@ -38,7 +44,8 @@ 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);
} 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,8 +68,29 @@ 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'}
}]);
}
// Show the received data in the console
@@ -74,8 +106,10 @@ async function readLoop() {
}
}
async function plotly(){
Plotly.update(tempgraph, {x: [xArray], y: [tempArray] })
}
// Close the port
async function disconnect() {

View File

@@ -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>