jquery.thermometer

An SVG thermometer for jQuery that provides programmatic control of the temperature.

You can see demos of its functionality at my website:

http://david.dupplaw.me.uk/developer/jquery-thermometer

Installation

You can install via bower:

bower install jquery.thermometer --save

Usage

The thermometer is a jQuery plugin that turns any div into an SVG thermometer. Simply create the fixture on your page and then turn it into a jQuery object by calling the thermometer() method.

<div id="fixture"></div>

     ...

$('#fixture').thermometer();

Options

Option	Values	Description	Default
height	Integer	Sets the height of the thermometer in pixels.	700
minValue	Decimal	Sets the minimum temperature	0
maxValue	Decimal	Sets the maximum temperature	8
startValue	Decimal	Sets the initial temperature of the thermometer	0
topText	String	The text at the top of the temperature scale	"8"
bottomText	String	The text at the bottom of the temperature scale	"0"
textColour	String	The colour of the text on the temperature scale	#000000
tickColour	String	The colour of the ticks on the temperature scale	#000000
liquidColour	#dddddd or fn	Colour of the liquid or fn to return colour	#ff0000
animationSpeed	Integer	Time in milliseconds for the liquid to move	1000
pathToSVG	String	If you need to store the SVG in another place	"svg/thermo-bottom.svg"
valueChanged	fn	Callback for when the temperature has changed	undefined
onLoad	fn	Callback for when the widget has fully loaded	undefined

To set the options simply pass them in as an object to the constructor:

$('#fixture').thermometer( {
     minValue: 0,
     maxValue: 100,
     liquidColour: '#aa00bb'
} );

Methods

setValue( value )

Use jq.thermometer( 'setValue', newValue ) to set the temperature of the thermometer. If the new value is outside of the range of the thermometer, it will be clipped or capped.

setLiquidColour( newColour )

If you want to set the liquid colour directly, you can call setLiquidColour to update the colour of the liquid. The value must be a string in this format: "#hhhhhh" where h is a hex value. It must be the 6-digit form of the CSS colour code (this is due to the colour blending function in use).