FTUI Widget Calview: Unterschied zwischen den Versionen
(Attribute angepasst ; Beispiel hinzugefügt) |
|||
Zeile 10: | Zeile 10: | ||
|'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen|||| | |'''data-device'''||Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen|||| | ||
|- | |- | ||
|'''data-get'''||Welche Termine angezeigt werden | |'''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"''. Mögliche Werte: ''none'', ''all'', ''notoday'' und ''notomorrow''||all||data-start="notoday" | |'''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-max'''||Bestimmt, wie viele Termine angezeigt werden||10||data-max="20" | ||
Zeile 31: | Zeile 31: | ||
|- | |- | ||
|'''data-oneline'''||Zu langen Text einer Spalte abschneiden (... wird ans Ende gesetzt) statt umzubrechen||no||data-oneline="yes" | |'''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" | |||
|} | |} | ||
Zeile 104: | Zeile 106: | ||
Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST) | Anmerkung: Screenshot fehlt noch. [[Benutzer:Curt|Curt]] ([[Benutzer Diskussion:Curt|Diskussion]]) 04:11, 14. Okt. 2018 (CEST) | ||
===Beispiel zur 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]] | [[Kategorie:FHEM Tablet UI|Calview]] |
Version vom 18. Oktober 2018, 17:08 Uhr
Das Calview Widget ist ein Widget für FHEM Tablet UI, welches Einträge aus einem CALVIEW-Device anzeigen kann.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-device | Name des CALVIEW-Devices, dessen Reading dargestellt werden sollen | ||
data-get | Welche Termine sollen angezeigt werden? 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". 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-color | Textfarbe als HEX-Angabe oder Farbnamen | data-color="#ff0000" | |
data-class | Formatierung der Anzeige, es lassen sich alle im FTUI verfügbaren class-Werte einfügen. | data-class="left-align small" | |
data-detail | Array von CALVIEW-Details, die angezeigt werden sollen | ["bdate", "btime", "summary", "location", "edate", "etime", "source", "age", "description"] | |
data-detailwidth | Breite der einzelnen Spalten in % | data-detailwidth='["15","25","20","20","20"]' | |
data-dateformat | Formatierung der Datumsanzeige ohne Jahreszahl | long | data-dateformat="short" |
data-timeformat | Formatierung der Uhrzeitanzeige ohne Sekunden | long | data-timeformat="short" |
data-showempty | Zeigt einen Text an, wenn keine Termine im angegebenen Zeitraum vorhanden sind | true | data-showempty="false" |
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" |
Beispiele
Einfaches Beispiel
Folgendes Beispiel zeigt die nächsten zehn Kalender-Einträge in einer unformatierten Liste an.
<div data-type="calview"
data-device="myCalView"
data-get="all"
data-detail='["bdate","btime","summary"]'
data-detailwidth='["30","30","40"]'></div>
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:
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
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:
defmod Testkalender Calendar ical file FHEM/test.ics 86400
attr Testkalender hideOlderThan 3600s
Um den Kalender anzusehen, benötigen wir in fhem.cfg noch eine CalView-Device:
defmod TestkalenderView CALVIEW Testkalender 1
attr TestkalenderView isbirthday 1
attr TestkalenderView modes next
attr TestkalenderView yobfield _description
Abschließend muss in einer FTUI-Seite des FHEM Tablet UI eine Gridster-Kachel gefunden werden, in die das folgende gehört:
<!-- https://forum.fhem.de/index.php?topic=91903.new;topicseen#new #15 -->
<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-onelinesum="yes"
data-sourcecolor="yes"
data-dateformat="short"
data-timeformat="short"
data-dayname="yes"
data-oneline="yes"
data-class='left-align'
>
</div>
Anmerkung: Screenshot fehlt noch. Curt (Diskussion) 04:11, 14. Okt. 2018 (CEST)
Beispiel zur 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
defmod Testkalender1 Calendar ical file test1.ics 86400
attr Testkalender1 hideOlderThan 3600s
defmod Testkalender2 Calendar ical file test2.ics 86400
attr Testkalender2 hideOlderThan 3600s
defmod TestkalenderView CALVIEW Testkalender1,Testkalender2 1
attr TestkalenderView modes next
Um Kalendereinträge je nach Kalender eingefärbt darzustellen, muss das sourcecolor-Attribut beim CALVIEW-Device gesetzt werden.
attr TestkalenderView sourcecolor Testkalender1:green,Testkalender2:yellow
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.
set TestkalenderView update
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
<div data-type="calview" data-device="TestkalenderView"
data-get="all"
data-detail='["bdate","summary","sourcecolor"]'
data-detailwidth='["20","80","00"]'
data-sourcecolor="yes"/>
Anzumerken bleibt noch, dass das Widget-Attribut data-color bei Verwendung von sourcecolor ignoriert wird.