http://wiki.fhem.de/w/api.php?action=feedcontributions&feedformat=atom&user=Sinus61FHEMWiki - Benutzerbeiträge [de]2026-04-13T10:11:27ZBenutzerbeiträgeMediaWiki 1.43.6http://wiki.fhem.de/w/index.php?title=Hue&diff=36571Hue2021-12-16T11:01:48Z<p>Sinus61: /* Spezielle Konfigurationsmöglichkeiten */</p>
<hr />
<div><div style="float:right">{{Infobox Modul<br />
|Name=HUEBridge<br />
|ModPurpose=Anbindung Bridge des Philips Hue Lighting System<br />
|ModType=d<br />
<!-- |ModCategory= (noch?) nicht verwendet --><br />
|ModCmdRef=HUEBridge<br />
|ModForumArea=Zigbee<br />
|ModTechName=30_HUEBridge.pm<br />
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])<br />
}}<br />
{{Infobox Modul<br />
|Name=HUEDevice<br />
|ModPurpose=Ansteuerung Geräte des Philips Hue Lighting System über HUEBridge<br />
|ModType=d<br />
<!-- |ModCategory= (noch?) nicht verwendet --><br />
|ModCmdRef=HUEDevice<br />
|ModForumArea=Zigbee<br />
|ModTechName=31_HUEDevice.pm<br />
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])<br />
}}<br />
</div><br />
<br />
== HUE-Bridge ==<br />
=== Einrichtung in FHEM ===<br />
Die Einrichtung ist wirklich einfach. Mit<br />
:<code>define Wiesollesheißen HUEBridge eu.re.ip.1</code><br />
wird die Bridge eingebunden. Dann einfach auf den runden Knopf in der Mitte der Bridge drücken und sie wird von FHEM erkannt. Die drei Lampen des Starterkits werden automatisch erkannt und sind ansteuerbar -> fertig!<br />
<br />
WICHTIG: danach in FHEM einmal die Konfiguration speichern damit der Pairing-Key gesichert wird. Sonst muss beim nächsten FHEM-Neustart das Pairing erneut durchgeführt werden.<br />
<br />
Falls die Hue Bridge resetet wurde bleibt der Status auf "paired" und geht nicht mehr auf connected. Um das pairing erneut durchzuführen, muss das Attribut "key" gelöscht werden.<br />
<br />
=== Nonblocking ===<br />
Wenn man möchte, dass die Versuche, die HUEBridge zu kontaktieren, FHEM nicht blockieren, sollte man <br />
:<code>attr <HUEBridge_Name> httpUtils 1</code><br />
setzen.<br />
<br />
== HUE-Device ==<br />
Als Gerät können alle Hue und LightLink kompatiblen Modelle verwendet werden, die sich an der Bridge anlernen lassen. Dies sind unter anderem:<br />
*HueBulbs (E27, GU10, Lux, White, ...)<br />
*Hue Beyond und Phoenix<br />
*Friends of Hue LightStrips und LivingColors Bloom<br />
*LivingColors ab gen2<br />
*LivingColors Bloom, Iris und Aura<br />
*LivingWhites Energiesparlampen<br />
*LivingWhites Leuchtenadapter<br />
*LivingWhites Bulbs<br />
*[[HUE_Dimmer_Switch|Hue Tap und Hue Dimmer]] (mit Einschränkungen)<br />
*dresden elektronik Vorschaltgeräte<br />
*OSRAM LIGHTIFY Lampen (an der Hue Bridge angelernt)<br />
*Müller Licht tint<br />
*...<br />
<br />
Diese sind jeweils über eine Bridge (HueBridge) steuerbar. Die LivingColors und LivingWhites Geräte sind vorher mit Hilfe einer LivingColors oder LivingWhites Fernbedienung an der Bridge anzulernen.<br />
<br />
Es werden auch alle HUE Sensoren (Taster, Bewegungsmelder) unterstützt. Diese werden aber nicht per [[autocreate]] angelegt, sondern müssen manuell definiert werden. Hier ist auf ein passendes Polling-Intervall zu achten (siehe: [[HUE_Dimmer_Switch|HUE Dimmer Switch]]). <br />
<br />
Sensoren (und Aktoren) lassen sich Konfigurieren (parameter Einstellen) und eigene Set- und Get- Kommandos im definieren.<br />
<br />
=== Mögliche andere Gateways ===<br />
HUEDevice Client-Devices können (mit leicht unterschiedlichem Funktionsumfang) auch mit den folgenden Gateways anderer Hersteller und dem zugehörigen Bridge-Device verwendet werden:<br />
*[[Hue#RaspBee_.26_ConBee|RaspBee & ConBee mit deCONZ]] von Dresden Elektronik<br />
** inklusive Push-API Erweiterung und Szenen <br />
*[[TRÅDFRI| TRÅDFRI bzw. IKEA Home smart]] <br />
** inklusive Rollos<br />
*[https://github.com/bwssytems/ha-bridge HA-Bridge]<br />
** inklusive aller [https://github.com/dresden-elektronik/deconz-rest-plugin/wiki/Supported-Devices unterstützten Geräte] (Lampen, Sensoren, Thermostate, Rollos, ...)<br />
** inklusive Update des HA-Bridge internen Gerätestatus per <code>habridgeupdate</code> Kommando<br />
*[[ZigBee#Lightify_von_Osram|OSRAM LIGHTIFY Gateway]]<br />
<br />
Das HUEBridge Modul erkennt, wenn ein Leuchtmittel zwischen einer Hue und einer deCONZ Bridge (oder umgekehrt) wechselt und verschiebt das zugehörige HUEDevice in FHEM jeweils zum richtigen Bridge-Device. D.h. wenn z.B. zum Firmwareupdate die Bridge gewechselt wird, ist auf FHEM Seite nichts weiter zu tun.<br />
<br />
=== Grundlagen - Farbmodelle ===<br />
Ein HueDevice kann per set-Befehl über unterschiedliche Farbmodelle gesteuert werden. In der folgenden Tabelle ist dargestellt, welche Werte-Kombinationen sinnvoll sind:<br />
{| class="wikitable"<br />
|-<br />
! Farbmodell !! Bestandteile !! Beispiel<br />
|-<br />
| xyY || x- und y-Koordinate im Farbraum, Y ist die Helligkeit || <code> set bulb1 xy 0.4595,0.4105 : bri 220 </code><br />
|-<br />
| hue,sat,bri || Farbwert, Sättigung und Helligkeit || <code> set bulb1 hue 14922 : sat 144 : bri 220 </code><br />
|-<br />
| ct || Farbwert über Farbtemperatur || <code> set bulb1 color 2600 </code><br />
|-<br />
| rgb || Farbbestandteile rot, grün und blau || <code> set bulb1 rgb FFC698 </code><br />
|}<br />
'''Hinweis:''' Zur Regelung der Helligkeit sind die Befehle ''bri'' und ''pct'' gleichwertig. ''bri'' hat den Bereich 0..254, ''pct'' 0..100 .<br />
<br />
Das Modul lässt die Mischung von Angaben aus unterschiedlichen Farbmodellen technisch zu, jedoch sind diese nicht immer sinnvoll.<br />
<br />
'''HA-Bridge:''' In der HA-Bridge können virtuelle Devices definiert werden, welche in FHEM als ''Dimmable light'' eingebunden und verwendet werden können.<br />
<br />
Zusätzlich zu den bereits beschriebenen set-Befehlen kann der Zustand der HA-Bridge-Devices mit Hilfe von ''habridgeupdate'' in Kombination mit ''on'', ''off'', ''pct'' und ''bri'' aktualisiert werden, ohne dass die HA-Bridge einen Schaltbefehl versendet. Beispiel: <code>set bulb1 habridgeupdate : on : pct 50</code> Details siehe: [https://github.com/bwssytems/ha-bridge#update-bridge-internal-light-state].<br />
<br />
=== Darstellung im Webfrontend ===<br />
Wenn man die SVG Icons verwendet, ist es sinnvoll, das Attribut color-icons zu setzen. Mit <br />
:<code>attr HUEDevice1 color-icons 2</code> <br />
werden z.B. die Farben und der Dimmzustand der Lampe als Icon dargestellt. Damit das ganze funktioniert, muss noch <br />
:<code>attr WEB iconPath fhemSVG:openautomation:default</code> <br />
gesetzt werden.<br />
<br />
=== Spezielle Konfigurationsmöglichkeiten ===<br />
Zur Syntax der nachfolgenden Attribute (für widgets) siehe {{Link2Forum|Topic=119298|LinkText=<br />
Patchvorschlag im Forum}}<br />
==== setList ==== <br />
Ermöglicht einen indirekten Zugriff auf den Befehl ''setsensor'' der HUEBridge.<br />
<br />
Beispiele <br />
* {{Link2Forum|Topic=118788|LinkText= <br />
Eurotonics Spirit bzw. MOES Thermostat}} <br />
* [https://forum.fhem.de/index.php/topic,11020.msg1192888.html#msg1192888 HueLabs Scene aus FHEM über die HUEBridge ein- und ausschalten] <br />
<br />
==== configList ====<br />
Ermöglicht einen indirekten Zugriff auf den Befehl ''configsensor'' der HUEBridge.<br />
<br />
Beispiele <br />
* {{Link2Forum|Topic=115102|Message=1093876|LinkText=Aqara motion sensor - duration}} <br />
* {{Link2Forum|Topic=111887|Message=1064164|LinkText=Aqara vibration sensor - sensitivity}}<br />
<br />
== RaspBee & ConBee ==<br />
Das HUEBridge Modul unterstützt auch die ZigBee Gateway Module RaspBee und ConBee von Dresden Elektronik über die zugehörige deCONZ Software und die Wireless Light Control WebApp und die Phoscon WebApp (kommt zusammen mit deConz). Die hierzu erhältlichen Funk-Vorschaltgeräte sind noch nicht getestet, sollten aber auch funktionieren.<br />
<br />
Im diesem {{Link2Forum|Topic=80985|LinkText=Forenbeitrag}} wird über Details der HUE Module diskutiert, die das deCONZ PushAPI über Websockets unterstützen (die entsprechenden Modulversionen sind mittlerweile regulär verfügbar). Sensoren müssen hier nicht mehr gepollt werden.<br />
<br />
Mittlerweile funktioniert die Einbindung der RaspBee und ConBee Module auf einem sehr einfachen Weg. Dieser ist in diesem {{Link2Forum|Topic=95288|LinkText=Forenbeitrag}} zusammengefasst. Zusätzliche Plugins sind nicht mehr nötig.<br />
<br />
=== Installation von deCONZ unter Proxmox auf einem Intel Nuc ===<br />
Folgende Schritte sind notwendig, um unter Proxmox zu installieren:<br />
<br />
* Installation einer Ubuntu oder Debian VM:<br />
:<syntaxhighlight lang="bash"><br />
cd /var/lib/vz/template/iso/<br />
wget http://releases.ubuntu.com/18.04/ubuntu-18.04.2-desktop-amd64.iso<br />
</syntaxhighlight><br />
:oder<br />
:<syntaxhighlight lang="bash"><br />
cd /var/lib/vz/template/iso/<br />
wget https://cdimage.debian.org/debian-cd/current/amd64/iso-cd/debian-9.8.0-amd64-xfce-CD-1.iso<br />
</syntaxhighlight><br />
<br />
* Weiterreichen des USB Devices in die VM:<br />
: Auflistung der verfügbaren USB Geräte:<br />
:<syntaxhighlight lang="bash"><br />
root@node1:~# lsusb<br />
Bus 002 Device 004: ID 0403:6015 Future Technology Devices International, Ltd Bridge(I2C/SPI/UART/FIFO)<br />
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub<br />
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub<br />
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub<br />
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub<br />
</syntaxhighlight><br />
:Der Conbee meldet sich als "Future Technology Devices International, Ltd Bridge(I2C/SPI/UART/FIFO)", hier ist die ID wichtig (0403:6015).<br />
:Anschließend kann das USB Gerät an die VM weitergeleitet werden. Der Wert 804 ist durch die ID der VM zu ersetzen. <br />
:<syntaxhighlight lang="bash"><br />
qm set 804 -usb0 host=0403:6015<br />
</syntaxhighlight><br />
<br />
* Installation von deCONZ: <br />
:<syntaxhighlight lang="bash"><br />
apt-get update && apt-get upgrade -y<br />
wget http://www.dresden-elektronik.de/deconz/ubuntu/beta/deconz-2.05.60-qt5.deb<br />
sudo dpkg -i deconz-2.05.60-qt5.deb <br />
sudo apt install -f<br />
sudo systemctl enable deconz<br />
reboot now<br />
</syntaxhighlight><br />
<br />
=== Installation von deCONZ unter Docker ===<br />
https://hub.docker.com/r/marthoc/deconz/<br />
<br />
=== Installation von deCONZ auf einem RaspberryPI ===<br />
Für den ConBee2 [https://phoscon.de/en/conbee2/install#raspbian kann der guten Installation von Phoscon gefolgt werden]. Entweder ihr installiert deCONZ direkt (wie hier beschrieben) oder über einen Docker Container. Der Docker Container hat ein paar Einschränkungen bzgl. Firmware Updates.<br />
<br />
Der ausführende Benutzer muss dialout Rechte haben um auf /dev/tty* zugreifen zu dürfen:<br />
:<syntaxhighlight lang="bash"><br />
sudo gpasswd -a pi dialout<br />
</syntaxhighlight><br />
Im Standard wird deCONZ mit dem pi-Benutzer (user id 1000) ausgeführt.<br />
<br />
Das deCONZ Repository bei APT hinzufügen (Vorteil davon ist dass später ganz normal mit sudo apt update/upgrade deCONZ aktualisieren könnt):<br />
:<syntaxhighlight lang="bash"><br />
wget -O - http://phoscon.de/apt/deconz.pub.key | \<br />
sudo apt-key add -;<br />
sudo sh -c "echo 'deb http://phoscon.de/apt/deconz \<br />
$(lsb_release -cs) main' > \<br />
/etc/apt/sources.list.d/deconz.list";<br />
sudo apt update<br />
</syntaxhighlight><br />
<br />
Mit der Einführung des Raspberry Pi 3 sind noch weitere Einstellungen notwendig. Diese sind hier: [[Raspberry Pi 3: GPIO-Port Module und Bluetooth|Raspberry Pi 3: GPIO-Port Module und Bluetooth – FHEMWiki]] ausführlich beschrieben.<br />
<br />
deCONZ installieren:<br />
:<syntaxhighlight lang="bash"><br />
sudo apt install deconz<br />
</syntaxhighlight><br />
Wenn ihr euren RaspberryPI mit UI betreibt, kann deCONZ über ''Menu > Programming > deCONZ'' aufgerufen werden. Es gibt aber auch den Service-Modus, der ohne X11 funktionert. Hierfür die Datei ''/lib/systemd/system/deconz.service'' anpassen (ich habe z.B. den Port des Webservers geändert) und den Service wie folgt aktivieren:<br />
:<syntaxhighlight lang="bash"><br />
systemctl enable deconz.service<br />
</syntaxhighlight><br />
<br />
== HUE auf der Fritzbox ==<br />
Da auf der FB standardmäßig kein JSON installiert ist, muss dies nachinstalliert werden: Man lädt das JSON-Paket http://search.cpan.org/CPAN/authors/id/M/MA/MAKAMAKA/JSON-2.53.tar.gz, packt es aus und kopiert den Inhalt vom <b>lib-Verzeichnis</b> nach \fhem\lib\perl5\site_perl\5.12.2<br />
<br />
== HUE auf der Synology Diskstation ==<br />
Da auf der DS standardmäßig kein JSON installiert ist, muss dies nachinstalliert werden, die Anleitung dazu {{Link2Forum|Topic=19093|Message=224641|LinkText=in diesem Forenbeitrag}}.<br />
<br />
[[Kategorie:ZigBee]]<br />
[[Kategorie:Lichteffektgeräte]]<br />
[[Kategorie:IP Components]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=Flusspegel&diff=36305Flusspegel2021-11-26T11:48:03Z<p>Sinus61: Alternative JsonMod zur Abfrage hinzugefügt</p>
<hr />
<div>Der [[{{PAGENAME}}|Artikel "Flusspegel"]] beschreibt das Vorgehen zur Integration eines amtlichen deutschen Flusspegels in FHEM.<br />
<br />
==Etwas Theorie==<br />
Ein Pegel ist eine willkürliche amtliche Höhenfestlegung. Der Nullpunkt des Pegels sagt wenig über die reale Gewässertiefe. Pegelstände werden oft bei Hochwassersituationen interessant. Für die Vorhersage ist aber die sogenannte Abflussmenge (in Kubikmeter je Sekunde) eines höher gelegenen Pegels von Interesse. Pegelhöhen sind lediglich indirekte Indizien.<br />
<br />
==Datenlieferant==<br />
Es gibt mehrere Bundesämter, die die Daten der offiziellen deutschen Flusspegel vorhalten. Von Interesse sind die Daten der Wasserstraßen- und Schifffahrtsverwaltung des Bundes: Sie werden im json-Format bereitgestellt. Damit ist die Integration in FHEM problemlos möglich. Zudem kann '''Pegelonline''' mit 200 Millionen Abfragen im Jahr als stabiler, langfristig verfügbarer Dienst angesehen werden.<br />
<br />
==Pegeldaten finden==<br />
Einen konkreten amtlichen Pegel findet man, indem man im ersten Schritt die UUID des gewünschten Pegels in https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations.json herausfindet. Für den Pegel Elbe, Lutherstadt Wittenberg ist das die UUID "5c47b0ce-f33f-769b-1a02-89bf7772cb0d2878". Im zweiten Schritt wird die URL-Vorlage <br />
<br />
<syntaxhighlight lang="html"><br />
https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/[UUID]/W/currentmeasurement.json<br />
</syntaxhighlight><br />
<br />
mit der gefundenen UUID konkretisiert. Im Ergebnis erhält man eine URL mit den Daten (mehr als nur die Pegelhöhe selbst) des gewünschten Pegels, beispielsweise für den Pegel Elbe, Lutherstadt Wittenberg, den man im Browser testweise aufruft:<br />
<br />
<syntaxhighlight lang="html"><br />
https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/070b1eb4-3872-4e07-b2e5-e25fd9251b93/W/currentmeasurement.json<br />
</syntaxhighlight><br />
<br />
Da sich Flusspegel nicht sprunghaft ändern, sollte die Abfragehäufigkeit eine Stunde (3600) nicht unterschreiten.<br />
<br />
==Integration in FHEM==<br />
Zur regelmäßigen Abfrage der Daten wird das Modul [[HTTPMOD]] verwendet.<br />
<syntaxhighlight lang="html"><br />
define ElbePegelWittenberg HTTPMOD https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/070b1eb4-3872-4e07-b2e5-e25fd9251b93/W/currentmeasurement.json 3600<br />
attr ElbePegelWittenberg alias Pegel Wittenberg<br />
attr ElbePegelWittenberg enableControlSet 1<br />
attr ElbePegelWittenberg event-on-change-reading stateMnwMhw,stateNswHsw,timestamp,trend<br />
attr ElbePegelWittenberg event-on-update-reading pegel,value<br />
attr ElbePegelWittenberg extractAllJSON 1<br />
attr ElbePegelWittenberg timeout 5<br />
attr ElbePegelWittenberg stateFormat {sprintf("%.0f",ReadingsVal($name,"pegel",0))}<br />
attr ElbePegelWittenberg userReadings pegel:value.* {ReadingsVal($name,"value",0)}<br />
</syntaxhighlight><br />
<br />
Alternative: Verwendung des Moduls [[JsonMod]].<br />
define ElbePegelWittenberg JsonMod <nowiki>https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/070b1eb4-3872-4e07-b2e5-e25fd9251b93/W/currentmeasurement.json</nowiki><br />
attr ElbePegelWittenberg alias Pegel Wittenberg<br />
attr ElbePegelWittenberg readingList single((jsonPathf('$.value', '%0.2f')/100), 'pegel', 0);;<br />
attr ElbePegelWittenberg stateFormat pegel<br />
Ein dazugehöriges [[FileLog|Logfile]] könnte so definiert sein:<br />
<br />
<syntaxhighlight lang="html"><br />
define FileLog_ElbePegelWittenberg FileLog ./log/ElbePegelWittenberg-%Y.log ElbePegelWittenberg<br />
attr FileLog_ElbePegelWittenberg logtype text<br />
</syntaxhighlight><br />
<br />
Die [[SVG|grafische Darstellung]] ließe sich dann so realisieren:<br />
<br />
<syntaxhighlight lang="html"><br />
define SVG_FileLog_ElbePegelWittenberg SVG FileLog_ElbePegelWittenberg:SVG_FileLog_ElbePegelWittenberg:CURRENT<br />
</syntaxhighlight><br />
<br />
Die dazugehörige Grafikdatei SVG_FileLog_ElbePegelWittenberg.gplot<br />
<syntaxhighlight lang="html"><br />
# Created by FHEM/98_SVG.pm, 2018-04-09 21:30:11<br />
set terminal png transparent size <SIZE> crop<br />
set output '<OUT>.png'<br />
set xdata time<br />
set timefmt "%Y-%m-%d_%H:%M:%S"<br />
set xlabel " "<br />
set title 'Pegel Wittenberg'<br />
set ytics <br />
set y2tics <br />
set grid y2tics<br />
set ylabel ""<br />
set y2label "Pegel"<br />
set yrange [0:8]<br />
set y2range [0:800]<br />
<br />
#FileLog_ElbePegelWittenberg 4:ElbePegelWittenberg.pegel\x3a::<br />
<br />
plot "<IN>" using 1:2 axes x1y2 title 'Pegel Wittenberg' ls l2fill lw 1 with steps<br />
</syntaxhighlight><br />
<br />
==Abflussmenge==<br />
Die eigentlich interessantere Abflussmenge kann über eine geringfügig andere URL abgefragt werden: in der ermittelten URL ist lediglich das "W" durch "Q" zu ersetzen, im obigen Beispiel also<br />
<br />
<syntaxhighlight lang="html"><br />
https://www.pegelonline.wsv.de/webservices/rest-api/v2/stations/070b1eb4-3872-4e07-b2e5-e25fd9251b93/Q/currentmeasurement.json<br />
</syntaxhighlight><br />
<br />
==Einzelwert "trend"==<br />
Der bei beiden URL auch gelieferte Wert "trend" ist laut Aussage ITZBund "künftig wegfallend".<br />
<br />
== Links ==<br />
* vollständige Dokumentation der WebServices von [https://www.pegelonline.wsv.de/webservice/guideRestapi PegelOnline]<br />
* Diskussion über das Thema in {{Link2Forum|Topic=97570|LinkText=diesem Forenthread}}<br />
<br />
[[Kategorie:Code_Snippets]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29651FTUI Widget Label2019-02-25T17:14:45Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-factor'''||Multipliziert Wert des Readings mit angegebener Zahl||1||data-factor="3.6"<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' <br><br />
data-classes='["blink","blurry","shake"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}{{FTUI Klasse|blink}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29650FTUI Widget Label2019-02-25T16:55:24Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-factor'''||Multipliziert Wert des Readings mit angegebener Zahl||1||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' <br><br />
data-classes='["blink","blurry","shake"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}{{FTUI Klasse|blink}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29625FTUI Widget Label2019-02-23T13:42:26Z<p>Sinus61: /* CSS Klassen */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' <br><br />
data-classes='["blink","blurry","shake"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}{{FTUI Klasse|blink}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29624FTUI Widget Label2019-02-23T13:37:39Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' <br><br />
data-classes='["blink","blurry","shake"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29623FTUI Widget Label2019-02-23T13:35:16Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]' data-classes='["blink","blurry","shake"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29221FTUI Widget Label2019-01-25T14:31:45Z<p>Sinus61: /* Hinweise */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29220FTUI Widget Label2019-01-25T14:28:43Z<p>Sinus61: /* Hinweise */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* <code>data-substitution="weekdayshort"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Filelog&diff=29041FTUI Widget Filelog2019-01-12T15:42:19Z<p>Sinus61: </p>
<hr />
<div>Das [[{{PAGENAME}}|Filelog Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man Teile aus einem FHEM Logfile anzeigen lassen kann.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-height'''||Höhe des Widgets||150px||<br />
|-<br />
|'''data-width'''||Breite des Widgets||400px||<br />
|-<br />
|'''data-max-items'''||Anzahl der Zeilen||-1||15<br />
|-<br />
|'''data-get'''||Reading mit Anzahl der Zeilen im Filelog||linesInTheFile||<br />
|-<br />
|'''data-refresh-btn'''||Refresh Button anzeigen||0||1<br />
|-<br />
|'''data-disable-update-event'''||Update des Widgets deaktivieren||0||1<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen|| ||s/all_AlarmLog//g<br />
|}<br />
<br />
==CSS Klassen==<br />
Keine<br />
<br />
==Hinweise==<br />
* In der Definition des Filelogs in FHEM muss das Attribut eventOnThreshold auf "1" gesetzt werden, damit bei einer Änderung ein Event für das Widget ausgelöst wird.<br />
* Derzeit funktioniert es nicht damit das globale Logfile von FHEM anzuzeigen.<br />
<br />
==Beispiele==<br />
===Filelog eines Dummys===<br />
<syntaxhighlight lang="html"><br />
<div data-type="filelog"<br />
class="left-align bigger darker"<br />
data-device="FileLog_all_AlarmLog"<br />
data-ago="500"<br />
data-height="450px"<br />
data-width="750px"<br />
data-refresh-btn="0"<br />
data-substitution="s/all_AlarmLog//g"<br />
data-max-items="15"><br />
</div><br />
</syntaxhighlight><br />
<br />
==Links== <br />
[https://forum.fhem.de/index.php/topic,63759.msg881293.html#msg881293 Aktuell funktionierende Version und Forenthread]<br />
<br />
[[Kategorie:FHEM Tablet UI|Filelog]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Filelog&diff=29040FTUI Widget Filelog2019-01-12T15:38:03Z<p>Sinus61: Die Seite wurde neu angelegt: „Das Filelog Widget ist ein Widget für FHEM Tablet UI, mit dem man Teile aus einem FHEM Logfile anzeigen lassen kann. ==Attribute== {|cla…“</p>
<hr />
<div>Das [[{{PAGENAME}}|Filelog Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man Teile aus einem FHEM Logfile anzeigen lassen kann.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-height'''||Höhe des Widgets||150px||<br />
|-<br />
|'''data-width'''||Breite des Widgets||400px||<br />
|-<br />
|'''data-max-items'''||Anzahl der Zeilen||-1||15<br />
|-<br />
|'''data-get'''||Reading mit Anzahl der Zeilen im Filelog||linesInTheFile||<br />
|-<br />
|'''data-refresh-btn'''||Refresh Button anzeigen||0||1<br />
|-<br />
|'''data-disable-update-event'''||Update des Widgets deaktivieren||0||1<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen|| ||s/all_AlarmLog//g<br />
|}<br />
<br />
==CSS Klassen==<br />
Keine<br />
<br />
==Hinweise==<br />
* In der Definition des Filelogs in FHEM muss das Attribut eventOnThreshold auf "1" gesetzt werden, damit bei einer Änderung ein Event für das Widget ausgelöst wird.<br />
* Derzeit funktioniert es nicht damit das globale Logfile von FHEM anzuzeigen.<br />
<br />
==Links== <br />
[https://forum.fhem.de/index.php/topic,63759.msg881293.html#msg881293 Aktuell funktionierende Version und Forenthread]<br />
<br />
[[Kategorie:FHEM Tablet UI|Filelog]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=29039FTUI Widget Label2019-01-12T15:11:12Z<p>Sinus61: /* Hinweise */</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.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, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limits-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]<br />
<br />
<br />
<br />
;Statische Texte:<br />
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).<br />
* <Code><nowiki><div>Text</div></nowiki></code><br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* <code>data-substitution="weekdayshort"</code><br />
* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code><br />
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code><br />
** den Namen des Wochentages:<br />
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code><br />
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code><br />
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, sobald die Temperatur gleich oder kleiner 18° ist, grün ab 20° und rot ab 23°.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI|Label]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Progress&diff=28956FTUI Widget Progress2019-01-05T14:54:07Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Progress Widget]] ist ein Widget für [[FHEM Tablet UI]], welches einen Kreis mit Fortschrittsbalken erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Progress_01.png<br />
File:FTUI_Widget_Progress_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, dessen Wert angezeigt werden soll||STATE||data-get="measured-temp"<br />
|-<br />
|'''data-min'''||Niedrigster Wert oder Name des Readings, in dem der Wert steht||0||data-min="10"<br />
|-<br />
|'''data-max'''||Höchster Wert oder Name des Readings, in dem der Wert steht||100||data-max="25"<br />
|-<br />
|'''data-progress-width'''||Länge der Kreislinie vom Mittelpunkt bis zum Rand des Kreises in Prozent||15||data-progress-width="100"<br />
|-<br />
|'''data-on-color'''||Farbe der Kreislinie||#aa6900||data-on-color="Gold"<br />
|-<br />
|'''data-unit'''||Einheit nach angezeigtem Wert hinzufügen||||data-unit="&deg;C"<br />
|-<br />
|'''data-part'''||Wählt bei Werten, die durch Leerzeichen getrennt sind, die Position des Teiles aus, der angezeigt werden soll. Der Teil kann auch mit RegEx ermittelt werden.||-1 -> alles anzeigen||data-part="2"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|novalue}}{{FTUI Klasse|percent}}<br />
|}<br />
<br />
==Beispiele==<br />
===PCT Wert eines HUE-Devices===<br />
Ein ganz einfaches Beispiel, welches den ''pct''-Wert einer HUE Lampe anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="progress" data-device="HUEDevice1" data-get='pct'></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Progress_01.png]]<br />
<br />
===Alle verfügbaren Attribute===<br />
<syntaxhighlight lang="html"><br />
<div data-type="progress"<br />
data-device="HM_367B29_Weather"<br />
data-get="STATE"<br />
data-min="0"<br />
data-max="100"<br />
data-progress-width="100"<br />
data-unit="&deg;C"<br />
data-part="2"<br />
class=""></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Progress_02.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI|Progress]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28953FTUI Widget WindDirection2019-01-05T12:53:04Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-thickness'''||Länge der Teilstriche||0.25||data-thickness="0.5"<br />
|-<br />
|'''data-cursor'''||Breite des Zeigers||6||data-cursor="12"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#aa6900||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28952FTUI Widget WindDirection2019-01-05T12:39:53Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-thickness'''||Länge der Teilstriche||0.25||data-tickstep="0.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#aa6900||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28951FTUI Widget WindDirection2019-01-05T12:38:31Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-thickness'''||Länge der Teilstriche||0.25||data-tickstep="0.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#a86817||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28950FTUI Widget WindDirection2019-01-05T12:38:13Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-thickness'''||Länge Teilstriche||0.25||data-tickstep="0.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#a86817||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28949FTUI Widget WindDirection2019-01-05T12:32:41Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#a86817||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=28948FTUI Widget WindDirection2019-01-05T12:32:09Z<p>Sinus61: /* Attribute */</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Teilstriche||#cccccc||data-fgcolor="#ffffff"<br />
|-<br />
|'''data-bgcolor'''||Hintergrund der Teilstriche||transparent||data-bgcolor="Black"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Zeigers||#a86817||data-hdcolor="#ffffff"<br />
|-<br />
|'''data-nomcolor'''||Farbe der Windrichtung (Text)||#999||data-nomcolor="Goldenrod"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben oder ausgegeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt. <br />
Eine alternative, puristische Darstellung der Windrichtung findet sich in [[FTUI Widget Weather ]].<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
* Animiertes Vektorfeld der Luftbewegung über Europa, skalierbar, kann in FTUI eingebunden werden [https://www.windy.com]<br />
<br />
[[Kategorie:FHEM Tablet UI|Wind]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Tts&diff=20538FTUI Widget Tts2017-03-05T12:11:21Z<p>Sinus61: Hinweise und Beispiel hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|TTS Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man eine Sprachansage ausgeben kann. Damit lassen sich z.B. Warnungen ausgeben oder der Wetterbericht ansagen.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Reading, aus dem der angesagte Text ausgelesen wird||state||data-get="state"<br />
|-<br />
|'''data-voice'''||Auswahl der Stimme||Deutsch Female||data-get="UK English Male"<br /> data-get="Chinese Female"<br />
|-<br />
|'''data-pitch'''||Tonhöhe (Bereich 0 bis 2)||1.0||<br />
|-<br />
|'''data-rate'''||Sprachgeschwindigkeit (Bereich 0 bis 1.5)||1.0||<br />
|-<br />
|'''data-volume'''||Lautstärke (Bereich 0 bis 1)||1.0||<br />
|}<br />
<br />
==CSS Klassen==<br />
Keine<br />
<br />
==Hinweise==<br />
* Nach der Ersteinrichtung oder Änderung einer Stimme kann die erste Sprachausgabe verzögert werden, da die Daten der Stimme über das Internet geladen werden müssen.<br />
* Um eine kurze Pause zwischen zwei Worten zu erzeugen, z.B. um Hinweise deutlicher erscheinen zu lassen kann das Komma verwendet werden: set speak Bewegung,Haustür <br />
<br />
==Beispiele==<br />
===Einfache Ansage===<br />
In FHEM einen Dummy definieren:<br />
<br />
<source lang="html"><br />
define speak dummy<br />
</source><br />
<br />
Auf der gewünschten FTUI Seite ganz am Anfang nach dem <body> Tag das Widget einbauen:<br />
<br />
<source lang="html"><br />
<div data-type="tts" data-device="speak"></div><br />
</source><br />
<br />
In FHEM in der Eingabezeile eingeben:<br />
<br />
<source lang="html"><br />
set speak Guten Morgen<br />
</source><br />
<br />
Jetzt sollte das Tablet "Guten Morgen" sagen. Das ganze lässt sich jetzt z.B. in notifys oder at-Befehle einbauen.<br />
<br />
===Zeitansage===<br />
Dummy definieren und Widget einbauen wie in Beispiel 1<br />
<br />
In FHEM ein at definieren:<br />
<br />
<source lang="html"><br />
defmod EveryHour at +*01:00:00 {fhem ("set speak Es ist ".strftime('%H', localtime)." Uhr");}<br />
attr EveryHour alignTime 00:00<br />
</source><br />
<br />
Zu jeder vollen Stunde wird jetzt die Zeit angesagt.<br />
<br />
==Links== <br />
[https://responsivevoice.org/faq/ ResponsiveVoice F.A.Q.]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Tts&diff=20473FTUI Widget Tts2017-03-02T17:37:24Z<p>Sinus61: Übersetzungen</p>
<hr />
<div>Das [[{{PAGENAME}}|TTS Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man eine Sprachansage ausgeben kann. Damit lassen sich z.B. Warnungen ausgeben oder der Wetterbericht ansagen.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Reading, aus dem der angesagte Text ausgelesen wird||state||data-get="state"<br />
|-<br />
|'''data-voice'''||Auswahl der Stimme||Deutsch Female||data-get="UK English Male"<br /> data-get="Chinese Female"<br />
|-<br />
|'''data-pitch'''||Tonhöhe (Bereich 0 bis 2)||1.0||<br />
|-<br />
|'''data-rate'''||Sprachgeschwindigkeit (Bereich 0 bis 1.5)||1.0||<br />
|-<br />
|'''data-volume'''||Lautstärke (Bereich 0 bis 1)||1.0||<br />
|}<br />
<br />
==CSS Klassen==<br />
Keine<br />
<br />
==Beispiele==<br />
===Einfache Ansage===<br />
In FHEM einen Dummy definieren:<br />
<br />
<source lang="html"><br />
define speak dummy<br />
</source><br />
<br />
Auf der gewünschten FTUI Seite ganz am Anfang nach dem <body> Tag das Widget einbauen:<br />
<br />
<source lang="html"><br />
<div data-type="tts" data-device="speak"></div><br />
</source><br />
<br />
In FHEM in der Eingabezeile eingeben:<br />
<br />
<source lang="html"><br />
set speak Guten Morgen<br />
</source><br />
<br />
Jetzt sollte das Tablet "Guten Morgen" sagen. Das ganze lässt sich jetzt z.B. in notifys oder at-Befehle einbauen.<br />
<br />
==Links== <br />
[https://responsivevoice.org/faq/ ResponsiveVoice F.A.Q.]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=20468FHEM Tablet UI2017-03-02T16:52:20Z<p>Sinus61: Text zu TTS</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.<br />
<br />
Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui</nowiki>''' oder den Link im FHEM-Menü geöffnet werden<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Layout===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|gridster_disable||0||0, 1||Verschieben der Gridster-Elemente deaktivieren.<br />
|-<br />
| widget_margin||||Integer||Abstand der Gridsterelemente zueinander<br />
|-<br />
| widget_base_width||||Integer||Fixe Breite des Basis-Rasters (data-sizex=1)<br />
|-<br />
| widget_base_heigth||||Integer||Fixe Höhe des Basis-Rasters (data-sizey=1).<br />
|-<br />
| gridster_cols||||Integer||Fixe Anzahl an Spalten (Spaltengröße wird automatisch an Bildschirmauflösung angepasst)<br />
|-<br />
| gridster_rows||||Integer||Fixe Anzahl der Reihen (Reihengröße wird automatisch an Bildschirmauflösung angepasst)<br />
|}<br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Styling==<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/<br />
<br />
Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemas. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen|CSS-Klassen]] aufgeführt.<br />
<br />
Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}<br />
|}<br />
<br />
=== Icons ===<br />
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Parameter zu verwenden.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
Oft wird ein und dasselbe, liebevoll gestaltete, Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Sinus61http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Tts&diff=20466FTUI Widget Tts2017-03-02T16:49:58Z<p>Sinus61: Neuerstellung</p>
<hr />
<div>Das [[{{PAGENAME}}|TTS Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man eine Sprachansage ausgeben kann. Damit lassen sich z.B. Warnungen ausgeben oder der Wetterbericht ansagen.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Reading, aus dem der angesagte Text ausgelesen wird||state||data-get="state"<br />
|-<br />
|'''data-voice'''||Auswahl der Stimme||Deutsch Female||data-get="UK English Male"<br /> data-get="Chinese Female"<br />
|-<br />
|'''data-pitch'''||Pitch (Bereich 0 bis 2)||1.0||<br />
|-<br />
|'''data-rate'''||Rate (Bereich 0 bis 1.5)||1.0||<br />
|-<br />
|'''data-volume'''||Lautstärke (Bereich 0 bis 1)||1.0||<br />
|}<br />
<br />
==CSS Klassen==<br />
Keine<br />
<br />
==Beispiele==<br />
===Einfache Ansage===<br />
In FHEM einen Dummy definieren:<br />
<br />
<source lang="html"><br />
define speak dummy<br />
</source><br />
<br />
Auf der gewünschten FTUI Seite ganz am Anfang nach dem <body> Tag das Widget einbauen:<br />
<br />
<source lang="html"><br />
<div data-type="tts" data-device="speak"></div><br />
</source><br />
<br />
In FHEM in der Eingabezeile eingeben:<br />
<br />
<source lang="html"><br />
set speak Guten Morgen<br />
</source><br />
<br />
Jetzt sollte das Tablet "Guten Morgen" sagen. Das ganze lässt sich jetzt z.B. in notifys oder at-Befehle einbauen.<br />
<br />
==Links== <br />
[https://responsivevoice.org/faq/ ResponsiveVoice F.A.Q.]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Sinus61