Skip to content

Commit 9ac0b9c

Browse files
MikhusMikhus
authored
Merge pull request #96 from Mikhus/v2.1.1
Merge of release v2.1.1
2 parents 95db7a0 + 15be0cc commit 9ac0b9c

18 files changed

+515
-82
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "canvas-gauges",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"homepage": "https://github.com/Mikhus/canvas-gauges",
55
"authors": [
66
"Mykhailo Stadnyk <mikhus@gmail.com>"

‎docs-coverage.svg

+1-1
Loading

‎examples/adoptive-tick-labels.html

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Gauge Test</title>
6+
<script src="../gauge.min.js"></script>
7+
<style>body {
8+
padding: 0;
9+
margin: 0;
10+
background: #fff
11+
}</style>
12+
</head>
13+
<body>
14+
15+
<button onclick="animateGauges()">Animate</button>
16+
<button onclick="stopGaugesAnimation()">Stop animation</button>
17+
18+
<hr>
19+
20+
<canvas data-type="radial-gauge"
21+
data-min-value="13"
22+
data-max-value="87"
23+
data-exact-ticks="true"
24+
data-major-ticks="13,20,25,38,50,62,80,87"
25+
data-minor-ticks="2"
26+
data-highlights="0"
27+
data-width="500"
28+
data-height="500"
29+
></canvas>
30+
31+
<canvas data-type="radial-gauge"
32+
data-min-value="13"
33+
data-max-value="87"
34+
data-exact-ticks="true"
35+
data-major-ticks="13,20,25,38,50,62,80,87"
36+
data-minor-ticks="2"
37+
data-highlights="0"
38+
data-width="500"
39+
data-height="500"
40+
data-font-numbers-size="10"
41+
></canvas>
42+
43+
<canvas data-type="radial-gauge"
44+
data-min-value="13"
45+
data-max-value="87"
46+
data-exact-ticks="true"
47+
data-major-ticks="13,20,25,38,50,62,80,87"
48+
data-minor-ticks="2"
49+
data-highlights="0"
50+
data-width="500"
51+
data-height="500"
52+
data-font-numbers-size="20"
53+
></canvas>
54+
55+
<canvas data-type="radial-gauge"
56+
data-min-value="13"
57+
data-max-value="87"
58+
data-exact-ticks="true"
59+
data-major-ticks="13,20,25,38,50,62,80,87"
60+
data-minor-ticks="2"
61+
data-highlights="0"
62+
data-width="500"
63+
data-height="500"
64+
data-font-numbers-size="30"
65+
></canvas>
66+
67+
<canvas data-type="radial-gauge"
68+
data-min-value="13"
69+
data-max-value="87"
70+
data-exact-ticks="true"
71+
data-major-ticks="13,20,25,38,50,62,80,87"
72+
data-minor-ticks="2"
73+
data-highlights="0"
74+
data-width="500"
75+
data-height="500"
76+
data-font-numbers-size="40"
77+
></canvas>
78+
79+
<canvas data-type="radial-gauge"
80+
data-min-value="13"
81+
data-max-value="87"
82+
data-exact-ticks="true"
83+
data-major-ticks="13,20,25,38,50,62,80,87"
84+
data-minor-ticks="2"
85+
data-highlights="0"
86+
data-width="500"
87+
data-height="500"
88+
data-font-numbers-size="50"
89+
></canvas>
90+
91+
<script>
92+
if (!Array.prototype.forEach) {
93+
Array.prototype.forEach = function(cb) {
94+
var i = 0, s = this.length;
95+
for (; i < s; i++) {
96+
cb && cb(this[i], i, this);
97+
}
98+
}
99+
}
100+
101+
document.fonts && document.fonts.forEach(function(font) {
102+
font.loaded.then(function() {
103+
if (font.family.match(/Led/)) {
104+
document.gauges.forEach(function(gauge) {
105+
gauge.update();
106+
});
107+
}
108+
});
109+
});
110+
111+
var timers = [];
112+
113+
function animateGauges() {
114+
document.gauges.forEach(function(gauge) {
115+
timers.push(setInterval(function() {
116+
gauge.value = Math.random() *
117+
(gauge.options.maxValue - gauge.options.minValue) +
118+
gauge.options.minValue;
119+
}, gauge.animation.duration + 50));
120+
});
121+
}
122+
123+
function stopGaugesAnimation() {
124+
timers.forEach(function(timer) {
125+
clearInterval(timer);
126+
});
127+
}
128+
</script>
129+
</body>
130+
</html>

‎examples/async.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,5 +140,5 @@
140140
</script>
141141

142142
<script async src="../gauge.min.js" onload="initScriptedGauges()"></script>
143-
143+
</body>
144144
</html>

‎examples/events.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,5 +143,5 @@
143143
});
144144
});
145145
</script>
146-
146+
</body>
147147
</html>

‎examples/exact-ticks-bar.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Gauge Test</title>
6+
<script src="../gauge.min.js"></script>
7+
<style>body {
8+
padding: 0;
9+
margin: 0;
10+
background: #fff
11+
}</style>
12+
</head>
13+
<body>
14+
15+
<button onclick="animateGauges()">Animate</button>
16+
<button onclick="stopGaugesAnimation()">Stop animation</button>
17+
18+
<hr>
19+
20+
<canvas data-type="radial-gauge"
21+
data-min-value="13"
22+
data-max-value="87"
23+
data-exact-ticks="true"
24+
data-major-ticks="13,20,38,62,80,87"
25+
data-minor-ticks="2"
26+
data-highlights="0"
27+
data-width="500"
28+
data-height="500"
29+
></canvas>
30+
31+
<canvas data-type="linear-gauge"
32+
data-min-value="13"
33+
data-max-value="87"
34+
data-exact-ticks="true"
35+
data-major-ticks="13,20,38,62,80,87"
36+
data-minor-ticks="2"
37+
data-highlights="0"
38+
data-width="150"
39+
data-height="500"
40+
></canvas>
41+
42+
<canvas data-type="linear-gauge"
43+
data-min-value="13"
44+
data-max-value="87"
45+
data-exact-ticks="true"
46+
data-major-ticks="13,20,38,62,80,87"
47+
data-minor-ticks="2"
48+
data-highlights="0"
49+
data-width="500"
50+
data-height="150"
51+
data-value="47"
52+
></canvas>
53+
54+
<script>
55+
if (!Array.prototype.forEach) {
56+
Array.prototype.forEach = function(cb) {
57+
var i = 0, s = this.length;
58+
for (; i < s; i++) {
59+
cb && cb(this[i], i, this);
60+
}
61+
}
62+
}
63+
64+
document.fonts && document.fonts.forEach(function(font) {
65+
font.loaded.then(function() {
66+
if (font.family.match(/Led/)) {
67+
document.gauges.forEach(function(gauge) {
68+
gauge.update();
69+
});
70+
}
71+
});
72+
});
73+
74+
var timers = [];
75+
76+
function animateGauges() {
77+
document.gauges.forEach(function(gauge) {
78+
timers.push(setInterval(function() {
79+
gauge.value = Math.random() *
80+
(gauge.options.maxValue - gauge.options.minValue) +
81+
gauge.options.minValue;
82+
}, gauge.animation.duration + 50));
83+
});
84+
}
85+
86+
function stopGaugesAnimation() {
87+
timers.forEach(function(timer) {
88+
clearInterval(timer);
89+
});
90+
}
91+
</script>
92+
</body>
93+
</html>

‎examples/radial-bar.html

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<title>Gauge Test</title>
6+
<style>body {
7+
padding: 0;
8+
margin: 0;
9+
background: #fff
10+
}</style>
11+
</head>
12+
<body>
13+
14+
<button onclick="animateGauges()">Animate</button>
15+
<button onclick="stopGaugesAnimation()">Stop animation</button>
16+
17+
<hr>
18+
19+
<canvas data-type="radial-gauge"
20+
data-value="-20"
21+
data-width="400"
22+
data-height="400"
23+
data-bar-width="10"
24+
data-bar-shadow="5"
25+
data-color-bar-progress="rgba(50,200,50,.75)"
26+
></canvas>
27+
28+
<canvas data-type="radial-gauge"
29+
data-value="-20"
30+
data-width="400"
31+
data-height="400"
32+
data-bar-width="2"
33+
data-bar-shadow="0"
34+
data-border-inner-width="0"
35+
data-border-outer-width="0"
36+
data-border-middle-width="0"
37+
data-color-bar-progress="rgba(50,50,200,.75)"
38+
data-color-bar="#aae"
39+
data-color-needle="rgba(50,50,200,.75)"
40+
data-color-needle-end="#aae"
41+
data-highlights="false"
42+
data-value-box-border-radius="0"
43+
data-value-box-stroke="1"
44+
data-color-value-box-shadow="0"
45+
data-needle-type="line"
46+
data-needle-width="1"
47+
data-needle-circle-size="5"
48+
data-needle-circle-inner="false"
49+
data-color-needle-circle-outer="rgba(50,50,200,.75)"
50+
data-color-needle-circle-outer-end="#aae"
51+
data-stroke-ticks="0"
52+
></canvas>
53+
54+
<canvas data-type="radial-gauge"
55+
data-value="-20"
56+
data-width="400"
57+
data-height="400"
58+
data-bar-width="20"
59+
data-bar-shadow="1"
60+
data-color-bar-progress="rgba(200,50,50,.75)"
61+
data-color-bar="#eaa"
62+
data-border-shadow-width="0"
63+
data-border-inner-width="0"
64+
data-border-outer-width="0"
65+
data-border-middle-width="0"
66+
data-highlights="false"
67+
data-value-box-stroke="0"
68+
data-color-value-box-shadow="0"
69+
data-value-box-border-radius="0"
70+
data-value-text-shadow="0"
71+
data-color-value-box-background="transparent"
72+
data-needle="false"
73+
></canvas>
74+
75+
<script async src="../gauge.min.js"></script>
76+
77+
<script>
78+
if (!Array.prototype.forEach) {
79+
Array.prototype.forEach = function(cb) {
80+
var i = 0, s = this.length;
81+
for (; i < s; i++) {
82+
cb && cb(this[i], i, this);
83+
}
84+
}
85+
}
86+
87+
document.fonts && document.fonts.forEach(function(font) {
88+
font.loaded.then(function() {
89+
if (font.family.match(/Led/)) {
90+
document.gauges.forEach(function(gauge) {
91+
gauge.update();
92+
});
93+
}
94+
});
95+
});
96+
97+
var timers = [];
98+
99+
function animateGauges() {
100+
document.gauges.forEach(function(gauge) {
101+
timers.push(setInterval(function() {
102+
var min = gauge.options.minValue - 20;
103+
var max = gauge.options.maxValue + 20;
104+
105+
gauge.value = min + Math.random() * (max - min);
106+
}, gauge.animation.duration + 50));
107+
});
108+
}
109+
110+
function stopGaugesAnimation() {
111+
timers.forEach(function(timer) {
112+
clearInterval(timer);
113+
});
114+
}
115+
</script>
116+
117+
</body>
118+
</html>

‎examples/radial-min-path.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -143,5 +143,5 @@
143143
});
144144
}
145145
</script>
146-
146+
</body>
147147
</html>

‎examples/radial.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -142,5 +142,5 @@
142142
});
143143
}
144144
</script>
145-
145+
</body>
146146
</html>

‎gauge.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gauge.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)