0.1.32 • Published 5 years ago
flat-gauge-js v0.1.32
flat-gauge-js
installation
npm
npm install flat-gauge-js --save
bower
bower install flat-gauge-js -S
include script:
<script type="text/javascript" src="node_modules/flat-gauge-js/dist/bundle.js"></script>
Examples
Spinner Example
var target = document.getElementById('target');
new FlatGauge.Spinner(target, {
rotationSpeed: 1000,
title: {
text: 'Spinning'
}
});
Options
{
colors: {
default: string;
active: string;
inactive: string;
};
activeDegree: number;
radius: number;
strokeWidth: number;
rotationSpeed: number;
title: {
text: string;
fontSize: number;
fontFamily: string;
lineHeight: number;
fontWeight: string;
letterSpacing: string;
};
animationDuration: number;
highlight: boolean;
}
Tune Example
var target = document.getElementById('target');
var tune = new FlatGauge.Tune(target, {
rotationSpeed: 1000,
title: {
text: 'Tune'
}
});
setTimeout(() => {
tune.update({iconOptions: {degree: 0, src: '{pathToImage}'},edges: true, hideBottom: true,needleOptions: {edges: false,minMaxVal: {value: 25, min: 40, max: 80}}});
}, 5000);
Options
{
needleOptions: {
color: string;
minMaxVal: {
min: number;
max: number;
value: number;
};
radius: number;
scale: number;
animationDuration: number;
};
iconOptions: {
degree: number;
radius: number;
animationDuration: number;
src: string;
dimensions: {
width: number;
height: number;
},
opacity: number;
};
colors: {
default: string;
active: string;
inactive: string;
};
strokeWidth: number;
animationDuration: number;
radius: number;
showEdges: boolean;
hollowEdges: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3
showIcon: boolean;
hideBottom: boolean;
}
Multi-Tune Example
var target = document.getElementById('target');
var multiTune = new FlatGauge.MultiTune(target, {
rotationSpeed: 1000
});
Options
{
needleOptions: {
color: string;
minMaxVal: {
min: number;
max: number;
value: number;
};
radius: number;
scale: number;
animationDuration: number;
};
segments: [
min: number;
max: number;
value?: number;
];
iconOptions?: {
degree: number;
radius: number;
animationDuration: number;
src: string;
dimensions: {
width: number;
height: number;
},
opacity: number;
};
colors?: {
default: string;
active: string;
inactive: string;
};
strokeWidth?: number;
animationDuration?: number;
radius: number;
showEdges: boolean;
showIcon: boolean;
hideBottom: boolean;
backgroundColor?: string;
hollowEdgesBgColor?: string;
hollowEdges?: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3;
}
Timer Example
var target = document.getElementById('target');
var timer = new FlatGauge.Timer(target, {
animationDuration: 500,
time: {
hours: 2,
minutes: 45,
seconds: 3
},
percentage: 33
});
Options
{
colors: {
default: string;
active: string;
inactive: string;
};
strokeWidth: number;
time: {
hours: number,
minutes: number,
seconds: number,
};
animationDuration: number;
radius: number;
showEdges: boolean;
title: {
text: string;
fontSize: number;
fontFamily: string;
lineHeight: number;
fontWeight: string;
letterSpacing: string;
};
percentage: number;
}
AM-PM Example (Not Ready)
var target = document.getElementById('target');
var ampm = new FlatGauge.AmPm(target);
Options
{
fromTo: {
from: string;
to: string;
};
needleOptions: {
color: string;
minMaxVal: {
min: number;
max: number;
value: number;
};
radius: number;
scale: number;
animationDuration: number;
};
colors: {
default: string;
active: string;
inactive: string;
};
radius: number;
minMaxValAm: {
min: number;
max: number;
value: number;
};
minMaxValPm: {
min: number;
max: number;
value: number;
};
animationDuration: number;
strokeWidth: number;
}
Range Example
var target = document.getElementById('target');
var range = new FlatGauge.Range(target);
Options
{
colors?: ColorPalette;
minMaxVal: MinMaxVal;
strokeWidth?: number;
animationDuration?: number;
radius: number;
showEdges: boolean;
hollowEdges?: SideState;
hideBottom: boolean;
title?: InnerText;
highlight?: boolean;
}
Typescript and ES6 Support
import { Timer } from 'flat-gauge-js';
export class FlatGaugeTimerComponent {
timer: Timer;
constructor() {
var target = document.getElementById('target');
this.timer = new Timer(target, {
animationDuration: 500,
time: {
hours: 2,
minutes: 45,
seconds: 3
},
percentage: 33
});
}
}
}
0.1.32
5 years ago
0.1.31
5 years ago
0.1.30
5 years ago
0.1.29
5 years ago
0.1.28
5 years ago
0.1.27
6 years ago
0.1.26
6 years ago
0.1.25
6 years ago
0.2.0
7 years ago
0.1.24
7 years ago
0.1.22
7 years ago
0.1.21
7 years ago
0.1.20
7 years ago
0.1.18
7 years ago
0.1.17
7 years ago
0.1.15
7 years ago
0.1.14
7 years ago
0.1.12
7 years ago
0.1.11
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago