FTUI Widget Circlemenu

Aus FHEMWiki
Version vom 26. Januar 2018, 16:12 Uhr von Baumbuwe (Diskussion | Beiträge) (catsort)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

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