Skip to content

Commit

Permalink
Merge pull request #54 from Mikhus/v2.0.1
Browse files Browse the repository at this point in the history 
Release v2.0.1
  • Loading branch information
@Mikhus
Mikhus authored Sep 14, 2016
2 parents f0e7c7d + 85ff601 commit 6e381a0
Show file tree
Hide file tree
Showing 16 changed files with 301 additions and 362 deletions.
30 changes: 30 additions & 0 deletions examples/linear-component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
data-value="22.3"
data-units="°C"
data-color-value-box-shadow="false"
data-tick-side="left"
data-number-side="left"
data-needle-side="left"
></canvas>

<canvas data-type="linear-gauge"
Expand Down Expand Up @@ -96,6 +99,7 @@
data-units="°C"
data-value="75.5"
data-bar-stroke-width="5"
data-highlights='[{"from":50, "to":75, "color": "red"}]'
></canvas>

<br>
Expand All @@ -115,6 +119,32 @@
data-title="Temperature"
data-units="°C"
></canvas>

<canvas data-type="linear-gauge"
data-width="400"
data-height="150"
data-min-value="0"
data-max-value="220"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights='false'
data-color-plate="#fff"
data-border-shadow-width="0"
data-borders="false"
data-bar-begin-circle="false"
data-bar-width="10"
data-tick-side="left"
data-number-side="left"
data-needle-side="left"
data-needle-type="line"
data-needle-width="3"
data-color-needle="#222"
data-color-needle-end="#222"
data-animation-duration="1500"
data-animation-rule="linear"
data-animation-target="plate"
></canvas>
<script>
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(cb) {
Expand Down
3 changes: 1 addition & 2 deletions examples/radial-component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<title>Gauge Test</title>
<link rel="stylesheet" href="../fonts/fonts.css">
<script src="../gauge.min.js"></script>
<style>canvas { visibility: hidden }</style>
</head>
<body style="background: #222">

Expand Down Expand Up @@ -185,7 +184,7 @@

document.fonts && document.fonts.forEach(function(font) {
font.loaded.then(function() {
if (font.family === 'Led') {
if (font.family.match(/Led/)) {
document.gauges.forEach(function(gauge) {
gauge.update();
gauge.options.renderTo.style.visibility = 'visible';
Expand Down
266 changes: 50 additions & 216 deletions examples/radial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@
}</style>
</head>
<body>

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

<hr>

<canvas data-type="radial-gauge"
data-min-value="0"
data-max-value="360"
Expand All @@ -32,7 +38,6 @@
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"
Expand All @@ -44,223 +49,52 @@
data-color-border-outer="#ccc"
data-color-border-outer-end="#ccc"
data-color-needle-shadow-down="#222"
data-animation-target="plate"
data-animation-duration="1500"
data-animation-rule="linear"
data-width="500"
data-height="500"
data-units="ᵍ"
data-value="0"
></canvas>
<!--<canvas id="gauge-speed"></canvas>
<canvas id="gauge-temperature"></canvas>
<canvas id="gauge-speed2"></canvas>
<div id="console"></div>-->

<script>
//window.onload = function () {
// var gaugeSpeed = new Gauge({
// renderTo: 'gauge-speed',
// width: 400,
// height: 400,
// glow: false,
// units: 'Km/h',
// title: false,
// minValue: 0,
// maxValue: 220,
// majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160', '180', '200', '220'],
// minorTicks: 2,
// strokeTicks: true,
// highlights: [{from: 160, to: 220, color: 'rgba(200, 50, 50, .75)'}],
// colors: {
// plate: '#222',
// majorTicks: '#f5f5f5',
// minorTicks: '#ddd',
// title: '#fff',
// units: '#ccc',
// numbers: '#eee',
// needle: {
// start: 'rgba(200, 50, 50, .75)',
// end: 'rgba(200, 50, 50, .75)',
// circle: {
// outerStart: 'rgba(200, 200, 200, 1)',
// outerEnd: 'rgba(200, 200, 200, 1)'
// },
// shadowUp: true,
// shadowDown: false
// }
// },
// valueBox: {
// visible: false
// },
// valueText: {
// visible: false
// },
// circles: {
// outerVisible: false,
// middleVisible: false,
// innerVisible: false
// },
// needle: {
// type: 'arrow',
// width: 2,
// end: 72,
// circle: {
// size: 7,
// inner: false,
// outer: true
// }
// },
// animation: {
// duration: 1500,
// fn: 'linear'
// }
// });
//
// gaugeSpeed.onready = function () {
// setInterval(function () {
// gaugeSpeed.setValue(Math.random() * (165 - 120) + 120);
// }, 1500);
// };
//
// gaugeSpeed.draw();
//
// var gaugeTemperature = new Gauge({
// renderTo : 'gauge-temperature',
// width : 400,
// height : 400,
// glow : false,
// units : '°C',
// title : 'Temperature',
// minValue : -50,
// maxValue : 50,
// majorTicks : ['-50','-40','-30','-20','-10','0','10','20','30','40','50'],
// minorTicks : 10,
// strokeTicks : false,
// highlights : [
// { from : -50, to : 0, color : 'rgba(0, 0, 255, .3)' },
// { from : 0, to : 50, color : 'rgba(255, 0, 0, .3)' }
// ],
// colors : {
// plate: '#222',
// majorTicks: '#f5f5f5',
// minorTicks: '#ddd',
// title: '#fff',
// units: '#ccc',
// numbers: '#eee',
// needle : {
// start : 'rgba(240, 128, 128, 1)',
// end : 'rgba(255, 160, 122, .9)',
// circle: {
// outerStart: '#333',
// outerEnd: '#111',
// innerStart: '#111',
// innerEnd: '#222'
// },
// shadowUp: false,
// shadowDown: false
// },
// circle: {
// shadow: false,
// outerStart: '#333',
// outerEnd: '#111',
// middleStart: '#222',
// middleEnd: '#111',
// innerStart: '#111',
// innerEnd: '#333'
// },
// valueBox: {
// rectStart: '#222',
// rectEnd: '#333',
// background: '#babab2',
// shadow: 'rgba(0, 0, 0, 1)'
// }
// },
// animation : {
// duration: 1000,
// fn : 'bounce'
// }
// });
//
// gaugeTemperature.onready = function() {
// setInterval(function() {
// gaugeTemperature.setValue(
// (Math.random() * 1 > .5 ? -1 : 1) * Math.random() * 50
// );
// }, 1500);
// };
//
// gaugeTemperature.draw();
//
// var gaugeSpeed2 = new Gauge({
// renderTo: 'gauge-speed2',
// width: 400,
// height: 400,
// glow: false,
// units: 'Km/h',
// title: false,
// minValue: 0,
// maxValue: 220,
// majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160', '180', '200', '220'],
// minorTicks: 2,
// strokeTicks: true,
// highlights: [{from: 160, to: 220, color: 'rgba(200, 50, 50, .75)'}],
// colors: {
// plate: '#222',
// majorTicks: '#f5f5f5',
// minorTicks: '#ddd',
// title: '#fff',
// units: '#ccc',
// numbers: '#eee',
// needle: {
// start: 'rgba(200, 50, 50, .75)',
// end: 'rgba(200, 50, 50, .75)',
// circle: {
// outerStart: 'rgba(200, 200, 200, 1)',
// outerEnd: 'rgba(200, 200, 200, 1)'
// },
// shadowUp: true,
// shadowDown: false
// },
// circle: {
// shadow: false,
// outerStart: '#333',
// outerEnd: '#111',
// middleStart: '#222',
// middleEnd: '#111',
// innerStart: '#111',
// innerEnd: '#333'
// },
// valueBox: {
// rectStart: '#222',
// rectEnd: '#333',
// background: '#babab2',
// shadow: 'rgba(0, 0, 0, 1)'
// }
// },
// valueBox: {
// visible: true
// },
// valueText: {
// visible: true
// },
// needle: {
// type: 'arrow',
// width: 2,
// end: 72,
// circle: {
// size: 7,
// inner: false,
// outer: true
// }
// },
// animation: {
// duration: 1500,
// fn: 'linear'
// },
// updateValueOnAnimation: true
// });
//
// gaugeSpeed2.onready = function () {
// setInterval(function () {
// gaugeSpeed2.setValue(Math.random() * (165 - 120) + 120);
// }, 1500);
// };
//
// gaugeSpeed2.draw();
//};
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) / 4 +
gauge.options.minValue / 4;
}, gauge.animation.duration + 50));
});
}

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

</html>
2 changes: 1 addition & 1 deletion 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 6e381a0

Please sign in to comment.