https://github.com/davedupplaw/jquery.thermometer

An SVG thermometer for jQuery
https://github.com/davedupplaw/jquery.thermometer

javascript javascript-library jquery jquery-plugin jquery-widgets svg-thermometer temperature thermometer

Last synced: 1 day ago
JSON representation

An SVG thermometer for jQuery

• Host: GitHub
• URL: https://github.com/davedupplaw/jquery.thermometer
• Owner: davedupplaw
• Created: 2014-06-11T12:40:08.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-05-27T20:11:42.000Z (over 7 years ago)
• Last Synced: 2024-03-14T21:01:18.525Z (8 months ago)
• Topics: javascript, javascript-library, jquery, jquery-plugin, jquery-widgets, svg-thermometer, temperature, thermometer
• Language: JavaScript
• Size: 15.6 KB
• Stars: 6
• Watchers: 3
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](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.

    


  

         ...

  

    $('#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).