FTUI Widget Calview: Unterschied zwischen den Versionen

Aus FHEMWiki
(Attribute angepasst ; Beispiel hinzugefügt)
KKeine Bearbeitungszusammenfassung
Zeile 107: Zeile 107:
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)===
===Einfärbung von Kalendereinträgen (sourcecolor)===
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.
Folgendes Beispiel soll die unterschiedliche Einfärbung von Kalendereinträgen bei Verwendung mehrerer Kalender zeigen.



Version vom 18. Oktober 2018, 18:10 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)

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.