FTUI Widget Circlemenu

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>