FTUI Widget Calview

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-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		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 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.

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.

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.

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.

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 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.

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; <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; <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.

<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-dateformat="short"
     data-timeformat="short"
     data-oneline="yes"
     data-class='left-align'
     >
</div>

Anmerkung: Screenshot fehlt noch. 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

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

1. das Widget-Attribut data-detail muss die (nicht darstellbare) Spalte sourcecolor enthalten
2. 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.