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 Angular

The Angular wrapper is SevenSegmentComponent from SevenSegmentModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { SevenSegmentModule, SevenSegmentComponent } from 'smart-industrial/angular/sevensegment';

<smart-seven-segment #sevenSegment [digits]="42"></smart-seven-segment>

@ViewChild('sevenSegment', { read: SevenSegmentComponent }) sevenSegment!: SevenSegmentComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.sevenSegment.displayText();

Properties

Input	Type, default	Description
[color] 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] 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] 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] 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] 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] unit	string	Sets or retrieves the engineering unit rendered beside the digits.
[value] 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(): Promise<any> and displayTextSync(): 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