Skip to content

Commit

Permalink
Merge pull request #96 from Mikhus/v2.1.1
Browse files Browse the repository at this point in the history 
Merge of release v2.1.1
  • Loading branch information
@Mikhus
Mikhus authored Dec 29, 2016
2 parents 95db7a0 + 15be0cc commit 9ac0b9c
Show file tree
Hide file tree
Showing 18 changed files with 515 additions and 82 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "canvas-gauges",
"version": "2.1.0",
"version": "2.1.1",
"homepage": "https://github.com/Mikhus/canvas-gauges",
"authors": [
"Mykhailo Stadnyk <[email protected]>"
Expand Down
2 changes: 1 addition & 1 deletion docs-coverage.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 130 additions & 0 deletions examples/adoptive-tick-labels.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="../gauge.min.js"></script>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>

<hr>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
></canvas>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
data-font-numbers-size="10"
></canvas>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
data-font-numbers-size="20"
></canvas>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
data-font-numbers-size="30"
></canvas>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
data-font-numbers-size="40"
></canvas>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,25,38,50,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
data-font-numbers-size="50"
></canvas>

<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}

document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
});
}
});
});

var timers = [];

function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}

function stopGaugesAnimation() {
timers.forEach(function(timer) {
clearInterval(timer);
});
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion examples/async.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,5 +140,5 @@
</script>

<script async src="../gauge.min.js" onload="initScriptedGauges()"></script>

</body>
</html>
2 changes: 1 addition & 1 deletion examples/events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,5 +143,5 @@
});
});
</script>

</body>
</html>
93 changes: 93 additions & 0 deletions examples/exact-ticks-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<script src="../gauge.min.js"></script>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>

<hr>

<canvas data-type="radial-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,38,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="500"
></canvas>

<canvas data-type="linear-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,38,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="150"
data-height="500"
></canvas>

<canvas data-type="linear-gauge"
data-min-value="13"
data-max-value="87"
data-exact-ticks="true"
data-major-ticks="13,20,38,62,80,87"
data-minor-ticks="2"
data-highlights="0"
data-width="500"
data-height="150"
data-value="47"
></canvas>

<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}

document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
});
}
});
});

var timers = [];

function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
gauge.value = Math.random() *
(gauge.options.maxValue - gauge.options.minValue) +
gauge.options.minValue;
}, gauge.animation.duration + 50));
});
}

function stopGaugesAnimation() {
timers.forEach(function(timer) {
clearInterval(timer);
});
}
</script>
</body>
</html>
118 changes: 118 additions & 0 deletions examples/radial-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gauge Test</title>
<style>body {
padding: 0;
margin: 0;
background: #fff
}</style>
</head>
<body>

<button onclick="animateGauges()">Animate</button>
<button onclick="stopGaugesAnimation()">Stop animation</button>

<hr>

<canvas data-type="radial-gauge"
data-value="-20"
data-width="400"
data-height="400"
data-bar-width="10"
data-bar-shadow="5"
data-color-bar-progress="rgba(50,200,50,.75)"
></canvas>

<canvas data-type="radial-gauge"
data-value="-20"
data-width="400"
data-height="400"
data-bar-width="2"
data-bar-shadow="0"
data-border-inner-width="0"
data-border-outer-width="0"
data-border-middle-width="0"
data-color-bar-progress="rgba(50,50,200,.75)"
data-color-bar="#aae"
data-color-needle="rgba(50,50,200,.75)"
data-color-needle-end="#aae"
data-highlights="false"
data-value-box-border-radius="0"
data-value-box-stroke="1"
data-color-value-box-shadow="0"
data-needle-type="line"
data-needle-width="1"
data-needle-circle-size="5"
data-needle-circle-inner="false"
data-color-needle-circle-outer="rgba(50,50,200,.75)"
data-color-needle-circle-outer-end="#aae"
data-stroke-ticks="0"
></canvas>

<canvas data-type="radial-gauge"
data-value="-20"
data-width="400"
data-height="400"
data-bar-width="20"
data-bar-shadow="1"
data-color-bar-progress="rgba(200,50,50,.75)"
data-color-bar="#eaa"
data-border-shadow-width="0"
data-border-inner-width="0"
data-border-outer-width="0"
data-border-middle-width="0"
data-highlights="false"
data-value-box-stroke="0"
data-color-value-box-shadow="0"
data-value-box-border-radius="0"
data-value-text-shadow="0"
data-color-value-box-background="transparent"
data-needle="false"
></canvas>

<script async src="../gauge.min.js"></script>

<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
var i = 0, s = this.length;
for (; i < s; i++) {
cb && cb(this[i], i, this);
}
}
}

document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
});
}
});
});

var timers = [];

function animateGauges() {
document.gauges.forEach(function(gauge) {
timers.push(setInterval(function() {
var min = gauge.options.minValue - 20;
var max = gauge.options.maxValue + 20;

gauge.value = min + Math.random() * (max - min);
}, gauge.animation.duration + 50));
});
}

function stopGaugesAnimation() {
timers.forEach(function(timer) {
clearInterval(timer);
});
}
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion examples/radial-min-path.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,5 +143,5 @@
});
}
</script>

</body>
</html>
2 changes: 1 addition & 1 deletion examples/radial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,5 +142,5 @@
});
}
</script>

</body>
</html>
6 changes: 3 additions & 3 deletions gauge.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion gauge.min.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9ac0b9c

Please sign in to comment.