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 TypeScript
The package ships its definitions: Knob is the element type and KnobProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-knob') is typed as Knob.
import { Knob, KnobProperties } from 'smart-industrial/source/typescript/smart.industrial';
const knob = document.querySelector('smart-knob') as Knob;
knob.knobStyle = 'arc';
knob.addEventListener('change', (event: CustomEvent) => console.log(event.detail));
Properties
| Property | Type, default | Description |
|---|---|---|
dragMode | KnobDragMode | 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 | number | Sets or gets the number of pixels of vertical drag that cover the full range. A larger value gives a finer adjustment. |
endAngle | number | Sets or gets the angle at which the scale ends, in degrees clockwise from twelve o'clock. The value may exceed 360. |
knobStyle | KnobKnobStyle | Sets or retrieves how the value is marked. |
showValue | boolean | 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 | number | 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 |
|---|---|
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