Instrument readouts and controls
<smart-panel-meter>PanelMeter draws the moving-coil instrument screwed into the front of a rack: a rectangular case, a shallow arc of scale across the top of it and a long needle swinging from a pivot near the bottom.
It is not a gauge with its arc cut down; the geometry exists because the pointer is a physical arm, and with it come the things a dial has no use for: the anti-parallax mirror band, end stops that pin the needle and raise an over-range flag while the reading is still reported, the damping of the coil, and a centre-zero movement. It extends the scale engine, so logarithmic scales, units, precision, alarm bands and reading quality behave as they do on the gauge, the thermometer and the knob. It does not clamp the reading: a value past either end of the scale pins the needle against that stop and raises OVER or UNDER on the plate, and a value that is not a finite number, such as null or NaN, removes the needle and shows NO DATA. The whole face is drawn in one viewBox, so it scales to any size and prints at any resolution.
<smart-panel-meter>smart-industrial/source/modules/smart.panelmeter.jsPanelMeterModule from smart-industrial/angular/panelmeterPanelMeter from smart-industrial/react/panelmeter<PanelMeter> 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.panelmeter.js"></script>
<smart-panel-meter id="bus" label="Bus" unit="V DC" min="0" max="30" value="24.1" show-value
precision-digits="1" interactive></smart-panel-meter>
const panelMeter = document.getElementById('bus');
// raised when the reading is changed through the component, which only happens when
// interactive is enabled
panelMeter.addEventListener('change', (event) => {
const { value } = event.detail;
// ...
});
// the same values as properties
panelMeter.precisionDigits = 1;
panelMeter.label = 'Bus';
panelMeter.unit = 'V DC';
panelMeter.showValue = true;
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 41 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
label | string | What is being measured, screened on the plate at the left of the movement. It is used as the accessible name of the component. |
max | number | Date | Sets or gets the top of the scale. A reading above it is kept as written: the needle rests against the right end stop and OVER is shown on the plate. |
min | number | Date | Sets or gets the bottom of the scale. A reading below it is kept as written: the needle rests against the left end stop and UNDER is shown on the plate. |
precisionDigits | number | Sets or gets how many digits are shown after the decimal point in the readout, the setpoint title and the accessible text. Values outside 0 to 20 are held to that range. null shows the reading as written, to at most twelve significant digits, so an arrow-key step never shows binary noise such as 0.30000000000000004. |
ranges | {startValue?: number | Date, endValue?: number | Date, className?: string}[] | This property is an array containing multiple objects, where each object defines a distinct range. Each range represents a colored area characterized by its own specific size and properties, such as start and end values, color, and label. These ranges allow you to visually differentiate segments according to predefined criteria on a graphical interface or data visualization component. |
showRanges | boolean | This property determines whether the gauge’s range indicators are displayed on the gauge component. When set to true, the range segments (such as colored bands or sections representing value intervals) will be visible on the gauge; when set to false, these range indicators will be hidden. |
showValue | boolean | Shows the digital reading under the case, at the precision set by precisionDigits. It is never damped, and it shows -- when there is no reading. |
unit | string | Sets or gets the unit of the reading, such as bar or °C. It is printed on the scale plate and after the digital reading while showUnit is set. Empty by default, so nothing is printed until a unit is given. |
value | string | number | date | Sets or retrieves the reading, as a number or a decimal string, in the unit of the scale. It is kept as written and never clamped: a reading past min or max pins the needle against that end stop, raises the OVER or UNDER flag on the plate and is read out as over range or under range, and the read-only offScale getter returns 'over', 'under' or ''. A value that is not a finite number - null, NaN, an infinity, an empty or non-numeric string such as '0x1F' - is no reading: the needle is removed, the case is dashed, NO DATA is shown on the plate, the readout shows --, and aria-valuenow is removed. With coerce and customInterval, the reading is snapped to the interval. |
centerZero | boolean | A centre-zero movement: the needle rests in the middle of the scale and a heavier zero line is drawn there. It sets nothing on the scale itself, which is min and max, it marks the rest position. |
The events carry their data in event.detail. The panel meter sets value as the operator drags the needle or presses an arrow key, only while interactive is true and readonly is false, and then raises change; the application reads the new value from event.detail.
| Event | Description and detail |
|---|---|
change | This event is triggered when the reading is changed through the component, which only happens when interactive is enabled.value number The new reading. |
| Method | Description |
|---|---|
refresh() | Redraws the face. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { PanelMeterModule } from 'smart-industrial/angular/panelmeter';
// Angular 14 and later; an NgModule application lists PanelMeterModule in its imports
@Component({
standalone: true,
imports: [PanelMeterModule],
template: `<smart-panel-meter label="Bus" [interactive]="true"
(onChange)="onChange($event)">
</smart-panel-meter>`
})
import { PanelMeter } from 'smart-industrial/react/panelmeter';
<PanelMeter label="Bus" interactive
onChange={(event: CustomEvent) => onChange(event.detail)} />
import 'smart-industrial/source/modules/smart.panelmeter.js';
<smart-panel-meter label="Bus" :interactive="true"
@change="onChange"></smart-panel-meter>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<PanelMeter Label="Bus" Interactive="true"
OnChange="OnChange" />
A panel meter says everything it says by the angle of a needle against an arc. None of that reaches a screen reader, so the reading is carried by the slider value attributes and everything else on the plate is carried in words by aria-valuetext: the reading with its unit, whether the needle is against an end stop, and the setpoint when a set pointer is drawn. The scale itself is marked aria-hidden — reading out every number printed on a plate is not the same as being told what the instrument reads.
| Key | Action |
|---|---|
| Tab | Moves focus to the instrument. |
| Up arrow, Right arrow | Raises the reading by one step: interval when customInterval is set, otherwise a hundredth of the scale. |
| Down arrow, Left arrow | Lowers the reading by one step. |
| Home | Sets the reading to the bottom of the scale. |
| End | Sets the reading to the top of the scale. |
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 8 CSS variables of its own, among them --smart-panel-meter-width, --smart-panel-meter-plate, --smart-panel-meter-bezel, --smart-panel-meter-ink. The CSS page lists them; the themes guide covers the tokens every component shares.
Bar Graph Bit Field Jog Panel Knob Momentary Button Numeric Keypad Selector Switch Seven Segment Thermometer Touch Keyboard