Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
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> |