FHEMWiki - Benutzerbeiträge [de]

FTUI3 DWD Wettervorhersage

2023-01-30T21:32:31Z

OdfFhem:

== Zielsetzung ==
Der Deutsche Wetterdienst (DWD) stellt Wetterdaten zur Verfügung, aus denen eine graphische Wettervorhersage generiert werden kann; diese soll in FTUI3 angezeigt werden.

== Umsetzung ==

Die verwendeten Namen entsprechen https://wiki.fhem.de/wiki/DWD_OpenData#Beispiel_f.C3.BCr_die_Einrichtung_eines_Weblinks

Aktualisieren, wenn eine neue Vorhersage vom Wetterdienst veröffentlicht wurde (fc_time ; selten)
<syntaxhighlight lang="html">
<ftui-content [content]="DWD:fc_time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
</syntaxhighlight>

Aktualisieren, wenn das FHEM-Device seine Daten zur Vorhersage erneuert hat (fc_state ; häufig)
<syntaxhighlight lang="html">
<ftui-content [content]="DWD:fc_state:time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
</syntaxhighlight>

Um eine korrekte Darstellung zu erhalten, müssen noch einige CSS-Definitionen integriert werden. Da dies recht umfangreich ist, können die benötigten CSS-Definitionen kopiert, runtergeladen oder dem Weblink-Modul entnommen werden:
* Forenlink (Kopie) https://forum.fhem.de/index.php/topic,115259.msg1260606.html#msg1260606
* Forenlink (Download) https://forum.fhem.de/index.php/topic,83097.msg885505.html#msg885505
* GitHub-Link (Modul) https://raw.githubusercontent.com/jnsbyr/fhem/master/FHEM/99_DWD_OpenData_Weblink.pm

== Beispiel ==

[[Datei:Screenshot dwd wettervorhersage.png|500px]]

FTUI3 DWD Wettervorhersage

2023-01-30T21:30:45Z

OdfFhem:

== Zielsetzung ==
Der Deutsche Wetterdienst (DWD) stellt Wetterdaten zur Verfügung, aus denen eine graphische Wettervorhersage generiert werden kann; diese soll in FTUI3 angezeigt werden.

== Umsetzung ==

Die verwendeten Namen entsprechen https://wiki.fhem.de/wiki/DWD_OpenData#Beispiel_f.C3.BCr_die_Einrichtung_eines_Weblinks

Aktualisieren, wenn eine neue Vorhersage vom Wetterdienst veröffentlicht wird (fc_time ; selten)
<syntaxhighlight lang="html">
<ftui-content [content]="DWD:fc_time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
</syntaxhighlight>

Aktualisieren, wenn das FHEM-Device seine Daten zur Vorhersage erneuert hat (fc_state ; häufig)
<syntaxhighlight lang="html">
<ftui-content [content]="DWD:fc_state:time | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
</syntaxhighlight>

Um eine korrekte Darstellung zu erhalten, müssen noch einige CSS-Definitionen integriert werden. Da dies recht umfangreich ist, können die benötigten CSS-Definitionen kopiert, runtergeladen oder dem Weblink-Modul entnommen werden:
* Forenlink (Kopie) https://forum.fhem.de/index.php/topic,115259.msg1260606.html#msg1260606
* Forenlink (Download) https://forum.fhem.de/index.php/topic,83097.msg885505.html#msg885505
* GitHub-Link (Modul) https://raw.githubusercontent.com/jnsbyr/fhem/master/FHEM/99_DWD_OpenData_Weblink.pm

== Beispiel ==

[[Datei:Screenshot dwd wettervorhersage.png|500px]]

FTUI3 Best Practices

2023-01-29T07:58:19Z

OdfFhem:

== FTUI3 Best practices ==
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.

Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen.

== generelle Verwendung ==
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:
<syntaxhighlight lang="html">
<ftui-label text="Hallo Welt"></ftui-label>
</syntaxhighlight>
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:
<syntaxhighlight lang="html">
<ftui-label [text]="name des Devices"></ftui-label>
</syntaxhighlight>
Will man ein anderes Reading als "state" auslesen, kann man das so machen:
<syntaxhighlight lang="html">
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label>
</syntaxhighlight>

Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden.
<syntaxhighlight lang="html">
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button>
</syntaxhighlight>

Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:
<syntaxhighlight lang="html">
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button>

<ftui-button [(value)]="device"></ftui-button>
</syntaxhighlight>

All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)

Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:
* Die Farben eines Controls können angepasst werden
* Die Größe kann sich ändern
* Das Control kann ein- oder ausgeblendet werden
* Bilder können angepasst werden
* Warnungen können erscheinen
* Popup Fenster können sich öffnen oder schließen
* und vieles mehr ...

Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:

== Anwendungsbeispiele ==
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]
# [[FTUI3 Scrollbares Label|Scrollbares Label]]
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]
# wird fortgesetzt

== FTUI Dokumentation ==
https://github.com/knowthelist/ftui/

[[Kategorie:Interfaces]]

FTUI3 DWD Wettervorhersage

2023-01-29T07:56:20Z

OdfFhem: Die Seite wurde neu angelegt: „== Zielsetzung == Der Deutsche Wetterdienst (DWD) stellt Wetterdaten zur Verfügung, aus denen eine graphische Wettervorhersage generiert werden kann; diese so…“

== Zielsetzung ==
Der Deutsche Wetterdienst (DWD) stellt Wetterdaten zur Verfügung, aus denen eine graphische Wettervorhersage generiert werden kann; diese soll in FTUI3 angezeigt werden.

== Umsetzung ==

Die verwendeten Namen entsprechen https://wiki.fhem.de/wiki/DWD_OpenData#Beispiel_f.C3.BCr_die_Einrichtung_eines_Weblinks

<syntaxhighlight lang="html">
<ftui-content [content]="DWD_Weblink | getHTML('DWD_Weblink_Generator horizontalForecast')"></ftui-content>
</syntaxhighlight>

Um eine korrekte Darstellung zu erhalten, müssen noch einige CSS-Definitionen integriert werden. Da dies recht umfangreich ist, können die benötigten CSS-Definitionen kopiert, runtergeladen oder dem Weblink-Modul entnommen werden:
* Forenlink (Kopie) https://forum.fhem.de/index.php/topic,115259.msg1260606.html#msg1260606
* Forenlink (Download) https://forum.fhem.de/index.php/topic,83097.msg885505.html#msg885505
* GitHub-Link (Modul) https://raw.githubusercontent.com/jnsbyr/fhem/master/FHEM/99_DWD_OpenData_Weblink.pm

== Beispiel ==

[[Datei:Screenshot dwd wettervorhersage.png|500px]]

Datei:Screenshot dwd wettervorhersage.png

2023-01-29T07:46:45Z

OdfFhem:

Screenshot dwd wettervorhersage

SVG

2020-01-22T08:56:40Z

OdfFhem: Diagramm umpositioniert

{{Todo|Diese Beschreibung ist noch zu ergänzen / erweitern.}}
{{Infobox Modul
|ModPurpose=Erstellung von Diagrammen aus Logdaten
|ModType=h
|ModForumArea=Frontends
|ModTechName=98_SVG.pm
|ModOwner=rudolfkoenig ({{Link2FU|8|Forum}} / [[Benutzer Diskussion:Rudolfkoenig|Wiki]])}}

Das Modul [[SVG]] generiert Diagramme aus [[FileLog|Logdateien]] oder [[DbLog|-datenbanken]].

Die Eigenschaften des zu erstellenden Diagrams werden in einer .gplot-Datei festgelegt.

== Definition ==
Details in der {{Link2CmdRef|Anker=SVGlinkdefine}}.

== Attribute ==
Details in der {{Link2CmdRef|Anker=SVGattr}}.

== Funktionen ==
Details in der {{Link2CmdRef|Anker=plotfunction}}.

== Beispiele ==

=== Leistungsdaten einer Steckdose (FileLog) ===

* Inhalt der Datei '''SVG_PlugX.gplot'''
{{Randnotiz|RNTyp=g|RNText=Gegebenenfalls sind die Feldnamen anzupassen}}<source>
# Leistungsdaten einer Steckdose (FileLog)
#
# plotReplace-Parameter: DataDevice (von diesem Gerät stammen die Daten)
# FileLogDevice (in diesem Gerät werden die Daten geloggt)
# stateOFFvalue (y-Wert zur Darstellung von ausgeschaltetem Zustand)
# stateONvalue (y-Wert zur Darstellung von eingeschaltetem Zustand)
# stateUNKNOWNvalue (y-Wert zur Darstellung von unbekanntem Zustand)
# title (in der Regel ein perl-Ausdruck zur Darstellung von Eckwerten in der Titelzeile)
# yrange (Wertebereich für Darstellung in W vorgeben)
# y2range (Wertebereich für Darstellung in mA vorgeben)

set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<title>'
set ytics
set y2tics
set grid ytics y2tics
set ylabel "Leistung (W)"
set y2label "Strom (mA)"
set yrange %yrange%
set y2range %y2range%

#%FileLogDevice% 4:%DataDevice%.power\x3a:0:
#%FileLogDevice% 4:%DataDevice%.current\x3a:"":($fld[3]*1000)
#%FileLogDevice% 4:%DataDevice%.userRead_socket_state\x3a:"":($fld[3]=~"off"?%stateOFFvalue%:($fld[3]=~"on"?%stateONvalue%:%stateUNKNOWNvalue%))

plot "<IN>" using 1:2 axes x1y1 title 'Leistung' ls l0 lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 title 'Strom' ls l1fill_stripe lw 1 with steps,\
"<IN>" using 1:2 axes x1y1 title 'Schaltzustand' ls l3 lw 1 with steps
</source>

* Definition von SVG-Device '''SVG_Test'''
{{Randnotiz|RNTyp=g|RNText=Alle Vorkommen von ...Data-Device... und ...FileLog-Device... sind zu ersetzen}}
<source>
defmod SVG_Test SVG ...FileLog-Device...:SVG_PlugX:CURRENT
attr SVG_Test captionPos auto
attr SVG_Test plotReplace DataDevice="...Data-Device..." FileLogDevice="...FileLog-Device..." stateOFFvalue="20" stateONvalue="30" stateUNKNOWNvalue="10" yrange="[0:75]" y2range="[0:300]" title={"Steckdose(Testgerät) --- W: $data{min1}...$data{max1} / $data{currval1} --- mA: $data{min2}...$data{max2} / $data{currval2}"}
</source>

* So sieht das resultierende Diagramm aus
[[Datei:SVG Leistungsdaten einer Steckdose.png|thumb|left|300px]]<br><br><br><br>

=== Temperatur- und Heizungsdaten eines Zimmers ===
Quelle: {{Link2Forum|Topic=104935|Message=1011527}}
(Datenquelle ist ein DBLog-Device namens LogDB):

[[Datei:PlotReplace Example DBLog.png|thumb|right|300px]]
<source># Created by FHEM/98_SVG.pm, 2020-01-06
# to replace variables, use plotReplace like
# attr SVG_Thermostat plotReplace SPEC1=Thermostat TL="My example thermostat" EXTERNALTEMPDEVICE=MYSENSOR_97 EXTERNALTEMPREADING=temperature2 \
# ROOMHUMIDITYDEVICE=HUEDevice3 EXTERNALHUMIDITYREADING=humidity ROOMTEMPDEVICE=HUEDevice4 ROOMTEMPREADING=temperature WINDOW1=Window1_MyRoom WINDOW2=Window2_MyRoom

set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<TL>'
set ytics
set y2tics
set grid
set ylabel "Valve/Window"
set y2label "Temperature"
set yrange [-5:105]
set y2range [-15:35]
set isosample 20

#LogDB %SPEC1%:desired-temp::
#LogDB %SPEC1%:measured-temp:0:
#LogDB %EXTERNALTEMPDEVICE%:%EXTERNALTEMPREADING%::
#LogDB %SPEC1%:actuator:0:int
#LogDB %ROOMHUMIDITYDEVICE%:%EXTERNALHUMIDITYREADING%:0:
#LogDB %ROOMTEMPDEVICE%:%ROOMTEMPREADING%:0:
#LogDB %WINDOW1%:state:::$val=~s/(open|closed|tilted)(\d*).*/$1eq"open"?60:$1eq"tilted"?45:0/eg
#LogDB %WINDOW2%:state:::$val=~s/(open|closed|tilted)(\d*).*/$1eq"open"?60:$1eq"tilted"?45:0/eg

plot "<IN>" using 1:2 axes x1y2 title 'Desired' ls l0 lw 1 with lines,\
"<IN>" using 2:2 axes x1y2 title 'Measured actuator' ls l7 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Aussen' ls l1 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 y2title 'Valve' ls l5 lw 1 with steps,\
"<IN>" using 1:2 axes x1y1 title 'Humidity' ls l2 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Measured roomsensor' ls l3 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 y2title '%WINDOW1%' ls l4fill lw 0.5 with steps,\
"<IN>" using 1:2 axes x1y1 y2title '%WINDOW2%' ls l5fill lw 0.5 with steps
</source>

== Links ==
* [[Plots erzeugen]]
* [[Creating Plots]]
<references /><syntaxhighlight lang="raw">
[[Kategorie:Logging]]

SVG

2020-01-22T07:11:06Z

OdfFhem: Ergänzung von Beispiel "Leistungsdaten einer Steckdose (FileLog)"

{{Todo|Diese Beschreibung ist noch zu ergänzen / erweitern.}}
{{Infobox Modul
|ModPurpose=Erstellung von Diagrammen aus Logdaten
|ModType=h
|ModForumArea=Frontends
|ModTechName=98_SVG.pm
|ModOwner=rudolfkoenig ({{Link2FU|8|Forum}} / [[Benutzer Diskussion:Rudolfkoenig|Wiki]])}}

Das Modul [[SVG]] generiert Diagramme aus [[FileLog|Logdateien]] oder [[DbLog|-datenbanken]].

Die Eigenschaften des zu erstellenden Diagrams werden in einer .gplot-Datei festgelegt.

== Definition ==
Details in der {{Link2CmdRef|Anker=SVGlinkdefine}}.

== Attribute ==
Details in der {{Link2CmdRef|Anker=SVGattr}}.

== Funktionen ==
Details in der {{Link2CmdRef|Anker=plotfunction}}.

== Beispiele ==

=== Leistungsdaten einer Steckdose (FileLog) ===

* Inhalt der Datei '''SVG_PlugX.gplot'''
{{Randnotiz|RNTyp=g|RNText=Gegebenenfalls sind die Feldnamen anzupassen}}<source>
# Leistungsdaten einer Steckdose (FileLog)
#
# plotReplace-Parameter: DataDevice (von diesem Gerät stammen die Daten)
# FileLogDevice (in diesem Gerät werden die Daten geloggt)
# stateOFFvalue (y-Wert zur Darstellung von ausgeschaltetem Zustand)
# stateONvalue (y-Wert zur Darstellung von eingeschaltetem Zustand)
# stateUNKNOWNvalue (y-Wert zur Darstellung von unbekanntem Zustand)
# title (in der Regel ein perl-Ausdruck zur Darstellung von Eckwerten in der Titelzeile)
# yrange (Wertebereich für Darstellung in W vorgeben)
# y2range (Wertebereich für Darstellung in mA vorgeben)

set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<title>'
set ytics
set y2tics
set grid ytics y2tics
set ylabel "Leistung (W)"
set y2label "Strom (mA)"
set yrange %yrange%
set y2range %y2range%

#%FileLogDevice% 4:%DataDevice%.power\x3a:0:
#%FileLogDevice% 4:%DataDevice%.current\x3a:"":($fld[3]*1000)
#%FileLogDevice% 4:%DataDevice%.userRead_socket_state\x3a:"":($fld[3]=~"off"?%stateOFFvalue%:($fld[3]=~"on"?%stateONvalue%:%stateUNKNOWNvalue%))

plot "<IN>" using 1:2 axes x1y1 title 'Leistung' ls l0 lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 title 'Strom' ls l1fill_stripe lw 1 with steps,\
"<IN>" using 1:2 axes x1y1 title 'Schaltzustand' ls l3 lw 1 with steps
</source>

* Definition von SVG-Device '''SVG_Test'''
{{Randnotiz|RNTyp=g|RNText=Alle Vorkommen von ...Data-Device... und ...FileLog-Device... sind zu ersetzen}}
<source>
defmod SVG_Test SVG ...FileLog-Device...:SVG_PlugX:CURRENT
attr SVG_Test captionPos auto
attr SVG_Test plotReplace DataDevice="...Data-Device..." FileLogDevice="...FileLog-Device..." stateOFFvalue="20" stateONvalue="30" stateUNKNOWNvalue="10" yrange="[0:75]" y2range="[0:300]" title={"Steckdose(Testgerät) --- W: $data{min1}...$data{max1} / $data{currval1} --- mA: $data{min2}...$data{max2} / $data{currval2}"}
</source>

=== Temperatur- und Heizungsdaten eines Zimmers ===
Quelle: {{Link2Forum|Topic=104935|Message=1011527}}
(Datenquelle ist ein DBLog-Device namens LogDB):

[[Datei:PlotReplace Example DBLog.png|thumb|right|300px]]
<source># Created by FHEM/98_SVG.pm, 2020-01-06
# to replace variables, use plotReplace like
# attr SVG_Thermostat plotReplace SPEC1=Thermostat TL="My example thermostat" EXTERNALTEMPDEVICE=MYSENSOR_97 EXTERNALTEMPREADING=temperature2 \
# ROOMHUMIDITYDEVICE=HUEDevice3 EXTERNALHUMIDITYREADING=humidity ROOMTEMPDEVICE=HUEDevice4 ROOMTEMPREADING=temperature WINDOW1=Window1_MyRoom WINDOW2=Window2_MyRoom

set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<TL>'
set ytics
set y2tics
set grid
set ylabel "Valve/Window"
set y2label "Temperature"
set yrange [-5:105]
set y2range [-15:35]
set isosample 20

#LogDB %SPEC1%:desired-temp::
#LogDB %SPEC1%:measured-temp:0:
#LogDB %EXTERNALTEMPDEVICE%:%EXTERNALTEMPREADING%::
#LogDB %SPEC1%:actuator:0:int
#LogDB %ROOMHUMIDITYDEVICE%:%EXTERNALHUMIDITYREADING%:0:
#LogDB %ROOMTEMPDEVICE%:%ROOMTEMPREADING%:0:
#LogDB %WINDOW1%:state:::$val=~s/(open|closed|tilted)(\d*).*/$1eq"open"?60:$1eq"tilted"?45:0/eg
#LogDB %WINDOW2%:state:::$val=~s/(open|closed|tilted)(\d*).*/$1eq"open"?60:$1eq"tilted"?45:0/eg

plot "<IN>" using 1:2 axes x1y2 title 'Desired' ls l0 lw 1 with lines,\
"<IN>" using 2:2 axes x1y2 title 'Measured actuator' ls l7 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Aussen' ls l1 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 y2title 'Valve' ls l5 lw 1 with steps,\
"<IN>" using 1:2 axes x1y1 title 'Humidity' ls l2 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Measured roomsensor' ls l3 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 y2title '%WINDOW1%' ls l4fill lw 0.5 with steps,\
"<IN>" using 1:2 axes x1y1 y2title '%WINDOW2%' ls l5fill lw 0.5 with steps
</source>

== Links ==
* [[Plots erzeugen]]
* [[Creating Plots]]
<references /><syntaxhighlight lang="raw">
[[Kategorie:Logging]]

Update

2019-12-07T02:29:40Z

OdfFhem: Neuer controlfile-Befehl CRE

{{SEITENTITEL:update}}
{{Infobox Modul
|ModPurpose=Befehl zur Aktualisierung der FHEM-Installation
|ModType=cmd
|ModCmdRef=update
|ModForumArea=Sonstiges
|ModTechName=98_update.pm
|ModOwner=rudolfkoenig ([http://forum.fhem.de/index.php?action=profile;u=8 Forum] / [[Benutzer Diskussion:Rudolfkoenig|Wiki]])
}}
[[update]] ist ein Befehl zur Aktualisierung der FHEM-Installation direkt über das FHEM [[FHEMWEB|Webfrontend]]. Von den Entwicklern bis zu einem bestimmten Zeitpunkt freigegebene Änderungen sind jeweils morgens ab 8:00 Uhr über die Update Funktion verfügbar. Änderungen, die später freigegeben werden, werden dementsprechend erst am nächsten Tag verfügbar.

== Syntax ==
:<code><nowiki>update [<fileName>|all|check|force] [http://.../controlfile]</nowiki></code>
oder
:<code><nowiki>update [add source|delete source|list|reset]</nowiki></code>

'''Hinweise:'''
* FHEM sichert mit den Standardeinstellungen während des Updates "nur" die aktualisierten Modul(Installations-)dateien und bei Standardinstallationen ({{Link2Forum|Topic=59669|Message=511367}}) ab Updatestand 29.10.2016 die [[Konfiguration]] und fhem.save, aber beispielsweise nicht [[Plots erzeugen|Plots]] oder [[FileLog]]s. Soll vor dem Update ein vollständiges Backup von FHEM erstellt werden, muss das mit dem Attribut <code>[[#backup_before_update|backup_before_update]]</code> eingeschaltet werden.
* Lesen Sie aufmerksam die nach dem Update auf dem Monitor erscheinenden Meldungen zu Neuerungen und Änderungen.
* Nach einem Update ist immer ein ''shutdown restart'' erforderlich.
* geänderte und neu eingecheckte Module werden grundsätzlich erst am Folgetag ab ca. 8.00 Uhr durch den Update-Befehl verteilt.
* Mit dem Befehl [[version]] lässt sich die Version einzelner oder aller benutzten Module bestimmen.

== Parameter ==
Details zu Parametern des update Befehls:

=== Standardaufrufe ===
==== update ====
Die ganze FHEM-Installation wird auf die neueste Version gebracht. Vorhandene Module werden akualisiert und neue Module installiert.

==== update check ====
Es werden alle Module aufgelistet, von denen eine neuere als die bereits installierte Version verfügbar ist. Es wird nicht installiert.

==== update force ====
Das Update wird erzwungen (falls es beim regulären ''update'' Probleme geben sollte). Dieser Befehl ist nur mit Bedacht und ausschließlich im Notfall einzusetzen. Sollte ein reproduzierbares Problem existieren, dies bitte im FHEM-Forum berichten, damit dem nachgegangen werden kann.

==== update <Dateiname> ====
Mit z.B. <code>update 02_HTTPSRV.pm</code> wird nur von der Datei ''02_HTTPSRV.pm'' eine neue Version installiert. Alle anderen FHEM-Dateien werden nicht angetastet.

==== update all ====
Alle [[Systemübersicht#Module|offiziellen Module]] von FHEM sind in einem gemeinsamen Repository gespeichert. Nur diese Module werden in der Standardeinstellung durch den update-Befehl mit den bisher aufgeführten [[#Standardaufrufe|Standardaufrufen]] aktualisiert bzw. installiert. Einige Entwickler stellen ihre Module jedoch aus verschiedensten Gründen nicht im gemeinsamen Repository zur Verfügung, sondern nutzen eigene, separate Repositorys. Diese sogenannten "Thirdparty-Module" (auch bezeichnet als inoffizielle Module) können ebenfalls über update installiert und aktualisiert werden, wenn der Entwickler eine sogenannte Kontrolldatei (controlfile) in seinem Repository zur Verfügung stellt.

Zur Installation bzw. Update jedes einzelnen Thirdparty-Moduls ist nachfolgender Befehl aufzurufen (Webadresse und Kontrolldateiname sind modulabhängig passend zu ersetzen):
<code><nowiki>update all http://thirdparty.com/controls_funnymodule.txt</nowiki></code>

Die in den vorherigen Abschnitten erläuterten Standardaufruf (bis auf <code>update</code>) können durch Ergänzung um Webadresse und Kontrolldateiname (<nowiki>http://.../controlfile</nowiki> beim Befehls-Aufruf für das Update von einzelnen Thirdparty-Modulen genutzt werden.

=== Repository-Verwaltung ===
In den Standardeinstellungen von FHEM ist für jedes einzelne Repository ein separater Aufruf der [[#Standardaufrufe|Standardaufrufe]] zur Aktualiserung/Installation notwendig. Zur Vereinfachung des Update-Prozesses hat der update-Befehl eine eingebaute Repository-Verwaltung. Mittels der Repository-Verwaltung lassen sich die Standardaufrufe so beeinflußen, dass mit einem einzigen Aufruf sowohl die Module aus dem FHEM-Repository als auch aus verschiedenen Thirdparty-Repositorys beim Update berücksichtigt werden.

==== update add ====
Fügt ein zusätzliches Repository zur vereinfachten Nutzung über die Standardaufrufe hinzu. Ein Aufruf von <code><nowiki>update <Dateiname>|all|check|force</nowiki></code> berücksichtigt dann automatisch neben dem FHEM-eigenen Repository auch das hinzugefügte "Thirdparty-Repository".

Nach dem Hinzufügen durch beispielsweise <code><nowiki>update add http://thirdparty.com/controls_funnymodule.txt</nowiki></code> entfällt somit der manuelle Aufruf der Form <code><nowiki>update all http://thirdparty.com/controls_funnymodule.txt</nowiki></code> zur Aktualiserung. Er kann aber weiterhin genutzt werden, um ausschließlich für ein bestimmtes Repository ein Update zu erhalten und und nicht für alle.

Die Liste der Repositorys wird in der Verwaltungsdatei FHEM/controls.txt gespeichert.

==== update delete ====
Entfernt eine Repository aus der Verwaltungsdatei.

==== update list ====
Listet alle in der Verwaltungsdatei enthaltenen Repositorys auf.

==== update reset ====
Entfernt alle Fremd-Repositorys aus der Verwaltungsdatei. Nur das eigene Repository von FHEM wird noch von den Standardparametern berücksichtigt.

==== Syntax controlfile ====
Das Controlfile für thirdparty Module unterliegt einer festen Syntax. In jeder Zeile steht ein Dateiname und ein Befehl, was damit passieren soll. Ein Zeilenumbruch wird durch ein \n dargestellt.

Es können drei Befehle verwendet werden: CRE, MOV und UPD.

===== CRE - Anlegen einer Datei =====

Hiermit können vom Entwickler Dateinamen festgelegt und entsprechende Initial-Dateien verteilt werden; der Inhalt der Datei liegt nach dem ''ersten'' Verteilen in Anwenderhänden (z.B. nützlich bei *-user.css-Dateien).

<code>CRE <Datum> <Dateigröße> <Datei inkl. Pfad> </code>

Das Anlegen wird nur ausgeführt, wenn
* die Datei noch nicht vorhanden ist.

===== MOV - Verschieben oder Umbenennen einer Datei =====

<code>MOV <Quelldatei inkl. Pfad> <Zieldatei inkl. Pfad> </code>

Da Dateien nicht vollständig gelöscht werden können, kann eine Datei mit dem MOV Befehl in einen speziellen Ordner namens "unused" verschoben werden:

<code>MOV <Quelldatei inkl. Pfad> unused </code>

===== UPD - Aktualisieren einer Datei =====

<code>UPD <Datum> <Dateigröße> <Datei inkl. Pfad> </code>

Die Aktualisierung wird nur ausgeführt, wenn
* das Datum der lokalen Datei sich vom Datum der Update-Datei unterscheidet.
* die Dateigröße der Update-Datei mit der Dateigröße im UPD Eintrag übereinstimmt.

Beispiel:

<code>
UPD 2018-10-04_20:17:35 55143 FHEM/55_MyFirstFile.pm

UPD 2018-09-27_23:26:21 17121 FHEM/55_MySecondFile.pm
</code>

Beispiel für die Erzeugung der UPD Einträge:

<syntaxhighlight lang="perl">
#!/usr/bin/perl

use File::Basename;
use POSIX qw(strftime);
use strict;

my @filenames = ( "55_MyFirstFile.pm",
"55_MySecondFile.pm");

my $prefix = "FHEM";
my $filename = "";
foreach $filename (@filenames)
{
my @statOutput = stat($prefix."/".$filename);

if (scalar @statOutput != 13)
{
printf("error: stat has unexpected return value for ".$prefix."/".$filename."\n");
next;
}

my $mtime = $statOutput[9];
my $date = POSIX::strftime("%Y-%m-%d", localtime($mtime));
my $time = POSIX::strftime("%H:%M:%S", localtime($mtime));
my $filetime = $date."_".$time;

my $filesize = $statOutput[7];

printf("UPD ".$filetime." ".$filesize." ".$prefix."/".$filename."\n");
}
</syntaxhighlight>

== Attribute ==
Zur weiteren Beeinflussung der Funktionsweise des update Befehls können Attribute verwendet werden. Diese müssen für das Objekt ''global'' gesetzt werden, also mit einem Konfigurationsbefehl der Art
:<code>attr global ...</code>

=== backup_before_update ===
siehe auch [[backup]]

=== restoreDirs ===
siehe [[#Rücksichern beim Update überschriebener Dateien|Rücksichern beim Update überschriebener Dateien]]

=== exclude_from_update ===
Mit der Definition
:<code>attr global exclude_from_update ...</code>
kann eine Liste von Dateien spezifiziert werden, die bei der Ausführung des update Befehls '''nicht''' aktualisiert werden sollen. Dateien können auch über reguläre Ausdrücke definiert werden, die einzelnen Einträge werden durch Leerzeichen voneinander getrennt.

Einen Spezialfall stellt die ''commandref'' dar, die seit einer Modifikation des Update Prozesses (März 2015, beschrieben in dieser {{Link2Forum|Topic=34450|LinkText=Forendiskusion}}) nicht mehr heruntergeladen wird, sondern auf dem Benutzersystem durch Extraktion der Dokumentation aus den einzelnen Modulen generiert wird, angezeigt durch die Meldung im fhem.log:
:''Calling /usr/bin/perl ./contrib/commandref_join.pl, this may take a while''.
Sollte dieser Prozess (z.B. auf einem langsamen Rechner) zu lange dauern, bleibt die Meldung
:''update finished, "shutdown restart" is needed to activate the changes.''
aus. Wird ''commandref'' in das <code>exclude_from_update</code> Attribut eingetragen, entfällt dieser Schritt, die lokale ''commandref'' wird allerdings dann auch nicht mehr aktualisiert. Die modulspezifische Hilfe, die z.B. über <code>help modulname</code> aufgerufen werden kann, ist davon nicht betroffen.

== Anwendungsbeispiel ==
=== Durchführung eines Updates ===
Zunächst kann mit dem Befehl
:<code>update check</code>
überprüft werden, ob es überhaupt ein neues Update gibt und welche Dateien hierbei ausgetauscht würden (die angezeigten Infos sollten in einer Textdatei gesichert werden. Mit diesen Infos kann gezielter nach Problemen, die vielleicht nach einem Update auftreten, gesucht werden). Anschließend kann mittels:
:<code>update</code>
das Update eingespielt werden. Hierbei ist zu beachten, dass die Befehle auf der FHEM Webseite oben ([[Konfiguration|Befehls-Eingabefeld]]) eingegeben werden und anschließend die "Enter" Taste auf der Tastatur gedrückt werden muss.

Gibt es kein Update für FHEM, sieht die Ausgabe z.B. nach "update check" wie folgt aus:

:<code>List of new / modified files since last update:</code>
:<code>nothing to do...</code>

=== Rücksichern beim Update überschriebener Dateien ===
Per default werden vor dem Überschreiben durch update alle Dateien in einem neuen Verzeichnis (restoreDir/update/YYYY-MM-DD) gesichert. Diese Dateien kann man einzeln oder komplett mit dem Befehl {{Link2CmdRef|Anker=restore|Label=restore}} zuruecksichern (z.Bsp.: <code>restore update/2014-08-19</code> oder <code>restore update/2014-08-19/fhem.pl</code>) . Mit dem restoreDirs Attribut kann man die Anzahl der aufgehobenen Sicherungen (== Datum-Verzeichnisse) bestimmen, die Voreinstellung ist 3. Mit 0 kann man das Feature komplett abschalten.

Ab Updatestand 29.10.2016 können bei Standardinstallationen ({{Link2Forum|Topic=59669|Message=511367}}) die fhem.cfg und fhem.save mit der Option -a des restore-Befehl wiederhergestellt werden.

Zu Neuerungen ab Updatestand 18.03.2018 siehe {{Link2Forum|Topic=85801|Message=782640}}.

FTUI Widget Symbol

2019-05-30T19:57:48Z

OdfFhem: "Einstellung für Warnung" hinzugefügt

Das [[{{PAGENAME}}|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.

<gallery widths="600" height="200">
File:FTUI_Widget_Symbol_01.png
</gallery>

==Attribute==
Neben den '''allgemeinen Attributen''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert !! Beispiel
|-
| data-get || Name des Readings, welches ausgelesen wird || STATE ||
|}

===Einstellung bei zwei Werten===
{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-get-on''' ||Wert für on ||<nowiki>true|1|on|open</nowiki>||
|-
|'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki>||
|-
|'''data-icon''' ||Name des Symbols||ftui-window||
|-
|'''data-background-icon''' ||Hintergrundsymbol ||||
|-
|'''data-on-background-color''' ||Hintergrundfarbe für ON-Zustand. ||#aa6900||
|-
|'''data-off-background-color''' ||Hintergrundfarbe für OFF-Zustand. ||#505050||
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||#aa6900||
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||#505050||
|}

===Einstellung bei mehreren Werten===
{| class="wikitable"
!Attribut !! Beschreibung !!Default Wert !! Beispiel
|-
|'''data-states''' ||Array für states ||||
|-
|'''data-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-classes''' ||Array mit Klassen zu data-states Array.||||data-classes='["bg-red blink","bg-yellow","bg-green"]'
|-
|'''data-background-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-colors''' ||Array mit Farben zu data-states Array ||||
|-
|'''data-background-colors''' ||Array mit Hintergrundfarben zu data-states Array ||||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|}

{{Hinweis|
*''data-get-on'', ''data-get-off'' und ''data-states'' akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.
*''data-get-on'' und ''data-get-off'' können nicht gemeinsam mit ''data-states'' verwendet werden
*reine Zahlen-Arrays bei ''data-states'' müssen '''aufsteigend''' sortiert werden.}}

===Einstellung für Warnung===
Eine Warnung kann auf verschiedenen Wegen aktiviert werden:
* Verwendung der Klasse '''warn'''
* Verwendung der Klasse '''warn''' und Attribut '''data-get-warn'''
{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-get-warn''' ||Wert für Warnung||-1||data-get-warn="test(.*)"
|}
* Attribut '''data-warn''' in Kombination mit '''data-warn-on''' und '''data-warn-off'''
{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-warn'''||Reading, über das die Anzeige der Warnung gesteuert wird||||
|-
|'''data-warn-on'''||Wert(e), die zur Anzeige der Warnung führen ||<nowiki>(true|on|[1-9]{1}[0-9]*)</nowiki>||
|-
|'''data-warn-off'''||Wert(e), die eine Anzeige der Warnung unterdrücken||<nowiki>(false|off|0)</nowiki>||
|}

Unabhängig von der Art der Aktivierung kann das Aussehen einer Warnung mit den folgenden Attributen gesteuert werden.

{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-warn-background-color'''||Hintergrundfarbe der Warnung||||
|-
|'''data-warn-color'''||Schriftfarbe der Warnung||||
|-
|'''data-warn-fixed'''||Anzahl Nachkommastellen in der Warnung||0||
|-
|'''data-warn-icon''' ||Icon für Warnung||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{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|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|hide}}{{FTUI Klasse|warn}}
|}

==Beispiele==
===Einfaches Symbol===
[[File:FTUI_Widget_Symbol_02.png]]
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Web-Status" class=""></div>
</syntaxhighlight>
(Das device "Web-Status" liefert in diesem Fall den Wert "fa-rss-square")

===Symbol mit vier Zuständen und Animation===
[[File:FTUI_Widget_Symbol_03.png|800px]]
<syntaxhighlight lang="html">
<div class=""
data-type="symbol"
data-device="Garage"
data-states='["oben","unten","lauf","angehalten","Fehler"]'
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]'
data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div>
</syntaxhighlight>

==Weitere Beispiele==
===Batterieüberwachung mit Regulärem Ausdruck (0.0 - 3.9)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="WohnzimmerHeizung"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</syntaxhighlight>

===Batterieüberwachung mit Regulärem Ausdruck (0 - 100)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dDummy3"
data-states='["100","([7][5-9])|([8-9][0-9])","([5-6][0-9])|([7][0-4])","([2][5-9])|([3-5][0-9])","([0-9])|([1][0-9])|([2][0-4])"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Symbol_04.png]]

===Batterieüberwachung mit Größenvergleich und gedrehten Symbolen===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="BadHeizung"
data-get="batteryLevel"
data-states='["0","2","2.4","2.7","3.0"]'
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</syntaxhighlight>

===Türsymbol mit Warnung bei geöffneter Tür===
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Eingangstuer"
data-states='["open","closed"]'
data-icons='["ftui-door warn","ftui-door"]'
data-colors='["#999","#555"]' >
</div>
</syntaxhighlight>
[[Datei:Bsp class warn.png]]

==Hinweise==
Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.

[[Kategorie:FHEM Tablet UI|Symbol]]

FTUI Widget Input

2019-05-30T09:29:21Z

OdfFhem: "autoclear" und "autoselect" integriert

Das [[{{PAGENAME}}|Input Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Eingabefeld für Text erstellt werden kann.

<gallery>
File:FTUI_Widget_Input_01.png
File:FTUI_Widget_Input_03.png
File:FTUI_Widget_Input_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Reading, aus dem der angezeigte Text ausgelesen wird||||data-get="state"
|-
|'''data-set'''||Name des Readings, welches verändert werden soll||||data-set="Message"
|-
|'''data-cmd'''||Kommando, welches an FHEM gesendet werden soll (z.B. setstate, set, setreading, trigger)||set||data-cmd="setreading"
|-
|'''data-value'''||Standardwert, der angezeigt wird, wenn das Reading leer ist||||data-value="nichts da"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|wider}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|autoclear}}{{FTUI Klasse|autoselect}}
|}

==Hinweise==
'''data-device''' und '''data-get''' können Referenzen (jQuery Selektor) auf [[FTUI Widget Select|Select Widgets]] sein, um dynamisch die Quelle derselben zu verändern.

==Beispiele==
===Text an Device senden===
<syntaxhighlight lang="html">
<div data-type="label">Wichtige Nachricht an Mitbewohner:</div>
<div data-type="input"
data-device="Dummy1"
data-get="state"
data-value="Standardtext"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Input_01.png]]

===Text erst nach Klick auf Link-Widget absenden===
In das ''Input-Widget'' kann ein Text angegeben werden. Die Klasse ''notransmit'' führt aber dazu, dass er nicht abgesendet wird. Die geschieht erst nach dem Klick auf das ''Link-Widget'', welches die zu sendenden Daten vom ''Input-Label'' ausliest (''data-value'').
<syntaxhighlight lang="html">
<div class="hbox">
<div data-type="input"
id="sendTask"
class="notransmit"></div>
<div data-type="link"
class="round"
data-icon="fa-feed"
data-device="MyList"
data-set="addTask"
data-value="#sendTask">OK</div>
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Input_03.png]]

===Befehlsstruktur aufbauen===
<syntaxhighlight lang="html">
<div data-type="select" data-items='["dummy1","dummy2","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>
<div data-type="select" data-items='["STATE","warn1","warn2","webCmd","room"]' id="sendParam" class="notransmit w3x"></div>
<div data-type="input"
data-device="#sendDev"
data-get="#sendParam"
id="sendValue"
data-value="127"
class="notransmit w3x centered"></div>
<div data-type="link" class="round centered" data-icon="fa-feed" data-device="#sendDev" data-set="#sendParam" data-value="#sendValue">OK</div>
</syntaxhighlight>
[[File:FTUI_Widget_Input_02.png]]

[[Kategorie:FHEM Tablet UI|Input]]

Vorlage:FTUI Klasse

2019-05-30T09:26:46Z

OdfFhem: "autoclear" und "autoselect" integriert

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

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

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

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

ergibt folgendes Ergebnis:

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

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



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



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


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


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



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


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



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


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


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


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

FTUI Widget Calview

2019-05-30T03:35:38Z

OdfFhem: "Einfärbung von Kalendereinträgen (sourcecolor)" an neuen Modulstand angepasst

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==

===Allgemeine Attribute===
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

===Nahende Termine hervorheben===
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

===Titelzeile===
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

===Anwendungsbereich für class-Attribute===
Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-class-usage'''||Anwendungsbereich festlegen||col||data-class-usage="row"
|}

===Swiper-Darstellung===
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==CSS Klassen==

Falls die Formatierungsmöglichkeiten unter Verwendung der class- bzw. color-Attribute nicht ausreichen, kann noch auf vorgegebene CSS-Klassen zurückgegriffen werden. Diese sind laut der folgenden Tabelle jedem calview-Element automatisch zugeordnet. Um sie mit Leben zu füllen, müssen die gewünschten CSS-Klassen in der user-spezifischen css-Datei angelegt werden.

{|class="wikitable"
!Klasse!!Beschreibung
|-
|'''calview'''||gilt für den ganzen Kalender
|-
|'''calview-row-header'''||gilt für die komplette Headerzeile
|-
|'''calview-col-header'''||gilt für eine einzelne Headerspalte
|-
|'''calview-row'''||gilt für eine komplette Zeile eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-col'''||gilt für eine einzelne Spalte eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-row-daysleft-<n>'''||gilt für eine komplette Zeile eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|-
|'''calview-col-daysleft-<n>'''||gilt für eine einzelne Spalte eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man das Widget-Attribut '''data-sourcecolor''' verwendet und auf den Wert ''yes'' setzt.

{{Hinweis|
*In früheren Widget-Versionen musste zusätzlich im Widget-Attribut '''data-detail''' die Spalte ''sourcecolor'' mit der Breite 0 enthalten sein; dies ist nicht mehr notwendig.}}

<syntaxhighlight lang="html">
<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-detail='["weekdayname","bdate","summary"]'
data-detailwidth='["10","20","70"]'
data-sourcecolor="yes"></div>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von ''sourcecolor'' ignoriert wird. Die '''data-daysleft'''-Attribute allerdings haben Vorrag vor ''sourcecolor'' und führen - je nach daysleft-Konfiguration - zum Überschreiben der sourcecolor.

===Beispiel unter Verwendung der vorgegebenen CSS-Klassen===
Folgendes Beispiel soll den Einsatz der vorgegebenen CSS-Klassen, die jedem calview-Element automatisch zugeordnet sind, zeigen.

Zunächst einmal wird das folgende calview-widget deklariert. Es stellt einen Kalender mit einer Titelzeile und maximal 15 Terminen mit je drei Spalten dar. Termine, die in weniger als 17 Tagen anstehen, sollen speziell behandelt werden; Termine, die in weniger als 3 Tagen anstehen, sollen (zusätzlich) blinken. Bis auf das blink-Feature ist keine Information zur Formatierung der Termine enthalten. Folglich wird ein praktisch unformatierter Kalender dargestellt.

<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-class-usage="row"
data-daysleft-values='[2,9,16]'
data-daysleft-classes='["blink","",""]'
data-detail='["weekdayname","bdate","summary"]'
data-detailwidth='["10","20","70"]'
data-get="all"
data-header='["","am","Zusammenfassung"]'
data-max="15"
data-oneline="yes"
data-showempty="Derzeit keine Termine"></div>
</syntaxhighlight>

Legt man in der user-spezifischen css-Datei zusätzlich folgende CSS-Klassen an, ändert sich die Darstellung des Kalenders grundlegend. Der ganze Kalender bekommt einen hellblauen Hintergrund mit abgerundeten Ecken und schwarzer Schrift. Die Titelzeile wird fett und mit leicht vergrößerter Schrift dargestellt. Normale Termine sind grau hinterlegt; Termine in max. 2 Tagen sind rot hinterlegt und blinken; Termine in max. 9 Tagen sind gelb hinterlegt; Termine in max. 16 Tagen sind grün hinterlegt - jeweils mit abgerundeten Ecken je Zeile.

<syntaxhighlight lang="html">
.calview {
background-color: #99ccff;
border-radius: 8px;
padding: 4px;
color: black;
}

.calview-row-header {
border-radius: 8px;
font-size:125%;
font-weight: bold;
}

.calview-col-header {
text-align: left;
}

.calview-row {
background-color: #c0c0c0;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col {
text-align: left;
}

.calview-row-daysleft-1 {
background-color: #ff8080;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-1 {
text-align: left;
}

.calview-row-daysleft-2 {
background-color: #ffffb3;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-2 {
text-align: left;
}

.calview-row-daysleft-3 {
background-color: #99ff99;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-3 {
text-align: left;
}
</syntaxhighlight>

Die hier angelegten CSS-Klassen gelten für jeden Kalender; über CSS-Selektoren können natürlich auch für jeden Kalender eigene CSS-Klassen angelegt werden.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T05:16:17Z

OdfFhem: Überflüssiges Attribut aus Beispiel entfernt

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==

===Allgemeine Attribute===
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

===Nahende Termine hervorheben===
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

===Titelzeile===
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

===Anwendungsbereich für class-Attribute===
Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-class-usage'''||Anwendungsbereich festlegen||col||data-class-usage="row"
|}

===Swiper-Darstellung===
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==CSS Klassen==

Falls die Formatierungsmöglichkeiten unter Verwendung der class- bzw. color-Attribute nicht ausreichen, kann noch auf vorgegebene CSS-Klassen zurückgegriffen werden. Diese sind laut der folgenden Tabelle jedem calview-Element automatisch zugeordnet. Um sie mit Leben zu füllen, müssen die gewünschten CSS-Klassen in der user-spezifischen css-Datei angelegt werden.

{|class="wikitable"
!Klasse!!Beschreibung
|-
|'''calview'''||gilt für den ganzen Kalender
|-
|'''calview-row-header'''||gilt für die komplette Headerzeile
|-
|'''calview-col-header'''||gilt für eine einzelne Headerspalte
|-
|'''calview-row'''||gilt für eine komplette Zeile eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-col'''||gilt für eine einzelne Spalte eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-row-daysleft-<n>'''||gilt für eine komplette Zeile eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|-
|'''calview-col-daysleft-<n>'''||gilt für eine einzelne Spalte eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

===Beispiel unter Verwendung der vorgegebenen CSS-Klassen===
Folgendes Beispiel soll den Einsatz der vorgegebenen CSS-Klassen, die jedem calview-Element automatisch zugeordnet sind, zeigen.

Zunächst einmal wird das folgende calview-widget deklariert. Es stellt einen Kalender mit einer Titelzeile und maximal 15 Terminen mit je drei Spalten dar. Termine, die in weniger als 17 Tagen anstehen, sollen speziell behandelt werden; Termine, die in weniger als 3 Tagen anstehen, sollen (zusätzlich) blinken. Bis auf das blink-Feature ist keine Information zur Formatierung der Termine enthalten. Folglich wird ein praktisch unformatierter Kalender dargestellt.

<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-class-usage="row"
data-daysleft-values='[2,9,16]'
data-daysleft-classes='["blink","",""]'
data-detail='["weekdayname","bdate","summary"]'
data-detailwidth='["10","20","70"]'
data-get="all"
data-header='["","am","Zusammenfassung"]'
data-max="15"
data-oneline="yes"
data-showempty="Derzeit keine Termine"></div>
</syntaxhighlight>

Legt man in der user-spezifischen css-Datei zusätzlich folgende CSS-Klassen an, ändert sich die Darstellung des Kalenders grundlegend. Der ganze Kalender bekommt einen hellblauen Hintergrund mit abgerundeten Ecken und schwarzer Schrift. Die Titelzeile wird fett und mit leicht vergrößerter Schrift dargestellt. Normale Termine sind grau hinterlegt; Termine in max. 2 Tagen sind rot hinterlegt und blinken; Termine in max. 9 Tagen sind gelb hinterlegt; Termine in max. 16 Tagen sind grün hinterlegt - jeweils mit abgerundeten Ecken je Zeile.

<syntaxhighlight lang="html">
.calview {
background-color: #99ccff;
border-radius: 8px;
padding: 4px;
color: black;
}

.calview-row-header {
border-radius: 8px;
font-size:125%;
font-weight: bold;
}

.calview-col-header {
text-align: left;
}

.calview-row {
background-color: #c0c0c0;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col {
text-align: left;
}

.calview-row-daysleft-1 {
background-color: #ff8080;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-1 {
text-align: left;
}

.calview-row-daysleft-2 {
background-color: #ffffb3;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-2 {
text-align: left;
}

.calview-row-daysleft-3 {
background-color: #99ff99;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-3 {
text-align: left;
}
</syntaxhighlight>

Die hier angelegten CSS-Klassen gelten für jeden Kalender; über CSS-Selektoren können natürlich auch für jeden Kalender eigene CSS-Klassen angelegt werden.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T05:14:53Z

OdfFhem: "Beispiel unter Verwendung der vorgegebenen CSS-Klassen" hinzugefügt

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==

===Allgemeine Attribute===
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

===Nahende Termine hervorheben===
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

===Titelzeile===
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

===Anwendungsbereich für class-Attribute===
Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-class-usage'''||Anwendungsbereich festlegen||col||data-class-usage="row"
|}

===Swiper-Darstellung===
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==CSS Klassen==

Falls die Formatierungsmöglichkeiten unter Verwendung der class- bzw. color-Attribute nicht ausreichen, kann noch auf vorgegebene CSS-Klassen zurückgegriffen werden. Diese sind laut der folgenden Tabelle jedem calview-Element automatisch zugeordnet. Um sie mit Leben zu füllen, müssen die gewünschten CSS-Klassen in der user-spezifischen css-Datei angelegt werden.

{|class="wikitable"
!Klasse!!Beschreibung
|-
|'''calview'''||gilt für den ganzen Kalender
|-
|'''calview-row-header'''||gilt für die komplette Headerzeile
|-
|'''calview-col-header'''||gilt für eine einzelne Headerspalte
|-
|'''calview-row'''||gilt für eine komplette Zeile eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-col'''||gilt für eine einzelne Spalte eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-row-daysleft-<n>'''||gilt für eine komplette Zeile eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|-
|'''calview-col-daysleft-<n>'''||gilt für eine einzelne Spalte eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

===Beispiel unter Verwendung der vorgegebenen CSS-Klassen===
Folgendes Beispiel soll den Einsatz der vorgegebenen CSS-Klassen, die jedem calview-Element automatisch zugeordnet sind, zeigen.

Zunächst einmal wird das folgende calview-widget deklariert. Es stellt einen Kalender mit einer Titelzeile und maximal 15 Terminen mit je drei Spalten dar. Termine, die in weniger als 17 Tagen anstehen, sollen speziell behandelt werden; Termine, die in weniger als 3 Tagen anstehen, sollen (zusätzlich) blinken. Bis auf das blink-Feature ist keine Information zur Formatierung der Termine enthalten. Folglich wird ein praktisch unformatierter Kalender dargestellt.

<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-class=""
data-class-usage="row"
data-daysleft-values='[2,9,16]'
data-daysleft-classes='["blink","",""]'
data-detail='["weekdayname","bdate","summary"]'
data-detailwidth='["10","20","70"]'
data-get="all"
data-header='["","am","Zusammenfassung"]'
data-max="15"
data-oneline="yes"
data-showempty="Derzeit keine Termine"></div>
</syntaxhighlight>

Legt man in der user-spezifischen css-Datei zusätzlich folgende CSS-Klassen an, ändert sich die Darstellung des Kalenders grundlegend. Der ganze Kalender bekommt einen hellblauen Hintergrund mit abgerundeten Ecken und schwarzer Schrift. Die Titelzeile wird fett und mit leicht vergrößerter Schrift dargestellt. Normale Termine sind grau hinterlegt; Termine in max. 2 Tagen sind rot hinterlegt und blinken; Termine in max. 9 Tagen sind gelb hinterlegt; Termine in max. 16 Tagen sind grün hinterlegt - jeweils mit abgerundeten Ecken je Zeile.

<syntaxhighlight lang="html">
.calview {
background-color: #99ccff;
border-radius: 8px;
padding: 4px;
color: black;
}

.calview-row-header {
border-radius: 8px;
font-size:125%;
font-weight: bold;
}

.calview-col-header {
text-align: left;
}

.calview-row {
background-color: #c0c0c0;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col {
text-align: left;
}

.calview-row-daysleft-1 {
background-color: #ff8080;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-1 {
text-align: left;
}

.calview-row-daysleft-2 {
background-color: #ffffb3;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-2 {
text-align: left;
}

.calview-row-daysleft-3 {
background-color: #99ff99;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}

.calview-col-daysleft-3 {
text-align: left;
}
</syntaxhighlight>

Die hier angelegten CSS-Klassen gelten für jeden Kalender; über CSS-Selektoren können natürlich auch für jeden Kalender eigene CSS-Klassen angelegt werden.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T04:16:50Z

OdfFhem: Abschnitt "CSS Klassen" hinzugefügt

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

;Nahende Termine hervorheben:
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

;Titelzeile:
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

;Anwendungsbereich für class-Attribute:
Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-class-usage'''||Anwendungsbereich festlegen||col||data-class-usage="row"
|}

;Swiper-Darstellung:
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==CSS Klassen==

Falls die Formatierungsmöglichkeiten unter Verwendung der class- bzw. color-Attribute nicht ausreichen, kann noch auf vorgegebene CSS-Klassen zurückgegriffen werden. Diese sind laut der folgenden Tabelle jedem calview-Element automatisch zugeordnet. Um sie mit Leben zu füllen, müssen die gewünschten CSS-Klassen in der user-spezifischen css-Datei angelegt werden.

{|class="wikitable"
!Klasse!!Beschreibung
|-
|'''calview'''||gilt für den ganzen Kalender
|-
|'''calview-row-header'''||gilt für die komplette Headerzeile
|-
|'''calview-col-header'''||gilt für eine einzelne Headerspalte
|-
|'''calview-row'''||gilt für eine komplette Zeile eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-col'''||gilt für eine einzelne Spalte eines Termins, wenn '''kein''' daysleft-Fall vorliegt
|-
|'''calview-row-daysleft-<n>'''||gilt für eine komplette Zeile eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|-
|'''calview-col-daysleft-<n>'''||gilt für eine einzelne Spalte eines Termins, wenn '''ein''' daysleft-Fall vorliegt;<br>''<n>'' entspricht dem Eintrag im daysleft-Array - beginnend mit 1
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T03:32:18Z

OdfFhem: Anwendungsbereich für class-Attribute

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

;Nahende Termine hervorheben:
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

;Titelzeile:
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

;Anwendungsbereich für class-Attribute:
Termine werden jeweils als einzelne Zeile mit der definierten Anzahl von Spalten dargestellt. Angegebene Werte für data-header-class, data-class bzw. data-daysleft-classes können also entweder einmalig einer kompletten Zeile oder aber einzeln jeder Spalte zugewiesen werden. Abhängig hiervon kann sich die Darstellung ändern; beispielsweise blinkt im einen Fall eine ganze Zeile; im anderen Fall nur der Vordergrund.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-class-usage'''||Anwendungsbereich festlegen||col||data-class-usage="row"
|}

;Swiper-Darstellung:
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T03:11:47Z

OdfFhem: Attribute für nahende Termine

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

;Nahende Termine hervorheben:
Optional können nahende Termine optisch hervorgehoben werden; die Aktivierung erfolgt durch das Verwenden von '''data-daysleft-values'''. Die anderen Attribute sind allesamt optional. Fehlt ein optionales Attribut oder enthält leere Einträge, wird der für normale Termine gültige Wert angenommen; andernfalls wird der für normale Termine gültige Wert durch den angegebenen Wert ersetzt.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-daysleft-values'''||Array von Tagen bis zum Termin (aufsteigend)||||data-daysleft-values='[1,3,8]'
|-
|'''data-daysleft-classes'''||Array von CSS-Klasse(n) - analog zu data-daysleft-values ; optional||||data-daysleft-classes='["blink","",""]'
|-
|'''data-daysleft-colors'''||Array von Textfarben - analog zu data-daysleft-values ; optional||||data-daysleft-colors='["red","yellow","green"]'
|-
|'''data-daysleft-background-colors'''||Array von Hintergrundfarben - analog zu data-daysleft-values ; optional||||data-daysleft-background-colors='["gray","lightgray","white"]'
|}

;Titelzeile:
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden; die Aktivierung erfolgt durch das Verwenden von '''data-header'''. Die anderen Attribute sind allesamt optional.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class ; optional||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color ; optional||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color ; optional||||data-header-background-color="white"
|}

;Swiper-Darstellung:
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T02:23:40Z

OdfFhem: Attribute für Titelzeile ; kleinere Attribut-Anpassungen

Das [[{{PAGENAME}}|Calview Widget]] ist ein Widget für [[FHEM Tablet UI]], welches Einträge aus einem [[CALVIEW]]-Device anzeigen kann.

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen||||
|-
|'''data-get'''||Welche Termine sollen angezeigt werden?<br>Mögliche Werte: ''all'', ''today'', ''tomorrow''||STATE||data-get="all"
|-
|'''data-start'''||Termine von heute oder heute+morgen nicht anzeigen. Gilt nur für ''data-get="all"''.<br>Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday"
|-
|'''data-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20"
|-
|'''data-class'''||CSS-Klasse(n); alle im FTUI verfügbaren class-Werte nutzbar||||data-class="left-align small"
|-
|'''data-color'''||Textfarbe als HEX-Angabe oder Farbname||||data-color="#ff0000"
|-
|'''data-background-color'''||Hintergrundfarbe als HEX-Angabe oder Farbname||||data-background-color="#0000ff"
|-
|'''data-detail'''||Array von CALVIEW-Details, die angezeigt werden sollen||<nowiki></nowiki>||data-detail='["bdate","btime","summary"]'
|-
|'''data-detailwidth'''||Breite der einzelnen Spalten in %||||data-detailwidth='["20","20","60"]'
|-
|'''data-dateformat'''||Formatierung der Datumsanzeige (mit/ohne Jahreszahl)||long||data-dateformat="short"
|-
|'''data-timeformat'''||Formatierung der Uhrzeitanzeige (mit/ohne Sekunden)||long||data-timeformat="short"
|-
|'''data-showempty'''||Infotext anzeigen, wenn keine Termine vorhanden sind<br>Mögliche Werte: ''true'', ''false'' oder ''individueller Text''||true||data-showempty="Derzeit keine Termine"
|-
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes"
|-
|'''data-sourcecolor'''||Als Textfarbe eines Eintrages die sourcecolor verwenden (s. Beispiel)||no||data-sourcecolor="yes"
|}

;Titelzeile:
Optional kann eine zusätzliche Tabellenzeile als Titelzeile dargestellt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-header'''||Array - analog zu data-detail||||data-header='["am","um","Zusammenfassung"]'
|-
|'''data-header-class'''||CSS-Klasse(n) - analog zu data-class||||data-header-class="large"
|-
|'''data-header-color'''||Textfarbe - analog zu data-color||||data-header-color="hotpink"
|-
|'''data-header-background-color'''||Hintergrundfarbe - analog zu data-background-color||||data-header-background-color="white"
|}

;Swiper-Darstellung:
Um z.B. viele Termine im Zugriff zu haben, aber nur wenig Platz zu benötigen, kann die Swiper-Darstellung genutzt werden. Hierbei stellt jeder Termin eine eigene Swiper-Seite dar; zwischen diesen kann manuell oder automatisch gewechselt werden.

{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-swiperstyle'''||Legt fest, ob die Swiper-Darstellung genutzt werden soll||no||data-swiperstyle="yes"
|-
|'''data-swiper-autoplay'''||Zeit in ms (!), nach der zum nächsten Termin gewechselt wird||kein autoplay||data-swiper-autoplay="2000"
|-
|'''data-swiper-effect'''||Effekt für den Wechsel zum nächsten Termin festlegen<br>Mögliche Werte: ''flip'' bzw. ''slide''||flip||data-swiper-effect="slide"
|-
|'''data-swiper-pagination'''||Schnellzugriff unterhalb der Termine einblenden||yes||data-swiper-pagination="no"
|}

==Beispiele==
===Einfaches Beispiel===
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<syntaxhighlight lang="html">
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
</syntaxhighlight>

===Geburtstagskalender mit Berechnung des Alters===
Das Beispiel zeigt einen Geburtstagskalender der Geburtstage ab heute - eine oft gewünschte Funktion. Das Lebensalter (Anna wird 35 Jahre) wird berechnet und angezeigt.

Anders als in vielen im FHEM-Forum und im Internet zu findenden Beispielen kommt es ohne zusätzlich einzubindende PERL-Funktion(en) aus.

Die iCal-Datei (hier: test.ics) der Geburtstage hat so auszusehen - meine Mutter wurde am 24. Mai 1931 geboren:
<syntaxhighlight lang="html">
BEGIN:VCALENDAR
PRODID:-//calcurse//NONSGML v4.0.0//EN
VERSION:2.0
BEGIN:VEVENT
DTSTART:19310524
DTEND:19310524
RRULE:FREQ=YEARLY
SUMMARY: Geburtstag meiner Mutter
DESCRIPTION: 1931
END:VEVENT
END:VCALENDAR
</syntaxhighlight>

Wichtig ist hier insbesondere "DESCRIPTION", hier muss das Geburtsjahr stehen: Diese Angabe ist Basis für die Berechnung des Lebensalters.

Dieser Kalender, der natürlich nicht nur den Geburtstag der Mutter hat, muss in fhem.cfg eingebunden sein:

<syntaxhighlight lang="html">
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
</syntaxhighlight>

Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
</syntaxhighlight>

Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:

<syntaxhighlight lang="html">

<div data-type="calview"
data-device="TestkalenderView"
data-get="all"
data-max="5"
data-detail='["bdate","summary","age"]'
data-detailwidth='["25","70","5"]'
data-showempty="true"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes"
data-class='left-align'
>
</div>
</syntaxhighlight>

Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST)

===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.

Vorausgesetzt werden:
* eine Anzahl von beliebigen ics-Dateien, auf die FHEM Zugriff hat; in unserem Beispiel '''test1.ics''' und '''test2.ics'''.
* ein Calendar-Device pro ics-Datei; in unserem Beispiel '''Testkalender1''' und '''Testkalender2'''
* ein CALVIEW-Device zum Sammeln der Termine aus den einzelnen Kalendern; in unserem Beispiel '''TestkalenderView'''

<syntaxhighlight lang="html">
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
</syntaxhighlight>
<syntaxhighlight lang="html">
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
</syntaxhighlight>

Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das '''sourcecolor'''-Attribut beim CALVIEW-Device gesetzt werden.
<syntaxhighlight lang="html">
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
</syntaxhighlight>
Nach dem Setzen vom sourcecolor-Attribut sollte man das CALVIEW-Device aktualisieren, ansonsten wird die eingestellte sourcecolor erst mit der jeweils nächsten Kalenderaktualisierung aktiv.
<syntaxhighlight lang="html">
set TestkalenderView update
</syntaxhighlight>
Das aktualisierte CALVIEW-Device sollte nun in den '''t_<nnn>_sourcecolor'''-Readings den gewünschten Farbwert enthalten.

Die gewünschte Darstellung im FTUI erreicht man, indem man die folgenden Bedingungen erfüllt
# das Widget-Attribut '''data-detail''' muss die (nicht darstellbare) Spalte ''sourcecolor'' enthalten
# das Widget-Attribut '''data-sourcecolor''' muss den Wert ''yes'' haben
<syntaxhighlight lang="html">
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
</syntaxhighlight>

Anzumerken bleibt noch, dass das Widget-Attribut '''data-color''' bei Verwendung von sourcecolor ignoriert wird.

[[Kategorie:FHEM Tablet UI|Calview]]

FTUI Widget Calview

2019-05-25T01:41:18Z

OdfFhem: Attribute für Swiper-Darstellung ergänzt

FTUI Widget Calview

2019-04-29T16:02:09Z

OdfFhem: Nicht (mehr) existierende Attribute aus den Beispielen entfernt

FTUI Widget Filelog

2019-04-20T16:49:40Z

OdfFhem: data-ago integriert; data-refresh-btn entfernt ; kleinere Anpassungen

Das [[{{PAGENAME}}|Filelog Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem man Teile aus einem FHEM Logfile anzeigen lassen kann.

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FileLog-Devices, dessen Logeinträge angezeigt werden sollen||||
|-
|'''data-height'''||Höhe des Widgets||150px||90%
|-
|'''data-width'''||Breite des Widgets||400px||100%
|-
|'''data-max-items'''||maximale Anzahl der anzuzeigenden Logeinträge; -1 bedeutet alle||-1||15
|-
|'''data-get'''||Reading, dessen Änderung eine Aktualisierung auslösen soll||linesInTheFile||
|-
|'''data-disable-update-event'''||autom. Update des Widgets deaktivieren||0||1
|-
|'''data-substitution'''||Ermöglicht den empfangenen Logeintrag für die Anzeige zu modifizieren|| ||s/all_AlarmLog//g
|-
|'''data-ago'''||Zeit in Minuten; wichtig für die Berücksichtigung von Logeinträgen aus der Vergangenheit||0||
|}

==CSS Klassen==
Keine

==Hinweise==
* Im entsprechenden FileLog-Device muss das Attribut eventOnThreshold auf "1" gesetzt werden, damit bei einer Änderung ein linesInTheFile-Event ausgelöst wird.
* Vom FileLog-Device werden immer nur Daten aus einem Logfile zurückgegeben; bei täglichen Logfiles also z.B. nur Daten von heute oder von gestern - niemals von gestern und heute.
* Derzeit ist es nicht möglich, Logeinträge aus dem globalen FHEM-Logfile anzuzeigen.

==Beispiele==
===Filelog eines Dummys===
<syntaxhighlight lang="html">
<div data-type="filelog"
class="left-align bigger darker"
data-device="FileLog_all_AlarmLog"
data-ago="500"
data-height="450px"
data-width="750px"
data-refresh-btn="0"
data-substitution="s/all_AlarmLog//g"
data-max-items="15">
</div>
</syntaxhighlight>

==Links==
[https://forum.fhem.de/index.php/topic,63759.msg881293.html#msg881293 Aktuell funktionierende Version und Forenthread]

[[Kategorie:FHEM Tablet UI|Filelog]]

FTUI Widget Pagetab

2018-11-05T18:57:17Z

OdfFhem: Attribute angepasst

Das [[{{PAGENAME}}|Pagetab Widget]] ist ein Widget für [[FHEM Tablet UI]], welches es erlaubt, den Inhalt einer Seite durch den einer anderen zu ersetzen. Es kann zum Beispiel für ein Menü verwendet werden.

<gallery>
File:FTUI_Widget_Pagetab_03.png
File:FTUI_Widget_Pagetab_04.png
File:FTUI_Widget_Pagetab_01.png
File:FTUI_Widget_Pagetab_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-url'''||URL der neuen Seite, die angezeigt werden soll||||data-url="content_main.html"
|-
|'''data-icon'''||Vordergrund-Icon des Widgets||fa-power-off||data-icon="mi-home"
|-
|'''data-background-icon'''||Hintergrund-Icon des Widgets||fa-circle||data-background-icon="fa-square"
|-
|'''data-on-background-color'''||Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#606060||data-on-background-color="gray"
|-
|'''data-off-background-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||transparent||data-off-background-color="#cccccc"
|-
|'''data-on-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#222222||data-on-color="yellow"
|-
|'''data-off-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||#505050||data-off-color="#000000"
|-
|'''data-device'''||FHEM Device, welches das Aussehen/Verhalten des Widgets bestimmt||||data-device="dummy1"
|-
|'''data-get'''||Reading, dessen Wert ausgewertet werden soll||STATE||
|-
|'''data-get-on'''||Array von Werten, die das Reading einnehmen kann||||data-get-on='["Ein","Pause","Aus"]'
|-
|'''data-icons'''||Array von Icons, die in Abhängigkeit von ''data-get-on'' angezeigt werden||||data-icons='["mi-play_arrow","mi-pause","mi-stop"]'
|-
|'''data-return-time'''||Zeit in Sekunden für autom. Rückkehr zur "Startseite"<br>(muss auf dem ersten pagetab platziert werden).<br>Ein Wert von 0 bedeutet keine autom. Rückkehr||0||data-return-time="5"
|-
|'''data-text'''||Text für die Beschreibung||||data-text="Home"
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}
|}

==Beispiele==
===Einfacher Link===
<syntaxhighlight lang="html">
<div data-type="pagetab"
data-url="index.html"
data-icon="mi-home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagetab_03.png]]

===Einfacher Link mit Beschreibungstext===
<syntaxhighlight lang="html">
<div data-type="pagetab"
data-url="index.html"
data-icon="mi-home"
data-text="home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagetab_04.png]]

===Navigationsleiste===
Ein guter Anwendungszweck für das Pagetab-Widget ist eine Navigationsleiste. Dazu braucht es allerdings mehrere Seiten:
*Eine mit der Navigation selbst. Die wird später als Template auf den Zielseiten eingebunden
*Eine Startseite
*Eine oder mehrere Zielseiten, auf die navigiert werden kann

;Menü-Seite (menu.html)
Eine Menü-Seite könnte z.B. wie folgt aussehen. Auf dieser Seite sind drei Pagetab-Widgets platziert.
*Das erste ist ein ganz einfacher Link mit einem Beschreibungstext. Die Seite unter ''data-url'' wird beim Aufruf der Startseite automatisch geladen.
*Das zweite Widget ändert sein Icon je nach Status-Wert des Dummies ''dummy1''. Ist der Status 0, wird nur das Icon ''fa-fax'' angezeigt. Ist der Status größer 0, erscheint rechts über dem Icon noch ein "Warnhinweis" mit dem Status-Wert des Dummies. Außerdem ist der Beschreibungstext nach rechts gerückt.
*Das dritte Widget funktioniert im Prinzip wie das zweite. Außer der Status-Wert des Dummies ist ''on''. Dann wird die im Widget verlinkte Seite automatisch geöffnet.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="sheet">
<div class="row">
<div data-type="pagetab"
data-url="pagetab01.html"
data-icon="fa-home"
data-text="home"
class="cell"></div>
</div>
<div class="row">
<div data-type="pagetab"
data-device="dummy1"
data-get-on='["0","1"]'
data-icons='["fa-fax","fa-fax warn"]'
data-url="pagetab02.html"
data-text="anrufe"
class="cell labelright"></div>
</div>
<div class="row">
<div data-type="pagetab"
data-device="dummy2"
data-get-on='["0","(?:[1-9][0-9]*)","on"]'
data-icons='["fa-fax","fa-fax warn","fa-fax warn activate"]'
data-url="pagetab03.html"
class="cell"></div>
</div>
</div>
</body>
</html>
</syntaxhighlight>

;Startseite (index.html)
Auf der Startseite müssen keine Inhalte sein. Durch das erste Pagetab-Widget wird dessen URL automatisch geladen. Allerdings ist das Menü-Template einzubinden.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="4" data-sizey="4"></li>
</ul>
</div>
</body>
</html>
</syntaxhighlight>

;Zielseiten (pagetab01.html, pagetab02.html, pagetab03.html)
Die Zielseiten können ganz normal gestaltet werden. Es ist nur darauf zu achten, dass auf jeder Zielseite auch das Menü-Template eingebunden wird. Eine Zielseite könnte so aussehen:

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
<li data-row="1" data-col="2" data-sizex="4" data-sizey="4" class="left-align">Pagetab02.html</li>
</ul>
</div>
</body>
</html>
</syntaxhighlight>

Wird nun auf eines der Icons geklickt, blendet die aktuelle Seite aus und die Zielseite wird eingeblendet.

[[File:FTUI_Widget_Pagetab_02.png]]

==Weblinks==

[[Kategorie:FHEM Tablet UI|Pagetab]]

MsgDialog

2018-11-04T18:21:19Z

OdfFhem: Erläuterung zu msgContactPush hinzugefügt

{{Infobox Modul
|ModPurpose=Dialoge für Sofortnachrichten über TelegramBot, Jabber und WhatsApp
|ModType=h
|ModForumArea=Frontends
|ModTechName=76_msgDialog.pm
|ModOwner={{Link2FU|4106|igami}}
}}

== Zielsetzung ==
Ein zentrale Anforderung an die Haus-Automation ist die Kommunikation mit den Anwendern. Fast jeder Anwender möchte über bestimmte Ereignisse informiert werden und Einstellungen vornehmen. FHEM bietet schon seit längerem die Unterstützung für verschiedene Messaging Dienste an.
Mit dem msgDialog Modul können vordefinierte Dialoge erstellt werden. Die Kommunikation erfolgt dabei über den [[msg]] Befehl welcher zurzeit die bidirektionale Kommunikation über [[TelegramBot]], [[Jabber]] und [[yowsup]] (WhatsApp) unterstützt. Eingehende Nachrichten werden einem ROMMATE oder GUEST zugeordnet. Darüber werden auch die Berechtigungen für die einzelnen Dialoge festgelegt.
Die grundlegende Bedienung wird in diesem '''[https://youtu.be/yiCOTeR1YVQ Video]''' am Beispiel von TelegramBot gezeigt.

== Konfiguration ==

=== Voraussetzungen ===
Für dieses Modul wird das Perl JSON Modul benötigt. Auf einem Debian-basierten System (z.B RaspberryPI o.ä.) kann man das mit dem folgenden Befehl installieren:
<pre>
sudo apt-get install libjson-perl
</pre>

=== Hinweis zu den Code Beispielen ===
Es handelt sich bei den Beispielen um eine Raw definition, siehe auch [[Import_von_Code_Snippets]]

=== msgConfig ===

Als erstes benötigt man ein definiertes msgConfig device:

<pre>
defmod myMsgConfig msgConfig
attr myMsgConfig userattr msgDialog_evalSpecials:textField-long msgDialog_msgCommand:textField
attr myMsgConfig msgContactPush <Name des TelegramBot-device>
attr myMsgConfig msgDialog_evalSpecials me=<Aktivierungswort bzw. -Nachricht>\
TelegramBot=<Name des TelegramBot-device>
</pre>

Falls bereits vorhanden, müssen natürlich nur die fehlenden Attribute gesetzt werden.

;msgDialog_evalSpecials
:key1=value1 key2=value2 ... Leerzeichen getrennte Liste von Name=Wert Paaren. Wert kann Leerzeichen enthalten, falls es in "" oder {} eingeschlossen :ist. Wert wird als perl-Ausdruck ausgewertet, falls es in {} eingeschlossen ist. In der DEF werden %Name% Zeichenketten durch den zugehörigen Wert :ersetzt. Wenn der selbe Name im msgConfig und msgDialog definiert wurde, wird der Wert aus msgDialog verwendet.

;msgDialog_msgCommand <command>
:Befehl zum Versenden einer Nachricht. Die Vorgabe ist "msg push \@$recipients $message". Wenn nicht gesetzt, wird die Vorgabe verwendet.

=== ROOMMATE / GUEST ===
Für jeden Dialog kann festgelegt werden welche Person dazu berechtigt ist. Dazu sind Geräte vom Typ ROOMMATE oder GUEST mit definiertem msgContactPush Attribut erforderlich. Es ist darauf zu achten, dass das Reading fhemMsgRcvPush ein Event erzeugt. Siehe auch Attribut "allowed" in msgDialog.

Der Inhalt vom Attribut msgContactPush muss folgendem Muster entsprechen:
<pre>
<NAME des TelegramBot Device>:@<zum ROOMMATE/GUEST gehörende Telegram ID>
</pre>

=== Define ===

Definition des metaDialogs:
Zur Auflistung aller berechtigten Dialoge dient - was sonst - ein Dialog!

<pre>
defmod meta_Dialog msgDialog {\
"%me%": {\
"match": "\/?(start|%me%)",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"{return('(' . join(') (', sort{lc($a) cmp lc($b)} (split('\n', fhem('get TYPE=msgDialog:FILTER=NAME!=$SELF:FILTER=allowed=.*($recipient|everyone).* trigger', 1)))) . ') (abbrechen) ')}",\
"Ich kann folgendes für dich tun:"\
]\
},\
"zurück": {\
"commands": "set $recipient_history=.+ say @$recipient {(ReadingsVal($DEV, '$recipient_history', '') =~ m/((.+)\\|.+$)/;;;; return($2 || $1);;;;)}"\
},\
"abbrechen": {\
"match": "\/?abbrechen",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Dialog abgebrochen."\
]\
},\
"beenden": {\
"match": "\/?beenden",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Dialog beendet."\
]\
}\
}

attr meta_Dialog allowed everyone
</pre>

Aufgrund der Komplexität eines Dialogs mit JSON ist es am praktikabelsten, zunächst einen leeren Dialog zu definieren:
<pre>
define <name> msgDialog {}
</pre>

Anschließend kann die '''DEF''' in der Detail-Ansicht des Dialog-Device bearbeitet werden. Jeder Dialog basiert auf der folgenden Struktur von einfach bis komplex.

<pre>
{
"<TRIGGER>": {
"match": "<regex>",
"setOnly": (true|false),
"commands": "(fhem command|{perl code})",
"message": [
"{perl code}",
"text"
],
"<NEXT TRIGGER 1>": {
...
},
"<NEXT TRIGGER 2>": {
...
}
}
}
</pre>

Um den JSON-Teil der Dialoge zu testen, empfiehlt sich ein Besuch auf https://jsonlint.com/
Hier kann der selbst geschriebene JSON-Code validiert werden.

;TRIGGER
:Kann ein beliebiger Text sein. Es wird geprüft ob die eingehende Nachricht damit übereinstimmt. Falls ja, wird der Dialog an dieser Stelle fortgesetzt.

;match
:Wenn nicht nur genau eine Nachricht zugelassen werden soll, kann noch eine regex angegeben werden. Die regex muss auf die gesamte eingehnde Nachricht :zutreffen.

;setOnly
:Kann optional auf true oder false gestellt werden. In beiden fällen wird der TRIGGER dann nicht bei "get <name> trigger" zurück gegeben.
:Wenn setOnly auf "true" gestellt wird, kann der Dialog an dieser Stelle nicht durch eingehende Nachrichten ausgelöst werden, sondern nur über "get <name> say TRIGGER". Dies kann dazu genutzt werden um einen Dialog aus :FHEM heraus zu initiieren.

;commands
:Kann einen einzelnen oder mehrere Befehle enthalten:
<pre>
"commands": "single command"
</pre>
<pre>
"commands": [
"command 1",
"command 2",
"{perl command}"
]
</pre>

;message
:Kann einen einzelnen oder mehrere Textte enthalten die mit einen Zeilenumbruch verbunden werden:
<pre>
"message": [
"text 1",
"text 2",
"{return from perl command}"
]
</pre>

Bei mehrstufigen Dialogen wird diese Struktur ineinander verschachtelt angegeben.
Es werden Variablen und Platzhalter, welche unter dem Attribut evalSpecials definiert werden, ausgewertet.

=== Variablen ===
*$SELF: Eigenname des msgDialog
*$message: eingegangene Nachricht
*$recipient: Name des Dialogpartners

=== Attribute ===
*allowed: Liste mit allen RESIDENTS und ROOMMATE die für diesen Dialog berechtigt sind.
*disable: [0|1] Dialog ist aktiviert|deaktiviert.
*disabledForIntervals: HH:MM-HH:MM HH:MM-HH-MM ...
*evalSpecials: key1=value1 key2=value2 ...Leerzeichen getrennte Liste von Name=Wert Paaren. Wert kann Leerzeichen enthalten, falls es in "" oder {} eingeschlossen ist. Wert wird als perl-Ausdruck ausgewertet, falls es in {} eingeschlossen ist. In der DEF werden %Name% Zeichenketten durch den zugehörigen Wert ersetzt. Dieses Attribut ist als "msgDialog_evalSpecials" im msgConfig Gerät vorhanden. Wenn der selbe Name im msgConfig und msgDialog definiert wurde, wird der Wert aus msgDialog verwendet.
*msgCommand <command>: Befehl der zum Versenden einer Nachricht verwendet wird. Die Vorgabe ist "msg push \@$recipients $message" Dieses Attribut ist als "msgDialog_msgCommand" im msgConfig Gerät vorhanden.

=== set ===
*reset: Setzt den Dialog für alle Benutzer zurück.
*say [@<recipient1>[,<recipient2>,...]] <TRIGGER>[|<NEXT TRIGGER>|...]: Der Dialog wird für alle angegeben Empänger an der angegeben Stelle fortgeführt. Sind keine Empfänger angegeben wird der Dialog für alle unter dem Attribut allowed angegebenen Empfänger fortgeführt.
*updateAllowed: Aktualisiert die Auswahl für das Attribut allowed.

=== get ===
*trigger: Listet alle TRIGGER der ersten Ebene auf bei denen nicht setOnly angegeben ist.

=== READINGS ===
*$recipient_history: Durch | getrennte Liste von TRIGGER um den aktuellen Zustand des Dialogs zu sichern. Für jeden Dialogpartner wird ein Reading angelegt. Wenn der Dialog beendet ist wird das Reading zurückgesetzt.

== Hilfe bei der Fehlersuche ==
Hier entsteht eine Sammlung von Tipps bei der Fehlersuche. Die meisten dieser "Stolpersteine"
entstehen häufig bei der Erstellung eines ersten eigenen Dialoges.

=== Das Attribut allowed fehlt oder ist nicht korrekt gesetzt ===
Das allowed-Attribut dient dazu, einzelne Dialoge für alle oder nur bestimmte Benutzer zu berechtigen.
Fehlt es, wird der Dialog dem aufrufenden Benutzer nicht angezeigt.
<pre>
attr Testdialog allowed everyone
</pre>

=== Das Attribut msgDialog_evalSpecials fehlt oder ist nicht korrekt gesetzt ===
Dieses Attribut gehört dem msgConfig device und muss wie in 2.3 zu lesen
korrekt befüllt werden.
<pre>
attr myMsgConfig msgDialog_evalSpecials me=<Aktivierungswort bzw. -Nachricht>
TelegramBot=<Name des TelegramBot-device>
</pre>

=== Das Attribut utf8Special fehlt beim TelegramBot device ===
Dieses Attribut ist für die korrekte UTF-8 Kodierung zuständig und im Standard deaktiviert.
Der Satz "Was kann ich für dich tun?" aus dem Meta-Dialog enthält bereits einen Umlaut!

Folgende FHEM-Log-Fehlermeldung kann auf das fehlende Attribut hindeuten:
<pre>
<Datum> <Zeit> 3: TelegramBot_Callback <TelegramBot-Device>: resulted in NonBlockingGet timed out on read from <hidden> after 30s from SendIt
</pre>

=== JSON-Syntax Fehler ===
Das Modul prüft vor dem Abspeichern auf eine korrekte JSON-Syntax.
Meistens wird auch eine sprechende Meldung angezeigt:
<pre>
Usage: define <name> msgDialog {JSON}

, or ] expected while parsing array, at character offset 73 (before "}\n}") at ./FHEM/76_msgDialog.pm line 93.
</pre>
Eine gute Anlaufstelle zur Überprüfung von JSON-Code ist hier: https://jsonlint.com/

=== Es werden keine Dialoge angezeigt ===
Ohne die Angabe einer normalen Nachricht wird bei Keyboards kein Dialog angezeigt:
<pre>
"message": [
"(Lampen einschalten) ",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
],
</pre>
Erst mit der Nachricht "Möchtest Du Lampen ein oder ausschalten?" erscheint der Dialog:
<pre>
"message": [
"(Lampen einschalten) ",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
"Möchtest Du Lampen ein oder ausschalten?"
],
</pre>

=== Innerhalb eines Dialogs fehlen einzelne Menüeinträge ===
Das liegt das meistens an einem fehlenden Leerzeichen:
<pre>
"message": [
"(Lampen einschalten)",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
],
</pre>
Bei "Lampen ausschalten" ist dagegen korrekt ein Leerzeichen zu sehen und somit auch der Menüeintrag im Dialog.

=== ":" bei Inline Keyboards ===
Bei Inline Keyboards wird der letzte : als Trennzeichen zwischen Nachricht und Befehl ausgewertet.
Beispiel:
<pre>
"(Temperatur: [heizung:desiredTemperature]°C:setheiz) "
</pre>
oder
<pre>
"([test:state]:weiter) " wenn [test:state] = "Status: ok"
</pre>

== Beispiele ==

==== Programmierung der Waschmaschine ====
Das ist ein Beispiel zur Programmierung einer Waschmaschine wie auch oben im Video zu sehen:
<pre>
defmod Waschmaschine_Dialog msgDialog { "Waschmaschine": {\
"message": [\
"{return('(Zeitprogramm stoppen) ') if(ReadingsVal('%controlUnit%', 'controlMode', '') eq 'auto')}",\
"{return('(programmieren) ') if(ReadingsVal('%actor%', 'state', '') ne 'on')}",\
"{return('(einschalten) ') if(ReadingsVal('%actor%', 'state', '') ne 'on')}",\
"(Verlaufsdiagramm) ",\
"(abbrechen) ",\
"{return('Waschmaschine: ' . (ReadingsVal('%actor%', 'state', '') eq 'on' ? 'eingeschaltet' : 'ausgeschaltet'))}",\
"{return('Modus: ' . (ReadingsVal('%controlUnit%', 'controlMode', '') eq 'auto' ? 'Automatik' : 'Manuell (' . ReadingsVal('%controlUnit%', 'time', '') . ')'))}"\
],\
"Zeitprogramm stoppen": {\
"commands": "set %controlUnit% controlMode manual",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Das Zeitprogramm wurde gestoppt."\
]\
},\
"programmieren": {\
"message": [\
"(bestätigen|zurück|abbrechen) ",\
"( 00:00 | 00:15 | 00:30 | 00:45 ) ",\
"( 01:00 | 01:15 | 01:30 | 01:45 ) ",\
"( 02:00 | 02:15 | 02:30 | 02:45 ) ",\
"( 03:00 | 03:15 | 03:30 | 03:45 ) ",\
"( 04:00 | 04:15 | 04:30 | 04:45 ) ",\
"( 05:00 | 05:15 | 05:30 | 05:45 ) ",\
"( 06:00 | 06:15 | 06:30 | 06:45 ) ",\
"( 07:00 | 07:15 | 07:30 | 07:45 ) ",\
"( 08:00 | 08:15 | 08:30 | 08:45 ) ",\
"( 09:00 | 09:15 | 09:30 | 09:45 ) ",\
"( 10:00 | 10:15 | 10:30 | 10:45 ) ",\
"( 11:00 | 11:15 | 11:30 | 11:45 ) ",\
"( 12:00 | 12:15 | 12:30 | 12:45 ) ",\
"( 13:00 | 13:15 | 13:30 | 13:45 ) ",\
"( 14:00 | 14:15 | 14:30 | 14:45 ) ",\
"( 15:00 | 15:15 | 15:30 | 15:45 ) ",\
"( 16:00 | 16:15 | 16:30 | 16:45 ) ",\
"( 17:00 | 17:15 | 17:30 | 17:45 ) ",\
"( 18:00 | 18:15 | 18:30 | 18:45 ) ",\
"( 19:00 | 19:15 | 19:30 | 19:45 ) ",\
"( 20:00 | 20:15 | 20:30 | 20:45 ) ",\
"( 21:00 | 21:15 | 21:30 | 21:45 ) ",\
"( 22:00 | 22:15 | 22:30 | 22:45 ) ",\
"( 23:00 | 23:15 | 23:30 | 23:45 ) ",\
"Wann soll die Wäsche fertig sein?",\
"Bitte Uhrzeit in HH:MM angeben.",\
"Aktuell ist [%controlUnit%:time] Uhr eingestellt."\
],\
"Uhrzeit": {\
"match": " ?([0-1][0-9]|2[0-3]):[0-5][0-9] ?",\
"commands": [\
"set %controlUnit% time $message",\
"set $SELF say @$recipient Waschmaschine|programmieren|bestätigen"\
]\
},\
"bestätigen": {\
"commands": "set %controlUnit% controlMode auto",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Das Zeitprogramm wurde eingestellt.",\
"Die Wäsche wird voraussichtlich um [%controlUnit%:time] Uhr fertig sein.",\
"Bitte die Waschmaschine vorbereiten."\
]\
}\
},\
"einschalten": {\
"commands": [\
"set %controlUnit% controlMode manual",\
"set %actor% on"\
]\
},\
"Verlaufsdiagramm": {\
"commands": "set %TelegramBot% cmdSend {plotAsPng('%plot%')}",\
"message": "TelegramBot_MTYPE=queryInline (%me%) $message"\
}\
},\
"auto": {\
"setOnly": true,\
"commands": [\
"set %actor% on",\
"set %controlUnit% controlMode manual"\
],\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine wurde automatisch eingeschaltet."\
]\
},\
"manual": {\
"setOnly": true,\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine wurde manuell eingeschaltet."\
]\
},\
"done": {\
"setOnly": true,\
"commands": "set %actor% off",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine ist fertig."\
]\
}\
}
attr Waschmaschine_Dialog evalSpecials actor=HM_2C10D8_Sw\
controlUnit=Waschkeller_washer_controlUnit\
plot=Waschkeller_washer_SVG
</pre>

== TelegramBot ==

In Telegram gibt es die Möglichkeit die Art des Keyboards zu ändern. Links das normale Keyboard, rechts das Inline Keyboard.

[[Datei:76msgDialog menu.png|Normales Keyboard]] [[Datei:76msgDialog menu inline.PNG|Inline Keyboard]]

In diesem '''[https://youtu.be/oRDy2918mVI Video]''' wird Telegram mit einem Inline Keyboard verwendet.

Um eine Nachricht bei Telegram zu verändern, gibt es den Befehl "queryEditInline".
Dafür wird die MsgId von der Nachricht benötigt. Das erledigt ein notify, welches die msgId pro Peer abspeichert:

<pre>
defmod sentMsgIdByPeerId notify .+:sentMsgId.+ {\
return unless($TYPE eq "TelegramBot");;\
\
my $dev_hash = $defs{$NAME};;\
my $sentMsgId = ReadingsVal($NAME, "sentMsgId", "");;\
my $sentMsgPeerId = ReadingsVal($NAME, "sentMsgPeerId", "");;\
my ($contact) = devspec2array("TYPE=(ROOMMATE|GUEST):FILTER=msgContactPush=.*$sentMsgPeerId.*");;\
\
readingsSingleUpdate($dev_hash, "$contact\_sentMsgId", $sentMsgId, 1);;\
}
attr sentMsgIdByPeerId devStateIcon {ReadingsVal($name, "state", "inactive") eq "active" ? ".*:ios-on-blue:inactive" : ".*:ios-off:active"}
attr sentMsgIdByPeerId icon audio_mic
attr sentMsgIdByPeerId room msg
</pre>

Danach wird der Message-Befehl von
<pre>
set <TelegramBot> message
</pre>
auf
<pre>
set <TelegramBot> queryEditInline
</pre>
geändert. Dafür wird ein [[cmdalias]] verwendet:

<pre>
defmod message2queryEditInline cmdalias set .+ message (.|\n)+ AS {\
my ($NAME, $cmd, $message) = split(/[\s]+/, $EVENT, 3);;\
my $TYPE = InternalVal($NAME, "TYPE", "");;\
(my $recipient, $message) = ($message =~ m/(@\S+)? (.+)/s);;\
\
if($TYPE eq "TelegramBot" && $recipient){\
my ($contact) = devspec2array("TYPE=(ROOMMATE|GUEST):FILTER=msgContactPush=.*$recipient.*");;\
my $sentMsgId = ReadingsVal($NAME, "$contact\_sentMsgId", "");;\
\
if($sentMsgId ne ""){\
fhem("set $NAME queryEditInline $sentMsgId $recipient $message");;\
}\
else{\
fhem("set $NAME queryInline $recipient $message");;\
}\
}\
else{\
fhem("set $EVENT");;\
}\
}
attr message2queryEditInline room msg
</pre>

Um wieder zurück zum normalen Keyboard zu gelangen genügt es, das notify und den cmdAlias zu deaktivieren.
Das kann komfortabel über ein notify und einen dummy erledigt werden:
<pre>
defmod inline_normal.NOT notify inline_normal.DUM:.* {\
if ("$EVENT" =~ "on") {\
fhem "set sentMsgIdByPeerId active;; attr message2queryEditInline disable 0";;\
} \
elsif ("$EVENT" =~ "off") {\
fhem "set sentMsgIdByPeerId inactive;; attr message2queryEditInline disable 1";;\
}\
}
</pre>

Weitere Infos zum Thema Inline Keyboard sind in der Antwort #10 im Forum zu finden (siehe Link unten).

== JABBER ==
Hier wird die Verwendung mit Jabber beschrieben...

== WhatsApp ==
Hier wird die Verwendung mit yowsup/WhatsApp beschrieben...

== Links ==
* Thread über das Modul im {{Link2Forum|Topic=77297|LinkText=FHEM Forum}}

[[Kategorie:Hilfsmodul]]

TelegramBot

2018-11-04T17:44:54Z

OdfFhem: Kleinere Korrekturen

{{Infobox Modul
|ModPurpose=Senden und Empfangen von Nachrichten (Text und Fotos) mit dem freien Messagingdienst Telegram
|ModType=d
|ModForumArea=Unterstützende Dienste
|ModFTopic=38328
|ModTechName=[https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm 50_TelegramBot.pm]
|ModOwner=[[Benutzer:Viegener|Viegener]] ({{Link2FU|12772|Forum}} / [[Benutzer Diskussion:Viegener|Wiki]])}}

Das [[TelegramBot]]-Modul ermöglicht das Senden und Empfangen von Nachrichten über den Telegram-instant messaging Dienst (https://telegram.org/).
Es entsteht eine Möglichkeit Benachrichtungen aus FHEM zu versenden, zum Beispiel Alarmmeldungen.
Ausserdem können auch Kommandos über Telegram an FHEM gesendet werden um Steuerungsbefehle in FHEM auszulösen.

Das TelegramBot-Modul benötigt keine Zusatzsoftware auf dem FHEM-Server (anders als die Variante [[Telegram]]), sondern verwendet das [https://core.telegram.org/bots/api TelegramBot-API] über https-Aufrufe. Es muss jedoch das [http://www.fhemwiki.de/wiki/Raspberry_Pi#N.C3.BCtzliche_Zusatzpakete perl JSON modul] installiert sein.

== Über Telegram Instant Messaging ==
Telegram-IDs und Versand/Empfang von Nachrichten sind kostenfrei.
Clients sind für gängige Smartphonesysteme erhältlich (iOS iPhone und Tablet, Android, Windows Phone) und
können auch aus dem WebBrowser verwendet werden.
Es gibt auch einen Kommandozeilen-Client für Linux, der die Grundlage dieses Moduls darstellt.
Mehrfachanmeldungen, auch parallel mit verschiedenen Geräten (z.B. Tablet und Smartphone), sind möglich.
Gruppenchats und Chats mit End-2-End-Verschlüsselung werden ebenfalls unterstützt.

Für die Unterstützung von ''WhatsApp'' siehe Modul [[yowsup]].

== Features ==
Unterstützt werden:

* Versand von Textnachrichten
* Versand und Empfang von Bildern/Audio/etc
* Empfang von Textnachrichten von beliebigen Kontakten
* Kommandos in FHEM über Telegram-Nachrichten von aussen auslösen
* Ergebnisse der Kommandos zusenden lassen

Eine detaillierte Beschreibung des Moduls ist im FHEM Forum und in der (englischen) Dokumentation zum Modul in der {{Link2CmdRef|Anker=TelegramBot}} und in diesem {{Link2Forum|Topic=38328|LinkText=Diskussionsthread}} zu finden. Seit Oktober 2015 wird das Modul offiziell über FHEM-Update verteilt.

Die jeweils aktuellste Entwicklungs-Version des Moduls ist in Github [https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm 50_TelegramBot.pm] verfügbar.

== Hinweise zum Betrieb mit FHEM ==
{{Randnotiz|RNTyp=Info|RNText=Achtung: Dieses Authtoken ist die einzige Authentifizierung für den Bot und sollte deshalb nicht aus der Hand gegeben werden. Die verwendeten Urls sind deshalb auch in den Log-Files nicht enthalten, da diese das Authtoken in Klartext enthalten. Auch im Forum sollte dieses Token nicht aufgenommen werden.
}}

Für die Anlage eines TelegramBot Devices in FHEM ist ein Authtoken erforderlich. Dieses Token wird über Anlegen eines neuen Bots im [https://core.telegram.org/bots#6-botfather BotFather] erzeugt. Dafür muss der BotFather mit einem Telegram-Client kontaktiert werden. Dort mit dem Telegram-Befehl <code>/newbot</code> einen neuen Bot anlegen und mit einem Namen versehen. Hinweis: Die Namen für Bots müssen auf "Bot" enden.<br>

Das Anlegen eines TelegramBot devices erfolgt durch die Angabe dieses Tokens:

<code>define <name> TelegramBot <token> </code>

Beispiel: <code>define teleBot TelegramBot 110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw</code>

'''Das Empfangen von Nachrichten (polling) erfordert die Einstellung des Attributes'''
<code>pollingTimeout</code> '''auf einen Wert der grösser als Null ist. Beim Wert 0 oder ohne Setzen des Attributes findet kein Polling und damit auch kein Empfang statt.'''

Beispiel: <code>attr teleBot pollingTimeout 120</code>

'''Der TelegramBot kann erst dann Nachrichten an einen telegram user schicken, wenn dieser zuerst an den telegram bot eine Nachricht gesendet hat.'''
Dafür muss man in seinem Telegram-Client den Kontakt @botName suchen und dann eine Nachricht daran versenden.

{{Randnotiz|RNTyp=Info|RNText=TelegramBot setzt eine aktuelle Version von FHEM voraus, insbesondere Versionen weit vor der Umstellung auf 5.7 (also vor Herbst 2015) können mit einem TelegramBot-Modul nicht funktionieren, da insbesondere das HTTPSRV-Modul dann veraltet ist. Am besten auch den TelegramBot über den offiziellen Update mit dem Rest von FHEM installieren/aktualisieren.
}}

== Registrierung eines neuen Bot ==
Zur Registrierung wird ein funktionierender Telegram-Client (egal ob Web, App oder Programm)benötigt. Hier wird ein Chat zum BotFather gestartet und der Befehl /newbot gesendet. Nun fragt der BotFather die benötigten Angaben ab und liefert am Ende des Dialogs die Informationen für den neuen Bot.
Hier ein Beispiel, wie so ein Chat aussehen könnte:
<pre>Client:
/newbot
----------------
BotFather:
Alright, a new bot. How are we going to call it? Please choose a name for your bot.
----------------
Client:
Mein Name
----------------
BotFather:
Good. Now let's choose a username for your bot. It must end in `bot`. Like this, for example: TetrisBot or tetris_bot.
----------------
Client:
fhem_bot
----------------
BotFather:
Sorry, this username is already taken. Think of something different.
----------------
Client:
fhem1234_bot
----------------
BotFather:
Done! Congratulations on your new bot.
You will find it at telegram.me/fhem1234_bot.
You can now add a description, about section and profile picture for your bot, see /help for a list of commands.
----------------
Use this token to access the HTTP API:
1234567890:AbCdefgHIJklmnOPQRst-uvwxyz

For a description of the Bot API, see this page: https://core.telegram.org/bots/api
</pre>
Um einen Chat an einen "Contact" versenden zu können, muss zuerst in Contacts (bei Readings) ein Kontakt auftauchen. Wenn man sich zum allerersten Mal bei Telegram angemeldet hat, gibt es noch keinen Chat mit irgendjemanden. Man muss sich zuerstmal selbst eine Nachricht im Smartphone zusenden, dann taucht unter Readings der Eintrag Contacts auf. Erst dann kann man eine Nachricht mit @msgPeerId (das ist Ziffernfolge des Contacts ) oder mit @msgPeer (das ist der Name nach dem Doppelpunkt) vom TelegramBot auf sein Smartphone senden.

== Tipps ==

=== Privacyeinstellungen ===

Damit der TelegramBot auch Meldungen in Gruppen sieht, müssen über den BotFather die Privacy-Einstellungen geändert werden.<br>Beispielchat:<pre>Client:
/setprivacy
----------------
BotFather:
Choose a bot to change group messages settings.
----------------
Client:
@fhem1234_bot
----------------
BotFather:
'Enable' - your bot will only receive messages that either start with the '/' symbol or mention the bot by username.
'Disable' - your bot will receive all messages that people send to groups.
Current status is: ENABLED
----------------
Client:
Disable
----------------
BotFather:
Success! The new status is: DISABLED. /help</pre>

=== Kontakte ===

Der Bot merkt sich die bereits bekannten Kontakte im Reading <code>Contacts</code>. Dabei werden die einzelnen Kontakte jeweils als 3-teilige Einträge gespeichert - bestehend aus UserID, Vor- und Nachname des Benutzers (mit _ verbunden) und dem Username (mit vorangestelltem @).

Beispiel: <code>123456:Ralf_Mustermann:@ralf</code>

Verschiedene Einträge werden durch Leerzeichen getrennt.

Man kann die Kontakte auch manuell überschreiben (z.B. wenn das Reading fehlerhaft oder verloren sein sollte). Dazu gibt es den Set-Befehl <code>replaceContacts</code>. Dieser nimmt die Kontakte ebenfalls in der gleichen Form wie oben beschrieben entgegen.

Die Kontaktliste wird ansonsten nur durch den Empfang von Nachrichten erweitert, da es im TelegramBot-API keine Möglichkeit gibt Kontaktdaten von Telegram abzufragen (siehe auch pollingTimeout)

=== Reset ===

Es ist möglich den Bot im laufenden Betrieb zurückzusetzen (Set-Befehl <code>reset</code>). Dabei werden noch nicht abgeschlossene Übetragungen entfernt und die internen Zustände des Devices zurückgesetzt.

=== Gruppen ===

Um eine Nachricht von FHEM an eine Gruppe zu senden, muss der BOT in die Gruppe aufgenommen werden. Nach dem Senden einer Nachricht an die Gruppe kann im Modul die Gruppen-ID ermittelt werden und zum Senden von Nachrichten verwendet werden. Die Gruppen-ID ist eine negative Zahl. Wenn die Privacy-Einstellungen nicht auf 'Disabled' gesetzt wurden, muss die Nachricht mit einem Slash (/) beginnen.

==== Supergroups / Supergruppen ====

Auch die neuen Supergruppen werden mit dem Bot unterstützt, es ist allerdings zu beachten, dass bei der Umwandlung einer Gruppe in eine Supergruppe eine neue ID in den Kontakten von Telegram vergeben wird. Wenn man also wie empfohlen IDs zur Identifikation von Benutzern einsetzt, muss entsprechend angepasst werden.

== Beispielszenarien ==

=== Benachrichtigungen über Ereignisse ===

Das einfachste Szenario für die Integration von Messaging-Diensten mit FHEM ist zur Benachrichtigung über Ereignisse. Diese Funktion kann zum Beispiel verwendet werden, um über einen erfolgten Neustart von FHEM zu informieren:

<code>define notify_fhem_reload notify global:INITIALIZED set telebotdevice message fhem newly started - just now !</code>

In diesem Beispiel wird der Nachrichtentext "fhem newly started - just now !" an den als default eingestellten Kontakt (Attribut: defaultPeer) gesendet, sobald FHEM neu gestartet wurde. Natürlich kann man auch beliebige andere Benachrichtigungen einführen.

=== Versand von Bildern ===

Es ist auch möglich Bilder auf dem FHEM-Server, die zum Beispiel von einer Kamera oder einem Wettermodul stammen über Telegram zu versenden. So wäre es z.B. möglich jeweils morgens die aktuelle Wetterkarte zu erhalten.

ACHTUNG: TelegramBot verwendet das HTTPUtils-Modul zur Kommunikation mit dem TelegramBot-API. Erst mit der Version, die seit 22.10.2015
([r9576] HttpUtils.pm: Async write for POST Requests {{Link2Forum|Topic=41583|LinkText=FHEM-Forum}}) verteilt wird, erlaubt auch den Transfer grösserer Bilder. Die Grenze liegt ansonsten bei ca. 14kb auf Raspberries (Plattformspezifische Grenze).

<code>define notify_fhem_reload notify wetter:report set telebotdevice sendImage /opt/fhem/wetter.jpg</code>

Bei Erreichen des entsprechenden Status am Wetter-Modul wird ein Image über Telegram versendet. Hier sind lokale Pfade (relativ zu fhem) oder absolute Pfade wie oben möglich.

=== Versand von SVG-Plots ===

SVG-Plots können mit dem Befehl
<code>cmdSend [ @<peer1> ... @<peerN> ] <fhem command></code>
verschickt werden.

Das angegebene FHEM-Kommando wird ausgeführt und das Ergebnis an die angegebenen Peers bzw. den Standard-Peer verschickt.

Mit dem folgenden Befehl wird der SVG-Plot SVG_FileLog_Aussen an den Standard-Peer geschickt:
<code>set mein_telegramBot cmdSend { plotAsPng('SVG_FileLog_Aussen') }</code>

Nach <code>define cmd_sendTelegramSVG cmdalias TGSVG .* AS set mein_telegramBot cmdSend { plotAsPng("$EVENT") }</code>
kann man mit einem kurzen
<code>TGSVG SVG_Garten</code>
ein beliebiges SVG über die Kommandozeile per Telegram versenden.

Um das SVG nun noch mit einem Text zu versehen, muss eine Textnachricht dazu gesendet werden, was sich am einfachsten durch das Ausführen eines FHEM-Befehls auf Perl-Ebene realisieren lässt:

<code>{fhem "set mein_telegramBot message Bildbeschreibung;; set mein_telegramBot cmdSend { plotAsPng('mein_SVG') }" }</code>

'''Hinweis:''' früher wurde zum Verschicken von Plots auch die interne Funktion TelegramBot_ExecuteCommand verwendet; mit dem Update Ende Februar 2017 hat diese Funktion einen zusätzlichen Parameter erhalten und lautet nun
<code>TelegramBot_ExecuteCommand($defs{"mein_telegramBot"}, meine_ZielID, undef, '{plotAsPng("mein_SVG")}');</code>

==== Voraussetzungen für den Versand von SVG-Plots ====
Es muss das Modul libimage-librsvg-perl installiert sein:

<code>sudo apt-get install libimage-librsvg-perl</code>

Evtl. sind weitere Module erforderlich:

<code>sudo apt-get install libgd-graph-perl

sudo apt-get install libgd-text-perl</code>

=== Empfang von Bildern oder ähnlichem ===

Beim Empfang von Bildern wird zuerst nur eine ID vom Telegram-Server empfangen, diese befindet sich im Reading <code>msgFileId</code> angelegt (<code>123456:xxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx</code>) und im Reading <code>msgText</code> steht dann so etwas wie
<code>received photo # Size: 107701</code>

Über das Get-Kommando <code>urlForFile</code> mit der ID aus dem msgFileId Reading lässt sich dann daraus ein URL ableiten, der dann zur eigentlichen Datei führt:

<code>https://api.telegram.org/file/bot123456:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/photo/file_25.jpg</code>

=== Versand von Emojis (Smileys) ===

Es ist auch möglich Emojis mit den (Text-)Nachrichten zu versenden. Die entsprechenden (Unicode-)Zeichen werden einfach direkt mit in den Text der Nachricht aufgenommen. Um das zu vereinfachen kann man das einfach per Copy und Paste von dieser Seite

http://apps.timwhitlock.info/emoji/tables/unicode (Spalte "Native")

übernehmen und mit der Nachricht verschicken.

Die Emojis können auch empfangen werden und werden so auch in FHEM / FHEMWeb angezeigt. Plattformspezifische (z.B. von iOS oder Android) Emojis werden dabei nicht unterstützt (gerade mit iOS sind viele neue farbige Emojis hinzugekommen, die wohl leider nur auf Apple-devices funktionieren).

=== Kommandos auslösen ===

Ein wichtiges Szenario ist die Möglichkeit Kommandos in FHEM ausführen zu können, ohne einen Zugang durch die Firewall einrichten zu müssen. Dazu ist die Definition eines Schlüsselwortes (Attribut: "cmdKeyword")erforderlich, mit dem man die Nachrichten beginnen muss, damit der TelegramBot die Kommandos erkennt.

<code>attr telebotdevice cmdKeyword doit</code>

Somit kann man dann durch Nachrichten die mit "doit" beginnen Kommandos an FHEM senden, die ähnlich wie im Kommandoeingabefeld von FHEMweb dann von FHEM ausgeführt werden. Das Ergebnis der Ausführung wird zurück an den Sender (und an den definierten defaultPeer) geschickt.

Somit können nicht nur Aktionen angestossen werden, sondern auch Infos abgefragt werden.

Beispiele

<code>doit set schalter on</code>

<code>doit list telegrambot</code>

{{Randnotiz|RNTyp=Warn|RNText=Achtung: Bei den Kommandos sollten man unbedingt das Attribut "cmdRestrictedPeer" setzen, damit nicht jeder Kommandos auf dem FHEM-Server ausführen kann. Dazu sollten die BenutzerIDs der erlaubten Benutzer (durch Leerzeichen getrennt angeben). Da Benutzernamen selber vergeben werden und nicht unbedingt eindeutig sind, sollten hier auch NUR BenutzerIDs verwendet werden.
}}

==== Favoriten für Kommandos anlegen ====

Grundidee bei den Favoriten ist, dass man lange Befehle, die man häufig braucht auf "Kurzwahl" legt.

Beispiel-Kommandos wie z.B. <code>set TYPE=ROLLADEN pos 100</code> und <code>set TYPE=ROLLADEN pos 0</code>, die man immer wieder braucht. Um nicht jedes mal dieses Kommando eintippen zu müssen auf dem Smartphone, kann man auch dafür Favoriten anlegen.

Dazu gibt man erst mal die beiden Kommandos getrennt durch Semikolon im Attribut favorites an:

<code>attr telegrambotdevice favorites set TYPE=ROLLADEN pos 100;set TYPE=ROLLADEN pos 0</code>

Um die Favorites jetzt ausführen zu können braucht man noch ein Schlüsselwort dafür.
Nehmen wir mal an man möchte die Favoriten mit <code>/short</code> ausführen können. Dazu muss dann das Attribut "cmdFavorites" setzen

<code>attr telegrambotdevice cmdFavorites /short</code>

Wenn man nun im Telegram Client
<code>/short 1</code> an den Bot schickt führt der Bot den ersten Favoriten aus und das Ergebnis der Ausführung wird zurückgeschickt.

Ausserdem kann man im Telegram Client
<code>/short</code> an den Bot schicken, dann antwortet der Bot mit

<pre>
Favorites

/short1 = set TYPE=ROLLADEN pos 100

/short2 = set TYPE=ROLLADEN pos 0

</pre>

Die Antworten werden als Schaltflächen dargestellt (Telegram inline Keyboard) und können am Mobile-Client direkt angeklickt werden um sie auszuführen.
Um die Beschriftung der Schaltflächen zu optimieren, können die Befehle im Attribut favorites mit Beschreibungen versehen werden:

<code>/[Rollaeden zu ]=set TYPE=ROLLADEN pos 100;/[Rollaeden auf]=set TYPE=ROLLADEN pos 0</code>

Nun antwortet der Bot auf das Schlüsselwort für die Favoriten mit:

<pre>
Favorites

/short1 = Rollaeden zu

/short2 = Rollaeden auf

</pre>

== Links ==
* Github Repository für die Telegram-FHEM Entwicklung: https://github.com/viegener/Telegram-fhem
* Infos zum Telegram BotFather: https://core.telegram.org/bots#6-botfather

* Source code für das 50_TelegramBot.pm-Modul: https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm

* Forum-Thread in dem das Modul vorgestellt wurde {{Link2Forum|Topic=38328|LinkText=FHEM-Forum}}
* Telegram messaging system https://telegram.org/
* TelegramBot API https://core.telegram.org/bots/api

MsgDialog

2018-11-04T17:41:47Z

OdfFhem: Fehlersuche ergänzt

{{Infobox Modul
|ModPurpose=Dialoge für Sofortnachrichten über TelegramBot, Jabber und WhatsApp
|ModType=h
|ModForumArea=Frontends
|ModTechName=76_msgDialog.pm
|ModOwner={{Link2FU|4106|igami}}
}}

== Zielsetzung ==
Ein zentrale Anforderung an die Haus-Automation ist die Kommunikation mit den Anwendern. Fast jeder Anwender möchte über bestimmte Ereignisse informiert werden und Einstellungen vornehmen. FHEM bietet schon seit längerem die Unterstützung für verschiedene Messaging Dienste an.
Mit dem msgDialog Modul können vordefinierte Dialoge erstellt werden. Die Kommunikation erfolgt dabei über den [[msg]] Befehl welcher zurzeit die bidirektionale Kommunikation über [[TelegramBot]], [[Jabber]] und [[yowsup]] (WhatsApp) unterstützt. Eingehende Nachrichten werden einem ROMMATE oder GUEST zugeordnet. Darüber werden auch die Berechtigungen für die einzelnen Dialoge festgelegt.
Die grundlegende Bedienung wird in diesem '''[https://youtu.be/yiCOTeR1YVQ Video]''' am Beispiel von TelegramBot gezeigt.

== Konfiguration ==

=== Voraussetzungen ===
Für dieses Modul wird das Perl JSON Modul benötigt. Auf einem Debian-basierten System (z.B RaspberryPI o.ä.) kann man das mit dem folgenden Befehl installieren:
<pre>
sudo apt-get install libjson-perl
</pre>

=== Hinweis zu den Code Beispielen ===
Es handelt sich bei den Beispielen um eine Raw definition, siehe auch [[Import_von_Code_Snippets]]

=== msgConfig ===

Als erstes benötigt man ein definiertes msgConfig device:

<pre>
defmod myMsgConfig msgConfig
attr myMsgConfig userattr msgDialog_evalSpecials:textField-long msgDialog_msgCommand:textField
attr myMsgConfig msgContactPush <Name des TelegramBot-device>
attr myMsgConfig msgDialog_evalSpecials me=<Aktivierungswort bzw. -Nachricht>\
TelegramBot=<Name des TelegramBot-device>
</pre>

Falls bereits vorhanden, müssen natürlich nur die fehlenden Attribute gesetzt werden.

;msgDialog_evalSpecials
:key1=value1 key2=value2 ... Leerzeichen getrennte Liste von Name=Wert Paaren. Wert kann Leerzeichen enthalten, falls es in "" oder {} eingeschlossen :ist. Wert wird als perl-Ausdruck ausgewertet, falls es in {} eingeschlossen ist. In der DEF werden %Name% Zeichenketten durch den zugehörigen Wert :ersetzt. Wenn der selbe Name im msgConfig und msgDialog definiert wurde, wird der Wert aus msgDialog verwendet.

;msgDialog_msgCommand <command>
:Befehl zum Versenden einer Nachricht. Die Vorgabe ist "msg push \@$recipients $message". Wenn nicht gesetzt, wird die Vorgabe verwendet.

=== ROOMMATE / GUEST ===
Für jeden Dialog kann festgelegt werden welche Person dazu berechtigt ist. Dazu sind Geräte vom Typ ROOMMATE oder GUEST mit definiertem msgContactPush Attribut erforderlich. Es ist darauf zu achten, dass das Reading fhemMsgRcvPush ein Event erzeugt. Siehe auch Attribut "allowed" in msgDialog.

=== Define ===

Definition des metaDialogs:
Zur Auflistung aller berechtigten Dialoge dient - was sonst - ein Dialog!

<pre>
defmod meta_Dialog msgDialog {\
"%me%": {\
"match": "\/?(start|%me%)",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"{return('(' . join(') (', sort{lc($a) cmp lc($b)} (split('\n', fhem('get TYPE=msgDialog:FILTER=NAME!=$SELF:FILTER=allowed=.*($recipient|everyone).* trigger', 1)))) . ') (abbrechen) ')}",\
"Ich kann folgendes für dich tun:"\
]\
},\
"zurück": {\
"commands": "set $recipient_history=.+ say @$recipient {(ReadingsVal($DEV, '$recipient_history', '') =~ m/((.+)\\|.+$)/;;;; return($2 || $1);;;;)}"\
},\
"abbrechen": {\
"match": "\/?abbrechen",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Dialog abgebrochen."\
]\
},\
"beenden": {\
"match": "\/?beenden",\
"commands": "deletereading TYPE=msgDialog $recipient_history",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Dialog beendet."\
]\
}\
}

attr meta_Dialog allowed everyone
</pre>

Aufgrund der Komplexität eines Dialogs mit JSON ist es am praktikabelsten, zunächst einen leeren Dialog zu definieren:
<pre>
define <name> msgDialog {}
</pre>

Anschließend kann die '''DEF''' in der Detail-Ansicht des Dialog-Device bearbeitet werden. Jeder Dialog basiert auf der folgenden Struktur von einfach bis komplex.

<pre>
{
"<TRIGGER>": {
"match": "<regex>",
"setOnly": (true|false),
"commands": "(fhem command|{perl code})",
"message": [
"{perl code}",
"text"
],
"<NEXT TRIGGER 1>": {
...
},
"<NEXT TRIGGER 2>": {
...
}
}
}
</pre>

Um den JSON-Teil der Dialoge zu testen, empfiehlt sich ein Besuch auf https://jsonlint.com/
Hier kann der selbst geschriebene JSON-Code validiert werden.

;TRIGGER
:Kann ein beliebiger Text sein. Es wird geprüft ob die eingehende Nachricht damit übereinstimmt. Falls ja, wird der Dialog an dieser Stelle fortgesetzt.

;match
:Wenn nicht nur genau eine Nachricht zugelassen werden soll, kann noch eine regex angegeben werden. Die regex muss auf die gesamte eingehnde Nachricht :zutreffen.

;setOnly
:Kann optional auf true oder false gestellt werden. In beiden fällen wird der TRIGGER dann nicht bei "get <name> trigger" zurück gegeben.
:Wenn setOnly auf "true" gestellt wird, kann der Dialog an dieser Stelle nicht durch eingehende Nachrichten ausgelöst werden, sondern nur über "get <name> say TRIGGER". Dies kann dazu genutzt werden um einen Dialog aus :FHEM heraus zu initiieren.

;commands
:Kann einen einzelnen oder mehrere Befehle enthalten:
<pre>
"commands": "single command"
</pre>
<pre>
"commands": [
"command 1",
"command 2",
"{perl command}"
]
</pre>

;message
:Kann einen einzelnen oder mehrere Textte enthalten die mit einen Zeilenumbruch verbunden werden:
<pre>
"message": [
"text 1",
"text 2",
"{return from perl command}"
]
</pre>

Bei mehrstufigen Dialogen wird diese Struktur ineinander verschachtelt angegeben.
Es werden Variablen und Platzhalter, welche unter dem Attribut evalSpecials definiert werden, ausgewertet.

=== Variablen ===
*$SELF: Eigenname des msgDialog
*$message: eingegangene Nachricht
*$recipient: Name des Dialogpartners

=== Attribute ===
*allowed: Liste mit allen RESIDENTS und ROOMMATE die für diesen Dialog berechtigt sind.
*disable: [0|1] Dialog ist aktiviert|deaktiviert.
*disabledForIntervals: HH:MM-HH:MM HH:MM-HH-MM ...
*evalSpecials: key1=value1 key2=value2 ...Leerzeichen getrennte Liste von Name=Wert Paaren. Wert kann Leerzeichen enthalten, falls es in "" oder {} eingeschlossen ist. Wert wird als perl-Ausdruck ausgewertet, falls es in {} eingeschlossen ist. In der DEF werden %Name% Zeichenketten durch den zugehörigen Wert ersetzt. Dieses Attribut ist als "msgDialog_evalSpecials" im msgConfig Gerät vorhanden. Wenn der selbe Name im msgConfig und msgDialog definiert wurde, wird der Wert aus msgDialog verwendet.
*msgCommand <command>: Befehl der zum Versenden einer Nachricht verwendet wird. Die Vorgabe ist "msg push \@$recipients $message" Dieses Attribut ist als "msgDialog_msgCommand" im msgConfig Gerät vorhanden.

=== set ===
*reset: Setzt den Dialog für alle Benutzer zurück.
*say [@<recipient1>[,<recipient2>,...]] <TRIGGER>[|<NEXT TRIGGER>|...]: Der Dialog wird für alle angegeben Empänger an der angegeben Stelle fortgeführt. Sind keine Empfänger angegeben wird der Dialog für alle unter dem Attribut allowed angegebenen Empfänger fortgeführt.
*updateAllowed: Aktualisiert die Auswahl für das Attribut allowed.

=== get ===
*trigger: Listet alle TRIGGER der ersten Ebene auf bei denen nicht setOnly angegeben ist.

=== READINGS ===
*$recipient_history: Durch | getrennte Liste von TRIGGER um den aktuellen Zustand des Dialogs zu sichern. Für jeden Dialogpartner wird ein Reading angelegt. Wenn der Dialog beendet ist wird das Reading zurückgesetzt.

== Hilfe bei der Fehlersuche ==
Hier entsteht eine Sammlung von Tipps bei der Fehlersuche. Die meisten dieser "Stolpersteine"
entstehen häufig bei der Erstellung eines ersten eigenen Dialoges.

=== Das Attribut allowed fehlt oder ist nicht korrekt gesetzt ===
Das allowed-Attribut dient dazu, einzelne Dialoge für alle oder nur bestimmte Benutzer zu berechtigen.
Fehlt es, wird der Dialog dem aufrufenden Benutzer nicht angezeigt.
<pre>
attr Testdialog allowed everyone
</pre>

=== Das Attribut msgDialog_evalSpecials fehlt oder ist nicht korrekt gesetzt ===
Dieses Attribut gehört dem msgConfig device und muss wie in 2.3 zu lesen
korrekt befüllt werden.
<pre>
attr myMsgConfig msgDialog_evalSpecials me=<Aktivierungswort bzw. -Nachricht>
TelegramBot=<Name des TelegramBot-device>
</pre>

=== Das Attribut utf8Special fehlt beim TelegramBot device ===
Dieses Attribut ist für die korrekte UTF-8 Kodierung zuständig und im Standard deaktiviert.
Der Satz "Was kann ich für dich tun?" aus dem Meta-Dialog enthält bereits einen Umlaut!

Folgende FHEM-Log-Fehlermeldung kann auf das fehlende Attribut hindeuten:
<pre>
<Datum> <Zeit> 3: TelegramBot_Callback <TelegramBot-Device>: resulted in NonBlockingGet timed out on read from <hidden> after 30s from SendIt
</pre>

=== JSON-Syntax Fehler ===
Das Modul prüft vor dem Abspeichern auf eine korrekte JSON-Syntax.
Meistens wird auch eine sprechende Meldung angezeigt:
<pre>
Usage: define <name> msgDialog {JSON}

, or ] expected while parsing array, at character offset 73 (before "}\n}") at ./FHEM/76_msgDialog.pm line 93.
</pre>
Eine gute Anlaufstelle zur Überprüfung von JSON-Code ist hier: https://jsonlint.com/

=== Es werden keine Dialoge angezeigt ===
Ohne die Angabe einer normalen Nachricht wird bei Keyboards kein Dialog angezeigt:
<pre>
"message": [
"(Lampen einschalten) ",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
],
</pre>
Erst mit der Nachricht "Möchtest Du Lampen ein oder ausschalten?" erscheint der Dialog:
<pre>
"message": [
"(Lampen einschalten) ",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
"Möchtest Du Lampen ein oder ausschalten?"
],
</pre>

=== Innerhalb eines Dialogs fehlen einzelne Menüeinträge ===
Das liegt das meistens an einem fehlenden Leerzeichen:
<pre>
"message": [
"(Lampen einschalten)",
"(Lampen ausschalten) ",
"(zurück:%me%) ",
],
</pre>
Bei "Lampen ausschalten" ist dagegen korrekt ein Leerzeichen zu sehen und somit auch der Menüeintrag im Dialog.

=== ":" bei Inline Keyboards ===
Bei Inline Keyboards wird der letzte : als Trennzeichen zwischen Nachricht und Befehl ausgewertet.
Beispiel:
<pre>
"(Temperatur: [heizung:desiredTemperature]°C:setheiz) "
</pre>
oder
<pre>
"([test:state]:weiter) " wenn [test:state] = "Status: ok"
</pre>

== Beispiele ==

==== Programmierung der Waschmaschine ====
Das ist ein Beispiel zur Programmierung einer Waschmaschine wie auch oben im Video zu sehen:
<pre>
defmod Waschmaschine_Dialog msgDialog { "Waschmaschine": {\
"message": [\
"{return('(Zeitprogramm stoppen) ') if(ReadingsVal('%controlUnit%', 'controlMode', '') eq 'auto')}",\
"{return('(programmieren) ') if(ReadingsVal('%actor%', 'state', '') ne 'on')}",\
"{return('(einschalten) ') if(ReadingsVal('%actor%', 'state', '') ne 'on')}",\
"(Verlaufsdiagramm) ",\
"(abbrechen) ",\
"{return('Waschmaschine: ' . (ReadingsVal('%actor%', 'state', '') eq 'on' ? 'eingeschaltet' : 'ausgeschaltet'))}",\
"{return('Modus: ' . (ReadingsVal('%controlUnit%', 'controlMode', '') eq 'auto' ? 'Automatik' : 'Manuell (' . ReadingsVal('%controlUnit%', 'time', '') . ')'))}"\
],\
"Zeitprogramm stoppen": {\
"commands": "set %controlUnit% controlMode manual",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Das Zeitprogramm wurde gestoppt."\
]\
},\
"programmieren": {\
"message": [\
"(bestätigen|zurück|abbrechen) ",\
"( 00:00 | 00:15 | 00:30 | 00:45 ) ",\
"( 01:00 | 01:15 | 01:30 | 01:45 ) ",\
"( 02:00 | 02:15 | 02:30 | 02:45 ) ",\
"( 03:00 | 03:15 | 03:30 | 03:45 ) ",\
"( 04:00 | 04:15 | 04:30 | 04:45 ) ",\
"( 05:00 | 05:15 | 05:30 | 05:45 ) ",\
"( 06:00 | 06:15 | 06:30 | 06:45 ) ",\
"( 07:00 | 07:15 | 07:30 | 07:45 ) ",\
"( 08:00 | 08:15 | 08:30 | 08:45 ) ",\
"( 09:00 | 09:15 | 09:30 | 09:45 ) ",\
"( 10:00 | 10:15 | 10:30 | 10:45 ) ",\
"( 11:00 | 11:15 | 11:30 | 11:45 ) ",\
"( 12:00 | 12:15 | 12:30 | 12:45 ) ",\
"( 13:00 | 13:15 | 13:30 | 13:45 ) ",\
"( 14:00 | 14:15 | 14:30 | 14:45 ) ",\
"( 15:00 | 15:15 | 15:30 | 15:45 ) ",\
"( 16:00 | 16:15 | 16:30 | 16:45 ) ",\
"( 17:00 | 17:15 | 17:30 | 17:45 ) ",\
"( 18:00 | 18:15 | 18:30 | 18:45 ) ",\
"( 19:00 | 19:15 | 19:30 | 19:45 ) ",\
"( 20:00 | 20:15 | 20:30 | 20:45 ) ",\
"( 21:00 | 21:15 | 21:30 | 21:45 ) ",\
"( 22:00 | 22:15 | 22:30 | 22:45 ) ",\
"( 23:00 | 23:15 | 23:30 | 23:45 ) ",\
"Wann soll die Wäsche fertig sein?",\
"Bitte Uhrzeit in HH:MM angeben.",\
"Aktuell ist [%controlUnit%:time] Uhr eingestellt."\
],\
"Uhrzeit": {\
"match": " ?([0-1][0-9]|2[0-3]):[0-5][0-9] ?",\
"commands": [\
"set %controlUnit% time $message",\
"set $SELF say @$recipient Waschmaschine|programmieren|bestätigen"\
]\
},\
"bestätigen": {\
"commands": "set %controlUnit% controlMode auto",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Das Zeitprogramm wurde eingestellt.",\
"Die Wäsche wird voraussichtlich um [%controlUnit%:time] Uhr fertig sein.",\
"Bitte die Waschmaschine vorbereiten."\
]\
}\
},\
"einschalten": {\
"commands": [\
"set %controlUnit% controlMode manual",\
"set %actor% on"\
]\
},\
"Verlaufsdiagramm": {\
"commands": "set %TelegramBot% cmdSend {plotAsPng('%plot%')}",\
"message": "TelegramBot_MTYPE=queryInline (%me%) $message"\
}\
},\
"auto": {\
"setOnly": true,\
"commands": [\
"set %actor% on",\
"set %controlUnit% controlMode manual"\
],\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine wurde automatisch eingeschaltet."\
]\
},\
"manual": {\
"setOnly": true,\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine wurde manuell eingeschaltet."\
]\
},\
"done": {\
"setOnly": true,\
"commands": "set %actor% off",\
"message": [\
"TelegramBot_MTYPE=queryInline (%me%) ",\
"Die Wachmaschine ist fertig."\
]\
}\
}
attr Waschmaschine_Dialog evalSpecials actor=HM_2C10D8_Sw\
controlUnit=Waschkeller_washer_controlUnit\
plot=Waschkeller_washer_SVG
</pre>

== TelegramBot ==

In Telegram gibt es die Möglichkeit die Art des Keyboards zu ändern. Links das normale Keyboard, rechts das Inline Keyboard.

[[Datei:76msgDialog menu.png|Normales Keyboard]] [[Datei:76msgDialog menu inline.PNG|Inline Keyboard]]

In diesem '''[https://youtu.be/oRDy2918mVI Video]''' wird Telegram mit einem Inline Keyboard verwendet.

Um eine Nachricht bei Telegram zu verändern, gibt es den Befehl "queryEditInline".
Dafür wird die MsgId von der Nachricht benötigt. Das erledigt ein notify, welches die msgId pro Peer abspeichert:

<pre>
defmod sentMsgIdByPeerId notify .+:sentMsgId.+ {\
return unless($TYPE eq "TelegramBot");;\
\
my $dev_hash = $defs{$NAME};;\
my $sentMsgId = ReadingsVal($NAME, "sentMsgId", "");;\
my $sentMsgPeerId = ReadingsVal($NAME, "sentMsgPeerId", "");;\
my ($contact) = devspec2array("TYPE=(ROOMMATE|GUEST):FILTER=msgContactPush=.*$sentMsgPeerId.*");;\
\
readingsSingleUpdate($dev_hash, "$contact\_sentMsgId", $sentMsgId, 1);;\
}
attr sentMsgIdByPeerId devStateIcon {ReadingsVal($name, "state", "inactive") eq "active" ? ".*:ios-on-blue:inactive" : ".*:ios-off:active"}
attr sentMsgIdByPeerId icon audio_mic
attr sentMsgIdByPeerId room msg
</pre>

Danach wird der Message-Befehl von
<pre>
set <TelegramBot> message
</pre>
auf
<pre>
set <TelegramBot> queryEditInline
</pre>
geändert. Dafür wird ein [[cmdalias]] verwendet:

<pre>
defmod message2queryEditInline cmdalias set .+ message (.|\n)+ AS {\
my ($NAME, $cmd, $message) = split(/[\s]+/, $EVENT, 3);;\
my $TYPE = InternalVal($NAME, "TYPE", "");;\
(my $recipient, $message) = ($message =~ m/(@\S+)? (.+)/s);;\
\
if($TYPE eq "TelegramBot" && $recipient){\
my ($contact) = devspec2array("TYPE=(ROOMMATE|GUEST):FILTER=msgContactPush=.*$recipient.*");;\
my $sentMsgId = ReadingsVal($NAME, "$contact\_sentMsgId", "");;\
\
if($sentMsgId ne ""){\
fhem("set $NAME queryEditInline $sentMsgId $recipient $message");;\
}\
else{\
fhem("set $NAME queryInline $recipient $message");;\
}\
}\
else{\
fhem("set $EVENT");;\
}\
}
attr message2queryEditInline room msg
</pre>

Um wieder zurück zum normalen Keyboard zu gelangen genügt es, das notify und den cmdAlias zu deaktivieren.
Das kann komfortabel über ein notify und einen dummy erledigt werden:
<pre>
defmod inline_normal.NOT notify inline_normal.DUM:.* {\
if ("$EVENT" =~ "on") {\
fhem "set sentMsgIdByPeerId active;; attr message2queryEditInline disable 0";;\
} \
elsif ("$EVENT" =~ "off") {\
fhem "set sentMsgIdByPeerId inactive;; attr message2queryEditInline disable 1";;\
}\
}
</pre>

Weitere Infos zum Thema Inline Keyboard sind in der Antwort #10 im Forum zu finden (siehe Link unten).

== JABBER ==
Hier wird die Verwendung mit Jabber beschrieben...

== WhatsApp ==
Hier wird die Verwendung mit yowsup/WhatsApp beschrieben...

== Links ==
* Thread über das Modul im {{Link2Forum|Topic=77297|LinkText=FHEM Forum}}

[[Kategorie:Hilfsmodul]]

TelegramBot

2018-11-04T07:27:14Z

OdfFhem: botfather-Links aktualisiert

{{Infobox Modul
|ModPurpose=Senden und Empfangen von Nachrichten (Text und Fotos) mit dem freien Messagingdienst Telegram
|ModType=d
|ModForumArea=Unterstützende Dienste
|ModFTopic=38328
|ModTechName=[https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm 50_TelegramBot.pm]
|ModOwner=[[Benutzer:Viegener|Viegener]] ({{Link2FU|12772|Forum}} / [[Benutzer Diskussion:Viegener|Wiki]])}}

Das [[TelegramBot]]-Modul ermöglicht das Senden und Empfangen von Nachrichten über den Telegram-instant messaging Dienst (https://telegram.org/).
Es entsteht eine Möglichkeit Benachrichtungen aus FHEM zu versenden, zum Beispiel Alarmmeldungen.
Ausserdem können auch Kommandos über Telegram an FHEM gesendet werden um Steuerungsbefehle in FHEM auszulösen.

Das TelegramBot-Modul benötigt keine Zusatzsoftware auf dem FHEM-Server (anders als die Variante [[Telegram]]), sondern verwendet das [https://core.telegram.org/bots/api TelegramBot-API] über https-Aufrufe. Es muss jedoch das [http://www.fhemwiki.de/wiki/Raspberry_Pi#N.C3.BCtzliche_Zusatzpakete perl JSON modul] installiert sein.

== Über Telegram Instant Messaging ==
Telegram-IDs und Versand/Empfang von Nachrichten sind kostenfrei.
Clients sind für gängige Smartphonesysteme erhältlich (iOS iPhone und Tablet, Android, Windows Phone) und
können auch aus dem WebBrowser verwendet werden.
Es gibt auch einen Kommandozeilen-Client für Linux, der die Grundlage dieses Moduls darstellt.
Mehrfachanmeldungen, auch parallel mit verschiedenen Geräten (z.B. Tablet und Smartphone), sind möglich.
Gruppenchats und Chats mit End-2-End-Verschlüsselung werden ebenfalls unterstützt.

Für die Unterstützung von ''WhatsApp'' siehe Modul [[yowsup]].

== Features ==
Unterstützt werden:

* Versand von Textnachrichten
* Versand und Empfang von Bildern/Audio/etc
* Empfang von Textnachrichten von beliebigen Kontakten
* Kommandos in FHEM über Telegram-Nachrichten von aussen auslösen
* Ergebnisse der Kommandos zusenden lassen

Eine detaillierte Beschreibung des Moduls ist im FHEM Forum und in der (englischen) Dokumentation zum Modul in der {{Link2CmdRef|Anker=TelegramBot}} und in diesem {{Link2Forum|Topic=38328|LinkText=Diskussionsthread}} zu finden. Seit Oktober 2015 wird das Modul offiziell über FHEM-Update verteilt.

Die jeweils aktuellste Entwicklungs-Version des Moduls ist in Github [https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm 50_TelegramBot.pm] verfügbar.

== Hinweise zum Betrieb mit FHEM ==
{{Randnotiz|RNTyp=Info|RNText=Achtung: Dieses Authtoken ist die einzige Authentifizierung für den Bot und sollte deshalb nicht aus der Hand gegeben werden. Die verwendeten Urls sind deshalb auch in den Log-Files nicht enthalten, da diese das Authtoken in Klartext enthalten. Auch im Forum sollte dieses Token nicht aufgenommen werden.
}}

Für die Anlage eines TelegramBot Devices in FHEM ist ein Authtoken erforderlich. Dieses Token wird über Anlegen eines neuen Bots im [https://core.telegram.org/bots#6-botfather BotFather] erzeugt. Dafür muss der BotFather mit einem Telegram-Client kontaktiert werden. Dort mit dem Telegram-Befehl <code>/newbot</code> einen neuen Bot anlegen und mit einem Namen versehen. Hinweis: Die Namen für Bots müssen auf "Bot" enden.<br>

Das Anlegen eines TelegramBot devices erfolgt durch die Angabe dieses Tokens:

<code>define <name> TelegramBot <token> </code>

Beispiel: <code>define teleBot TelegramBot 110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw</code>

'''Das Empfangen von Nachrichten (polling) erfordert die Einstellung des Attributes'''
<code>pollingTimeout</code> '''auf einen Wert der grösser als Null ist. Beim Wert 0 oder ohne Setzen des Attributes findet kein Polling und damit auch kein Empfang statt.'''

Beispiel: <code>attr teleBot pollingTimeout 120</code>

'''Der TelegramBot kann erst dann Nachrichten an einen telegram user schicken, wenn dieser zuerst an den telegram bot eine Nachricht gesendet hat.'''
Dafür muss man in seinem Telegram-Client den Kontakt @botName suchen und dann eine Nachricht darn versenden.

{{Randnotiz|RNTyp=Info|RNText=TelegramBot setzt eine aktuelle Version von FHEM voraus, insbesondere Versionen weit vor der Umstellung auf 5.7 (also vor Herbst 2015) können mit einem TelegramBot-Modul nicht funktionieren, da insbesondere das HTTPSRV-Modul dann veraltet ist. Am besten auch den TelegramBot über den offiziellen Update mit dem Rest von FHEM installieren/aktualisieren.
}}

== Registrierung eines neuen Bot ==
Zur Registrierung wird ein funktionierender Telegram-Client (egal ob Web, App oder Programm)benötigt. Hier wird ein Chat zum BotFather gestartet und der Befehl /newbot gesendet. Nun fragt der BotFather die benötigten Angaben ab und liefert am Ende des Dialogs die Informationen für den neuen Bot.
Hier ein Beispiel, wie so ein Chat aussehen könnte:
<pre>Client:
/newbot
----------------
BotFather:
Alright, a new bot. How are we going to call it? Please choose a name for your bot.
----------------
Client:
Mein Name
----------------
BotFather:
Good. Now let's choose a username for your bot. It must end in `bot`. Like this, for example: TetrisBot or tetris_bot.
----------------
Client:
fhem_bot
----------------
BotFather:
Sorry, this username is already taken. Think of something different.
----------------
Client:
fhem1234_bot
----------------
BotFather:
Done! Congratulations on your new bot.
You will find it at telegram.me/fhem1234_bot.
You can now add a description, about section and profile picture for your bot, see /help for a list of commands.
----------------
Use this token to access the HTTP API:
1234567890:AbCdefgHIJklmnOPQRst-uvwxyz

For a description of the Bot API, see this page: https://core.telegram.org/bots/api
</pre>
Um einen Chat an einen "Contact" versenden zu können, muss zuerst in Contacts (bei Readings) ein Kontakt auftauchen. Wenn man sich zum allerersten Mal bei Telegram angemeldet hat, gibt es noch keinen Chat mit irgendjemanden. Man muss sich zuerstmal selbst eine Nachricht im Smartphone zusenden, dann taucht unter Readings der Eintrag Contacts auf. Erst dann kann man eine Nachricht mit @msgPeerId (das ist Ziffernfolge des Contacts ) oder mit @msgPeer (das ist der Name nach dem Doppelpunkt) vom TelegramBot auf sein Smartphone senden.

== Tipps ==

=== Privacyeinstellungen ===

Damit der TelegramBot auch Meldungen in Gruppen sieht, müssen über den BotFather die Privacy-Einstellungen geändert werden.<br>Beispielchat:<pre>Client:
/setprivacy
----------------
BotFather:
Choose a bot to change group messages settings.
----------------
Client:
@fhem1234_bot
----------------
BotFather:
'Enable' - your bot will only receive messages that either start with the '/' symbol or mention the bot by username.
'Disable' - your bot will receive all messages that people send to groups.
Current status is: ENABLED
----------------
Client:
Disable
----------------
BotFather:
Success! The new status is: DISABLED. /help</pre>

=== Kontakte ===

Der Bot merkt sich die bereits bekannten Kontakte im Reading <code>Contacts</code>. Dabei werden die einzelnen Kontakte jeweils als 3-teilige Einträge bestehend aus UserID, Vor- und Nachname des Benutzers (mit _ verbunden) und dem Username (mit vorangestelltem @).

Beispiel: <code>123456:Ralf_Mustermann:@ralf</code>

Verschiedene Einträge werden durch Leerzeichen getrennt.

Man kann die Kontakte auch manuell überschreiben (z.B. wenn das Reading fehlerhaft oder verloren sein sollte). Dazu gibt es den Set-Befehl <code>replaceContacts</code>. Dieser nimmt die Kontakte ebenfalls in der gleichen Form wie oben beschrieben entgegen.

Die Kontaktliste wird ansonsten nur durch den Empfang von Nachrichten erweitert, da es im TelegramBot-API keine Möglichkeit gibt Kontaktdaten von Telegram abzufragen (siehe auch pollingTimeout)

=== Reset ===

Es ist möglich den Bot im laufenden Betrieb zurückzusetzen (Set-Befehl <code>reset</code>). Dabei werden noch nicht abgeschlossene Übetragungen entfernt und die internen Zustände des Devices zurückgesetzt.

=== Gruppen ===

Um eine Nachricht von FHEM an eine Gruppe zu senden, muss der BOT in die Gruppe aufgenommen werden. Nach dem Senden einer Nachricht an die Gruppe kann im Modul die Gruppen-ID ermittelt werden und zum Senden von Nachrichten verwendet werden. Die Gruppen-ID ist eine negative Zahl. Wenn die Privacy-Einstellungen nicht auf 'Disabled' gesetzt wurden, muss die Nachricht mit einem Slash (/) beginnen.

==== Supergroups / Supergruppen ====

Auch die neuen Supergruppen werden mit dem Bot unterstützt, es ist allerdings zu beachten, dass bei der Umwandlung einer Gruppe in eine Supergruppe eine neue ID in den Kontakten von Telegram vergeben wird. Wenn man also wie empfohlen IDs zur Identifikation von Benutzern einsetzt, muss entsprechend angepasst werden.

== Beispielszenarien ==

=== Benachrichtigungen über Ereignisse ===

Das einfachste Szenario für die Integration von Messaging-Diensten mit FHEM ist zur Benachrichtigung über Ereignisse. Diese Funktion kann zum Beispiel verwendet werden, um über einen erfolgten Neustart von FHEM zu informieren:

<code>define notify_fhem_reload notify global:INITIALIZED set telebotdevice message fhem newly started - just now !</code>

In diesem Beispiel wird der Nachrichtentext "fhem newly started - just now !" an den als default eingestellten Kontakt (Attribut: defaultPeer) gesendet, sobald FHEM neu gestartet wurde. Natürlich kann man auch beliebige andere Benachrichtigungen einführen.

=== Versand von Bildern ===

Es ist auch möglich Bilder auf dem FHEM-Server, die zum Beispiel von einer Kamera oder einem Wettermodul stammen über Telegram zu versenden. So wäre es z.B. möglich jeweils morgens die aktuelle Wetterkarte zu erhalten.

ACHTUNG: TelegramBot verwendet das HTTPUtils-Modul zur Kommunikation mit dem TelegramBot-API. Erst mit der Version, die seit 22.10.2015
([r9576] HttpUtils.pm: Async write for POST Requests {{Link2Forum|Topic=41583|LinkText=FHEM-Forum}}) verteilt wird, erlaubt auch den Transfer grösserer Bilder. Die Grenze liegt ansonsten bei ca. 14kb auf Raspberries (Plattformspezifische Grenze).

<code>define notify_fhem_reload notify wetter:report set telebotdevice sendImage /opt/fhem/wetter.jpg</code>

Bei Erreichen des entsprechenden Status am Wetter-Modul wird ein Image über Telegram versendet. Hier sind lokale Pfade (relativ zu fhem) oder absolute Pfade wie oben möglich.

=== Versand von SVG-Plots ===

SVG-Plots können mit dem Befehl
<code>cmdSend [ @<peer1> ... @<peerN> ] <fhem command></code>
verschickt werden.

Das angegebene FHEM-Kommando wird ausgeführt und das Ergebnis an die angegebenen Peers bzw. den Standard-Peer verschickt.

Mit dem folgenden Befehl wird der SVG-Plot SVG_FileLog_Aussen an den Standard-Peer geschickt:
<code>set mein_telegramBot cmdSend { plotAsPng('SVG_FileLog_Aussen') }</code>

Nach <code>define cmd_sendTelegramSVG cmdalias TGSVG .* AS set mein_telegramBot cmdSend { plotAsPng("$EVENT") }</code>
kann man mit einem kurzen
<code>TGSVG SVG_Garten</code>
ein beliebiges SVG über die Kommandozeile per Telegram versenden.

Um das SVG nun noch mit einem Text zu versehen, muss eine Textnachricht dazu gesendet werden, was sich am einfachsten durch das Ausführen eines FHEM-Befehls auf Perl-Ebene realisieren lässt:

<code>{fhem "set mein_telegramBot message Bildbeschreibung;; set mein_telegramBot cmdSend { plotAsPng('mein_SVG') }" }</code>

'''Hinweis:''' früher wurde zum Verschicken von Plots auch die interne Funktion TelegramBot_ExecuteCommand verwendet; mit dem Update Ende Februar 2017 hat diese Funktion einen zusätzlichen Parameter erhalten und lautet nun
<code>TelegramBot_ExecuteCommand($defs{"mein_telegramBot"}, meine_ZielID, undef, '{plotAsPng("mein_SVG")}');</code>

==== Voraussetzungen für den Versand von SVG-Plots ====
Es muss das Modul libimage-librsvg-perl installiert sein:

<code>sudo apt-get install libimage-librsvg-perl</code>

Evtl. sind weitere Module erforderlich:

<code>sudo apt-get install libgd-graph-perl

sudo apt-get install libgd-text-perl</code>

=== Empfang von Bildern oder ähnlichem ===

Beim Empfang von Bildern wird zuerst nur eine ID vom Telegram-Server empfangen, diese befindet sich im Reading <code>msgFileId</code> angelegt (<code>123456:xxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxx</code>) und im Reading <code>msgText</code> steht dann so etwas wie
<code>received photo # Size: 107701</code>

Über das Get-Kommando <code>urlForFile</code> mit der ID aus dem msgFileId Reading lässt sich dann daraus ein URL ableiten, der dann zur eigentlichen Datei führt:

<code>https://api.telegram.org/file/bot123456:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/photo/file_25.jpg</code>

=== Versand von Emojis (Smileys) ===

Es ist auch möglich Emojis mit den (Text-)Nachrichten zu versenden. Die entsprechenden (Unicode-)Zeichen werden einfach direkt mit in den Text der Nachricht aufgenommen. Um das zu vereinfachen kann man das einfach per Copy und Paste von dieser Seite

http://apps.timwhitlock.info/emoji/tables/unicode (Spalte "Native")

übernehmen und mit der Nachricht verschicken.

Die Emojis können auch empfangen werden und werden so auch in FHEM / FHEMWeb angezeigt. Plattformspezifische (z.B. von iOS oder Android) Emojis werden dabei nicht unterstützt (gerade mit iOS sind viele neue farbige Emojis hinzugekommen, die wohl leider nur auf Apple-devices funktionieren).

=== Kommandos auslösen ===

Ein wichtiges Szenario ist die Möglichkeit Kommandos in FHEM ausführen zu können, ohne einen Zugang durch die Firewall einrichten zu müssen. Dazu ist die Definition eines Schlüsselwortes (Attribut: "cmdKeyword")erforderlich, mit dem man die Nachrichten beginnen muss, damit der TelegramBot die Kommandos erkennt.

<code>attr telebotdevice cmdKeyword doit</code>

Somit kann man dann durch Nachrichten die mit "doit" beginnen Kommandos an FHEM senden, die ähnlich wie im Kommandoeingabefeld von FHEMweb dann von FHEM ausgeführt werden. Das Ergebnis der Ausführung wird zurück an den Sender (und an den definierten defaultPeer) geschickt.

Somit können nicht nur Aktionen angestossen werden, sondern auch Infos abgefragt werden.

Beispiele

<code>doit set schalter on</code>

<code>doit list telegrambot</code>

{{Randnotiz|RNTyp=Warn|RNText=Achtung: Bei den Kommandos sollten man unbedingt das Attribut "cmdRestrictedPeer" setzen, damit nicht jeder Kommandos auf dem FHEM-Server ausführen kann. Dazu sollten die BenutzerIDs der erlaubten Benutzer (durch Leerzeichen getrennt angeben). Da Benutzernamen selber vergeben werden und nicht unbedingt eindeutig sind, sollten hier auch NUR BenutzerIDs verwendet werden.
}}

==== Favoriten für Kommandos anlegen ====

Grundidee bei den Favoriten ist, dass man lange Befehle, die man häufig braucht auf "Kurzwahl" legt.

Beispiel-Kommandos wie z.B. <code>set TYPE=ROLLADEN pos 100</code> und <code>set TYPE=ROLLADEN pos 0</code>, die man immer wieder braucht. Um nicht jedes mal dieses Kommando eintippen zu müssen auf dem Smartphone, kann man auch dafür Favoriten anlegen.

Dazu gibt man erst mal die beiden Kommandos getrennt durch Semikolon im Attribut favorites an:

<code>attr telegrambotdevice favorites set TYPE=ROLLADEN pos 100;set TYPE=ROLLADEN pos 0</code>

Um die Favorites jetzt ausführen zu können braucht man noch ein Schlüsselwort dafür.
Nehmen wir mal an man möchte die Favoriten mit <code>/short</code> ausführen können. Dazu muss dann das Attribut "cmdFavorites" setzen

<code>attr telegrambotdevice cmdFavorites /short</code>

Wenn man nun im Telegram Client
<code>/short 1</code> an den Bot schickt führt der Bot den ersten Favoriten aus und das Ergebnis der Ausführung wird zurückgeschickt.

Ausserdem kann man im Telegram Client
<code>/short</code> an den Bot schicken, dann antwortet der Bot mit

<pre>
Favorites

/short1 = set TYPE=ROLLADEN pos 100

/short2 = set TYPE=ROLLADEN pos 0

</pre>

Die Antworten werden als Schaltflächen dargestellt (Telegram inline Keyboard) und können am Mobile-Client direkt angeklickt werden um sie auszuführen.
Um die Beschriftung der Schaltflächen zu optimieren, können die Befehle im Attribut favorites mit Beschreibungen versehen werden:

<code>/[Rollaeden zu ]=set TYPE=ROLLADEN pos 100;/[Rollaeden auf]=set TYPE=ROLLADEN pos 0</code>

Nun antwortet der Bot auf das Schlüsselwort für die Favoriten mit:

<pre>
Favorites

/short1 = Rollaeden zu

/short2 = Rollaeden auf

</pre>

== Links ==
* Github Repository für die Telegram-FHEM Entwicklung: https://github.com/viegener/Telegram-fhem
* Infos zum Telegram BotFather: https://core.telegram.org/bots#6-botfather

* Source code für das 50_TelegramBot.pm-Modul: https://github.com/viegener/Telegram-fhem/blob/master/50_TelegramBot.pm

* Forum-Thread in dem das Modul vorgestellt wurde {{Link2Forum|Topic=38328|LinkText=FHEM-Forum}}
* Telegram messaging system https://telegram.org/
* TelegramBot API https://core.telegram.org/bots/api

FTUI Widget Calview

2018-10-18T16:10:18Z

OdfFhem:

FTUI Widget Calview

2018-10-18T16:08:34Z

OdfFhem: Attribute angepasst ; Beispiel hinzugefügt

FTUI Widget Calview

2018-10-15T17:45:35Z

OdfFhem: /* Attribute */