Dave Dupplaw BSc. PhD.

jQuery SVG Thermometer

Download

Fork me on GitHub

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.

Comments