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 Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.sevensegment.js';

<smart-seven-segment ref="sevenSegment" :digits="42"></smart-seven-segment>

// methods are called on the element the ref holds
sevenSegment.value.displayText();

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-seven-segment :items.prop="items"></smart-seven-segment>

Properties

Binding	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.
:leading-zeros 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.
:precision-digits 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.
:show-off-segments 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(): 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