Skip to content

Commit ed73b9b

Browse files
MikhusMikhus
authored
Merge pull request #123 from Mikhus/v2.1.3
Merging release 2.1.3
2 parents 7765087 + be32971 commit ed73b9b

22 files changed

+748
-31
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.2",
3+
"version": "2.1.3",
44
"homepage": "https://github.com/Mikhus/canvas-gauges",
55
"authors": [
66
"Mykhailo Stadnyk <mikhus@gmail.com>"

‎docs-coverage.svg

+1-1
Loading

‎examples/custom-001.html

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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+
<link rel="stylesheet" href="../fonts/fonts.css">
7+
<script src="../gauge.min.js"></script>
8+
</head>
9+
<body style="background: #fff">
10+
11+
<canvas id="canvas-id"></canvas>
12+
13+
<script>
14+
var gauge = new RadialGauge({
15+
renderTo: 'canvas-id',
16+
width: 300,
17+
height: 300,
18+
units: "",
19+
//title: "",
20+
21+
startAngle: 90,
22+
ticksAngle: 180,
23+
colorPlate: "#ffffff",
24+
//colorPlateEnd: "#ffffff",
25+
colorUnits: "#3CA7DB",
26+
colorNumbers: "#534638",
27+
colorNeedle: "#8E7860",
28+
colorNeedleEnd: "#8E7860",
29+
colorNeedleCircleOuter: "#8E7860",
30+
colorNeedleCircleOuterEnd: "#8E7860",
31+
32+
colorNeedleShadowUp: "#8E7860",
33+
colorNeedleShadowDown: "#8E7860",
34+
35+
colorMajorTicks: ["#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB"],
36+
colorMinorTicks: "#EBEBEB",
37+
38+
minValue: 0,
39+
maxValue: 100,
40+
majorTicks: ["","20","40","60","80",""],
41+
minorTicks: "2",
42+
strokeTicks: true,
43+
highlights: [
44+
{
45+
"from": -0.25,
46+
"to": 39.99,
47+
"color": "#FF9488"
48+
},
49+
{
50+
"from": 39.99,
51+
"to": 59.99,
52+
"color": "#8FB9BD"
53+
},
54+
{
55+
"from": 59.99,
56+
"to": 100.25,
57+
"color": "#B1B9CB"
58+
}
59+
],
60+
//
61+
highlightsWidth: 25,
62+
numbersMargin: 12,
63+
//
64+
//barWidth: 20,
65+
//barStrokeWidth: 0,
66+
//barProgress: 1,
67+
//barShadow: 0,
68+
//
69+
animation: true,
70+
//animationDuration: 500,
71+
animationRule: "linear",
72+
animatedValue: true,
73+
//animateOnInit: true,
74+
75+
borders: false,
76+
valueBox: false,
77+
78+
needleType: "arrow",
79+
needleEnd: 65,
80+
needleWidth: 4,
81+
needleCircleSize: 10,
82+
needleCircleInner: false,
83+
needleCircleOuter: true,
84+
needleShadow: false,
85+
86+
borderShadowWidth: 0
87+
88+
}).draw();
89+
90+
91+
gauge.value = 56;
92+
gauge.update();
93+
</script>
94+
</body>
95+
</html>

‎examples/custom-002.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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+
<link rel="stylesheet" href="../fonts/fonts.css">
7+
<script src="../gauge.min.js"></script>
8+
</head>
9+
<body style="background: #fff">
10+
11+
<button onclick="animateGauges()">Animate</button>
12+
13+
<canvas id="canvasPressure"></canvas>
14+
15+
<script>
16+
var gaugePressure = new RadialGauge({
17+
renderTo: 'canvasPressure',
18+
width: 300,
19+
height: 300,
20+
units: "1010 hPa",
21+
startAngle: 70,
22+
ticksAngle: 220,
23+
colorPlate: "#ffffff",
24+
colorUnits: "#3CA7DB",
25+
colorNumbers: "#3CA7DB",
26+
needleType: "arrow",
27+
needleStart: 0,
28+
needleEnd: 75,
29+
needleWidth: 4,
30+
needleCircleSize: 10,
31+
needleCircleInner: false,
32+
needleCircleOuter: true,
33+
needleShadow: false,
34+
colorNeedle: "#3CA7DB",
35+
colorNeedleEnd: "#2698CE",
36+
colorNeedleCircleOuter: "#3CA7DB",
37+
colorNeedleCircleOuterEnd: "#3CA7DB",
38+
// barWidth: 5,
39+
// colorBarProgress: '#3CA7DB',
40+
// colorBar: '#A8D3D5',
41+
42+
colorMajorTicks: ["#A8D3D5", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
43+
"#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#A8D3D5"],
44+
colorMinorTicks: "#ffffff",
45+
46+
// Вопрос в мин и макс значениях, при этих значениях анимация не работает
47+
minValue: 975,
48+
maxValue: 1045,
49+
50+
majorTicks: ["","980","","990","","1000","","1010","","1020","","1030","","1040",""],
51+
minorTicks: "10",
52+
strokeTicks: true,
53+
54+
highlights: [
55+
{
56+
"from": 974.75,
57+
"to": 1045.25,
58+
"color": "#A8D3D5"
59+
}
60+
],
61+
//
62+
highlightsWidth: 25,
63+
numbersMargin: 12,
64+
animation: true,
65+
animationRule: "linear",
66+
valueBox: false,
67+
borders: false,
68+
borderShadowWidth: 0,
69+
value: 1010,
70+
animateOnInit: true,
71+
animatedValue: true
72+
73+
}).draw();
74+
75+
var timers = [];
76+
77+
function animateGauges() {
78+
document.gauges.forEach(function(gauge) {
79+
timers.push(setInterval(function() {
80+
gauge.value = Math.random() *
81+
(gauge.options.maxValue - gauge.options.minValue) +
82+
gauge.options.minValue;
83+
}, gauge.animation.duration + 50));
84+
});
85+
}
86+
87+
window.addEventListener('load', function() {
88+
document.gauges.forEach(function(gauge) {
89+
gauge.on('animate', function(percent, value) {
90+
gauge.update({ units: parseInt(value, 10) + ' hPa' });
91+
});
92+
});
93+
});
94+
</script>
95+
</body>
96+
</html>

‎examples/custom-003.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
16+
<hr>
17+
18+
<canvas data-type="radial-gauge"
19+
data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
20+
data-type="radial-gauge"
21+
data-title="Barometer"
22+
data-units="mBar"
23+
data-width="200"
24+
data-height="200"
25+
data-value-int="0"
26+
data-value-dec="0"
27+
data-width="200"
28+
data-height="200"
29+
data-min-value="950"
30+
data-max-value="1050"
31+
data-highlights="false"
32+
></canvas>
33+
34+
<script async src="../gauge.min.js"></script>
35+
<script>
36+
var timers = [];
37+
38+
function animateGauges() {
39+
document.gauges.forEach(function(gauge) {
40+
timers.push(setInterval(function() {
41+
gauge.value = Math.random() *
42+
(gauge.options.maxValue - gauge.options.minValue) +
43+
gauge.options.minValue;
44+
}, gauge.animation.duration + 50));
45+
});
46+
}
47+
</script>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)