Instrument readouts and controls

Seven Segment <smart-seven-segment>

SevenSegment is a numeric display in the style of a seven-segment LED readout, for panel meters, totalizers and counters.

<smart-seven-segment> · 7 properties, 1 methods, 0 events · source/modules/smart.sevensegment.js

Usage in JavaScript

The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").

const sevenSegment = document.querySelector('smart-seven-segment');

sevenSegment.digits = 42;
sevenSegment.displayText();

Properties

Property	Type, default	Description
color	string	Sets or retrieves an explicit CSS colour for the segments, overriding the theme. The component applies it as the --smart-seven-segment-color variable in its own inline style and rewrites that variable at every redraw, so set the colour through this property or in a stylesheet rule.
digits	number 4	Sets or retrieves how many digit positions are shown. A minus sign occupies a position, as it does on a real panel meter. The component draws 1 to 32 positions; a value outside that range is held to it, a value that is not a number draws 4, and either case writes a console warning.
leadingZeros	boolean false	Sets or retrieves whether unused leading digits are padded with zeros instead of left blank. A counter usually shows leading zeros; a measurement usually does not.
precisionDigits	number 0	Sets or retrieves the number of decimal places. The decimal point is drawn on the digit preceding the fraction and does not consume a digit position.
showOffSegments	boolean true	Sets or retrieves whether unlit segments are drawn faintly. The default is true. Boolean attributes are presence-based, so show-off-segments="false" in markup enables the option; set the property from script to disable it.
unit	string	Sets or retrieves the engineering unit rendered beside the digits.
value	number | null	Sets or retrieves the displayed value: a number or a decimal string. Null, an empty string, other text and values of other types blank the display. NaN or an infinity shows dashes, the readout of a meter with no signal.

Methods

Method	Description
displayText() returns string	Returns the characters currently shown, one per digit position: blanks for padding or no value, '-' in every position for NaN or an infinity, '‾' in every position over range and '_' in every position under range. The decimal point is not part of this string.

CSS variables

The component declares 6 CSS variables; the CSS page shows how to set them.

--smart-seven-segment-color --smart-seven-segment-off-opacity --smart-seven-segment-background --smart-seven-segment-height --smart-seven-segment-gap --smart-seven-segment-unit-color