jQuery and jQuery UI Plugin For Seven-Segment Indicator - sevenSeg.js

sevenSeg.js is a jQuery & jQuery UI plugin for displaying decimal numerals in a seven-segment display using Html SVG image and Knockout.js.

Basic Usage:

1. Make sure to include jQuery javascript library and jQuery UI in your page

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include Knockout.js for databinder

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>

3. Include sevenSeg.js after jQuery library

<script src="sevenSeg.js"></script>

4. Create a container for the seven-segment indicator

<div id="demo"></div>

5. The javascript

$(function () {

$("#demo").sevenSegArray({ digits: 3 });
var iArrayValue = 0;
setInterval(function() {
$("#testResizableArray").sevenSegArray({ value: iArrayValue });
if(++iArrayValue > 999) { 
iArrayValue = 0; 
}
}, 50);

});

6. The options.

options: {
/**
This option controls the display value on the 7seg.  Set this to the numeric digit you
want displayed.
*/
value: null,

/**
Override the default segment on color (Red).  
Note: You can alternatively define a CSS style for the class.sevenSeg-segOn that specifies a 'fill' color.
*/
colorOn: null,

/**
Override the default segment off color (#320000).  
Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'fill' color.
*/
colorOff: null,

/**
Override the default background color of the display (Black).  
Note: You can alternatively define a CSS style for the class .sevenSeg-svg that specifies a 'background-color' color.
*/
colorBackground: null,

/**
This option allows skewing the segments to create a slant effect.
Note: Setting "transform: skew()" in CSS is problematic for SVG. Would be nice to have, but browser support just 
isn't there yet. So, setting the slant must be done through options.
*/
slant: 0,  

/**
This flag controls the appearance of the decimal point 'dot' in the display.
The default is to display it (true), but you can set to false to omit it.
*/
decimalPoint: true
},		

---

This awesome jQuery plugin is developed by BrandonLWhite. For more Advanced Usages, please check the demo page or visit the official website.