Skip to content

Commit 95db7a0

Browse files
MikhusMikhus
authored
Merge pull request #88 from Mikhus/v.2.1.0
V.2.1.0
2 parents 797b628 + 87e2d76 commit 95db7a0

39 files changed

+1749
-133
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ dist/
1010
.vscode
1111
complexity/
1212
*es6.js
13+
test/cjs/bundle.js

‎.travis.yml

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
sudo: required
1+
sudo: required
22
dist: trusty
33
language: node_js
44
node_js:
5+
- "7"
56
- "6"
67
before_install:
8+
- source /opt/jdk_switcher/jdk_switcher.sh
9+
- jdk_switcher use oraclejdk8
710
- export CHROME_BIN=/usr/bin/google-chrome
811
- export DISPLAY=:99.0
912
- sh -e /etc/init.d/xvfb start

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# HTML Canvas Gauges v2.0
1+
# HTML Canvas Gauges v2.1
22

33
[![Build Status](https://travis-ci.org/Mikhus/canvas-gauges.svg?branch=master)](https://travis-ci.org/Mikhus/canvas-gauges) ![Test Coverage](https://rawgit.com/Mikhus/canvas-gauges/master/test-coverage.svg) ![Documentation Coverage](https://rawgit.com/Mikhus/canvas-gauges/master/docs-coverage.svg) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://rawgit.com/Mikhus/canvas-gauges/master/LICENSE)
44

‎bower.json

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

‎docs-coverage.svg

+1-1
Loading

‎examples/async.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype htm>
1+
<!doctype html>
22
<html>
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -68,8 +68,8 @@
6868
function initScriptedGauges() {
6969
new RadialGauge({
7070
renderTo: 'another-gauge',
71-
width: 400,
72-
height: 400,
71+
width: 800,
72+
height: 800,
7373
units: 'Km/h',
7474
title: false,
7575
value: 0,

‎examples/events.html

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
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="0"
22+
data-max-value="360"
23+
data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
24+
data-minor-ticks="22"
25+
data-ticks-angle="360"
26+
data-start-angle="180"
27+
data-stroke-ticks="false"
28+
data-highlights="false"
29+
data-color-plate="#222"
30+
data-color-major-ticks="#f5f5f5"
31+
data-color-minor-ticks="#ddd"
32+
data-color-numbers="#ccc"
33+
data-color-needle="rgba(240, 128, 128, 1)"
34+
data-color-needle-end="rgba(255, 160, 122, .9)"
35+
data-value-box="false"
36+
data-value-text-shadow="false"
37+
data-color-circle-inner="#fff"
38+
data-color-needle-circle-outer="#ccc"
39+
data-needle-circle-size="15"
40+
data-needle-circle-outer="false"
41+
data-needle-type="line"
42+
data-needle-start="75"
43+
data-needle-end="99"
44+
data-needle-width="3"
45+
data-borders="true"
46+
data-border-inner-width="0"
47+
data-border-middle-width="0"
48+
data-border-outer-width="10"
49+
data-color-border-outer="#ccc"
50+
data-color-border-outer-end="#ccc"
51+
data-color-needle-shadow-down="#222"
52+
data-animation-target="plate"
53+
data-animation-duration="1500"
54+
data-animation-rule="linear"
55+
data-width="500"
56+
data-height="500"
57+
data-units="ᵍ"
58+
data-value="0"
59+
></canvas>
60+
61+
<canvas data-type="linear-gauge"
62+
data-width="160"
63+
data-height="600"
64+
data-border-radius="0"
65+
data-borders="0"
66+
data-bar-begin-circle="false"
67+
data-title="Temperature"
68+
data-units="°C"
69+
data-minor-ticks="10"
70+
data-value="99"
71+
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
72+
data-tick-side="right"
73+
data-number-side="right"
74+
data-needle-side="right"
75+
data-animation-rule="bounce"
76+
data-animation-duration="750"
77+
data-bar-stroke-width="5"
78+
data-value-box-border-radius="0"
79+
data-value-text-shadow="false"
80+
data-color-plate="#eee"
81+
></canvas>
82+
83+
<script>
84+
function domReady(handler) {
85+
if (/comp|inter|loaded/.test((window.document || {}).readyState + ''))
86+
return handler();
87+
88+
if (window.addEventListener)
89+
window.addEventListener('DOMContentLoaded', handler, false);
90+
91+
else if (window.attachEvent)
92+
window.attachEvent('onload', handler);
93+
}
94+
95+
if (!Array.prototype.forEach) {
96+
Array.prototype.forEach = function(cb) {
97+
var i = 0, s = this.length;
98+
for (; i < s; i++) {
99+
cb && cb(this[i], i, this);
100+
}
101+
}
102+
}
103+
104+
document.fonts && document.fonts.forEach(function(font) {
105+
font.loaded.then(function() {
106+
if (font.family.match(/Led/)) {
107+
document.gauges.forEach(function(gauge) {
108+
gauge.update();
109+
});
110+
}
111+
});
112+
});
113+
114+
var timers = [];
115+
116+
function animateGauges() {
117+
document.gauges.forEach(function(gauge) {
118+
timers.push(setInterval(function() {
119+
gauge.value = Math.random() *
120+
(gauge.options.maxValue - gauge.options.minValue) / 4 +
121+
gauge.options.minValue / 4;
122+
}, gauge.animation.duration + 50));
123+
});
124+
}
125+
126+
function stopGaugesAnimation() {
127+
timers.forEach(function(timer) {
128+
clearInterval(timer);
129+
});
130+
}
131+
132+
domReady(function() {
133+
document.gauges.forEach(function(gauge) {
134+
var type = gauge.canvas.element.getAttribute('data-type');
135+
136+
gauge.on('beforeNeedle', function() {
137+
console.log(type + ': drawing needle!');
138+
});
139+
140+
gauge.on('beforePlate', function() {
141+
console.log(type + ': drawing plate!');
142+
});
143+
});
144+
});
145+
</script>
146+
147+
</html>

‎examples/issue-63.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<!doctype htm>
1+
<!doctype html>
22
<html>
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
55
<title>Gauge Test</title>
66
<script src="../gauge.min.js"></script>
77
<style>body {
8-
padding: 0;
8+
padding: 20px;
99
margin: 0;
1010
background: #fff
1111
}</style>
@@ -15,6 +15,9 @@
1515
<a href="#" onclick="gaugePS.value=570">570</a>
1616
<a href="#" onclick="gaugePS.value=583">583</a>
1717
<a href="#" onclick="gaugePS.value=830">830</a>
18+
19+
<hr>
20+
1821
<canvas id="gauge-ps"></canvas>
1922

2023
<script>

‎examples/linear-component.html

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
data-needle-side="left"
3232
data-animate-on-init="true"
3333
data-color-plate="transparent"
34+
data-font-value-size="45"
3435
></canvas>
3536

3637
<canvas data-type="linear-gauge"

‎examples/linear-min-non-zero.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
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+
</head>
8+
<body style="background:#222">
9+
10+
<button onclick="animateGauges()">Animate</button>
11+
<button onclick="stopGaugesAnimation()">Stop animation</button>
12+
13+
<hr>
14+
15+
<canvas data-type="linear-gauge"
16+
data-width="160"
17+
data-height="600"
18+
data-border-radius="20"
19+
data-borders="0"
20+
data-bar-begin-circle="false"
21+
data-title="Temperature"
22+
data-units="°C"
23+
data-minor-ticks="10"
24+
data-value="99"
25+
data-min-value="10"
26+
data-max-value="30"
27+
data-major-ticks="10, 20, 30"
28+
data-highlights='[
29+
{"from": 10, "to":20, "color": "blue"},
30+
{"from": 20, "to": 30, "color": "red"}
31+
]'
32+
data-tick-side="right"
33+
data-number-side="right"
34+
data-needle-side="right"
35+
data-animation-rule="bounce"
36+
data-animation-duration="750"
37+
data-bar-stroke-width="5"
38+
data-value-box-border-radius="0"
39+
data-value-text-shadow="false"
40+
></canvas>
41+
42+
<canvas data-type="linear-gauge"
43+
data-width="160"
44+
data-height="600"
45+
data-border-radius="20"
46+
data-borders="0"
47+
data-bar-begin-circle="false"
48+
data-title="Temperature"
49+
data-units="°C"
50+
data-minor-ticks="10"
51+
data-value="99"
52+
data-min-value="-30"
53+
data-max-value="30"
54+
data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
55+
data-highlights='[
56+
{"from":-30, "to":0, "color": "blue"},
57+
{"from": 0, "to": 30, "color": "red"}
58+
]'
59+
data-tick-side="right"
60+
data-number-side="right"
61+
data-needle-side="right"
62+
data-animation-rule="bounce"
63+
data-animation-duration="750"
64+
data-bar-stroke-width="5"
65+
data-value-box-border-radius="0"
66+
data-value-text-shadow="false"
67+
></canvas>
68+
69+
<br>
70+
71+
<canvas data-type="linear-gauge"
72+
data-width="600"
73+
data-height="160"
74+
data-border-radius="0"
75+
data-borders="0"
76+
data-bar-begin-circle="false"
77+
data-title="Temperature"
78+
data-units="°C"
79+
data-value="25.5"
80+
data-bar-stroke-width="5"
81+
data-min-value="-30"
82+
data-max-value="30"
83+
data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
84+
data-highlights='[
85+
{"from":-30, "to":0, "color": "blue"},
86+
{"from": 0, "to": 30, "color": "red"}
87+
]'
88+
></canvas>
89+
90+
<br>
91+
92+
<canvas data-type="linear-gauge"
93+
data-width="600"
94+
data-height="160"
95+
data-border-radius="0"
96+
data-borders="0"
97+
data-bar-begin-circle="false"
98+
data-title="Temperature"
99+
data-units="°C"
100+
data-value="25.5"
101+
data-bar-stroke-width="5"
102+
data-min-value="10"
103+
data-max-value="30"
104+
data-major-ticks="10, 20, 30"
105+
data-highlights='[
106+
{"from": 10, "to":20, "color": "blue"},
107+
{"from": 20, "to": 30, "color": "red"}
108+
]'
109+
></canvas>
110+
111+
<script>
112+
if (!Array.prototype.forEach) {
113+
Array.prototype.forEach = function(cb) {
114+
var i = 0, s = this.length;
115+
for (; i < s; i++) {
116+
cb && cb(this[i], i, this);
117+
}
118+
}
119+
}
120+
121+
var timers = [];
122+
123+
function animateGauges() {
124+
document.gauges.forEach(function(gauge) {
125+
timers.push(setInterval(function() {
126+
gauge.value = Math.random() *
127+
(gauge.options.maxValue - gauge.options.minValue) +
128+
gauge.options.minValue;
129+
}, gauge.animation.duration + 500));
130+
});
131+
}
132+
133+
function stopGaugesAnimation() {
134+
timers.forEach(function(timer) {
135+
clearInterval(timer);
136+
});
137+
}
138+
</script>
139+
140+
</body>
141+
</html>

0 commit comments

Comments
 (0)