Thermometer Indicator.
This is an awsome animated graphic component, created with pure HTML-5 and JavaScript, using a Canvas object to generate an animated Thermometer indicator that will go from 0% to xx% (you set the value), every time you reload the page. We hardly recommend you try it first to understand how is working, just check this demo:
I's awsome and animated !
Author: Jorge Girbau
You can see more developments from this author in Sistemas 400.
But you can also email with special requests to: jorge.girbau@gmail.com.
More GitHub repositories from this author in: GitHub.com/jgirbau.
Instructions for using in your Web Pages.
To use this component in you web pages, download the software and unzip in some local folder. The extracted folder is a demo it self. So, copy the termome.js javascript library to your js folder. And edit the thermometer.html sample page, to copy->paste the canvas and script objects to your own web page. Note that if you change size of the thermometer in HTML, you should keep the relation 1x4 between width and hieght to avoid thermometer deformation or malfunction. Example you can change to 50 x 200 px, or you can change to 200 x 800px. If you change the location of the termome.js library, you should also do the proper modification to the src attribute of the script object in HTML.
Support or Contact
If you have any questions or you would like to add more functionality, please don't hesitate to contact Jorge Girbau.