Industrial UI Components for Browser HMI and SCADA Applications

Faceplate, status tiles, strip chart and alarm banner

The components above are the packaged elements running on simulated data. Click ACK on an alarm to acknowledge it.

Standard custom elements, one convention

Load the styles and the bundle, put an element on the page, listen for its request event. The faceplate raises its requests while interactive is set; the application writes to the plant and sets the value from what the plant reports, so the screen never shows a value the process does not have.

<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 src="node_modules/smart-industrial/source/smart.industrial.js"></script>

<smart-faceplate id="tic101" tag="TIC-101" description="Reactor temperature" unit="°C"
                 process-value="72.4" setpoint="75" output="41.2" mode="auto" interactive>
</smart-faceplate>

const loop = document.getElementById('tic101');

loop.addEventListener('setpointChange', async (event) => {
    // the operator asked for a setpoint; write it to the plant
    const confirmed = await gateway.write('TIC-101.SP', event.detail.value);

    // the faceplate shows the value the plant reports
    loop.setpoint = confirmed;
});

session.subscribe('TIC-101.PV', (sample) => {
    loop.processValue = sample.value;
    loop.quality = sample.quality;
});

The same component in Angular, React, Vue and Blazor.

Components

Each component has a demo with its source in HTML, Angular, React and Vue, a getting started page per framework, an accessibility page, a CSS page and an API reference. A control that writes to the plant raises a request event and keeps its value until the application has written to the plant and confirmed it; the events table of each component says which of its events are requests.

Faceplate

<smart-faceplate>

Faceplate is a control loop faceplate that shows the process value, the setpoint and the controller output of a loop together with its mode.

Demo Docs API

Alarm Grid

<smart-alarm-grid>

AlarmGrid is an ISA-18.2 alarm summary.

Demo Docs API

Mimic

<smart-mimic>

Mimic is a process diagram canvas.

Demo Docs API

Trend

<smart-trend>

Trend is a historian trend chart for process data.

Demo Docs API

Control Chart

<smart-control-chart>

ControlChart is a Shewhart control chart for statistical process control.

Demo Docs API

State Machine

<smart-state-machine>

StateMachine displays the state model of a machine as a diagram with the current state highlighted, the time in the state, the unit mode and the commands that are available from the…

Demo Docs API

Waveform Graph

<smart-waveform-graph>

WaveformGraph displays complete records against engineering axes: waveforms with a start time and a sample interval, or XY pairs.

Demo Docs API

E-Signature

<smart-esignature>

ESignature provides the electronic signature dialog described in 21 CFR Part 11.

Demo Docs API

Alarms and status Operator screens and process graphics Production floor Recipes, orders and scheduled jobs Maintenance and sites Safety and interlocks Trends and signals Model outputs Instrument readouts and controls Machine state, sequences and sessions Electronic records (21 CFR Part 11) Test and measurement

Operator Screens

Complete screens built from the components, with keyboard support and both ISA-101 themes. Each one has its source on its page and can be copied as a starting point.

Overview

A plant overview display with unit status, key values and active alarms.

Alarms

ISA-18.2 alarm management with an alarm summary, banner, shelving and alarm states.

Mimic

A process mimic with live symbols and pipes. Clicking a symbol opens its faceplate.

Batch

An ISA-88 unit procedure, the batch record and release with an electronic signature.

Vibration Analysis

A bearing under analysis: spectrum with order markers, shaft orbit, run-up spectrogram and third-octave levels against a limit, with the ISO 10816-3 zone.

Safety

Safety interlocks with a live cause and effect matrix, device faceplates, bypasses under signature and the trip record.

Andon

An andon board with a stack light per station, a state timeline for the shift, counts against target, calls and alarms.

KPI Wall

OEE, count against target, downtime Pareto, SPC and alarm KPIs on one display.

All 31 screens AI Analysis Alarm Performance Alarms Andon Anomalies Asset Detail Batch Connectivity Copilot DAQ Acquisition KPI Wall Localization Logic Analyser Login Maintenance Mimic Mobile Supervisor Overview Packaging Oee Presets Pump Station Reports Safety Sequence of Events Settings Shift Handover Showcase Test Sequence Trend Units Vibration Analysis

Screens, alarms, logic, station

A builder for operator screens on these components. The screens are components on a grid bound to tags; the alarms are a table of conditions on tags, raised by the station whether or not a screen is open and acknowledged on any of them; the logic is a block diagram, typed wires between nodes, run by data; the station talks Modbus TCP and RTU, Siemens S7, EtherNet/IP for Allen-Bradley, OPC UA (as client and as server), MQTT and HTTP, keeps the users, the audit trail and the alarm history, and serves the screens to any browser. For a bench, it also speaks SCPI over TCP and serial, and VISA, in beta until a path has met a device (the hardware page lists them).

Connectivity, Units, Records and Engineering Maths

The shared modules are plain JavaScript functions without a DOM dependency. They are included in the bundle and available as ES modules, so they can also run in a worker or on a server.

JavaScript, Angular, React, Vue and Blazor

The components are standard Custom Elements and work in any framework. Typed React and Angular wrappers ship in the package as separate entry points, and the Blazor components ship as a NuGet package.

The frameworks guide has the installation steps and an example for each framework.

Conformance Statements

Each statement lists what the components provide for the standard and what remains the responsibility of the application.

• Security Statement Network activity, storage, input handling, Content Security Policy, dependencies and the IEC 62443 mapping.
• WCAG 2.2 Conformance Report Level AA conformance, measured, with a known limitations section.
• ISA-101 How the two themes use colour, and what the application still has to do.
• ISA-18.2 Which of the alarm lifecycle stages the alarm components cover.
• 21 CFR Part 11 and GAMP 5 Clause by clause: what the components provide and what the system has to provide.
• IEC 61511 / ISA-84 What the cause and effect matrix and the device faceplates show of a safety instrumented system, and what stays in the SIS.
• ISA-88 and PackML The state models built into the state machine, and what the components do not execute.
• ISO 10816-3 The vibration evaluation zones the asset templates use.
• IEC 61850 Sequence of Events How the sequence-of-events display keeps microsecond timestamps intact.

Guides

• Getting StartedInstall the package, load the styles and the components, and build a first screen.
• ConnectivitySessions, adapters and bindings that route plant tags into components, with quality and staleness.
• Engineering UnitsUnit conversion, resolution, unit systems and conversion through bindings.
• LocalizationThe German, French, Spanish and Chinese packs, applyLocale() and how to write a pack.
• Themes and StylingThe base theme, the elements stylesheet, the two ISA-101 themes and their CSS variables.
• Angular, React, Vue and BlazorInstall and import the components in each framework, and handle the request events.
• Electronic Records and SignaturesThe audit trail, electronic signatures and what the application is responsible for.
• Engineering MathsDSP, statistical process control and series reduction functions, usable without the components.
• AI AnalysisContext reduction for an operator assistant: what a model receives and what it does not.
• PerformanceMeasured throughput of the strip chart, scope, trend, alarm grid, heatmap, terminal and audit trail, and how the figures are achieved.
• From a front panel to the browserEvery control and indicator of a test-and-measurement front panel mapped to a component, the mechanical actions, and where the data comes from.
• Versions, Browsers and SupportRelease and version policy, supported browsers and frameworks, evaluation, license and support.
• Release NotesWhat each version contains, starting with the first release.

All topics, including the component pages, the API reference for each framework, the accessibility pages and the conformance statements.

Questions an evaluation asks first

Which frameworks does Smart.Industrial support?

JavaScript and TypeScript, Angular 13 and later (the wrappers are NgModules; a standalone component imports the module, from Angular 14), React 18 and later, Vue 3.2.38 and later (earlier versions of Vue 3 do not deliver camelCase events such as setpointChange), and Blazor Server and WebAssembly on .NET 6 and later. The Angular and React wrappers ship inside the smart-industrial package; the Blazor components are the Smart.Blazor.Industrial NuGet package.

Does it connect to OPC UA, MQTT or Modbus?

A browser cannot speak these protocols directly. Smart.Industrial.Connect routes tags from a WebSocket, SSE or HTTP gateway, or from your own client, into component properties, with data quality and staleness handling, and includes payload mappers for OPC UA and Sparkplug gateways.

Is it ISA-101 compliant?

The two themes and the HMI shell follow the ISA-101 use of colour and display hierarchy. A theme cannot conform on its own; the ISA-101 conformance statement lists what the application still has to do.

Does it support 21 CFR Part 11?

The E-Signature, Signature Block and Audit Trail components provide the client-side parts: the signing dialog, the signature manifestation, and a hash-chained, time-stamped audit trail. Identity verification, retention and the server-side copy of the trail belong to the system; the Part 11 statement lists the division clause by clause.

Does the library send data anywhere?

No telemetry. The library makes no request of its own: the license key is checked on the device. The only outbound connections are the data sessions the application opens through Connect and the AI module, when the application configures it. The security statement lists them.

Can it run offline or on an air-gapped station?

Yes. The components run without any connection, and the license key is checked on the device, so a station that never has Internet access runs licensed like any other.

Does it work on touch panels?

Yes, with some care. A touch density (density="touch") makes the targets of the HMI shell at least 44 px, and the momentary button, numeric keypad, selector switch, jog panel, e-signature and audit trail have a touch density of their own, set on each of them. The touch keyboard and the numeric keypad are made for a touch panel. The other components keep their desk size inside a touch shell: the faceplate's mode buttons, for example, stay about 19 px high.

Can it replace a test-and-measurement front panel in a browser?

The graphs and controls of the usual front-panel palette have a component here: the waveform and XY graph, the intensity graph and chart, the digital waveform, the Bode and polar plots, the octave band analyser, the VISA and DAQ resource picker, and the switches, LEDs, meters and knobs. The front panel guide maps them one by one. The data comes from a gateway or web service in front of the instrument, because a browser has no instrument driver.

How is Smart.Industrial licensed?

Per developer, perpetual and royalty free, separately from the Smart UI suite, with a free 30-day evaluation that includes technical support. Terms and pricing are at htmlelements.com/license.

Free 30-day trial

Smart.Industrial is commercial software and is licensed separately from the Smart UI suite. The package installs without a license key and runs in evaluation mode with a watermark. The 30-day trial includes technical support. A license key removes the watermark; see the getting started guide for how to apply it in JavaScript, Angular, React, Vue and Blazor.

License terms and pricing: htmlelements.com/license. Technical support: support@jqwidgets.com, and the forum.

Smart.Industrial follows the Smart UI release schedule and version number. smart-webcomponents does not contain the Industrial components and smart-industrial does not contain the Grid, the Scheduler or the rest of the suite. An application that needs both installs both packages.