-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathesp8266_dht22_x2.html
114 lines (91 loc) · 3.59 KB
/
esp8266_dht22_x2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>Smart Viv</title>
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<!-- EXAMPLE SCRIPT -->
<script>
// onload callback
function drawChart() {
var cloud_url = 'https://data.sparkfun.com/output/';
// Public Key from https://data.sparkfun.com
var public_key = 'aG8bAlQybziD5Qa780yY';
// JSONP request
var jsonData = $.ajax({
url: cloud_url + public_key + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var latest = results[0];
var gauge = new google.visualization.Gauge($('#gauge').get(0));
var gaugeData = google.visualization.arrayToDataTable([
['Label', 'Value'],
['T TOP', 0],
['T BOT', 0]
]);
var options = {
width: 600,
min: 0, max: 45,
redFrom: 40, redTo: 45,
yellowFrom:30, yellowTo: 40,
greenFrom:18, greenTo: 30,
majorTicks: ['0','5','10','15','20','25','30','35','40','45'],
minorTicks: 5
};
// For animation purpose only
gauge.draw(gaugeData,options);
// Show real data
gaugeData.setValue(0,1,parseFloat(latest.temp_top));
gaugeData.setValue(1,1,parseFloat(latest.temp_bot));
gauge.draw(gaugeData,options);
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'T bot');
data.addColumn('number', 'H bot');
data.addColumn('number', 'T top');
data.addColumn('number', 'H top');
$.each(results, function (i, row) {
data.addRow([
(new Date(row.timestamp)),
parseFloat(row.temp_bot),
parseFloat(row.hum_bot),
parseFloat(row.temp_top),
parseFloat(row.hum_top),
]);
});
var temp_data = new google.visualization.DataView(data);
temp_data.setColumns([0,1,3]); //here you set the columns you want to display
var hum_data = new google.visualization.DataView(data);
hum_data.setColumns([0,2,4]); //here you set the columns you want to display
var chart_temp = new google.visualization.LineChart($('#temperature').get(0));
chart_temp.draw(temp_data, {
title: 'Temperature (C)'
});
var chart_hum = new google.visualization.LineChart($('#humidity').get(0));
chart_hum.draw(hum_data, {
title: 'Humidity (%)'
});
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart','gauge']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>
<body style="text-align:center">
<H1>Temperature and humidity logs</H1>
<h2>Based on EPS8266, DHT22</h2>
Temperature and humidity are logged with a DHT22 on an ESP8266, Arduino IDE.<BR> They are posted to a data.sparkfun.com stream:<BR> http://data.sparkfun.com/streams/aG8bAlQybziD5Qa780yY
<BR>
The data are plotted with the google charts API at:<BR>
http://pcwww.liv.ac.uk/~jpolton/plots/esp8266_dht22_x2.html
<div id="gauge" style="width:600px;margin-left:auto;margin-right:auto"></div>
<div id="temperature" style="width: 100%;"></div>
<div id="humidity" style="width: 100%;"></div>
</body>
</html>