Smart.Industrial Demos

A demo for each of the 54 components and 31 complete operator screens. Every demo page shows the demo with its HTML, JavaScript and CSS, the same demo as an Angular, React and Vue project, and switches between the default theme and the two ISA-101 themes.

Alarms and status

Annunciator demoAnnunciator demo

Annunciator

<smart-annunciator>

Annunciator displays a wall of tiles, one per monitored condition, following the ISA-18.1 alarm sequence: normal, alarm (unacknowledged, blinking fast), acknowledged (steady) and…

Status Tile demoStatus Tile demo

Status Tile

<smart-status-tile>

StatusTile displays one process value with its label, unit, state and trend direction, for status walls and plant overview screens.

Multi-State Indicator demoMulti-State Indicator demo

Multi-State Indicator

<smart-multi-state-indicator>

MultiStateIndicator is a read-only lamp that shows one of several named states, such as running, stopped, manual, fault or unknown.

Operator screens and process graphics

HMI Shell demoHMI Shell demo

HMI Shell

<smart-hmi-shell>

HmiShell is the display frame for operator screens described in ISA-101.

Faceplate demoFaceplate demo

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.

Device Control demoDevice Control demo

Device Control

<smart-device-control>

DeviceControl is a faceplate for a discrete device such as a motor, a pump or an on/off valve.

Mimic Symbol demoMimic Symbol demo

Mimic Symbol

<smart-mimic-symbol>

MimicSymbol displays one piece of equipment on a process diagram, such as a pump, a valve, a tank or a motor, with its tag, state and reading.

Pipe demoPipe demo

Pipe

<smart-pipe>

Pipe displays a section of process line on a mimic diagram.

Production floor

Stack Light demoStack Light demo

Stack Light

<smart-stack-light>

StackLight displays the tower light of a machine as a column of coloured segments that can be off, on, flashing or flashing fast, with an optional horn.

State Timeline demoState Timeline demo

State Timeline

<smart-state-timeline>

StateTimeline displays the state history of one or more machines as coloured segments on a time axis, one row per machine.

Downtime Log demoDowntime Log demo

Downtime Log

<smart-downtime-log>

DowntimeLog lists every stop of a line and asks the person who was there why it stopped.

Shift Log demoShift Log demo

Shift Log

<smart-shift-log>

ShiftLog is the book on the control-room desk, kept where the screens are: what one shift needs the next to know that no tag says - that a filler jammed twice and was cleared by hand,…

Recipes, orders and scheduled jobs

Recipe Panel demoRecipe Panel demo

Recipe Panel

<smart-recipe-panel>

RecipePanel lists the recipes a line can be set to and loads one into the plant in a single action.

Order Queue demoOrder Queue demo

Order Queue

<smart-order-queue>

OrderQueue shows what a line is making, how far along it is, and what comes next.

Job Panel demoJob Panel demo

Job Panel

<smart-job-panel>

JobPanel shows what a station does on its own - the jobs it runs because of the clock rather than because of a person - with what each does, when it runs and how it went last time.

Maintenance and sites

Asset Card demoAsset Card demo

Asset Card

<smart-asset-card>

AssetCard is one machine as maintenance sees it: how long it has run, when it is next due for service, how it is doing and what is open against it.

Site Map demoSite Map demo

Site Map

<smart-site-map>

SiteMap puts many sites on one picture - the pump stations of a water network, the turbines of a wind farm, the substations of a grid - so that "where is something wrong" is answered…

Safety and interlocks

Cause and Effect Matrix demoCause and Effect Matrix demo

Cause and Effect Matrix

<smart-cause-effect-matrix>

CauseEffectMatrix displays the cause and effect chart of a safety instrumented system as a live matrix.

Permissive demoPermissive demo

Permissive

<smart-permissive>

Permissive displays a list of conditions that a start requires or that a running device depends on, with whether each condition is met.

Trend demoTrend demo

Trend

<smart-trend>

Trend is a historian trend chart for process data.

Strip Chart demoStrip Chart demo

Strip Chart

<smart-strip-chart>

StripChart is a real-time chart for continuously acquired samples: the newest sample is drawn at the right and the oldest leaves at the left.

Scope demoScope demo

Scope

<smart-scope>

Scope is an oscilloscope display for time-domain signals.

Control Chart demoControl Chart demo

Control Chart

<smart-control-chart>

ControlChart is a Shewhart control chart for statistical process control.

Comparison Chart demoComparison Chart demo

Comparison Chart

<smart-comparison-chart>

ComparisonChart puts like values side by side - energy per line, output per shift, downtime per cause, the share of each product in a day - and answers which is the biggest, and by how much.

Model outputs

Anomaly Heatmap demoAnomaly Heatmap demo

Anomaly Heatmap

<smart-anomaly-heatmap>

AnomalyHeatmap displays anomaly scores as a heatmap with one row per tag or asset and one column per time interval.

Root Cause Tree demoRoot Cause Tree demo

Root Cause Tree

<smart-root-cause-tree>

RootCauseTree displays the ranked, nested explanation produced by a root-cause analysis model: the deviation at the root, the contributing conditions below it and their share of the…

Instrument readouts and controls

Seven Segment demoSeven Segment demo

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.

Bar Graph demoBar Graph demo

Bar Graph

<smart-bar-graph>

BarGraph is a segmented level meter, such as the column of lit blocks on an audio console or a vibration monitor.

Thermometer demoThermometer demo

Thermometer

<smart-thermometer>

Thermometer shows a temperature as the instrument that measures it: a bulb that always holds the liquid, a capillary stem above it and a column standing at the reading.

Panel Meter demoPanel Meter demo

Panel Meter

<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…

Knob demoKnob demo

Knob

<smart-knob>

Knob is a rotary control for setting a value.

Bit Field demoBit Field demo

Bit Field

<smart-bit-field>

BitField displays a fixed-width register as individual bits with names, keeping the word value and the bits in sync.

Numeric Keypad demoNumeric Keypad demo

Numeric Keypad

<smart-numeric-keypad>

NumericKeypad is an on-screen keypad for entering a numeric value such as a setpoint on a touch panel.

Touch Keyboard demoTouch Keyboard demo

Touch Keyboard

<smart-touch-keyboard>

TouchKeyboard is the on-screen keyboard for a panel PC that has none, or a kiosk browser whose system keyboard covers the field it types into.

Selector Switch demoSelector Switch demo

Selector Switch

<smart-selector-switch>

SelectorSwitch is a switch with a set of named positions, such as a Hand-Off-Auto selector, a duty/standby selector or a local/remote switch.

Jog Panel demoJog Panel demo

Jog Panel

<smart-jog-panel>

JogPanel is the manual motion panel of a machine pendant.

Machine state, sequences and sessions

State Machine demoState Machine demo

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…

Sequence Editor demoSequence Editor demo

Sequence Editor

<smart-sequence-editor>

SequenceEditor is a step sequence editor and runner for test sequences, batch procedures and recipes.

Terminal demoTerminal demo

Terminal

<smart-terminal>

Terminal displays a stream of lines, such as an instrument session or an event log, at a high rate.

Electronic records (21 CFR Part 11)

E-Signature demoE-Signature demo

E-Signature

<smart-esignature>

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

Signature Block demoSignature Block demo

Signature Block

<smart-signature-block>

SignatureBlock displays the signature manifestation required by 21 CFR Part 11 §11.50: the meaning of the signature, the printed name of the signer, the date and time of signing with the…

Audit Trail demoAudit Trail demo

Audit Trail

<smart-audit-trail>

AuditTrail displays audit trail entries for review, as required by 21 CFR Part 11 §11.10(e).

Test and measurement

Waveform Graph demoWaveform Graph demo

Waveform Graph

<smart-waveform-graph>

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

Intensity Graph demoIntensity Graph demo

Intensity Graph

<smart-intensity-graph>

IntensityGraph displays a matrix as colour on an x and a y axis, with a colour ramp that says what the colours mean and cursors that read the cell under them: the display a spectrogram,…

Digital Waveform demoDigital Waveform demo

Digital Waveform

<smart-digital-waveform>

DigitalWaveform displays digital lines against time, one row per line, with lines grouped into buses whose words are written in hex, binary or decimal: the view of a logic analyser.

Bode Plot demoBode Plot demo

Bode Plot

<smart-bode-plot>

BodePlot displays magnitude and phase against a logarithmic frequency axis, one band above the other.

Polar Plot demoPolar Plot demo

Polar Plot

<smart-polar-plot>

PolarPlot displays data on a circular grid: a radius against an angle, or an x and a y about a centre.

Octave Bands demoOctave Bands demo

Octave Bands

<smart-octave-bands>

OctaveBands displays the level in each octave or third-octave band as a bar, with the frequency-weighted overall level and a limit curve the bands are checked against: the display of a…

Resource Picker demoResource Picker demo

Resource Picker

<smart-resource-picker>

ResourcePicker selects an instrument or a channel: it lists the resources the application has found, grouped by interface and named by alias, filters them as text is typed, and reads a…

Operator screens

Complete screens built from the components. Each one lists the components it is built from and has its source on its page.

AI Analysis screenAI Analysis screen

AI Analysis

Alarm flood and trend analysis with the data reduction shown alongside the result.

Alarm Performance screenAlarm Performance screen

Alarm Performance

An alarm journal measured against ISA-18.2 and EEMUA 191: rate, floods, bad actors, priority mix, standing and chattering alarms.

Alarms screenAlarms screen

Alarms

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

Andon screenAndon screen

Andon

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

Anomalies screenAnomalies screen

Anomalies

Anomaly detection with a heatmap of scores, forecast bands and markers on the trend, and a root-cause tree.

Asset Detail screenAsset Detail screen

Asset Detail

A single asset with vibration zones, a spectrum, permissives and its maintenance record.

Batch screenBatch screen

Batch

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

Connectivity screenConnectivity screen

Connectivity

Two data sessions, a feed that stops, and how stale data is shown.

Copilot screenCopilot screen

Copilot

An operator assistant that turns suggestions into signed requests.

DAQ Acquisition screenDAQ Acquisition screen

DAQ Acquisition

A data acquisition task: device and instrument pickers, a four-channel record on a waveform graph with cursors, and per-channel statistics.

KPI Wall screenKPI Wall screen

KPI Wall

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

Localization screenLocalization screen

Localization

The same panels in five languages, switched at run time.

Logic Analyser screenLogic Analyser screen

Logic Analyser

A logic analyser: a 16-channel capture of a memory bus with address and data buses decoded, cursors on a cycle and an analyser log.

Login screenLogin screen

Login

Badge and PIN login on a keypad with lockout, language and unit selection.

Maintenance screenMaintenance screen

Maintenance

Every asset as a wall of cards ordered by service due in run hours, the chosen one with its condition, work orders and trend.

Mimic screenMimic screen

Mimic

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

Mobile Supervisor screenMobile Supervisor screen

Mobile Supervisor

The plant at a phone's width: what needs someone, the alarms, the sites worst first, the line's order and the last handover.

Overview screenOverview screen

Overview

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

Packaging Oee screenPackaging Oee screen

Packaging Oee

OEE with its three losses beside the shift timeline, the stops waiting for a reason, the downtime Pareto and the order on the line.

Presets screenPresets screen

Presets

Instrument presets applied to gauges and tanks.

Pump Station screenPump Station screen

Pump Station

A water network on its own map, the selected pump station with its wet well, pumps, pressure and flow, and the network alarms.

Reports screenReports screen

Reports

Alarm performance, shift, batch and SPC reports, printable and signed.

Safety screenSafety screen

Safety

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

Settings screenSettings screen

Settings

Station and plant settings with staged changes, supervisor signature and a change record.

Shift Handover screenShift Handover screen

Shift Handover

The shift log, the shift in numbers, the stops still without a reason, the standing alarms and the order, and whether the handover is ready.

Showcase screenShowcase screen

Showcase

A process mimic, faceplates, a trend and the alarm list on one screen.

Test Sequence screenTest Sequence screen

Test Sequence

A test sequence with steps, limits, a run and its result record.

Trend screenTrend screen

Trend

A historian trend with multiple pens, a cursor and history loaded on demand.

Units screenUnits screen

Units

SI, US customary and a site-specific unit system on one screen.

Vibration Analysis screenVibration Analysis screen

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.