Instrument readouts and controls

Knob `<smart-knob>`

Knob is a rotary control for setting a value.

JavaScript TypeScript Angular React Vue Blazor

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

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.knob.js';

<smart-knob ref="knob" :knob-style="'arc'"
    @change="onEvent"></smart-knob>



// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-knob :items.prop="items"></smart-knob>

Properties

Binding	Type, default	Description
`:drag-mode` 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.
`:drag-sensitivity` dragSensitivity	number 150	Sets or gets the number of pixels of vertical drag that cover the full range. A larger value gives a finer adjustment.
`:end-angle` endAngle	number 495	Sets or gets the angle at which the scale ends, in degrees clockwise from twelve o'clock. The value may exceed 360.
`:knob-style` knobStyle	KnobKnobStyle pointer	Sets or retrieves how the value is marked.
`:show-value` showValue	boolean 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.
`:start-angle` startAngle	number 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

The data of an event is in event.detail. The knob sets value as the operator turns it and then raises change; the application reads the new value from event.detail. mechanicalAction decides whether change fires while dragging or once on release.

Event Description and detail

Event	Description and detail
`@change`	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` number The new value.

@change

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 number The new value.

Types

`type KnobDragMode`

'circular' | 'vertical' | 'both'

`type KnobKnobStyle`

'pointer' | 'dot' | '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