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 Angular

The Angular wrapper is KnobComponent from KnobModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { KnobModule, KnobComponent } from 'smart-industrial/angular/knob';

<smart-knob #knob [knobStyle]="'arc'"
    (onChange)="onChange($event)"></smart-knob>

@ViewChild('knob', { read: KnobComponent }) knob!: KnobComponent;

Properties

Input	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	number 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	number 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	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.
[startAngle] 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.

Output

Description and detail

(onChange) 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