-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgauge.js.html
99 lines (91 loc) · 3.03 KB
/
gauge.js.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
<!DOCTYPE html>
<html class="gr__bernii_github_io"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>gauge.js</title>
<link href="gauge.js_files/main.css" type="text/css" rel="stylesheet">
<!--[if lt IE 9]><script type="text/javascript" src="assets/excanvas.compiled.js"></script><![endif]-->
</head>
<body>
<div id="example" class="gauge">
<div id="preview">
<div style="font-size: 23px;" id="preview-textfield">1,250</div>
<canvas width="220" height="70" id="canvas-preview"></canvas>
</div>
</div>
<script src="gauge.js_files/jquery.js"></script>
<script src="gauge.js_files/gauge.js"></script>
<script>
function update() {
var opts = {};
$('.opts input[min], .opts .color').each(function() {
var val = $(this).hasClass("color") ? this.value : parseFloat(this.value);
if($(this).hasClass("color")){
val = "#" + val;
}
if(this.name.indexOf("lineWidth") != -1 ||
this.name.indexOf("angle") != -1 ||
this.name.indexOf("pointer.length") != -1){
val /= 100;
}else if(this.name.indexOf("pointer.strokeWidth") != -1){
val /= 1000;
}
$('#opt-' + this.name.replace(".", "-")).text(val);
if(this.name.indexOf(".") != -1){
var elems = this.name.split(".");
var tmp_opts = opts;
for(var i=0; i<elems.length - 1; i++){
if(!(elems[i] in tmp_opts)){
tmp_opts[elems[i]] = {};
}
tmp_opts = tmp_opts[elems[i]];
}
tmp_opts[elems[elems.length - 1]] = val;
}else if($(this).hasClass("color")){
// color picker is removing # from color values
opts[this.name] = "#" + this.value
$('#opt-' + this.name.replace(".", "-")).text("#" + this.value);
}else{
opts[this.name] = val;
}
if(this.name == "currval"){
// update current demo gauge
demoGauge.set(parseInt(this.value));
AnimationUpdater.run();
}
});
opts.animationSpeed = 32;
demoGauge.animationSpeed = opts.animationSpeed;
opts.generateGradient = true;
demoGauge.setOptions(opts);
demoGauge.ctx.clearRect(0, 0, demoGauge.ctx.canvas.width, demoGauge.ctx.canvas.height);
demoGauge.render();
}
function initGauge(){
demoGauge = new Gauge(document.getElementById("canvas-preview"));
demoGauge.setTextField(document.getElementById("preview-textfield"));
demoGauge.maxValue = 3000;
demoGauge.set(1244);
};
$(function() {
var params = {};
var hash = /^#\?(.*)/.exec(location.hash);
if (hash) {
$('#share').prop('checked', true);
$.each(hash[1].split(/&/), function(i, pair) {
var kv = pair.split(/=/);
params[kv[0]] = kv[kv.length-1];
});
}
$('.opts input[min], #opts .color').each(function() {
var val = params[this.name];
if (val !== undefined) this.value = val;
this.onchange = update;
});
$('.opts input[name=currval]').mouseup(function(){
AnimationUpdater.run();
});
initGauge();
update();
});
</script>
</body></html>