-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
108 lines (99 loc) · 2.7 KB
/
index.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
<!DOCTYPE html>
<!-- saved from url=(0076)http://www.jqueryscript.net/demo/Javascript-Animated-Gauges-Plugin-JustGage/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto-adjust</title>
<style>
body {
text-align: center;
}
#g1 {
width:400px; height:320px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
<script src="./web_files/jquery.min.js"></script>
<script src="./web_files/raphael.2.1.0.min.js"></script>
<script src="./web_files/justgage.1.0.1.min.js"></script>
<link href="./web_files/examples.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="./web_files/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="./web_files/jquery.flot.min.js"></script>
<script>
var g1;
var count = -1;
var plot_data = [];
var totalPoints = 100;
var min = 4.8;
var max = 5.1;
var x_length = 40;
$(function(){
var plot = $.plot("#placeholder", [ plot_data ], {
series: {
shadowSize: 0 // Drawing is faster without shadows
},
yaxis: {
min: min,
max: max
},
xaxis: {
show: false,
min: 0,
max: x_length,
ticks: 10
}
});
var g1 = new JustGage({
id: "g1",
value: 0,
min: min,
max: max,
title: "Arduino Voltage",
label: "VDC",
levelColorsGradient: true,
levelColors: ["FF0000","FF6103","FFFF00","00FF00","FFFF00","FF0000"],
shadowSize: 2,
shadowVerticalOffset: 12
});
setInterval(function() {
if(!$('#on_check').attr('checked'))return;
$.get('http://'+window.location.host+'/?getData',function(data){
//console.log(data);
//data = eval(data+(Math.floor(Math.random() * 10) - 10)); //ADD NOISE
//console.log(data);
data = data/1000;
data = parseFloat(data.toFixed(3));
g1.refresh(data);//GAGE
if(count>x_length){
for (var i = 1; i < plot_data.length; ++i) {
plot_data[i][0] = plot_data[i][0]-1;
}
plot_data.shift();
console.log(plot_data);
}else{
count++;
}
plot_data.push([count,data]);//PLOTTER
//if(plot_data.length>11)console.log(plot_data);
plot.setData([plot_data]);
plot.draw();
});
}, 500);
});
</script>
</head>
<body>
<label><input type="checkbox" id="on_check" checked="checked" /> ON</label>
<div id="g1"></div>
<div class="demo-container">
<div id="placeholder" style="height:300px"></div>
</div>
</body>
</html>