Added graphs
This commit is contained in:
@@ -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() {
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user