Skip to main content

Rotary Knob

note

This page has been automatically translated and has not been reviewed in detail yet. Therefore, the translation might not be completely accurate.

A rotary knob allows you to change a numerical value, similar to the elementary block Switch. The main difference is that the visualization here is not simply done using a horizontal slider. As with the Switch, interactions are reported with the onChange event.

CSS classes

  • dashboardKnobControl: an HTML element (DIV) with this CSS class describes the outer visual frame of the block.
    • controlEnabled: this CSS class is additionally set if the Status parameter returns the value true - this is referred to below as enabled.
    • controlDisabled: analogous if the Status parameter returns false - briefly referred to as disabled. Note that the value of Status cannot return either false or true (e.g. because Status has not been assigned to a parameter). In this case the block is neither enabled nor disabled.
    • controlActiveTrue: as with the Status parameter, only here the Active parameter is compared to true - the corresponding name is of course active.
    • controlActiveFalse: inactive for a value of false of the Active parameter.
  • dashboardKnobControlInput: the HTML element (DIV) for the outer ring receives this CSS class.
  • dashboardKnobControlKnob: this CSS class is used to identify the HTML element (DIV) with which the button is visualized.
  • dashboardKnobControlCenter: the HTML element (DIV) for the inner circle receives this CSS class.

If the block is disabled, it does not respond to interactions.

CSS variables

  • --dashboard-knob-control-ring-color, default #252525: the background (CSS background) of the outer ring, usually a CSS conic-gradient - note that this gradient is not supported by all browsers. The CSS variable is only evaluated if the Ring color parameter is not set.
  • --dashboard-knob-control-knob-position, default -2.5%: ultimately describes the position (CSS margin-top) of the actual button for changing the value. A value of 23% would move this to the middle ring.
  • --dashboard-knob-control-knob-color, default #ffffff: the color (CSS background) of the actual button. If this CSS variable is not set but --dashboard-control-knob-color, this will be used instead of the default. However, if the Controller color parameter is set, this always has priority and is used for the color of the button.
  • --dashboard-knob-control-knob-shadow, default 1px 1px 0 #cccccc: the shadow of the button (CSS filter of type drop-shadow) . If this variable is not set, but --dashboard-control-knob-shadow is set, its value will be used instead of the default setting.
  • --dashboard-knob-control-background, default #ffffff: the background (CSS background) between the outer ring and the inner circle.
  • --dashboard-knob-control-center-color, default #252525: the background (CSS background) of the inner circle. This variable is only used if the Center color parameter is not set

Special instructions​

Please note that the Source parameter is always maintained in the area of the Lower limit and Upper limit parameters. If the value is initially outside this range, it is shifted accordingly to one of the limit values. When writing back a changed value, error messages can occur if the associated parameter or variable uses a different value range.