Permalink
Cannot retrieve contributors at this time
<!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> |