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.

Stylesheet

The component is styled by source/styles/default/smart.sevensegment.css, which is included in smart.industrial-elements.css. It uses the theme's CSS variables and the Industrial tokens (--smart-industrial-*) described in the Themes and Styling guide, so it follows the theme applied to the page.

CSS variables

The component declares 6 CSS variables of its own, on the component itself. Set them in a rule that selects the component, loaded after the component's stylesheet: smart-seven-segment, or a class or an id on it. A value set on a container does not reach the component, because the component's own declaration replaces the inherited one.

smart-seven-segment {
    --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: ...;
}

/* one instance */
#sevenSegment {
    --smart-seven-segment-color: ...;
}

One variable is written inline by the component's script, and an inline value replaces any stylesheet rule:

• --smart-seven-segment-color is written on the component from the color property; while color is empty the component removes the inline value, including one the application wrote.

Set it through the property rather than in CSS.

Themes

Two ISA-101 themes ship with the package: smart.industrial.css and smart.industrial-dark.css. Load one after the base theme and set theme="industrial" or theme="industrial-dark" on the body element. The demo page switches between the three.

<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.default.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial-elements.css" />
<link rel="stylesheet" href="node_modules/smart-industrial/source/styles/smart.industrial.css" />

<body theme="industrial">