Canvas Based Temperature Gauge Plugin For jQuery - TempGauge
File Size: | 21.1 KB |
---|---|
Views Total: | 17528 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

TempGauge is a minimal jQuery plugin that dynamically draws a customizable, thermometer-style temperature gauge using HTML5 canvas 2D API to present any temperature values.
How to use it:
1. Load the latest version of jQuery library and the jQuery TempGauge plugin in the html page.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/jquery.tempgauge.js"></script>
2. Wrap your temperature in degrees into a DIV element like so.
<div class="tempGauge-demo">-10°C</div>
3. Renders a basic thermometer inside the DIV you created.
$(".tempGauge-demo").tempGauge();
4. Customization options.
$(".tempGauge-demo").tempGauge({ // border color borderColor: "black", // border width borderWidth: 4, // default temperature defaultTemp: 26, // fill color fillColor: "red", // show label showLabel:false, // label size in pixels labelSize: 12, // maximum temperature maxTemp: 40, // minimum temperature minTemp: -10, // Temperature width width: 100 });
Change log:
2016-11-30
- add scale feature
- added option to replace or insert canvas
2015-11-04
- adds labelSize property
This awesome jQuery plugin is developed by akumagamo. For more Advanced Usages, please check the demo page or visit the official website.