Zum Hauptinhalt springen

Rotary knob

Ein Drehknopf erlaubt es, ähnlich wie der Elementarbaustein Switch, einen Zahlwert zu verändern. Der wesentliche Unterschied ist, dass die Visualisierung hier nicht einfach durch einen horizontalen Schieber erfolgt. Interaktionen werden wie bei dem Switch mit dem onChange Ereignis gemeldet.

CSS Klassen​

  • dashboardKnobControl: ein HTML Element (DIV) mit dieser CSS Klasse beschreibt den äußeren visuellen Rahmen des Bausteins.
    • controlEnabled: diese CSS Klasse wird zusätzlich gesetzt, wenn der Parameter Status den Wert true liefert - dies wird im Folgenden als enabled bezeichnet.
    • controlDisabled: analog wenn der Parameter Status false liefert - kurz als disabled bezeichnet. Man beachte, dass der Wert von Status auch weder false noch true liefern kann (etwa weil Status keinem Parameter zugeordnet wurde). In diesem Fall ist der Baustein weder enabled noch disabled.
    • controlActiveTrue: wie beim Parameter Status, nur wird hier der Parameter Active auf true verglichen - die entsprechende Bezeichnung ist dann natürlich active.
    • controlActiveFalse: inactive für einen Wert false des Parameters Active.
  • dashboardKnobControlInput: das HTML Element (DIV) für den äußeren Ring erhält diese CSS Klasse.
  • dashboardKnobControlKnob: mit dieser CSS Klasse wird das HTML Element (DIV) gekennzeichnet, mit dem der Knopf visualisiert wird.
  • dashboardKnobControlCenter: das HTML Element (DIV) für den inneren Kreis erhält diese CSS Klasse.

Ist der Baustein disabled, so reagiert er nicht auf Interaktionen.

CSS Variablen​

  • --dashboard-knob-control-knob-position, Voreinstellung -2.5%: beschreibt letztlich die Position (CSS margin-top) des eigentlichen Knopfs zur Veränderung des Wertes. Ein Wert von 23% würde diesen auf den mittleren Ring verschieben.
  • --dashboard-knob-control-knob-shadow, Voreinstellung 1px 1px 0 #cccccc: der Schatten des Knopfs (CSS filter der Art drop-shadow). Ist diese Variable nicht gesetzt, dafür aber --dashboard-control-knob-shadow, so wird deren Wert statt der Voreinstellung verwendet.
  • --dashboard-knob-control-background, Voreinstellung #ffffff: der Hintergrund (CSS background) zwischen dem äußeren Ring und dem inneren Kreis.
  • --knob-background: der Hintergrund (CSS background) zwischen dem äußeren Ring und dem inneren Kreis.
  • --knob-knob-position: beschreibt letztlich die Position des eigentlichen Knopfs zur Veränderung des Wertes. Ein Wert von 23% würde diesen auf den mittleren Ring verschieben.
  • --knob-knob-shadow: der Schatten des Knopfs

Besondere Hinweise​

Man beachte, dass die Pflege des Parameters Source immer im Bereich der Parameter Lower limit und Upper limit erfolgt. Ist der Wert initial außerhalb dieses Bereichs, so wird er entsprechend auf einen der Grenzwerte geschoben. Beim Zurückschreiben eines veränderten Wertes kann es zu Fehlermeldungen kommen, wenn der zugehörige Parameter respektive die zugehörige Variablen einen anderen Wertebereich verwendet.