Test and measurement
<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.
A line is given as samples on a fixed interval or as a list of edges. The view pans and zooms, cursors read every line and every bus at two instants and the time between them, and where more transitions land on a pixel column than it can show, the column is drawn as a block. The plot is as tall as its rows.
<smart-digital-waveform>smart-industrial/source/modules/smart.digitalwaveform.jsDigitalWaveformModule from smart-industrial/angular/digitalwaveformDigitalWaveform from smart-industrial/react/digitalwaveform<DigitalWaveform> 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.digitalwaveform.js"></script> <smart-digital-waveform id="spi" label="SPI capture, 100 MS/s" x-label="Time"></smart-digital-waveform>
const digitalWaveform = document.getElementById('spi');
// raised when a cursor is moved by the operator, with the pointer or the keyboard
digitalWaveform.addEventListener('cursorChange', (event) => {
const { id, x } = event.detail;
// ...
});
// the same values as properties
digitalWaveform.label = 'SPI capture, 100 MS/s';
digitalWaveform.xLabel = 'Time';
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 15 with their types and defaults.
| Name | Type, default | Description |
|---|---|---|
signals | array | Sets or retrieves the lines. Each is an object with id, label, color, visible and either samples (0/1 or booleans on a fixed interval, with t0 and dt) or edges (an array of [time, level] pairs, with end for the end of the record). A sample holds its level for dt, so a sampled record runs from t0 to t0 + samples.length × dt and the last sample is drawn and read. A level may also be 'x' (unknown, drawn as a band across both levels) or 'z' (high impedance, drawn between them). |
buses | array | Sets or retrieves the buses. Each is an object with id, label, lines (the ids of its signals, most significant first), format (hex, bin or dec), color and visible. A bus is drawn as a row of stable words with a transition wherever the word changes. Any number of lines is exact: a bus of more than 53 lines is read as a BigInt. The word reads X while any line is unknown and Z while any line is high impedance. |
xLabel | string | Sets or retrieves the name of the time axis. |
cursors | array | Sets or retrieves the cursors. Each is an object with id, label, x, color and visible. The cursor legend reads every line and bus at each cursor and the time between the first two. |
showLines | boolean | Shows the lines of a bus under its row. When false, a bus is one row and its lines are left out. |
label | string | Sets or retrieves the title shown above the plot and used in the accessible name. |
xUnit | string | Sets or retrieves the unit of the time axis, written in engineering notation. |
xMin | number? | Sets or retrieves the start of the time axis. With xMax, fixes the axis; null follows the data. |
xMax | number? | Sets or retrieves the end of the time axis. With xMin, fixes the axis; null follows the data. |
rowHeight | number | Sets or retrieves the height of a row in pixels. The plot is as tall as its rows. |
The events carry their data in event.detail. While interactive is true, the digital waveform moves a cursor in cursors and then raises cursorChange, and pans or zooms its own view and then raises zoom; fit() and zoomTo() also raise zoom. rowClick reports the row and the time under a click.
| 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 time. |
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. |
rowClick | This event is triggered when a row is clicked without dragging.time number The time under the pointer.id string The line or bus clicked, or null below the rows.kind string line or bus. |
| Method | Description |
|---|---|
valueAt(id, time) | Returns a line's level at a time: 1, 0, 'x' (unknown), 'z' (high impedance), or NaN outside the record. |
busValueAt(id, time) | Returns a bus's word at a time, most significant line first: a number, or a BigInt for a bus of more than 53 lines, which a number cannot hold exactly; 'x' when any line is unknown, 'z' when any line is high impedance, or NaN where any line is outside its record. |
fit() | Shows the whole record again. |
zoomTo(from, to) | Shows a range of time. |
zoom(factor) | Zooms about the centre of the view. |
describe() | Returns a sentence describing what the graph shows, as used in its accessible name. |
The same element with its wrapper. Each page has the installation steps and the full demo in that framework.
import { DigitalWaveformModule } from 'smart-industrial/angular/digitalwaveform';
// Angular 14 and later; an NgModule application lists DigitalWaveformModule in its imports
@Component({
standalone: true,
imports: [DigitalWaveformModule],
template: `<smart-digital-waveform label="SPI capture, 100 MS/s"
(onCursorChange)="onCursorChange($event)">
</smart-digital-waveform>`
})
import { DigitalWaveform } from 'smart-industrial/react/digitalwaveform';
<DigitalWaveform label="SPI capture, 100 MS/s"
onCursorChange={(event: CustomEvent) => onCursorChange(event.detail)} />
import 'smart-industrial/source/modules/smart.digitalwaveform.js';
<smart-digital-waveform label="SPI capture, 100 MS/s"
@cursorChange="onCursorChange"></smart-digital-waveform>
@using Smart.Blazor.Industrial
@rendermode InteractiveServer
<DigitalWaveform Label="SPI capture, 100 MS/s"
OnCursorChange="OnCursorChange" />
The DigitalWaveform 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 area carries a summary with the number of lines and buses and the time range shown, and the cursor legend reads the level of every line and the word of every bus at each cursor, and the time between the first two cursors. Moving a cursor with the keyboard updates the legend, so a state is read from the trace 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-digital-label-background, --smart-digital-plot-background, --smart-digital-grid-color, --smart-digital-axis-color. The CSS page lists them; the themes guide covers the tokens every component shares.
Bode Plot Intensity Graph Octave Bands Polar Plot Resource Picker Waveform Graph