-
Notifications
You must be signed in to change notification settings - Fork 0
/
Humidity_Temperature-Pointer.html
104 lines (98 loc) · 3.52 KB
/
Humidity_Temperature-Pointer.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Humidity and Temperature - Pointer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://blockly.webduino.io/webduino-blockly.js"></script>
<script src="https://blockly.webduino.io/lib/runtime.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<h1>溫度：<span id="temperature">0</span> ℃</h1>
<h1>濕度：<span id="humidity">0</span> %</h1>
<div id="chart_div1" style="height: 120px; display:inline-block;"></div>
<div id="chart_div2" style="height: 120px; display:inline-block;"></div>
<div id="chart_div" style="width: 100%; height: 400px;"></div>
<script>
var dht;
var gauge;
var chart_div = document.getElementById("chart_div");
var chart_div1 = document.getElementById("chart_div1");
var chart_div2 = document.getElementById("chart_div2");
var temperature = document.getElementById("temperature");
var humidity = document.getElementById("humidity");
boardReady({device: 'wa8w'}, function (board) {
board.systemReset();
board.samplingInterval = 20;
dht = getDht(board, 11);
var gauge = {
guage: false,
origin1: [
["Label", "Value"], ["humidity", 55]
],
origin2: [
["Label", "Value"], ["temperature", 30]
]
};
google.load("visualization", "1", {
packages: ["gauge"],
callback: () => gauge.gauge = true
});
dht.read(evt => {
temperature.innerHTML = dht.temperature;
humidity.innerHTML = dht.humidity;
var time = new Date();
var ts = time.getSeconds();
var tm = time.getMinutes();
var th = time.getHours();
var a = [];
if (gauge.areachart) {
chart_div.style.display="block";
chart_div1.style.display="none";
chart_div2.style.display="none";
a[0] = th + ":" + tm + ":" + ts;
a[1] = dht.temperature;
a[2] = dht.humidity;
gauge.origin.push(a);
drawAreaChart(gauge.origin);
}
if (gauge.gauge) {
chart_div.style.display="none";
chart_div1.style.display="inline-block";
chart_div2.style.display="inline-block";
gauge.origin1 = [["Label", "Value"],["humidity", dht.humidity]];
gauge.origin2 = [["Label", "Value"],["temperature", dht.temperature]];
drawGuage(gauge.origin1,gauge.origin2);
}
}, 1000);
});
function drawGuage(d1,d2) {
if (!Array.isArray(d1) || !Array.isArray(d2))
return;
var data1 = google.visualization.arrayToDataTable(d1);
var data2 = google.visualization.arrayToDataTable(d2);
var options1 = {
width: 400, height: 200,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5,
redColor:"#00f", yellowColor:"#9cf",
animation:{easing:"in"}
};
var options2 = {
width: 400, height: 200,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5,
animation:{easing:"in"}
};
var chart1 = new google.visualization.Gauge(chart_div1);
chart1.draw(data1, options1);
var chart2 = new google.visualization.Gauge(chart_div2);
chart2.draw(data2, options2);
}
</script>
</body>