JohnKampe
4 years ago
1 changed files with 0 additions and 64 deletions
@ -1,64 +0,0 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<title>Raspberry Pi Measures</title> |
|||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|||
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> |
|||
<script src="/socket.io/socket.io.js"></script> |
|||
</head> |
|||
|
|||
<body> |
|||
<div id="myDiv"></div> <!-- Presenting the graph at localhost:3000/ --> |
|||
<script> |
|||
const socket = io(); //connecting with server |
|||
|
|||
var data = []; //initializing list data, we will put the |
|||
//different traces (trace0, trace1, trace2, trace3) in order to plot them |
|||
|
|||
var trace0 = {}; //trace of temperature |
|||
var trace1 = {}; //trace of air humidity |
|||
var trace2 = {}; //trace of ground humidity |
|||
var trace3 = {}; //trace of beaufort |
|||
|
|||
socket.on('graph', (value) => { //on event with name 'graph' get the values from the server |
|||
if(value[10] == 0){ //if the id = 0 then it's temperature values |
|||
trace0 = { //update the trace of temperature |
|||
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
y: [value[0],value[1],value[2],value[3],value[4],value[5],value[6],value[7],value[8],value[9]], |
|||
type: 'scatter', |
|||
mode: 'lines', |
|||
name: 'Temperature' |
|||
}; |
|||
} else if(value[10] == 1){ //if the id = 1 then it's air humidity values |
|||
trace1 = { //update the trace of air humidity |
|||
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
y: [value[0],value[1],value[2],value[3],value[4],value[5],value[6],value[7],value[8],value[9]], |
|||
type: 'scatter', |
|||
mode: 'lines', |
|||
name: 'Air humidity' |
|||
}; |
|||
}else if(value[10] == 2){ //if the id = 2 then it's ground humidity values |
|||
trace2 = { //update the trace of ground humidity |
|||
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
y: [value[0],value[1],value[2],value[3],value[4],value[5],value[6],value[7],value[8],value[9]], |
|||
type: 'scatter', |
|||
mode: 'lines', |
|||
name: 'Ground humidity' |
|||
}; |
|||
}else if(value[10] == 3){ //if the id = 3 then it's beaufort values |
|||
trace3 = { //update the trace of beaufort |
|||
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
y: [value[0],value[1],value[2],value[3],value[4],value[5],value[6],value[7],value[8],value[9]], |
|||
type: 'scatter', |
|||
mode: 'lines', |
|||
name: 'Beaufort' |
|||
}; |
|||
} |
|||
data = [trace0, trace1, trace2, trace3]; //inserting in list data the traces |
|||
console.log(data); //printing the traces for debugging reasons |
|||
Plotly.newPlot('myDiv', data); //plotting the traces |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
Loading…
Reference in new issue