http://wiki.fhem.de/w/api.php?action=feedcontributions&user=Prinzkafka&feedformat=atom
FHEMWiki - Benutzerbeiträge [de]
2024-03-28T12:05:28Z
Benutzerbeiträge
MediaWiki 1.39.3
http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Thermostat&diff=29686
FTUI Widget Thermostat
2019-03-01T06:54:51Z
<p>Prinzkafka: /* CSS Klassen */</p>
<hr />
<div>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.<br />
<br />
<gallery><br />
File:FTUI_Widget_Thermostat_01.png<br />
File:FTUI_Widget_Thermostat_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Name des Readings, welches die gewünschte Temperatur enthält||desired-temp||<br />
|-<br />
|'''data-set'''||Name des Readings, mit dem die gewünschte Temperatur gesetzt wird||desired-temp||<br />
|-<br />
|'''data-temp'''||Name des Readings, welches die aktuelle Temperatur enthält||measured-temp||<br />
|-<br />
|'''data-valve'''||Name des Readings, das die Ventilstellung des Thermostates anzeigt||||data-valve="ValvePosition"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Stelle der Ventilposition in einer leerstellen-getrennten Zeile||-1 -> alles anzeigen||data-get-value="2"<br />
|-<br />
|'''data-mode'''||Name des Readings für die Modi (auto, manual, etc.) des Thermostates||||data-mode="controlMode"<br />
|-<br />
|'''data-min'''||Mindesttemperatur, die gesetzt werden kann||10||data-min="5"<br />
|-<br />
|'''data-max'''||Höchsttemperatur, die gesetzt werden kann||30||data-max="25"<br />
|-<br />
|'''data-step'''||Abstufung, in der die Temperatur gesetzt werden kann||1||data-step="0.5"<br />
|-<br />
|'''data-off'''||Wert, der gesendet werden muss, um das Thermostat abzuschalten||||data-off="5"<br />
|-<br />
|'''data-boost'''||Wert, der gesendet werden muss, um das Thermostat in den Boost-Modus zu bringen||||data-boost="30.5"<br />
|-<br />
|'''data-height'''||Höhe des Widgets||100||data-height="80"<br />
|-<br />
|'''data-width'''||Breite des Widgets||100||data-width="120"<br />
|-<br />
|'''data-touch-height'''||Höhe des Widgets während Änderungen||data-height||data-touch-height="200"<br />
|-<br />
|'''data-touch-width'''||Breite des Widgets während Änderungen||data-width||data-touch-width="200"<br />
|-<br />
|'''data-touch-position'''||Position des Wertes während Änderungen||left||data-touch-position="left"<br />
|-<br />
|'''data-inputcolor'''||Farbe des angezeigten Temperaturwertes || ||data-inputcolor="white"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Einstellhebels||#666||data-hdcolor="green"<br />
|-<br />
|'''data-fgcolor'''||Farbe des geriffelten Hintergrundes (Teilstriche)||#666||<br />
|-<br />
|'''data-bgcolor'''||Farbe des geriffelten Hintergrundes (Flächen zwischen den Teilstrichen)||keine||<br />
|-<br />
|'''data-mincolor'''||Farbe am unteren Ende des Einstellbereiches||#4477ff||<br />
|-<br />
|'''data-maxcolor'''||Farbe am oberen Ende des Einstellbereiches||#ff0000||<br />
|-<br />
|'''data-thickness'''||Dicke des Einstellbereiches||0.25||<br />
|-<br />
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"<br />
|-<br />
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"<br />
|-<br />
|'''data-font'''||Schriftart des Wertes||||<br />
|-<br />
|'''data-font-weight'''||Dicke der Schrift||||<br />
|-<br />
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="&deg;"</nowiki><br />
|-<br />
|'''data-lock'''||Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen||||<br />
|}<br />
<br />
==Hinweise==<br />
* 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><br />
* 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<br />
* Das Widget zeigt die Ventilposition nur an, wenn ''data-valve'' explizit definiert wurde.<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}<br />
|}<br />
<br />
==Beispiele==<br />
===HomeMatic HM-CC-RT-DN===<br />
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.<br />
<syntaxhighlight lang="html"><br />
<div data-type="thermostat" data-device="HM_302111_Clima"></div><br />
</syntaxhighlight><br />
<br />
Das entspricht in diesem Fall der längeren Version:<br />
<syntaxhighlight lang="html"><br />
<div data-type="thermostat" <br />
data-device="HM_302111_Clima" <br />
data-get="desired-temp" <br />
data-temp="measured-temp"><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===MAX! Thermostat===<br />
<syntaxhighlight lang="html"><br />
<div data-type="thermostat"<br />
data-device="HZ_Tuer" <br />
data-valve="valveposition" <br />
data-get="desiredTemperature" <br />
data-temp="temperature" <br />
data-set="desiredTemperature"><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===Mit Off- und Boost-Funktion===<br />
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.<br />
<syntaxhighlight lang="html"><br />
<div data-type="thermostat"<br />
data-device="HM_302111_Clima"<br />
data-valve="ValvePosition"<br />
data-min="5"<br />
data-off="off" <br />
data-max="31"<br />
data-boost="31"><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Thermostat_02.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI|Thermostat]]</div>
Prinzkafka
http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Scale&diff=29525
FTUI Widget Scale
2019-02-15T06:40:31Z
<p>Prinzkafka: /* CSS-Klassen */</p>
<hr />
<div>{{Todo|Vervollständigen}}<br />
Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.<br />
<br />
<gallery><br />
File:ftui-widget-scale.png<br />
File:ftui-widget-scale-red.png<br />
File:ftui-widget-scale-vertical.png<br />
</gallery><br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading Reading angezeigt werden soll||||<br />
|-<br />
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||<br />
|-<br />
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0||<br />
|-<br />
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält||100||<br />
|-<br />
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"<br />
|-<br />
|'''data-font-size'''||Schriftgröße||12||<br />
|-<br />
|'''data-tick'''||||1||<br />
|-<br />
|'''data-value-interval'''||||50||<br />
|-<br />
|'''data-extra-tick'''||||10||<br />
|-<br />
|'''data-tick-color'''||||#eee||<br />
|-<br />
||'''data-limits-get'''||||||<br />
|-<br />
||'''data-limits'''||||||<br />
|-<br />
||'''data-color'''||||#aa6900||<br />
|-<br />
|'''data-colors'''||Array von Farbwerten, die die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]'<br />
|}<br />
<br />
==CSS-Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|notext}}<br />
|}<br />
<br />
==Beispiele==<br />
<br />
==Weitere Informationen==<br />
*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]<br />
<br />
[[Kategorie:FHEM Tablet UI|Scale]]</div>
Prinzkafka
http://wiki.fhem.de/w/index.php?title=Vorlage:FTUI_Klasse&diff=29524
Vorlage:FTUI Klasse
2019-02-15T06:39:26Z
<p>Prinzkafka: /* Code */</p>
<hr />
<div>Vorlage für die dynamische Anzeige jeweils einer CSS-Klasse, die von [[FHEM Tablet UI]] zur Verfügung gestellt wird.<br />
<br />
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>).<br />
<br />
Soll die Vorlage öfter eingebunden werden, muss das in einer Zeile erfolgen, ansonsten gibt es unschöne Leerzeilen.<br />
<br />
==Beispiel==<br />
Folgender Code<br />
<source lang="html"><br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|inline}}{{FTUI Klasse|narrow}}<br />
|}<br />
</source><br />
<br />
ergibt folgendes Ergebnis:<br />
<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|inline}}{{FTUI Klasse|narrow}}<br />
|}<br />
<br />
==Code==<br />
<source lang="html"><br />
<onlyinclude><br />
{{#switch: {{{1|}}}<br />
<br />
<!-- POSITIONIERUNG --><br />
<!-- GENERELL --><br />
| inline = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente in einer Reihe, kein Zeilenumbruch<br />
| newline = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch<br />
| top-space = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz oben<br />
| top-space-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz oben<br />
| top-space-3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz oben<br />
| left-space = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz links<br />
| left-space-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz links<br />
| left-space-3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz links<br />
| right-space = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px zusätzlicher Platz rechts<br />
| right-space-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px zusätzlicher Platz rechts<br />
| right-space-3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px zusätzlicher Platz rechts<br />
| top-narrow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -15px näher am oberen Rand<br />
| top-narrow-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -30px näher am oberen Rand<br />
| top-narrow-10 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}} -10px näher am oberen Rand<br />
| left-narrow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter links<br />
| left-narrow-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter links<br />
| left-narrow-3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter links<br />
| right-narrow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px weiter rechts<br />
| right-narrow-2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}30px weiter rechts<br />
| right-narrow-3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}45px weiter rechts<br />
| centered = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontal zentriert (muss im Eltern-<nowiki><div></nowiki> gesetzt werden)<br />
| wider = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}15px Abstand rund um das Element<br />
| narrow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weniger Abstand zum Element darüber<br />
| fullsize = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}100% Breite und Höhe<br />
| compressed = {{!}}-<br />
{{!}} 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<br />
| compressed-50 = {{!}}-<br />
{{!}} 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<br />
| height-narrow= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können<br />
| w1x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Einfache fixe Breite<br />
| w2x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Doppelte fixe Breite<br />
| w3x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Dreifache fixe Breite<br />
| maxw40 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Maximale Breite 40px<br />
| doublebox-v = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können<br />
| doublebox-h = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können<br />
| triplebox-v = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können<br />
| right = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird rechtsbündig angeordnet<br />
<br />
<!-- SHEET-ROW-COL --><br />
<br />
| sheet = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Startet eine neue Tabelle<br />
| row = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Reihe in der aktuellen Tabelle<br />
| cell = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Zelle (bzw. Spalte) in der aktuellen Reihe<br />
| cell-1-x = {{!}}-<br />
{{!}} 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%))<br />
| cell-x = {{!}}-<br />
{{!}} 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%))<br />
| left-align = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle linksbündig<br />
| right-align = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle rechtsbündig<br />
| bottom-align = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am unteren Rand<br />
| top-align = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle am oberen Rand<br />
| center-align = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt der Zelle zentriert<br />
<br />
<!-- ROW-COL --><br />
| col = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Breite automatisch.<br />
| col-1-x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%))<br />
| col-x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%))<br />
<br />
<!-- HBOX/VBOX --><br />
| vbox = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertikale Box - Inhalte übereinander<br />
| hbox = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Horizontale Box - Inhalte nebeneinander<br />
| card = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Eine "Haupt"-Box<br />
| phone-width = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Breite darf nicht unter die Display-Breite des Gerätes sinken<br />
| full-height = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height)<br />
| full-width = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalt geht über die gesamte Breite des Browser-Fensters (100% width)<br />
| grow-0 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf nicht wachsen<br />
| grow-1 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Standardgröße der Box<br />
| grow-2 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das doppelte wachsen<br />
| grow-x = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Box darf um das X-fache wachsen<br />
| items-top = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden oben ausgerichtet<br />
| items-center = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden zentriert<br />
| items-bottom = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Inhalte der Box werden unten ausgerichtet<br />
| items-space-between = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz zwischen den Elementen in der Box<br />
| items-space-around = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Übriger Platz um die Elemente in der Box<br />
<br />
<!-- VORDERGRUNDFARBEN --><br />
<br />
| red = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe rot<br />
| green = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grün<br />
| blue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe blau<br />
| lightblue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellblau<br />
| orange = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe orange<br />
| gray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe grau<br />
| lightgray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe hellgrau<br />
| white = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe weiß<br />
| black = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe schwarz<br />
| mint = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe minzgrün<br />
| yellow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vordergrundfarbe gelb<br />
<br />
<!-- HINTERGRUNDFARBEN --><br />
| bg-limit = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Ändert bei Label-Widgets die Hinter- statt der Vordergrundfarbe in Abhängigkeit von ''data-limit''<br />
| bg-red = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe rot<br />
| bg-green = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grün<br />
| bg-blue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe blau<br />
| bg-lightblue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellblau<br />
| bg-orange = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe orange<br />
| bg-gray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe grau<br />
| bg-lightgray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe hellgrau<br />
| bg-white = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe weiß<br />
| bg-black = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe schwarz<br />
| bg-mint = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe minzgrün<br />
| bg-yellow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrundfarbe gelb<br />
<br />
<!-- GROESSEN --><br />
<br />
| mini = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 50%<br />
| tiny = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 60%<br />
| small = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 80%<br />
| normal = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 100%<br />
| large = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 125%<br />
| big = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 150%<br />
| bigger = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 200%<br />
| tall = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 350%<br />
| great = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 450%<br />
| grande = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 600%<br />
| gigantic = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Setzt die Größe des Elementes auf 144px<br />
<br />
<!-- SCHRIFT --><br />
| thin = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}dünne Schrift<br />
| bold = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}fette Schrift<br />
| darker = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schriftfarbe grau<br />
| truncate = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt<br />
<br />
<!-- RAHMEN --><br />
| verticalLine = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Linie am rechten Rand des Elements<br />
| squareborder = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Eckiger Rahmen um ein Label-Widget<br />
| circleborder = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Runder Rahmen um ein Label-Widget<br />
| border-black = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Schwarzer Rahmen um das Element<br />
| border-white = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Weißer Rahmen um das Element<br />
| border-orange = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Oranger Rahmen um das Element<br />
| border-red = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Roter Rahmen um das Element<br />
| border-green = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grüner Rahmen um das Element<br />
| border-mint = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Minzgrüner Rahmen um das Element<br />
| border-lightblue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellblauer Rahmen um das Element<br />
| border-blue = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blauer Rahmen um das Element<br />
| border-gray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Grauer Rahmen um das Element<br />
| border-yellow = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Gelber Rahmen um das Element<br />
| border-lightgray = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hellgrauer Rahmen um das Element<br />
<br />
<!-- SONSTIGES --><br />
| blank = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Öffnet die angegebene URL in einem neuen Fenster<br />
| transparent = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)<br />
| half-transparent = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element ist halb durchscheinend (opacity: 0.5)<br />
| blurry = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird in einen stark verschwommen, grauen Schatten umgewandelt<br />
| shake = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden.<br />
| fail-shake = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wackelt kurz hin und her und bleibt dann stehen<br />
| marquee = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wandert wiederholt von rechts nach links<br />
| icon round = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit abgerundeten Kanten<br />
| round = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit abgerundeten Kanten<br />
| icon square = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit eckigen Kanten<br />
| square = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Hintergrund mit eckigen Kanten<br />
| readonly = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Manuelle Änderung des Device-Zustandes nicht möglich<br />
| blink = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Blinkende Animation für Label- oder Switch-Widget<br />
| rotate-90 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element (z.B. Bild) um 90° rotieren<br />
| horizontal = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element horizontal ausrichten<br />
| negated = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Spiegelt die Wirkungsweise (tauscht oben/unten oder links/rechts)<br />
| autohide = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Versteckt das Element, wenn das angegebene Reading ungültig ist<br />
| notransmit = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert den Versand von Befehlen an FHEM<br />
| invert = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertauscht Vorder- und Hintergrundfarbe<br />
| data-lock = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Wenn das angegebene FHEM-Reading den Wert ''1'', ''on'' oder true'' hat, wird das Widget gesperrt<br />
| tap = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Durch einfaches Antippen zum gewünschten Wert springen<br />
| FS20 = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format<br />
| value = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt ein Label am Element, das den aktuellen Wert enthält<br />
| novalue= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Wert nicht als Text, nur als Grafik an<br />
| timestamp = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Timestamp eines Readings statt dessen Inhalt<br />
| percent = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um.<br />
| nocache = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache<br />
| hide = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt das Element nicht an und reserviert auch keinen Platz dafür<br />
| fade = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Element wird aus-, das nächste in der Liste eingeblendet<br />
| rotate = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Vertikaler Rotationseffekt<br />
| nolabels = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Beschriftungen werden ausgeblendet<br />
| noticks = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hilfslinien und Beschriftungen an X- und Y-Achse werden ausgeblendet<br />
| nobuttons = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Buttons werden ausgeblendet<br />
| prefetch = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Browser lädt den Inhalt im Hintergrund bevor er angezeigt wird um Ladezeit zu sparen<br />
| default = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Seite, die standardmäßig geladen wird bzw. Button, der standardmäßig "EIN" sein soll<br />
| valueonly = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Zeigt den Wert in Textform statt eines Balkens<br />
| circulate = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Anzeige startet bei Überschreiten des "max"-Wertes wieder beim "min"-Wert<br />
| positiononly = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Stellt nur die aktuelle Position dar, nicht einen ganzen Balken vom Startpunkt bis zur aktuellen Position<br />
| lineIndicator = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt eine vertikale Linie zur Anzeige der ausgewählten Farbe<br />
| barIndicator = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt eine horizontale Linie zur Anzeige der ausgewählten Farbe<br />
| roundIndicator = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Kreis zur Anzeige der ausgewählten Farbe<br />
| hue-tick = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenstriche in einer Farbe aus einem Farbbereich ein<br />
| hue-front= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Einstellhebel in einer Farbe aus einem Farbbereich ein<br />
| hue-back= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Skalenhintergrund in einer Farbe aus einem Farbbereich ein<br />
| dim-tick= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenstriche in einer Farbe aus einem Helligkeitsbereich ein<br />
| dim-front= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt den Einstellhebel in einer Farbe aus einem Helligkeitsbereich ein<br />
| dim-back= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Färbt die Skalenhintergrund in einer Farbe aus einem Helligkeitsbereich ein<br />
| warn = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Erzeugt einen Benachrichtigungsicon über einem Icon<br />
| activate = {{!}}-<br />
{{!}} 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.<br />
| labelright = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Platziert die Beschreibung rechts unter dem Icon statt zentriert<br />
| interlock = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert, dass Popup-Elemente manuell geschlossen werden<br />
| keepopen = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert, dass sich das Circle-Menü nach Klick auf ein Objekt schließt<br />
| noshade = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Hintergrund wird beim Öffnen eines Circle-Menüs nicht abgedunkelt<br />
| fixedlabel= {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}Verhindert bei verschachtelten labels das Überschreiben von ''data-get''<br />
| notext = {{!}}-<br />
{{!}} style="width: 20%" {{!}}'''{{{1|}}}'''{{!!}}blendet die Skalenbeschriftung im Widget Scale aus<br />
| {{!}}-<br />
{{!}}'''{{{1|}}}'''{{!!}}'''Fehler:''' Klasse nicht vorhanden<br />
}}<br />
</onlyinclude><br />
</source><br />
[[Kategorie:Vorlage:]]</div>
Prinzkafka