FHEMWiki - Benutzerbeiträge [de]

FTUI Widget Thermostat

2019-03-01T06:54:51Z

Prinzkafka: /* CSS Klassen */

Das [[{{PAGENAME}}|Thermostat Widget]] ist ein Widget für [[FHEM Tablet UI]] welches ähnlich wie das [[FTUI Widget Knob|Knob-Widget]] ist, aber für Heizungsthermostate optimiert wurde. Es zeigt eine Skala, um die gewünschte Temperatur einzustellen, sowie die aktuelle Temperatur an.

<gallery>
File:FTUI_Widget_Thermostat_01.png
File:FTUI_Widget_Thermostat_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, welches die gewünschte Temperatur enthält||desired-temp||
|-
|'''data-set'''||Name des Readings, mit dem die gewünschte Temperatur gesetzt wird||desired-temp||
|-
|'''data-temp'''||Name des Readings, welches die aktuelle Temperatur enthält||measured-temp||
|-
|'''data-valve'''||Name des Readings, das die Ventilstellung des Thermostates anzeigt||||data-valve="ValvePosition"
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Stelle der Ventilposition in einer leerstellen-getrennten Zeile||-1 -> alles anzeigen||data-get-value="2"
|-
|'''data-mode'''||Name des Readings für die Modi (auto, manual, etc.) des Thermostates||||data-mode="controlMode"
|-
|'''data-min'''||Mindesttemperatur, die gesetzt werden kann||10||data-min="5"
|-
|'''data-max'''||Höchsttemperatur, die gesetzt werden kann||30||data-max="25"
|-
|'''data-step'''||Abstufung, in der die Temperatur gesetzt werden kann||1||data-step="0.5"
|-
|'''data-off'''||Wert, der gesendet werden muss, um das Thermostat abzuschalten||||data-off="5"
|-
|'''data-boost'''||Wert, der gesendet werden muss, um das Thermostat in den Boost-Modus zu bringen||||data-boost="30.5"
|-
|'''data-height'''||Höhe des Widgets||100||data-height="80"
|-
|'''data-width'''||Breite des Widgets||100||data-width="120"
|-
|'''data-touch-height'''||Höhe des Widgets während Änderungen||data-height||data-touch-height="200"
|-
|'''data-touch-width'''||Breite des Widgets während Änderungen||data-width||data-touch-width="200"
|-
|'''data-touch-position'''||Position des Wertes während Änderungen||left||data-touch-position="left"
|-
|'''data-inputcolor'''||Farbe des angezeigten Temperaturwertes || ||data-inputcolor="white"
|-
|'''data-hdcolor'''||Farbe des Einstellhebels||#666||data-hdcolor="green"
|-
|'''data-fgcolor'''||Farbe des geriffelten Hintergrundes (Teilstriche)||#666||
|-
|'''data-bgcolor'''||Farbe des geriffelten Hintergrundes (Flächen zwischen den Teilstrichen)||keine||
|-
|'''data-mincolor'''||Farbe am unteren Ende des Einstellbereiches||#4477ff||
|-
|'''data-maxcolor'''||Farbe am oberen Ende des Einstellbereiches||#ff0000||
|-
|'''data-thickness'''||Dicke des Einstellbereiches||0.25||
|-
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"
|-
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"
|-
|'''data-font'''||Schriftart des Wertes||||
|-
|'''data-font-weight'''||Dicke der Schrift||||
|-
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="°"</nowiki>
|-
|'''data-lock'''||Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen||||
|}

==Hinweise==
* Wenn beim MAX! Wand-Thermostat der Wert ''auto'' für ''data-mode'' empfangen wird, wird folgender Befehl generiert: <code>set wz_WandThermostat desiredTemperature auto</code>. Andere Werte erzeugen Befehle wie <code>set wz_WandThermostat desiredTemperature</code>
* Als ''data-device'' muss das Device angegeben werden, welches gewünschte und aktuelle Temperatur liefert. Bei HomeMatic Thermostaten ist das z.B. HM_XXXXXX_Clima
* Das Widget zeigt die Ventilposition nur an, wenn ''data-valve'' explizit definiert wurde.

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}
|}

==Beispiele==
===HomeMatic HM-CC-RT-DN===
Da die Standardwerte für ''data-get'', ''data-temp'' und ''data-set'' schon den benötigten Werten für ein [[HM-CC-RT-DN Funk-Heizkörperthermostat]] entsprechen, reicht eine ganz einfache Code-Zeile.
<syntaxhighlight lang="html">
<div data-type="thermostat" data-device="HM_302111_Clima"></div>
</syntaxhighlight>

Das entspricht in diesem Fall der längeren Version:
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HM_302111_Clima"
data-get="desired-temp"
data-temp="measured-temp">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_01.png]]

===MAX! Thermostat===
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_01.png]]

===Mit Off- und Boost-Funktion===
Hier ein Beispiel, mit dem das Thermostat aus-, oder die Boost-Funktion eingeschaltet werden kann. Um Auszuschalten muss der Zeiger auf die Mindestposition gezogen werden. Um die Boost-Funktion zu aktivieren, auf die Maxmimalposition.
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HM_302111_Clima"
data-valve="ValvePosition"
data-min="5"
data-off="off"
data-max="31"
data-boost="31">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_02.png]]

[[Kategorie:FHEM Tablet UI|Thermostat]]

FTUI Widget Scale

2019-02-15T06:40:31Z

Prinzkafka: /* CSS-Klassen */

{{Todo|Vervollständigen}}
Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

<gallery>
File:ftui-widget-scale.png
File:ftui-widget-scale-red.png
File:ftui-widget-scale-vertical.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading Reading angezeigt werden soll||||
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||
|-
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0||
|-
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält||100||
|-
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"
|-
|'''data-font-size'''||Schriftgröße||12||
|-
|'''data-tick'''||||1||
|-
|'''data-value-interval'''||||50||
|-
|'''data-extra-tick'''||||10||
|-
|'''data-tick-color'''||||#eee||
|-
||'''data-limits-get'''||||||
|-
||'''data-limits'''||||||
|-
||'''data-color'''||||#aa6900||
|-
|'''data-colors'''||Array von Farbwerten, die die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]'
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|notext}}
|}

==Beispiele==

==Weitere Informationen==
*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]

[[Kategorie:FHEM Tablet UI|Scale]]

Vorlage:FTUI Klasse

2019-02-15T06:39:26Z

Prinzkafka: /* Code */

Vorlage für die dynamische Anzeige jeweils einer CSS-Klasse, die von [[FHEM Tablet UI]] zur Verfügung gestellt wird.

Jeder Aufruf dieser Vorlage ist jeweils eine Tabellenzeile, es muss daher vor der ersten Einbindung dieser Vorlage eine Tabelle geöffnet (<nowiki> {| </nowiki>) und nach der letzten Einbindung die Tabelle geschlossen werden (<nowiki> |} </nowiki>).

Soll die Vorlage öfter eingebunden werden, muss das in einer Zeile erfolgen, ansonsten gibt es unschöne Leerzeilen.

==Beispiel==
Folgender Code
<source lang="html">
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|narrow}}
|}
</source>

ergibt folgendes Ergebnis:

{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|narrow}}
|}

==Code==
<source lang="html">
<onlyinclude>
{{#switch: {{{1|}}}



| inline = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente in einer Reihe, kein Zeilenumbruch
| newline = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch
| top-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz oben
| top-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz oben
| top-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz oben
| left-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz links
| left-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz links
| left-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz links
| right-space = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz rechts
| right-space-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz rechts
| right-space-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz rechts
| top-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -15px näher am oberen Rand
| top-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -30px näher am oberen Rand
| top-narrow-10 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -10px näher am oberen Rand
| left-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter links
| left-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter links
| left-narrow-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter links
| right-narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter rechts
| right-narrow-2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter rechts
| right-narrow-3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter rechts
| centered = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontal zentriert (muss im Eltern-<nowiki><div></nowiki> gesetzt werden)
| wider = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px Abstand rund um das Element
| narrow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weniger Abstand zum Element darüber
| fullsize = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}100% Breite und Höhe
| compressed = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum das Icon benötigt wird
| compressed-50 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Switches und Symbole bekommen Breite und Höhe von 1.5em statt 2em, damit weniger Platz rundum das Icon benötigt wird
| height-narrow= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können
| w1x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Einfache fixe Breite
| w2x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Doppelte fixe Breite
| w3x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Dreifache fixe Breite
| maxw40 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Maximale Breite 40px
| doublebox-v = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können
| doublebox-h = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können
| triplebox-v = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können
| right = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird rechtsbündig angeordnet



| sheet = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Startet eine neue Tabelle
| row = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Reihe in der aktuellen Tabelle
| cell = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle (bzw. Spalte) in der aktuellen Reihe
| cell-1-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle in der aktuellen Reihe mit einer festen Breite von X (z.B.: cell-1-3 (33%), cell-1-4 (25%))
| cell-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle in der aktuellen Reihe mit einer festen Breite von X in Prozent (z.B.: cell-20 (20%), cell-40 (40%))
| left-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle linksbündig
| right-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle rechtsbündig
| bottom-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am unteren Rand
| top-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am oberen Rand
| center-align = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle zentriert


| col = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Breite automatisch.
| col-1-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%))
| col-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%))


| vbox = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertikale Box - Inhalte übereinander
| hbox = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontale Box - Inhalte nebeneinander
| card = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Eine "Haupt"-Box
| phone-width = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Breite darf nicht unter die Display-Breite des Gerätes sinken
| full-height = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height)
| full-width = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Breite des Browser-Fensters (100% width)
| grow-0 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf nicht wachsen
| grow-1 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Standardgröße der Box
| grow-2 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das doppelte wachsen
| grow-x = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das X-fache wachsen
| items-top = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden oben ausgerichtet
| items-center = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden zentriert
| items-bottom = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden unten ausgerichtet
| items-space-between = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz zwischen den Elementen in der Box
| items-space-around = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz um die Elemente in der Box



| red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe rot
| green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grün
| blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe blau
| lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellblau
| orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe orange
| gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grau
| lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellgrau
| white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe weiß
| black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe schwarz
| mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe minzgrün
| yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe gelb


| bg-limit = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Ändert bei Label-Widgets die Hinter- statt der Vordergrundfarbe in Abhängigkeit von ''data-limit''
| bg-red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe rot
| bg-green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grün
| bg-blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe blau
| bg-lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellblau
| bg-orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe orange
| bg-gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grau
| bg-lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellgrau
| bg-white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe weiß
| bg-black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe schwarz
| bg-mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe minzgrün
| bg-yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe gelb



| mini = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 50%
| tiny = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 60%
| small = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 80%
| normal = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 100%
| large = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 125%
| big = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 150%
| bigger = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 200%
| tall = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 350%
| great = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 450%
| grande = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 600%
| gigantic = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 144px


| thin = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}dünne Schrift
| bold = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}fette Schrift
| darker = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schriftfarbe grau
| truncate = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt


| verticalLine = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Linie am rechten Rand des Elements
| squareborder = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Eckiger Rahmen um ein Label-Widget
| circleborder = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Runder Rahmen um ein Label-Widget
| border-black = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schwarzer Rahmen um das Element
| border-white = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weißer Rahmen um das Element
| border-orange = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Oranger Rahmen um das Element
| border-red = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Roter Rahmen um das Element
| border-green = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grüner Rahmen um das Element
| border-mint = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Minzgrüner Rahmen um das Element
| border-lightblue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellblauer Rahmen um das Element
| border-blue = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blauer Rahmen um das Element
| border-gray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Rahmen um das Element
| border-yellow = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Gelber Rahmen um das Element
| border-lightgray = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellgrauer Rahmen um das Element


| blank = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Öffnet die angegebene URL in einem neuen Fenster
| transparent = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)
| half-transparent = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element ist halb durchscheinend (opacity: 0.5)
| blurry = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird in einen stark verschwommen, grauen Schatten umgewandelt
| shake = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden.
| fail-shake = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wackelt kurz hin und her und bleibt dann stehen
| marquee = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wandert wiederholt von rechts nach links
| icon round = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit abgerundeten Kanten
| round = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit abgerundeten Kanten
| icon square = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit eckigen Kanten
| square = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit eckigen Kanten
| readonly = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Manuelle Änderung des Device-Zustandes nicht möglich
| blink = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blinkende Animation für Label- oder Switch-Widget
| rotate-90 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element (z.B. Bild) um 90° rotieren
| horizontal = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element horizontal ausrichten
| negated = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Spiegelt die Wirkungsweise (tauscht oben/unten oder links/rechts)
| autohide = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Versteckt das Element, wenn das angegebene Reading ungültig ist
| notransmit = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert den Versand von Befehlen an FHEM
| invert = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertauscht Vorder- und Hintergrundfarbe
| data-lock = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Wenn das angegebene FHEM-Reading den Wert ''1'', ''on'' oder true'' hat, wird das Widget gesperrt
| tap = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Durch einfaches Antippen zum gewünschten Wert springen
| FS20 = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format
| value = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt ein Label am Element, das den aktuellen Wert enthält
| novalue= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Wert nicht als Text, nur als Grafik an
| timestamp = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Timestamp eines Readings statt dessen Inhalt
| percent = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um.
| nocache = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache
| hide = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt das Element nicht an und reserviert auch keinen Platz dafür
| fade = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird aus-, das nächste in der Liste eingeblendet
| rotate = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertikaler Rotationseffekt
| nolabels = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Beschriftungen werden ausgeblendet
| noticks = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hilfslinien und Beschriftungen an X- und Y-Achse werden ausgeblendet
| nobuttons = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Buttons werden ausgeblendet
| prefetch = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Browser lädt den Inhalt im Hintergrund bevor er angezeigt wird um Ladezeit zu sparen
| default = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Seite, die standardmäßig geladen wird bzw. Button, der standardmäßig "EIN" sein soll
| valueonly = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Wert in Textform statt eines Balkens
| circulate = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Anzeige startet bei Überschreiten des "max"-Wertes wieder beim "min"-Wert
| positiononly = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Stellt nur die aktuelle Position dar, nicht einen ganzen Balken vom Startpunkt bis zur aktuellen Position
| lineIndicator = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt eine vertikale Linie zur Anzeige der ausgewählten Farbe
| barIndicator = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt eine horizontale Linie zur Anzeige der ausgewählten Farbe
| roundIndicator = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Kreis zur Anzeige der ausgewählten Farbe
| hue-tick = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenstriche in einer Farbe aus einem Farbbereich ein
| hue-front= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Einstellhebel in einer Farbe aus einem Farbbereich ein
| hue-back= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Skalenhintergrund in einer Farbe aus einem Farbbereich ein
| dim-tick= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenstriche in einer Farbe aus einem Helligkeitsbereich ein
| dim-front= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Einstellhebel in einer Farbe aus einem Helligkeitsbereich ein
| dim-back= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenhintergrund in einer Farbe aus einem Helligkeitsbereich ein
| warn = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Benachrichtigungsicon über einem Icon
| activate = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Lädt die verlinkte Seite eines Pagetab-Widgets automatisch, wenn der Status eines Devices einem Wert aus dem Attribut ''data-get-on'' entspricht.
| labelright = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Platziert die Beschreibung rechts unter dem Icon statt zentriert
| interlock = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert, dass Popup-Elemente manuell geschlossen werden
| keepopen = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert, dass sich das Circle-Menü nach Klick auf ein Objekt schließt
| noshade = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrund wird beim Öffnen eines Circle-Menüs nicht abgedunkelt
| fixedlabel= {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert bei verschachtelten labels das Überschreiben von ''data-get''
| notext = {{!}}-
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}blendet die Skalenbeschriftung im Widget Scale aus
| {{!}}-
{{!}}'''{{{1|}}}'''{{!!}}'''Fehler:''' Klasse nicht vorhanden
}}
</onlyinclude>
</source>
[[Kategorie:Vorlage:]]