Instrument readouts and controls

Bar Graph <smart-bar-graph>

BarGraph is a segmented level meter, such as the column of lit blocks on an audio console or a vibration monitor.

<smart-bar-graph> · 7 properties, 1 methods, 1 events · source/modules/smart.bargraph.js

Usage in Blazor

The Razor component is <BarGraph> 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

<BarGraph @ref="barGraph" PeakDecay="42" Interactive="true"
    OnChange="OnChange" />

@code {
    BarGraph barGraph;

    void OnChange(Event ev)
    {
        BarGraphChangeEventDetail detail = ev["Detail"];
    }

    // void ResetPeak()
    void Call() => barGraph.ResetPeak();
}

Properties

Parameter	Type, default	Description
Interactive interactive	bool false	Sets or retrieves whether the meter can be operated as a control. The meter is read-only by default and is not in the tab order, so that a meter which cannot be operated is not an empty tab stop. The property is named for the enabled state because boolean attributes are presence-based, and a property that defaulted to true could not be turned off from markup. A read-only meter has the meter role; an interactive one is a slider. A click on an interactive meter sets the value there, clamped and snapped to interval when coerce is set, and moves the display.
PeakDecay peakDecay	double 0	Sets or retrieves the rate at which a held peak falls after its hold time expires, in scale units per second. 0 drops the peak straight back to the signal; a small value makes it fall gradually, like an analogue meter, which keeps a burst of transients readable. The fall is steady, measured from the peak as it was caught, however often the value updates.
PeakHold peakHold	bool false	Sets or retrieves whether the highest value reached is marked and held. Works the same set in markup or as a property, and after the meter is moved to another parent.
PeakHoldTime peakHoldTime	int 1500	Sets or gets the time in milliseconds a peak is held before it starts to fall.
SegmentGap segmentGap	int 2	Sets or gets the gap between segments in pixels.
Segments segments	int 20	Sets or retrieves the number of segments the bar is divided into. A segment lights when the value passes its lower edge, so half of the scale lights exactly half of the segments. Values below 1 draw one segment and values above 500 draw 500.
ShowValue showValue	bool false	Sets or retrieves whether the value is written beside the bar.

Methods

Method	Description
void ResetPeak()	Clears the held peak, for example to reset the meters after an event.

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
OnChange change BarGraphChangeEventDetail	This event is triggered when the value changes through a click or the keyboard. Only raised when interactive is set, a read-only meter reports nothing. Value double The new value.

CSS variables

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

--smart-bar-graph-width --smart-bar-graph-height --smart-bar-segment-off --smart-bar-segment-on --smart-bar-segment-gap