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
and sevenSegArray
widgets on any div's of your choosing.
sevenSeg
creates a single digit display, and sevenSegArray
creates a group containing an arbitrary number of digits. You'll most likely want to use sevenSegArray
.
(See examples below).
These are the widget options supported by sevenSeg
:
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
}
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: 7 });
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;"
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).
<div data-bind="sevenSeg: {value: testValue1}"></div>
Using sevenSegArray
This will show you how to create displays featuring multiple digits. To do this, you use the sevenSegArray
widget. Just like the single sevenSeg
, it too has a value
option. Except with sevenSegArray
, you can assign numbers containing more than one digit to value
.
// In your HTML you have something like this: // <div id="exampleArray"></div> // Then in script you simply do this. Nothing to it! // $("#exampleArray").sevenSegArray({ digits: 5, value: 12.35 });
Using Knockout sevenSegArray Databinding
There's a corresponding sevenSegArray
databinding for Knockout.
Let's assume you have a View Model with a testValue2
observable.
You can then use the sevenSegArray
databinding in your markup.
(Change the value in the edit box and Knockout will keep the sevenSegArray in sync).
You may notice that negative numbers will render a minus symbol in the array.
<div data-bind="sevenSegArray: {digits: 5, value: testValue2}"></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").sevenSegArray({ digits: 3 }); $("#testResizableDiv2").resizable({ aspectRatio: true }); var iArrayValue = 0; setInterval(function() { $("#testResizableArray").sevenSegArray({ value: iArrayValue }); if(++iArrayValue > 999) { iArrayValue = 0; } }, 50);
Full page sevenSegArray
Click this link to view a full-page sevenSegArray demonstration.Put your browser in full-screen mode and voilà, DIY scoreboard!