Test and measurement
<smart-waveform-graph>WaveformGraph displays complete records against engineering axes: waveforms with a start time and a sample interval, or XY pairs.
Plots share the x axis and each is read on a y scale; scales are overlaid or stacked in bands. Cursors are free or locked to a plot, with a legend that reads every cursor and the difference between the first two. Annotations are placed in data coordinates. The view pans and zooms, and the plots that are shown export as CSV, each as its whole record whatever the zoom. Records are reduced to one column per pixel with the minimum and maximum kept, so a one-sample spike still reaches its height.
<smart-waveform-graph>smart-industrial/source/modules/smart.waveformgraph.jsWaveformGraphModule from smart-industrial/angular/waveformgraphWaveformGraph from smart-industrial/react/waveformgraph<WaveformGraph> 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. 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.waveformgraph.js"></script> <smart-waveform-graph id="capture" label="Rig 4, capture 1182" x-label="Time" x-unit="s"></smart-waveform-graph>
const waveformGraph = document.getElementById('capture');
// raised when the CSV button of the palette is pressed
waveformGraph.addEventListener('exportRequest', (event) => {
const { format, data } = event.detail;
// the component waits: carry out the request, then set the property from the result
});
// the same values as properties
waveformGraph.label = 'Rig 4, capture 1182';
waveformGraph.xLabel = 'Time';
waveformGraph.xUnit = 's';
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 19 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
plots | array | Sets or retrieves the plots. Each is an object with id, label, unit, color, y (the record), t0 and dt (start and interval of a waveform) or x (the x values of an XY plot), scale (the id of the y scale it is read on), style (line, points, step or bars), lineWidth and visible. A sample that is not a number - NaN, null, an empty string - is a gap, never 0. An item that is not an object is skipped, and a dt that is not a number is taken as 1; each is said once in a console warning. |
scales | array | Sets or retrieves the y scales. Each is an object with id, label, unit, min, max, autoScale, logarithmic and position (left or right). Limits alone fix a scale; empty gives one scale that follows the data. A min above max is swapped, with one console warning. An item that is not an object is skipped, with one console warning. |
layout | string | Sets or retrieves how the scales are laid out: overlaid on one plot area, or stacked with a band per scale. |
xLabel | string | Sets or retrieves the name of the x axis. |
xUnit | string | Sets or retrieves the unit of the x axis, used in its labels and readouts. |
xMin | number? | Sets or retrieves the start of the x axis. With xMax, fixes the axis; null follows the data. Set above xMax, the two are swapped; equal to it, or not a finite number, the axis follows the data. Each is said once in a console warning. |
xMax | number? | Sets or retrieves the end of the x axis. With xMin, fixes the axis; null follows the data. See xMin for limits set the wrong way round. |
cursors | array | Sets or retrieves the cursors. Each is an object with id, label, x, y, plot (the id of the plot it is locked to, which then supplies y), color and visible. Cursors are dragged on the plot and moved with the arrow keys, which follow the x axis as drawn, left to right, also in a right-to-left layout; on a log axis a key press moves a pixel. The cursor legend reads each one and the difference between the first two. An item that is not an object is skipped, with one console warning. |
annotations | array | Sets or retrieves the annotations: text at a point in data coordinates. Each is an object with x, y, text, plot (the id of a plot that supplies y) and color. An item that is not an object is skipped, with one console warning. |
showCursorLegend | boolean | Shows the cursor legend under the plot. |
showPalette | boolean | Shows the tool palette: zoom in, zoom out, fit, auto scale and CSV export. |
label | string | Sets or retrieves the title shown above the plot and used in the accessible name. |
The events carry their data in event.detail. The waveform graph moves a cursor in cursors, zooms its own view or shows and hides a plot, and then raises cursorChange, zoom or plotVisibilityChange; pointer, wheel and keyboard input count only while interactive is true. plotClick reports where a click landed, and exportRequest hands the CSV text to the application to save.
| Event | Description and detail |
|---|---|
cursorChange | This event is triggered when a cursor is moved by the operator, with the pointer or the keyboard.id string The cursor.x number Its x position.y number Its y value: read off its plot when locked, its own when free. |
zoom | This event is triggered when the view changes: a zoom, a pan, a box zoom or a fit.xMin number The start of the view.xMax number The end of the view.fitted boolean True when the view shows the whole record. |
plotClick | This event is triggered when the plot area is clicked without dragging.x number The x under the pointer.y number The y under the pointer on the first scale. |
plotVisibilityChange | This event is triggered when a plot is hidden or shown from the legend.id string The plot.visible boolean Whether it is now shown. |
exportRequest | This event is triggered when the CSV button of the palette is pressed. The application decides what to do with the text: download it, send it, or show it.format string Always csv.data string The CSV text. |
| Method | Description |
|---|---|
setPlotData(id, y, options?) | Replaces one plot's record without re-assigning the plots, for an acquisition that delivers a new record per trigger. |
valueAt(id, x) | Returns a plot's value at an x, interpolated between its samples. For a waveform it returns NaN before the first sample and from one sample interval past the last. For an XY plot, an x that no segment spans returns the y of the nearest sample, so a cursor on a scatter reads the point it sits on. An unknown plot id returns NaN. |
togglePlot(id, visible?) | Shows or hides a plot. |
fit() | Shows the whole record again, on every axis. |
zoomTo(from, to) | Shows a range of x. |
zoom(factor) | Zooms about the centre of the view - the geometric centre, in decades, on a log x axis. |
toCSV() | Returns the plots that are shown, hidden ones left out, as CSV. Each plot is exported as its whole record, whatever the zoom: one x column when the records share it, otherwise x and y columns per plot. |
describe() | Returns a sentence describing what the graph shows, as used in its accessible name: the number of plots, the x range, and on a log axis how many points at x <= 0 are not shown. |
invalidate() | Redraws the plot on the next animation frame, so that many changes between two frames cost one draw. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { WaveformGraphModule } from 'smart-industrial/angular/waveformgraph';
// Angular 14 and later; an NgModule application lists WaveformGraphModule in its imports
@Component({
standalone: true,
imports: [WaveformGraphModule],
template: `<smart-waveform-graph label="Rig 4, capture 1182"
(onExportRequest)="onExportRequest($event)">
</smart-waveform-graph>`
})
import { WaveformGraph } from 'smart-industrial/react/waveformgraph';
<WaveformGraph label="Rig 4, capture 1182"
onExportRequest={(event: CustomEvent) => onExportRequest(event.detail)} />
import 'smart-industrial/source/modules/smart.waveformgraph.js';
<smart-waveform-graph label="Rig 4, capture 1182"
@exportRequest="onExportRequest"></smart-waveform-graph>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<WaveformGraph Label="Rig 4, capture 1182"
OnExportRequest="OnExportRequest" />
The WaveformGraph is drawn on a canvas, which is not accessible to a screen reader. What the canvas shows is therefore also available as text: the plot legend names every plot with its unit and whether it is shown, the cursor legend reads every cursor's position and value on each plot and the difference between the first two, and the plot area carries a summary of what it shows. Moving a cursor with the keyboard updates the cursor legend, so a reading is taken without seeing the line.
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 4 CSS variables of its own, among them --smart-waveform-height, --smart-waveform-plot-background, --smart-waveform-grid-color, --smart-waveform-axis-color. The CSS page lists them; the themes guide covers the tokens every component shares.
Bode Plot Digital Waveform Intensity Graph Octave Bands Polar Plot Resource Picker