Guide
From a front panel to the browser
What this guide is for
A test or measurement application built in a graphical test environment has a front panel built from a palette of controls and indicators. This guide maps each kind of control and indicator, by what it does, to the Smart.Industrial or Smart UI component that does the same job in a web page, so a team moving a front panel to a browser, or putting a web view beside the original application, knows what to reach for. The components are standard custom elements and run in JavaScript, Angular, React, Vue and Blazor.
The Smart UI components named below belong to the Smart UI suite (the smart-webcomponents package), with one exception: the Gauge, Tank, Slider, Numeric Text Box, Button, Input and Table are also in the smart-industrial package, because Industrial components are built on them.
One difference runs through the whole mapping. On a front panel, a control holds its value and the program behind it reads that value. A Smart.Industrial control that acts on a plant (a selector switch, a momentary button, a faceplate's setpoint) raises a request event and does not change its own value; the application performs the write and sets the value from what the plant reports, so the control never shows a value the process does not have. The input controls (the knob, the bar graph, the bit field, the thermometer, the panel meter and the numeric keypad) behave like a front panel control instead: they take the operator's value and raise change. Displays and graphs take data the same way in both: the application assigns it.
Graphs
| On the front panel | Smart.Industrial | Notes |
|---|---|---|
| A chart that appends samples as they arrive and scrolls | Strip Chart | Samples one at a time or in blocks, scroll, sweep and scope update modes, a history length, a digital display of the latest values. |
| A graph of a whole waveform, or of XY pairs | Waveform Graph | Waveforms as y with t0 and dt, or XY pairs; multiple y scales overlaid or stacked; cursors free or locked to a plot; annotations; zoom; CSV export. |
| A matrix drawn as colour, whole or as a scrolling history | Intensity Graph | Graph mode takes the matrix whole; chart mode scrolls pushed columns. Colour maps or the application's own stops, a ramp legend and cursors. |
| Digital lines and buses against time | Digital Waveform | Lines as samples or edges, buses in hex, binary or decimal, cursors that read every line. |
| Analog and digital signals on one time axis | Waveform Graph above a Digital Waveform | There is no single mixed-signal component. Stack the two and give both the same time range (xMin and xMax). |
| Polar plots, orbits and antenna patterns | Polar Plot | Angle and radius or x and y, angle origin and direction, a radius axis that can start below zero, markers and a cursor. |
| Gain and phase against frequency | Bode Plot | Measured responses or transfer functions in s, gain and phase margins marked and written out. |
| Octave and third-octave analysis | Octave Bands | Octave and third-octave bands per IEC 61260, A and C weighting per IEC 61672, fast and slow averaging, a limit curve. |
| Spectrum measurement | Spectrum | Averaging, max hold, peak markers and THD, computed with the DSP module. |
| A triggered acquisition display | Scope | Edge trigger with auto, normal and single modes, a timebase, cursors and automatic measurements. |
| Error bars, a plot matrix, a Smith chart | No equivalent | No component draws error bars or a Smith chart. A plot matrix is a grid of Waveform Graphs. |
| 3D plots | Smart UI 3D Chart | Column, line, area, scatter and bubble series in three dimensions. There is no surface plot. |
Numeric controls and indicators
| On the front panel | Smart.Industrial | Notes |
|---|---|---|
| A numeric entry | Numeric Keypad, Smart UI Numeric Text Box | The keypad validates against limits and refuses an out-of-range entry rather than clamping it. |
| A numeric display | Seven Segment, Status Tile | A panel meter readout, or a value with its state and trend. |
| A knob or a dial | Knob | Pointer, dot or arc style; ranges, logarithmic scale and coercion from the Smart UI Tank it is built on. |
| A needle meter or a gauge | Panel Meter, Smart UI Gauge | The panel meter is the rectangular needle instrument. Smart.Industrial.apply(gauge, 'meter') turns a Smart UI Gauge into a 180-degree needle meter. |
| A tank or a thermometer | Thermometer, Smart UI Tank | The thermometer has a bulb, a second unit scale and extremes. The level-tank and volume-tank presets configure a Smart UI Tank. |
| A slide, with a fill or a pointer | Smart UI Slider, the setpoint-slider preset | Horizontal and vertical, with ticks, ranges and a thumb label. |
| A progress or graduated bar | Bar Graph, Smart UI Progress Bar | The bar graph is segmented, with alarm ranges and peak hold. |
| A time stamp | Smart UI Date Time Picker | |
| A number with a unit | The Units module | Smart.Industrial.Units converts 25 quantities and applies a unit system through bindings. |
Boolean controls and indicators
| On the front panel | Smart.Industrial | Notes |
|---|---|---|
| A push button, an OK or a stop button | Momentary Button | Momentary, hold and confirm modes; the emergency kind for a stop; interlocks with a reason. |
| A toggle, rocker or slide switch | Selector Switch with appearance toggle, rocker or slide | Two or more positions; the drawing follows the position the plant reports. |
| A round or square lamp | Multi-State Indicator, Smart UI LED | Round, square or bar shapes; states with severities rather than one colour. |
| Radio buttons, a check box | Smart UI Radio Button, Check Box | |
| A choice from a list of named values | Smart UI Drop Down List, Selector Switch | A few values fit a selector switch; a long list fits a drop-down list. |
How a button behaves
A button on a front panel switches when it is pressed or when it is released, is on only while it is held, or latches: it reports one press and then resets itself. The request model of the line covers these behaviours as follows.
| Behaviour | Smart.Industrial |
|---|---|
| Changes state when pressed, or when released, and stays there | Selector Switch: a press raises positionRequest; the application sets value when the plant confirms. The two-position toggle appearance is the switch. |
| On only while held | Momentary Button in momentary mode: press on the way down, release on the way up, with the time held. |
| Reports one press, then resets, on the press or on the release | Momentary Button in momentary mode, with the application treating press or release as the one-shot; or hold mode, where activate fires once the ring has filled. |
| Reports one press and stays on until released | Momentary Button in momentary mode: the action runs from press to release. |
| Asks for confirmation first | Momentary Button in confirm mode, or a Selector Switch with confirm: the first press arms, the second acts. |
Strings, arrays, lists and containers
| On the front panel | Smart.Industrial | Notes |
|---|---|---|
| Text entry and display, a combo box, a file path | Smart UI Input, Combo Box, Text Box | |
| An array, a matrix, a group of mixed values | Smart UI Array, Grid, Form | The suite's Array element is an indexed array control with a resizable view. |
| A list, a multi-column list, a table, a tree | Smart UI List Box, Table, Grid, Tree | Alarm Grid and Audit Trail are tables built for their records. |
| Tabs, a panel inside a panel, a splitter | Smart UI Tabs, Splitter, Docking Layout; HMI Shell | The shell is the display frame ISA-101 describes. |
| A picture or a drawing | Mimic, Mimic Symbol, Pipe | A process diagram with live symbols and routed connections. |
| Frames, labels and other decoration | CSS | Panels, frames and labels are markup and the theme. |
I/O and instruments
| On the front panel | Smart.Industrial | Notes |
|---|---|---|
| An instrument (VISA) resource, or a DAQmx task and channel | Resource Picker | Lists what the application discovered, parses GPIB, TCP/IP, USB, serial and PXI resource strings and DAQ channels, and raises a refresh request. |
| An instrument session, SCPI commands | Terminal | A transcript of commands and responses with ANSI colours and a line limit. |
| A test sequence display | Sequence Editor | Steps with limits, a run and a result record. |
| Alarm and event displays, historical trends, vessels, pipes and pumps | Alarm Grid, Alarm Banner, Annunciator, Trend, Mimic and its 33 symbols | The process side of the line. |
Where the data comes from
A browser has no VISA or DAQmx driver. The components take data from the application, and the application gets it from a gateway, a broker or a web service in front of the instrument or the acquisition card: the existing test application publishing over a WebSocket or a web service, a Python service over HTTP, or an OPC UA or MQTT gateway. The connectivity guide describes the sessions, adapters and bindings that route tags and blocks into components, and the engineering maths guide covers the FFT, window, spectrum, PSD, spectrogram and SPC functions the displays use, all available to the application as plain functions.
The three screens built for this audience are the DAQ acquisition, the vibration analysis and the logic analyser.