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 Blazor

The Razor component is <SevenSegment> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<SevenSegment @ref="sevenSegment" Digits="42" />

@code {
    SevenSegment sevenSegment;

    // Task<string> DisplayText()
    void Call() => sevenSegment.DisplayText();
}

Properties

Parameter	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	int 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	bool 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	int 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	bool 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	object	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
Task<string> DisplayText()	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