FTUI Widget Circlemenu

Aus FHEMWiki
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>

Circlemenu tabletUI.png