Overview

Design your own segment display with this Web App. Choose between 7, 14 or 16 segments, experiment with the settings for the geometry, colors and output formats.

On the basis of your inputs, the App automatically generates the appropriate JavaScript source code. You can copy it here and build it directly into your website

Geometry

Segment count
Segment form
Digit height
Digit width
Digit distance
Display angle
Segment width
Segment distance

When playing with the geometry values, – especially with the number of segments, their width and spacing – overmodulation or flaring can easily occur. Though this does create interesting effects, it ends up making the display illegible. One click on “Reset values” sets sensible parameters for the chosen number of segments.

Colors

Segment on
Segment off
Background color

The colors set for segments switched on or off are deployed automatically as hexadecimal color specification in the source code located further below on this page.

Here an added suggestion for several color combinations:

Display

Example

Pattern
Value

The layout for the display is defined via a pattern comprised of a combination of the following characters:

# ' Segment display

Numerals, hyphenation, underlining and the letters A, b, C, d, E, F, H, L, n, o, P, r, t, U and Y can be displayed using a seven-segment display. In addition to numbers, brief texts such as “Error”, “HELP”, “run” or “PLAY” can be displayed, too.

With fourteen and sixteen-segment displays, numerals, all Latin capital letters and the special characters +, -, ×, /, =, \, $ and @ can be depicted.

Using the sixteen-segment display, the special characters % and ° can be displayed as well.

. ' Period
: ' Colon
'   ' Blank space and/or double character spacing

For instance, the pattern ##:##:## can be used to display the time. By doing so, two slots apiece are respectively reserved for hours, minutes and seconds, and these blocks are separated from each other by a colon.

The display is then driven by transferring a character string termed the ‘value’ here. The characters in the value are compared with the pattern going from left to right. If a character fits the pattern, for example the character 'A' for the pattern '#', then this character is displayed. Otherwise the corresponding element remains dark. If the value '#' is transferred for a character, then all of the segments light up.

Example: As described above, the 8-digit pattern ##:##:## is used for the clock. If the colons are supposed to light up, then a colon must be transferred onto the third and sixth digits within the value, too. If they are supposed to remain dark, then some other character has to stand in these positions. In the case of single-digit hours (0 to 9 a.m.), unlike the minutes and seconds, no preceding zero is displayed. In this case, that’s why there is a blank space at the first digit of the value.

It sounds more complicated than it is. Just give it a try.

JavaScript

The segment display shown to the right has been realized using JavaScript and the <canvas> tag. This tag is an integral component of HTML 5 and is supported by all modern browsers; unfortunately, Internet Explorer up to Version 8 is not among them. To make the <canvas> tag usable for Internet Explorer users, the open source project explorercanvas at least makes the basic functions available with the help of a small JavaScript library.

The following describes how you can integrate the segment display into your HTML pages. All you need to accomplish this is the JavaScript class seven-segment-display and, if you want give consideration to Internet Explorer users as well, the explorercanvas JavaScript library.

Integration into the HTML document

Like any other HTML tag, the <canvas> tag is declared and recognizes the 3 attributes id, width and height. Issue an id that makes sense – "display" for instance – and any width and height desired for the element. The display is centered within the <canvas> tag, its size is adapted appropriately. If a browser is unable to depict the segment display, the included text is shown to the user.

<canvas id="display" width="260" height="140">
  Your browser is unfortunately not supported.
</canvas>
            

JavaScript Code

The JavaScript Code below is automatically generated from the settings for the sections “Geometry”, “Colors” and “Display”. This way you can design your own segment display, then afterwards simply copy the source code generated.

The first 3 lines are of interest only for Internet Explorer up to Version 8. You integrate the JavaScript library excanvas.js via a Conditional Comment; other browsers ignore this instruction.

The script assumes that the two JavaScript libraries seven-segment-display.js and excanvas.js are located in the same directory as the HTML page with the <canvas> tag. If this is not the case with you, then you have to change both path specifications appropriately.

The script furthermore assumes that you are using the name display as the <canvas> id on the HTML page, as was the case in the abovementioned example. If you prefer another id, then you have to adapt the source code here, too.

            

Once all this has been done, the segment display is initialized and merely displays the switched-off segments at first. The characters and/or segments can now be set using the function setValue(value).

  display.setValue('12:34:56');
            

The digital clock to the right can be written equally quickly. To do this, the function animate() is activated every 100 milliseconds. This function generates a new JavaScript object, Date, which is initialized using the current date and time. Hours, minutes and seconds are subsequently read out, prepared for the format ##:##:## and transferred to the segment display via display.setValue(value). The clock is now up and running.

  window.setInterval('animate()', 100);
  
  function animate() {
    var time    = new Date();
    var hours   = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    var value   = ((hours < 10) ? ' ' : '') + hours
                + ':' + ((minutes < 10) ? '0' : '') + minutes
                + ':' + ((seconds < 10) ? '0' : '') + seconds;
    display.setValue(value);
  }
            

Another bit of advice: This page integrates the JavaScript framework jQuery and uses this intensely. As a result, the HTML source code for this page is not readily understandable for one and all. On the other hand, the JavaScript segment display does not depend on jQuery and can be used with every other JavaScript framework, or even without one like it.

Download and Terms of Licensing

The two JavaScript files segment-display.js and excanvas.js along with an example of an HTML page are compiled here for downloading in a ZIP file:

The script is governed by the Creative Commons 3.0 Lizenz. and may be used freely for private and commercial purposes. I would be glad if reference is made to the author or if a link to this website is posted.