Instrument readouts and controls
<smart-bar-graph>BarGraph is a segmented level meter, such as the column of lit blocks on an audio console or a vibration monitor.
It extends Tank, so min, max, value, interval, coerce, logarithmicScale, precisionDigits and inverted work as they do on Tank. The alarm ranges colour the segments while showRanges is set, the unit is written with the value while showUnit is set, orientation lays the bar vertically (the default) or horizontally, and rightToLeft reverses the Left and Right arrow keys. Tank's scientificNotation and mechanicalAction are inherited, but the bar graph does not apply them. The component adds the segmented display and peak hold, which keeps short transients visible. A lit segment in the normal range takes the process colour (--smart-bar-segment-on); green, amber and red come only from ranges marked ok, warning or critical. An aria-label written by the author names the meter.
<smart-bar-graph>smart-industrial/source/modules/smart.bargraph.jsBarGraphModule from smart-industrial/angular/bargraphBarGraph from smart-industrial/react/bargraph<BarGraph> in Smart.Blazor.Industrial
Install the package, load the two stylesheets and the component's module, and put the element on the page. The element below is the first one of the demo, with interactive added: the component raises change only when interactive is set. Put the script after the module, in a <script type="module">, so that it runs once the component is defined.
npm install smart-industrial
<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" /> <script type="module" src="node_modules/smart-industrial/source/modules/smart.bargraph.js"></script> <smart-bar-graph id="ch1" interactive></smart-bar-graph>
const barGraph = document.getElementById('ch1');
// raised when the value changes through a click or the keyboard
barGraph.addEventListener('change', (event) => {
const { value } = event.detail;
// ...
});
// example values
barGraph.peakDecay = 25;
barGraph.peakHold = true;
barGraph.peakHoldTime = 3000;
The getting started guide covers the bundle, the ISA-101 themes and the license key; the connectivity guide covers feeding the properties from plant tags.
The properties the demo sets, then the next ones; the API page lists all 7 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
peakDecay | number | Sets or retrieves the rate at which a held peak falls after its hold time expires, in scale units per second. 0 drops the peak straight back to the signal; a small value makes it fall gradually, like an analogue meter, which keeps a burst of transients readable. The fall is steady, measured from the peak as it was caught, however often the value updates. |
peakHold | boolean | Sets or retrieves whether the highest value reached is marked and held. Works the same set in markup or as a property, and after the meter is moved to another parent. |
peakHoldTime | number | Sets or gets the time in milliseconds a peak is held before it starts to fall. |
segments | number | Sets or retrieves the number of segments the bar is divided into. A segment lights when the value passes its lower edge, so half of the scale lights exactly half of the segments. Values below 1 draw one segment and values above 500 draw 500. |
showValue | boolean | Sets or retrieves whether the value is written beside the bar. |
interactive | boolean | Sets or retrieves whether the meter can be operated as a control. The meter is read-only by default and is not in the tab order, so that a meter which cannot be operated is not an empty tab stop. The property is named for the enabled state because boolean attributes are presence-based, and a property that defaulted to true could not be turned off from markup. A read-only meter has the meter role; an interactive one is a slider. A click on an interactive meter sets the value there, clamped and snapped to interval when coerce is set, and moves the display. |
segmentGap | number | Sets or gets the gap between segments in pixels. |
The events carry their data in event.detail. The bar graph sets value as the operator clicks or presses an arrow key, only while interactive is true, and then raises change; the application reads the new value from event.detail.
| Event | Description and detail |
|---|---|
change | This event is triggered when the value changes through a click or the keyboard. Only raised when interactive is set, a read-only meter reports nothing.value number The new value. |
| Method | Description |
|---|---|
resetPeak() | Clears the held peak, for example to reset the meters after an event. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { BarGraphModule } from 'smart-industrial/angular/bargraph';
// Angular 14 and later; an NgModule application lists BarGraphModule in its imports
@Component({
standalone: true,
imports: [BarGraphModule],
template: `<smart-bar-graph [interactive]="true"
(onChange)="onChange($event)">
</smart-bar-graph>`
})
import { BarGraph } from 'smart-industrial/react/bargraph';
<BarGraph interactive
onChange={(event: CustomEvent) => onChange(event.detail)} />
import 'smart-industrial/source/modules/smart.bargraph.js';
<smart-bar-graph :interactive="true"
@change="onChange"></smart-bar-graph>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<BarGraph Interactive="true"
OnChange="OnChange" />
The BarGraph is a segmented level meter. It is read-only by default and is not in the tab order, so that a meter that cannot be operated does not become an empty tab stop. Setting interactive turns it into a control, which is then focusable and keyboard-operable.
| Key | Action |
|---|---|
| Arrow Up/Right | Increases the value by interval. Only when interactive is set. Right is reversed under rightToLeft. |
| Arrow Down/Left | Decreases it by the same step. |
| Home / End | Jumps to the minimum / maximum. |
The accessibility page has every attribute, key and announcement; the WCAG 2.2 conformance report covers the whole library.
The component follows the theme on the page: the default theme, or the ISA-101 light and dark themes that ship with the package. It declares 5 CSS variables of its own, among them --smart-bar-graph-width, --smart-bar-graph-height, --smart-bar-segment-off, --smart-bar-segment-on. The CSS page lists them; the themes guide covers the tokens every component shares.
Bit Field Jog Panel Knob Momentary Button Numeric Keypad Panel Meter Selector Switch Seven Segment Thermometer Touch Keyboard