Test and measurement

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.

<smart-digital-waveform> · 15 properties, 6 methods, 3 events · source/modules/smart.digitalwaveform.js

Usage in React

The React wrapper is the DigitalWaveform component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { DigitalWaveform } from 'smart-industrial/react/digitalwaveform';

const ref = useRef<DigitalWaveform>(null);

<DigitalWaveform ref={ref} xLabel={'Time'}
    onCursorChange={(event: CustomEvent) => console.log(event.detail)} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.valueAt('value', 42);

Properties

Prop	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.
xUnit	string s	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.
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.
rowHeight	number 26	Sets or retrieves the height of a row in pixels. The plot is as tall as its rows.
labelWidth	number 110	Sets or retrieves the width of the names column in pixels.
showGrid	boolean true	Shows the time grid and the row separators.
showCursorLegend	boolean true	Shows the cursor legend under the plot.
showLines	boolean true	Shows the lines of a bus under its row. When false, a bus is one row and its lines are left out.
interactive	boolean true	Enables panning by dragging, zooming with the wheel, box zoom with Shift and drag, and placing and dragging cursors.
label	string	Sets or retrieves the title shown above the plot and used in the accessible name.
precisionDigits	number 4	Sets or retrieves the number of significant digits in times.

Methods

Method	Description
valueAt(id: string, time: number): any	Returns a line's level at a time: 1, 0, 'x' (unknown), 'z' (high impedance), or NaN outside the record. id string The signal. time number The time.
busValueAt(id: string, time: number): any	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. id string The bus. time number The time.
fit(): void	Shows the whole record again.
zoomTo(from: number, to: number): void	Shows a range of time. from number The start. to number The end.
zoom(factor: number): void	Zooms about the centre of the view. factor number Above 1 zooms in, below 1 zooms out.
describe(): string	Returns a sentence describing what the graph shows, as used in its accessible name.

Events

The data of an event is 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
onCursorChange 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.
onZoom 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.
onRowClick 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.

CSS variables

The component declares 4 CSS variables; the CSS page shows how to set them.

--smart-digital-label-background --smart-digital-plot-background --smart-digital-grid-color --smart-digital-axis-color