-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnail2.html
102 lines (93 loc) · 3.08 KB
/
snail2.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
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple HTML5 Canvas Gauge Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="./gauge.min.js"></script>
<style>
body {
background-color: #2A2A2A;
}
</style>
</head>
<body>
<div> <canvas id="gauge1" data-type="canv-gauge"></canvas> </div>
<script>
var gauge2 = new RadialGauge({
renderTo : 'gauge1',
width : 280,
height : 280,
glow : true,
units : '%',
title : '福壽螺出沒率',
strokeTicks : false,
highlights : [{
from : 20,
to : 40,
color : 'PaleGreen'
}, {
from : 40,
to : 70,
color : 'Khaki'
}, {
from : 70,
to : 100,
color : 'LightSalmon'
}],
animation : {
delay : 10,
duration: 300,
fn : 'bounce'
}
});
gauge2.onready = function() {
setInterval( function() {
gauge2.setValue( Math.random() * 100);
}, 1000);
};
gauge2.draw();
$.ajax({url: "https://api.thingspeak.com/channels/75140/fields/2.json?results=1",
dataType: "json",
async: false,
success: function(result){
console.log(result);
console.log(result['feeds'][0]['field2']);
$('#temp').html(result['feeds'][0]['field2'])
y = -0.026 * result['feeds'][0]['field2'] + 1.0434
gauge2.value = 100 - y * 100;
}});
$.ajax({url: "https://api.thingspeak.com/channels/75140/fields/1.json?results=1",
dataType: "json",
async: false,
success: function(result){
$('#humi').html(result['feeds'][0]['field1'])
}});
// animage all gauges on a page
window.addEventListener('load', function() {
document.gauges.forEach(function(gauge) {
setInterval(function() {
// gauge.value = Math.random() *
// (gauge.options.maxValue - gauge.options.minValue) +
// gauge.options.minValue;
$.ajax({url: "https://api.thingspeak.com/channels/75140/fields/2.json?results=1",
dataType: "json",
async: false,
success: function(result){
console.log(result['feeds'][0]['field2']);
$('#temp').html(result['feeds'][0]['field2'])
y = -0.026 * result['feeds'][0]['field2'] + 1.0434
gauge2.value = 100 - y * 100;
}});
$.ajax({url: "https://api.thingspeak.com/channels/75140/fields/1.json?results=1",
dataType: "json",
async: false,
success: function(result){
$('#humi').html(result['feeds'][0]['field1'])
}});
}, 10000);
});
});
</script>
</body>
</html>