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 TypeScript

The package ships its definitions: SevenSegment is the element type and SevenSegmentProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-seven-segment') is typed as SevenSegment.

import { SevenSegment, SevenSegmentProperties } from 'smart-industrial/source/typescript/smart.industrial';

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

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(): 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