README
ractive-gauge
A simple UV-type meter for Ractive
See a demo, here.
install
nodejs/webpack/browserify
npm install --save ractive-gauge
bower
bower install --save ractive-gauge
then, in your code:
var Ractive = require('ractive')
require('ractive-gauge');
requirejs
Put dist/ractive-gauge.js
in your require path, then you can do this:
define(['ractive', 'ractive-gauge'], function(Ractive, gauge){
// do stuff
});
plain browser global
You can use a CDN:
<script src="http://konsumer.js.org/ractive-gauge/dist/ractive-gauge.min.js"></script>
or alternately use one of the files in dist/
, locally.
usage
<div id="container"></div>
<script id='template' type='text/ractive'>
<gauge value="{{coolness}}" label="coolness" /><br>
<input min="0" max="100" type="range" value="{{coolness}}" style="width:255px;margin-left:2.5px"/>
</script>
<script src="https://cdn.ractivejs.org/latest/ractive.min.js"></script>
<script src="https://konsumer.github.io/ractive-gauge/dist/ractive-gauge.min.js"></script>
<script>
var ractive = new Ractive({
el: 'container',
template: '#template',
data: {
coolness: 0
}
});
</script>
styling
You can use a custom SVG, and rebuild with npm run build
or, if you don't need to change the overall look, but just want to change some colors, put this in your app's CSS, and change any styles you like:
.ractive-gauge .mark1 {
fill: none;
stroke: #a0a0a0;
}
.ractive-gauge .mark2 {
fill: none;
stroke: #c0d0e0;
}
.ractive-gauge .center {
fill:none;
stroke:#c0d0e0;
}
.ractive-gauge .number {
fill: #606060;
}
.ractive-gauge .low {
fill: #fc172a;
}
.ractive-gauge .medlow {
fill: #ffe0e1;
}
.ractive-gauge .medhi {
fill: #e3ffe1;
}
.ractive-gauge .hi {
fill: #2cc71f;
}
.ractive-gauge .needle {
fill: none;
stroke: black;
}
.ractive-gauge .label {
fill: #707070;
}
.ractive-gauge .value {
fill: #707070;
}
These are just the colors, but you can change any SVG styles you like (eg stroke-width
.)
development
You can run npm start
to run a devlopment server to try out ideas while developing. Just edit index.js
and changes will live-reload.
To build the minified/compiled versions run npm run build
.