Example
Features
- No images. All graphics are drawn using HTML SVG that scales to any size.
- No external CSS file. Default style classes are injected into your page.
If you want to tailor the style classes in your own CSS you can.
You can also style the individual widgets via options. It's your choice. - Databinders for Knockout MVVM.
- MIT License.
Usage
Include jQuery and jQuery UI in your HTML before including sevenSeg.js. If you intend to use Knockout it needs to be included before sevenSeg.js too, but it's completely optional.
You can then instantiate sevenSeg
widgets on any div's of your choosing.
Each sevenSeg
may contain any number of discrete seven-segment digits.
You specify the number of digits using the digit
option.
These are the widget options supported by sevenSeg
(and their defaults):
options: {
/**
Defines the number of digits that comprise the array of discrete seven-segment displays.
*/
digits: 1
/**
This option controls the display value on the 7seg. Set this to the numeric value you
want displayed. The least significant digit will be rendered in the rightmost seven-segment digit display.
More significant digits that exceed the limits of the number of digits you configured for the display
will simply be omitted.
Setting it to null will blank the display.
*/
value: null,
/**
Set this to true to allow sevenSeg to respond to the mousewheel event, which
will allow you to change the display value by spinning the mousewheel up or down.
(The default step is +/- 1, but you can set that in the 'step' option).
*/
allowInput: false,
/**
This setting controls the +/- delta value whenever the sevenSeg is incremented up or down (via mousewheel).
The allowInput option must be true for this setting to be of use.
*/
step: 1,
/**
This controls the number of decimal places displayed. The default -1 results in no rounding and displays the value
as-is. A value of 0 or more defines the number of fixed decimal places that the numeric value will be rounded to.
If you intend to set display values that are the result of floating point operations, including the
use of allowInput=true and a fractional step size, then you most definitely want to set this to a specific value to
avoid overflowing the display from floating point inaccuracies.
*/
decimalPlaces: -1,
/**
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
}
Basic Example
// In your HTML you have something like this: // <div id="example1"></div> // Then in script you simply do this. Nothing to it! // $("#example1").sevenSeg({ value: 5 });
Note: You will certainly want to style your div to your liking particularly the height and width. For these examples I'm doing something like:
padding: 0.5em; height: 100px; width: 100px;
Multiple Digits
You can create arrays of seven-segment displays by specifying the digits
option.
// In your HTML you have something like this: // <div id="exampleArray"></div> // Then in script you can do this. // $("#exampleArray").sevenSeg({ digits: 5, value: 12.35 });
Using Knockout sevenSeg Databinding
If you are using Knockout, then it gets even easier. Let's assume you have a View Model with a testValue1
observable.
You can then use the sevenSeg
databinding in your markup.
(Change the value in the edit box and Knockout will keep the sevenSeg in sync).
You may notice that negative numbers will render a minus symbol in the array.
<div data-bind="sevenSeg: {digits: 5, value: testValue1}"></div>
Mousewheel Input and 2-way Databinding
You can configure sevenSeg
to also allow user input by setting the allowInput
option.
This will cause sevenSeg
to respond to mousewheel events in order to step the numeric value up and down.
Additionally, you can set step
and decimalPlaces
if needed to achieve the desired
numeric step size and rounding, respectively.
When used with a Knockout, this results in a two-way databinding that will update your observable with the
new value.
Go ahead and give the mousewheel a try on the sevenSeg
below!
Move the mouse pointer over the display, then spin the wheel up or down. The value will increment
or decrement by 0.1 depending upon the direction you move the wheel. Notice that the two-way databinding keeps the
observable (and thus the edit box) in sync. You can still edit the value in the edit box too.
<div data-bind="sevenSeg: { digits: 5, value: testValue2, allowInput: true, step: 0.1, decimalPlaces: 1 }"></div>
Inside of a jQueryUI resizable
This demonstrates the dynamic sizing capabilities of sevenSeg. In this example, a sevenSeg
widget is wrapped in a jQueryUI resizable
widget. This allows you to pull the gripper in the corner
to resize the display to whatever size you like.
Go ahead and give it a try!
HTML Markup
<div id="testResizableDiv" class="exampleContainer resizableExample"> <div id="testSegInsideResizable"></div> </div> <div id="testResizableDiv2" class="exampleContainer resizableExample" style="width: 275px;"> <div id="testResizableArray"></div> </div>
CSS
.exampleContainer { display: inline-block; background-color: Black; border-radius: 5px; margin-left: 12px; } .resizableExample { margin: 1em; padding: 0.5em; height: 120px; width: 80px; } .resizableExample div:first-child { height: 100%; }
Script
$("#testResizableDiv").resizable({ aspectRatio: true }); $("#testSegInsideResizable").sevenSeg({ value: 8 }); $("#testResizableArray").sevenSeg({ digits: 3 }); $("#testResizableDiv2").resizable({ aspectRatio: true }); var iArrayValue = 0; setInterval(function() { $("#testResizableArray").sevenSeg({ value: iArrayValue }); if(++iArrayValue > 999) { iArrayValue = 0; } }, 50);
Full Page sevenSeg
Click this link to view a full-page sevenSeg demonstration.Put your browser in full-screen mode and voilà, DIY scoreboard!
Customizing Options
This sevenSeg was created with the following options:
$("#testArray1").sevenSeg({ digits:5, value:-98.76, colorOff: "#003200", colorOn: "Lime", slant: 10 });
jQuery UI Widget Create and Destroy
Whole Lotta Seven-Segment Displays
<div data-bind="sevenSeg: { digits: 50, value: '2727653170286030230.4546439762795232493021364947166' }"></div>
Sheesh! That's more than you can shake a stick at. Notice that this insane number has actually been passed as a string.