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="120" | |
| data-width="400" | |
| data-height="400" | |
| ></canvas> | |
| <canvas data-type="linear-gauge" | |
| data-value="-20" | |
| data-width="100" | |
| data-height="400" | |
| ></canvas> | |
| <canvas data-type="linear-gauge" | |
| data-value="120" | |
| data-width="100" | |
| data-height="400" | |
| ></canvas> | |
| <canvas data-type="radial-gauge" | |
| data-width="500" | |
| data-height="500" | |
| data-min-value="0" | |
| data-max-value="360" | |
| data-major-ticks="N,NE,E,SE,S,SW,W,NW,N" | |
| data-minor-ticks="22" | |
| data-ticks-angle="360" | |
| data-start-angle="180" | |
| data-stroke-ticks="false" | |
| data-highlights="false" | |
| data-color-plate="#33a" | |
| data-color-major-ticks="#f5f5f5" | |
| data-color-minor-ticks="#ddd" | |
| data-color-numbers="#ccc" | |
| data-color-needle="rgba(240, 128, 128, 1)" | |
| data-color-needle-end="rgba(255, 160, 122, .9)" | |
| data-value-box="false" | |
| data-value-text-shadow="false" | |
| data-color-circle-inner="#fff" | |
| data-color-needle-circle-outer="#ccc" | |
| data-needle-circle-size="15" | |
| data-needle-circle-outer="false" | |
| data-animation-rule="linear" | |
| data-needle-type="line" | |
| data-needle-start="75" | |
| data-needle-end="99" | |
| data-needle-width="3" | |
| data-borders="true" | |
| data-border-inner-width="0" | |
| data-border-middle-width="0" | |
| data-border-outer-width="10" | |
| data-color-border-outer="#ccc" | |
| data-color-border-outer-end="#ccc" | |
| data-color-needle-shadow-down="#222" | |
| data-border-shadow-width="0" | |
| data-animation-target="plate" | |
| data-units="ᵍ" | |
| data-title="DIRECTION" | |
| data-font-title-size="19" | |
| data-color-title="#f5f5f5" | |
| data-animation-duration="1500" | |
| data-value="365" | |
| data-animate-on-init="true" | |
| ></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> |