sevenSeg.js

A tiny JavaScript jQuery UI plugin for creating vector-based (SVG) seven-segment displays in HTML.

Example

Features

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="sevenSeg.js"></script>
    

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!

Customizing options

jQuery UI widget create and destroy

Fork me on GitHub