jQuery plugin to display a <select> control as a single LED indicator with different colour states. LEDicators may look like
The indicator style is inspired from this excellent tutorial by Hugo Giraudel, which provides a CSS3-only fancy and lightweight representation of a LED button.
LEDicator requires jQuery to function. Include the jQuery source before including LEDicator, like this
<script type="text/javascript" src="ledicator.js"></script>
You also need to include the LEDicator style sheet
<link rel="stylesheet" href="ledicator.css">
LEDicator applies to <select> HTML elements. Create one with a defined number of <option> tags. Give your <select> element an id. Then, include a JavaScript block with the following line
$("#id_of_your_select_element").ledicator( {'states': {'0':'gray', '1':'red', ...} } );
You will find a working example here.
The states option is mandatory and specifies the colours associated with each state. You need to define each sate following the pattern 'option name':'colour'.
Some predifined colours are included. These are:
"gray": ["#9a9a9a","#858585","#00000033"]
"red": ["#ef5a5a","#d02525","#d200007f"]
"yellow": ["#efef5a","#d0d025","#d2d2007f"]
"green": ["#5aef5a","#25d025","#00d2007f"]
"blue":["#5a5aef","#2525d0","#0000d27f"]
"orange":["#efaf5a","#d08025","#d264007f"]
"pink":["#ef5aef","#d025d0","#d200d27f"]
"cyan":["#5aefef","#25d0d0","#00d2d27f"]
It is possible to define your own colours by providing an array of length 3 containing RGB or RGBA hex-coded colours, representing ["LED center colour", "LED edge colour", "LED glow colour"].
To simplify access to the LED state, LEDicator comes with the following methods:
setState(state_index) sets the state to the given option index (integer)
getState() returns the currently display option index (integer)
These methods are accessible in this way:
$("#id_of_your_select_element").setState(3);
var state = $("#id_of_your_select_element").getState();
For now, only one custom property is accessible:
$("#...").ledicator.enabled : if true, the LEDicator instance changes upon clicking (increment by 1).
LEDicator is licensed under the GPL v3.0.