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.

JavaScript TypeScript Angular React Vue Blazor

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

Usage in Blazor

The Razor component is <DigitalWaveform> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<DigitalWaveform @ref="digitalWaveform" XLabel="Time"
    OnCursorChange="OnCursorChange" />

@code {
    DigitalWaveform digitalWaveform;

    void OnCursorChange(Event ev)
    {
        DigitalWaveformCursorChangeEventDetail detail = ev["Detail"];
    }

    // Task<object> ValueAt(string id, int time)
    void Call() => digitalWaveform.ValueAt("value", 42);
}

Properties

Parameter	Type, default	Description
`Signals` signals	IEnumerable<object>	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` buses	IEnumerable<object>	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` xLabel	string	Sets or retrieves the name of the time axis.
`XUnit` xUnit	string s	Sets or retrieves the unit of the time axis, written in engineering notation.
`XMin` xMin	double	Sets or retrieves the start of the time axis. With xMax, fixes the axis; null follows the data.
`XMax` xMax	double	Sets or retrieves the end of the time axis. With xMin, fixes the axis; null follows the data.
`Cursors` cursors	IEnumerable<object>	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` rowHeight	int 26	Sets or retrieves the height of a row in pixels. The plot is as tall as its rows.
`LabelWidth` labelWidth	int 110	Sets or retrieves the width of the names column in pixels.
`ShowGrid` showGrid	bool true	Shows the time grid and the row separators.
`ShowCursorLegend` showCursorLegend	bool true	Shows the cursor legend under the plot.
`ShowLines` showLines	bool true	Shows the lines of a bus under its row. When false, a bus is one row and its lines are left out.
`Interactive` interactive	bool true	Enables panning by dragging, zooming with the wheel, box zoom with Shift and drag, and placing and dragging cursors.
`Label` label	string	Sets or retrieves the title shown above the plot and used in the accessible name.
`PrecisionDigits` precisionDigits	int 4	Sets or retrieves the number of significant digits in times.

Methods

Method	Description
`Task<object> ValueAt(string id, int time)`	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.
`Task<object> BusValueAt(string id, int 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. `id` string The bus. `time` number The time.
`void Fit()`	Shows the whole record again.
`void ZoomTo(int from, int to)`	Shows a range of time. `from` number The start. `to` number The end.
`void Zoom(int factor)`	Zooms about the centre of the view. `factor` number Above 1 zooms in, below 1 zooms out.
`Task<string> Describe()`	Returns a sentence describing what the graph shows, as used in its accessible name.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnCursorChange` cursorChange DigitalWaveformCursorChangeEventDetail	This event is triggered when a cursor is moved by the operator, with the pointer or the keyboard. `Id` string The cursor. `X` double Its time.
`OnZoom` zoom DigitalWaveformZoomEventDetail	This event is triggered when the view changes: a zoom, a pan, a box zoom or a fit. `XMin` double The start of the view. `XMax` double The end of the view. `Fitted` bool True when the view shows the whole record.
`OnRowClick` rowClick DigitalWaveformRowClickEventDetail	This event is triggered when a row is clicked without dragging. `Time` double 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