I love the look of a seven segment display. They are found all over the place in real world electronics and when incorporated into your UI, they can add a lot of character to your application.
So what's better than a seven segment display? How about a sixteen segment display? Sixteen segment displays look great and can represent a wide range of characters including letters and punctuation. This control is a sixteen segment display that is based on the HTML5 canvas and is fully customizable and extensible.
You can find the source code at the GitHub repository. Also check out the demo page for a live example.
Using the Code
The first step is to download the code and include the script in your webpage. To add a sixteen segment display to your page, create a new
SixteenSegment object and pass the
Canvas and number of display elements as parameters to the constructor. The
canvas parameter is the only required argument. There are additional parameters you can pass to customize the display but they all have default values.
<canvas id='c' width='600' height='250'>Not supported</canvas>
var canvas = document.getElementById('c');
var segment16 = new SixteenSegment(canvas, 6);
var segment16 = new SixteenSegment();
segment16.Canvas = canvas;
By default, the display will set its width and height equal to that of the
canvas. This is convenient because the display automatically fills the canvas area and you can control the dimensions of the element in HTML and CSS. If you want to explicitly set the dimensions of the display, you can set these properties manually.
var segment16 = new SixteenSegment(canvas, 4, 200, 100);
var segment16 = new SixteenSegment(canvas, 4);
segment16.Width = 200;
segment16.Height = 100;
var segment16 = new SixteenSegment(canvas, 4, 200);
var segment16 = new SixteenSegment(canvas, 4, null, 200);
Additionally, you can set the position of the display on the
canvas by adding
y coordinates. These coordinates are relative to the top right corner of the
canvas and default to
var segment16 = new SixteenSegment(canvas, 4, 200, 100, 100, 50);
var segment16 = new SixteenSegment(canvas, 4, 200, 100);
segment16.X = 100;
segment16.Y = 50;
Using these settings, multiple displays can share the same
canvas.width = 410;
canvas.height = 100;
var segmentA = new SixteenSegment(canvas, 4, 200, 100, 0, 0);
var segmentB = new SixteenSegment(canvas, 4, 200, 100, 210, 0);
Customizing the Display
The display defaults to a standard looking sixteen segment display which I think looks pretty sharp.
If this meets your needs, then you are all set. However if you want a display that looks a little different, you have the ability to customize the look through several properties. The demo page lets you experiment with different settings to see how they affect rendering of the display. Try it out by downloading the source code or you can check out the live example.
var segment = new SixteenSegment(canvas, 6);
segment.SegmentWidth = 0.16;
segment.SegmentInterval = 0.05;
segment.BevelWidth = .06;
segment.SideBevelEnabled = false;
segment.FillLight = '#86fd06'
segment.FillDark = '#004400'
segment.StrokeLight = '#007700'
segment.StrokeDark = '#440044'
segment.LineWidth = 0;
segment.Padding = 10;
segment.Spacing = 5;
segment.X = 0;
segment.Y = 0;
segment.Width = 200;
segment.Height = 100;
This gives you a pretty wide variety of styles that are possible.
Custom Display Patterns
Characters are mapped to display patterns through the
CharacterMasks property. This property is a lookup object which holds display patterns indexed by character. The display pattern describes which segments should be turned on. This information is encoded in a 16 bit number as a bitmask with a bit for each segment. A
1 indicates that the segment should be turned on and a
0 indicates it should be turned off.
CharacterMasks object contains display patterns for all alphanumeric characters. You can add additional characters or create your own custom display patterns by adding new values to the lookup. The value of the bitmask should be a 16 bit number with a bit set to 1 for each segment that should be turned on.
To display the character '
A', you need to turn on 8 segments.
var charMasks = SixteenSegment.prototype.CharacterMasks;
charMasks['A'] = a1 | a2 | b | c | g1 | g2 | e | f |;
charMasks['A'] = parseInt('1111001111000000', 2);
charMasks['A'] = 0x3CF;
charMasks['A'] = 975;
The preferred way to set a display pattern is to use the segment bitmasks. A variable for each segment holds the bit that turns on its segment. When multiple segment masks are binary or'ed together, you get a value the represents the desired pattern. This makes reading and creating new patterns very intuitive.
var a1 = 1 << 0, a2 = 1 << 1, b = 1 << 2, c = 1 << 3,
d1 = 1 << 4, d2 = 1 << 5, e = 1 << 6, f = 1 << 7,
g1 = 1 << 8, g2 = 1 << 9, h = 1 << 10, i = 1 << 11,
j = 1 << 12, k = 1 << 13, l = 1 << 14, m = 1 << 15;
charMasks['-'] = g1 | g2;
Extending the Display
The sixteen segment display is made up of three function objects.
SegmentArray is responsible for setting the display patterns and storing the value of multiple elements. It is independent from rendering the control or drawing anything to a canvas. This object just manages setting the bit pattern for each element given a text input.
SegementCanvas provides generic functionality for drawing the display to the canvas. This includes properties for customizing the shape and position of the display. It requires that an inheriting object implement the details that define the shape and number of segments.
SixteenSegment extends the
SegmentCanvas object with functionality specific to a sixteen segment display. This means it has to set two properties. The
Points property defines the segment geometery for a sixteen segment layout. The
CharacterMasks property provides a lookup that maps characters to their desired sixteen segment pattern.
This means that new display types can be created in the same way by extending the
SegmentCanvas object and implementing the
Points array and
CharacterMasks lookup. For instance, it’s pretty easy to add a seven segment display. The
SevenSegment object contains only the code specific to defining its 'seven-ness'. All other code is reused.
var seven = new SevenSegment(canvas, 6);
Points of interest
To find out more about how the segment points are calculated, I highly recommend reading the article by Liu Xia in the links below. He does a great job of visually explaining how to calculate the position of each segment and I use basically the same method for the sixteen segment display. I also recommend looking at the always excellent work of Dmitry Brant and his Seven Segment LED Control For .Net.
- Add character bitmasks -
SixteenSegment currently supports numbers and captial letters as well as a few puctuation characters. As was described in this article, adding additional character bitmasks is pretty easy. It's just a matter of spending the time to map them all out. One of the advantages of the sixteen segment display is that it can represent a wide range of characters very accurately, lower case letters being a great example. I have set this up as an open source project so if anyone is interested in working on this, you should go to GitHub and send me a pull request with the additions.
- Add a decimal segment
- Add a colon and support for displaying time
- In addition to the
DisplayText method, add
DisplayTime functions to auto format those datatypes
- Add shearing - Segmented displays are commonly shown a little slanted. I'd like to add a setting to control the amount of shear applied to the elements.