jQuery SVG Thermometer
I wrote this jQuery plugin when I realised that this might be a good way to show a user how confident an algorithm is of an answer. I also wanted to have a play around with animating SVG, so this seemed a pretty good opportunity to do it.
First, I drew a thermometer in inkscape. Not having used inkscape before, it was a bit of a learning curve. Then, I had a look at the SVG it created to see if it was even possible to programmatically alter it. It took a while, but I figured it out!
Getting it on the Screen
So, here you have it:
<div id="demo"></div> ... $('#demo').thermometer();
You can see that it has transparency built into the SVG, so that whatever background it's against it should look nice. Look, here it is against a dark patterned background with the text and ticks set to white:
$('#demo').thermometer({ textColour: '#ffffff', tickColour: '#ffffff' });
Being SVG, the thermometer is completely scalable and doesn't lose resolution when made larger and doesn't become fuzzy when made smaller.
Just use the height
parameter to set the desired size.
$('#demo').thermometer({ textColour: '#ffffff', tickColour: '#ffffff', height: 100 });
$('#demo').thermometer({ textColour: '#ffffff', tickColour: '#ffffff', height: 800 });
Setting the Value
It would be useless if you couldn't set the value. The simplest way is to set the value during construction by passing the
startValue
parameter:
$('#demo').thermometer({ textColour: '#ffffff', tickColour: '#ffffff', height: 200, startValue: 5 });
However, it can also be done programmatically, as you might expect, using the setValue
method, calling
it using the usual jQuery widget syntax. Because we can only set the value once the widget has completely loaded, in the following demo we're
using the onLoad
callback to set the value.
$('#demo').thermometer( { height: 200, textColour: '#ffffff', tickColour: '#ffffff', onLoad: function() { $('#demo').thermometer('setValue', 6); } } );
The value can be set at runtime by calling the setValue
method and this will animate the thermometer
to the new value. Here we continuously call the widget so you can see this:
function updateThermometer() { $('#demo').thermometer( 'setValue', Math.random()*8 ); window.setTimeout( updateThermometer, 2000 ); } $('#demo').thermometer( { height: 200, textColour: '#ffffff', tickColour: '#ffffff', onLoad: function() { updateThermometer(); } } );
Values outside of the minimum and maximum will be clipped.
Getting the Value
The value of the thermometer can be retrieved using the getValue
method. Simples.
However, if you're changing the value of your thermometer regularly, you may want to know exactly what value
it's at even during the transitions. For this you can use the valueChanged
callback. This is called
whenever the value changes, even during animation.
function updateThermometer() { $('#demo').thermometer( 'setValue', Math.random()*8 ); window.setTimeout( updateThermometer, 1400 ); } $('#demo').thermometer( { height: 200, textColour: '#ffffff', tickColour: '#ffffff', valueChanged: function(val) { $('#valueDisplay').text(val.toFixed(1)); }, onLoad: function() { updateThermometer(); } } );
Setting the Text
The text at the top and bottom of the scale can be set using the setTopText
and setBottomText
methods, or by using the topText
and bottomText
options:
$('#demo').thermometer( { height: 200, textColour: '#ffffff', tickColour: '#ffffff', topText: "Hot", bottomText: "Cold" } );
Colour
The colour of the liquid in the thermometer can be easily changed using the setLiquidColour
method. This takes
a CSS colour value, although it must be the 6-digit CSS colour value; e.g. #ff00ff. The liquid colour can also be set using
the initialisation parameter liquidColour
.
$('#demo').thermometer( { height: 200, textColour: '#ffffff', tickColour: '#ffffff', liquidColour: '#ff00ff', startValue: 5 } );
It's also possible to provide a callback to the thermometer which will calculate the colour based on the thermometer's
current value. Every time the thermometer is redrawn, it will get the liquid colour from the function. To use this, set
the liquidColour
parameter to a function rather than a colour value:
function updateThermometer() { $('#demo').thermometer( 'setValue', Math.random()*8 ); window.setTimeout( updateThermometer, 2500 ); } function RGB2HTML(red, green, blue) { var decColor = 0x1000000+blue + 0x100*green + 0x10000*red ; return '#'+decColor.toString(16).substr(1); } $('#demo').thermometer( { height: 300, textColour: '#ffffff', tickColour: '#ffffff', liquidColour: function( value ) { var red = ~~(value / 8 * 255); var grn = ~~((8-value)/8 * 255); return RGB2HTML(red,grn,0); }, onLoad: function() { updateThermometer(); } } );
Installation
This component is available via the bower repository, so it's as easy as 1-2-3 to install:
bower install jquery.thermometer --save
Alternatively, just download the files you need. Remember that you'll need the SVG file too, and when you install from
bower, the SVG file will be inside the bower_components/jquery.thermometer
folder. You can use the
pathToSVG
initialisation option to point to the svg:
$('#demo').thermometer( { height: 300, pathToSVG: 'js/bower_components/jquery.thermometer/svg/thermo-bottom.svg' } );
Then just include the script tags in your HTML:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="bower/jquery.thermometer/js/jquery.thermometer.js"></script>
Contributing
You can fork the code on Github (just hit the ribbon at the top).
License
The code is released under the MIT license, which basically means you can do whatever you like except pretend it's yours.