FTUI Widget Colorwheel: Unterschied zwischen den Versionen
Drhirn (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|Colorwheel Widget]] ist ein Widget für FHEM Tablet UI, welches eine Farbpalette für die Auswahl von Farben erstellt. <gallery> File:F…“) |
Drhirn (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
||
Zeile 51: | Zeile 51: | ||
[[File:FTUI_Widget_Colorwheel_02.png]] | [[File:FTUI_Widget_Colorwheel_02.png]] | ||
==Weblinks== | |||
*[https://knowthelist.github.io/fhem/tablet/demo_colorwheel.html Weitere Beispiele] | |||
[[Kategorie:FHEM Tablet UI]] | [[Kategorie:FHEM Tablet UI]] |
Version vom 15. Februar 2017, 19:44 Uhr
Das Colorwheel Widget ist ein Widget für FHEM Tablet UI, welches eine Farbpalette für die Auswahl von Farben erstellt.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-device | FHEM-Device, dessen Readings gelesen/geändert werden sollen | ||
data-get | Name des Readings, das den darzustellenden RGB-Wert enthält | STATE | data-get="rgb" |
data-set | Name des Reading, welches geändert werden soll | data-set="rgb" | |
data-cmd | Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger) | set | |
data-width | Breite des Widgets | 150 | data-width="200" |
CSS Klassen
mini | Setzt die Größe des Elementes auf 50% |
small | Setzt die Größe des Elementes auf 80% |
large | Setzt die Größe des Elementes auf 125% |
big | Setzt die Größe des Elementes auf 150% |
lineIndicator | Erzeugt eine vertikale Linie zur Anzeige der ausgewählten Farbe |
barIndicator | Erzeugt eine horizontale Linie zur Anzeige der ausgewählten Farbe |
roundIndicator | Erzeugt einen Kreis zur Anzeige der ausgewählten Farbe |
Beispiele
Einfache Palette
<div data-type="colorwheel"
data-device="HUEDevice3"
data-get="rgb"
data-set="rgb"></div>
Mit Farbindikatoren
Im Bild sind die Auswirkungen der unterschiedlichen "Indicator"-Klassen zu sehen. Von links nach rechts: lineIndicator, barIndicator, roundIndicator.
<div data-type="colorwheel"
data-device="HUEDevice3"
data-get="rgb"
data-set="rgb"
class="lineIndicator"></div>