Instrument readouts and controls

Knob <smart-knob>

Knob is a rotary control for setting a value.

<smart-knob> · 6 properties, 0 methods, 1 events · source/modules/smart.knob.js

Usage in Blazor

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

<Knob @ref="knob" KnobStyle="arc"
    OnChange="OnChange" />

@code {
    Knob knob;

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

Properties

Parameter	Type, default	Description
DragMode dragMode	KnobDragMode both	Sets or retrieves how a pointer drag changes the value: vertical - up increases, dragSensitivity pixels covering the full range; circular - turning round the centre turns the knob through the same angle; both - the first few pixels of movement decide which. Either way the drag is relative: it moves the value from where it was, so the press itself writes nothing and a tap without movement is no change. The drag belongs to the primary button of the pointer that started it; a second finger or the right button does nothing.
DragSensitivity dragSensitivity	int 150	Sets or gets the number of pixels of vertical drag that cover the full range. A larger value gives a finer adjustment.
EndAngle endAngle	double 495	Sets or gets the angle at which the scale ends, in degrees clockwise from twelve o'clock. The value may exceed 360.
KnobStyle knobStyle	KnobKnobStyle pointer	Sets or retrieves how the value is marked.
ShowValue showValue	bool true	Sets or retrieves whether the value is shown under the dial. Boolean attributes are presence-based, so set the property from script to turn it off.
StartAngle startAngle	double 225	Sets or gets the angle at which the scale starts, in degrees clockwise from twelve o'clock. The default leaves a gap at the bottom, like the stop of a panel knob.

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 KnobChangeEventDetail

This event is triggered when the value changes through the pointer or the keyboard. When it fires depends on mechanicalAction: switchWhileDragging reports continuously, switchWhenReleased reports once on release, and switchUntilReleased is momentary: the knob takes the value while it is held and goes back on release. A press without movement changes nothing. A drag that is cancelled - the touch cancelled, the knob disabled, made readonly or removed - raises nothing it had not already reported. A value set by the application during a drag is held until the drag ends and is shown then, unless the drag committed a value of its own; under switchUntilReleased the knob returns to that value. Value double The new value.

Types

enum KnobDragMode

KnobDragMode.Circular "circular" KnobDragMode.Vertical "vertical" KnobDragMode.Both "both"

enum KnobKnobStyle

KnobKnobStyle.Pointer "pointer" KnobKnobStyle.Dot "dot" KnobKnobStyle.Arc "arc"

CSS variables

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

--smart-knob-size --smart-knob-track-color --smart-knob-body-color --smart-knob-marker-color --smart-knob-fill-color