FTUI Widget Circlemenu
Zur Navigation springen
Zur Suche springen
Das Circlemenu Widget ist ein Widget für FHEM Tablet UI, das mehrere Widgets nach einem Klick auf ein einziges anzeigen kann.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-item-diameter | Durchmesser der einzelnen Objekte | 52 | data-item-diameter="100" |
data-circle-radius | Radius des Kreises, in dem die Objekte angeordnet werden | 70 | data-circle-radius="200" |
data-border | Stil der Objekte (round, square) | round | data-border="square" |
data-item-width | Fixer Wert für die Breite des Widgets in px | data-item-diameter | data-item-width="120" |
data-item-height | Fixer Wert für die Höhe des Widgets in px | data-item-diameter | data-item-height="100" |
data-direction | Position der Objekte in Relation zur Mitte | full | data-direction="right-half" |
CSS Klassen
keepopen | Verhindert, dass sich das Circle-Menü nach Klick auf ein Objekt schließt |
noshade | Hintergrund wird beim Öffnen eines Circle-Menüs nicht abgedunkelt |
Hinweise
Mögliche Werte für data-direction sind:
- vertical
- vertical-top
- horizontal
- bottom-left
- bottom
- right
- left
- top
- bottom-half
- right-half
- left-half
- top-half
- top-left
- top-right
- full
- bottom-right
Beispiele
Einfaches Beispiel
Dieses Beispiel zeigt nach einem Klick auf einen Button mehrere Buttons zur Auswahl von Werten.
<div class="col-1-2">
<div data-type="circlemenu" class="">
<ul>
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -6" data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -2" data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 0" data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 3" data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 9" data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 12" data-icon="">12</div></li>
</ul>
</div>
<div class="">Woofer</div>
</div>