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="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="sevenSeg.js"></script>
    

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.

Fork me on GitHub