Listen-(Agenda)-Widget aus CALView

[onkeldittmeyer]

Tag auch,

ich bin gerade dabei, mir ein Kalenderlistenwidget zusammenzubasteln. Mit der Wiki, dem Forum und viel Trial-and-Error bin ich auch fast am Ziel.

In groben Zügen steht das Ding:

Code Auswählen Erweitern

          <li data-row="2" data-col="3" data-sizey="4" data-sizex="3" class="big">
                <div class="sheet">
                    <div class="row">
                       <div class="cell">Heute
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="today"
                        data-detail='["btime","summary"]'
                        data-detailwidth='["30","40"]'></div>
                       <div class="cell">Morgen
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="tomorrow"
                        data-detail='["btime","summary"]'
                        data-detailwidth='["30","40"]'></div>
                       <div class="cell">Ab Übermorgen
                        <div data-type="calview"
                        data-device="Kalender"
                        data-get="all"
                        data-start="notomorrow"
                        data-detail='["weekdayname","btime","summary"]'
                        data-detailwidth='["30","30","40"]'></div>
                    </div>
                </div>

            </li>


Ziel ist es, ein Widget zu haben, in dem drei Abschnitte dargestellt werden, nämlich "Heute", "Morgen" und "Ab Übermorgen".
Ursprünglich hatte ich die Idee, die nächsten sieben Tage, tageweise darzustellen, dazu habe ich aber keine Lösung gefunden und das deshalb verworfen.

Vielleicht kann mir jemand bei folgenden, vermutlich banalen, Problemen helfen:

1. Wie bewege ich html dazu, den ganzen Kram linksbündig auszuwerfen? Mit text-allign habe ich erfolglos herumexperimentiert (vermutlich der falsche Befehl?).
2. Gibt es irgendeine Möglichkeit, meine Überschriften (ich habe einfach den Text ("Heute" usw) an passender Stelle eingefügt) zu formatieren? Also mit Balken hinterlegen, Schriftgröße usw..?
3. Kann man Ganztagestermine auch ohne Zeit darstellen?

Vielen Dank!

[OdfFhem]

@onkeldittmeyer

Hallo,

ich habe Deinen Entwurf mal ein wenig überarbeitet (es fehlten doch einige schließende div-Tags) und erweitert (Farbe, Text-Ausrichtung, Text-Größe). Soll nur einige Möglichkeiten verdeutlichen, soll nicht so in die Produktion übernommen werden - schau's Dir einfach mal an ...

Code Auswählen Erweitern


      <div class="sheet">
        <div class="row">
          <div class="cell bg-lightgray">
            <header class="bg-red black normal">Heute</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="today"
                 data-detail='["timeshort","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black red">
            </div>
          </div>
          <div class="cell bg-white">
            <header class="bg-yellow black large">Morgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="tomorrow"
                 data-detail='["timeshort","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="centered bg-black yellow">
            </div>
          </div>
          <div class="cell bg-lightgray">
            <header class="bg-green black big">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","bdate","timeshort","summary"]'
                 data-detailwidth='["10","20","30","40"]'
                 data-class="right-align bg-black green">
            </div>
          </div>
        </div>
      </div>


Fraglich ist, ob Du wirklich 3 Kalender darstellen möchtest oder vielleicht doch lieber einen Kalender, in dem die heutigen und morgigen Termine hervorgehoben werden können (s. daysleft-Attribute).

[onkeldittmeyer]

Hallo oldfhem!

Danke erstmal für Deine Variante. 

Führt mich alles mehr in Richtung des Verstehens des Codes. Davon bin ich nämlich noch ganz schön weit entfernt. Ich habe verstanden, dass jedes <div> irgendwann ein </div> bekommen muss. Warum das so ist, verstehe ich allerdings nicht.

Wieso sind die Kalender bei Dir nebeneinander (was im Code löst das aus)? Ich hatte sie ja untereinander (so will ich es auch haben), weiß aber natürlich auch nicht warum.

Deine Frage bezüglich der drei Kalender verstehe ich nicht so ganz. Letztlich will ich eine Liste mit drei "Zwischenüberschriften". Nämlich "Heute", "Morgen" und "Ab übermorgen". Ich habe auch überlegt nur "übermorgen" zu nehmen und data-get für übermorgen eben auf die Termine von übermorgen zu begrenzen, ich muß aber noch rumdoktorn, ob das so überhaupt geht.

Die ursprüngliche Überlegung war ja:

Heute
Uhrzeit Termin
Morgen
Uhrzeit Termin
Freitag
Uhrzeit Termin
Samstag
Uhrzeit Termin

(usw., für eine Woche).

[onkeldittmeyer]

OK, ich habe noch etwas am Code gebastelt. Dank Deiner Hilfe bin ich schon ziemlich nah an dem dran, was ich haben will:

Code Auswählen Erweitern


<li data-row="2" data-col="3" data-sizey="3" data-sizex="2">
<div class="sheet">
        <div class="row">
          <div class="cell bg-black">
            <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
          <div class="cell bg-black">
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
          <div class="cell bg-black">
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","btime","summary"]'
                 data-detailwidth='["20","30","40"]'
                 data-class="left-align bg-black white normal">
            </div>
          </div>
        </div>
      </div>
</li>


Für einen Hinweis, wie ich die Dinger untereinander bekommen kann, wäre ich dankbar. Gibt es eine Möglichkeit, die Ganztagestermine ohne Uhrzeit darzustellen (und dann vielleicht sogar noch mit einem Balken als Hintergrund zu hinterlegen)?

[OdfFhem]

@onkeldittmeyer

Eine Variante wäre die sheet-, row- und col-div-Tags zu entfernen ... bereinigter Code sähe dann so aus:

Code Auswählen Erweitern


            <header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["30","70"]'
                 data-class="left-align bg-black white normal">
            </div>
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="EinmalkalenderView"
                 data-get="all"
                 data-start="notomorrow"
                 data-detail='["weekdayname","btime","summary"]'
                 data-detailwidth='["20","30","40"]'
                 data-class="left-align bg-black white normal">
            </div>


Eine andere Möglichkeit wäre, dass Du mehr row-div-Tags benutzt ... jede row eine neue sheet-Zeile.

Hilfreich könnte ein Blick auf https://wiki.fhem.de/wiki/FTUI_Layout_Sheet sein; dort gibt es auch ein paar Beispiele.


Hinweis: Darauf achten, dass die Addition der Werte aus data-detailwidth 100 ergibt ("20","30","40" fällt da schon mal durch).


Bzgl. der Ganztagestermine kann man zunächst mal nicht viel machen, da die darzustellenden Werte 1:1 aus dem CALVIEW-FHEM-Device übernommen werden.

[onkeldittmeyer]

Top, Danke, so geht's.

Ich sag' ja, den HTML-code habe ich bei weitem nicht verstanden. Was genau li, col, sheet bewirken ist mir nicht klar. Aber ich habe ja auch erst vor drei Tagen damit angefangen.

Btw: Ich bekomme immer nur 10 Termine angezeigt, obwohl ich in CALView maxreadings auf 30 gesetzt habe. Hast Du eine Idee?

[OdfFhem]

@onkeldittmeyer

Vorausgesetzt, Dein CALVIEW-FHEM-Device hat im Reading c-term einen größeren Wert als 10, dann liegt es höchstwahrscheinlich daran, dass Du data-max im CALVIEW-Widget nicht gesetzt hast; der Standardwert ist nämlich 10.

Du solltest in diesem Fall ein Attribut der folgenden Form ergänzen:

Code Auswählen Erweitern


data-max="20"


[onkeldittmeyer]

Auch das stimmt. Vielen Dank! Wer hat mein Widget jetzt eigentlich gebaut? Du oder ich?

Jedenfalls bin ich mit dem Ergebnis echt zufieden. Sieht gut aus. Ich werde noch etwas mit den Größen spielen. Leider gibt es keine Möglichkeit, noch die Termine von übermorgen als Gruppe abzugreifen, sonst würde ich es vielleicht wirklich auf die drei Tage beschränken, aber gut.

So benutzte ich es zunächst mal:

Code Auswählen Erweitern


<li data-row="2" data-col="3" data-sizey="4" data-sizex="3">
<header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Ab Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["weekdayname","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white normal">
            </div>
</li>


[OdfFhem]

@onkeldittmeyer

Um Termine quasi auszublenden, die später als übermorgen sind, kannst Du ein Attribut im Calendar-Device (nicht im CALVIEW-Device) setzen.

Das Attribut hideLaterThan legt z.B. fest, dass alle Termine, die mehr als 2 Tage in der Zukunft liegen, ignoriert werden.

Code Auswählen Erweitern


attr <Calendar-Device> hideLaterThan 2d


Hast Du dieses Attribut gesetzt, muss man auch noch ein set <Calendar-Device> reload durchführen. Anschließend sollten die "weit" in der Zukunft liegenden Termine verschwunden sein ...

[onkeldittmeyer]

Hatte ich schon probiert. Allerdings habe ich das "d" hinter der zwei nicht verwendet (nimmt der dann zwei Sekunden als Wert?). Mit Deinem "d" klappt es.

Jedenfalls ist das Widget jetzt (für mich) fertig:

Code Auswählen Erweitern


<li data-row="2" data-col="3" data-sizey="4" data-sizex="3">
<header class="bg-gray white normal">Heute</header>
            <div data-type="calview"
                 data-device="Kalender
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
            <header class="bg-gray white normal">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white big">
            </div>
</li>


[OdfFhem]

@onkeldittmeyer

Zahl ohne nähere Spezifikation wird als Sekundenangabe interpretiert.
86400 oder 86400s oder 1d führen zum identen Ergebnis.

[onkeldittmeyer]

Ja, sowas habe ich mir nachher auch zusammengereimt. Demnach eine Sekunde. Ist natürlich was wenig.... 

[onkeldittmeyer]

Muß nochmal nachhören.

Mein "finaler" Code:

Code Auswählen Erweitern


<li data-row="2" data-col="3" data-sizey="3" data-sizex="3">
<header class="bg-gray white small">Heute</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="today"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
            <header class="bg-gray white small">Morgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="tomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
            <header class="bg-gray white small">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=17
                 data-start="notomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>
</li>


Jetzt funktionieren die Bereiche "heute" und "rmorgen" einwandfrei. Der Bereich Übermorgen macht allerdings Probleme. So ist da zum Beispiel ein Geburtstag aufgetaucht, der eigentlich nach "übermorgen" (also am 4. Tag) war.
Heute habe ich einen gestern in Google geänderten Termin doppelt drin. Also: Ich habe in Google aus dem Termin "Beispiel" den Termin "Beispiel neu" gemacht. In Google und allen Endgeräten ist auch nur der Termin "Beispiel neu" FTUI zeigt komischerweise beide Termine an.

Hat jemand eine Idee?

[onkeldittmeyer]

Eigentlich sollte ich den vorherigen Beitrag löschen. Es war eigene Blödheit. Komischerweise bemerke ich solche Fehler immer erst, wenn ich Euch mit meinen Fragen traktiert habe.

Falls mal jemand dasselbe Problem haben sollte: Wer Termine nach "übermorgen"nicht haben will, sollte in FHEM hidelater "2d" (und nicht wie ich Held 3d) einstellen. In diesem Sinne....

[onkeldittmeyer]

Nochmal eine Frage:

"hidelater 2d" bedeutet offenbar, dass alle Termine, die mehr als 48 Stunden in der Zukunft liegen versteckt werden. Das führt dann dazu, dass, wenn man morgens um 10.00 Uhr auf das Widget schaut, die Termine, die übermorgen nach 10.00 Uhr im Kalender stehen, nicht angezeigt werden.

Gibt es eine Möglichkeit, dem Widget beizubringen, nur die Termine zu verstecken, die nach dem zweiten Tag stattfinden?

[OdfFhem]

@onkeldittmeyer

"hidelater 2d" bedeutet offenbar, dass alle Termine, die mehr als 48 Stunden in der Zukunft liegen versteckt werden. Das führt dann dazu, dass, wenn man morgens um 10.00 Uhr auf das Widget schaut, die Termine, die übermorgen nach 10.00 Uhr im Kalender stehen, nicht angezeigt werden.

hideLaterThan basiert auf einer relativen Betrachtung. Hängt damit also unmittelbar vom Aktualisierungszeitpunkt/intervall ab; wann man auf den Kalender schaut, sollte egal sein - wann das Calendar-FHEM-Device aktualisiert wird, ist wichtig. Ich aktualisiere z.B. in der Regel einmal pro Tag via at-Kommando gegen/nach Mitternacht. Für Kalender, die viel mit kurzfristigen Terminen zu tun haben, wäre die Aktualisierungsrate zu gering. Ganztägige Termine sind aber auf diese Art wahrscheinlich auch nicht wie gewünscht abzugrenzen.

Gibt es eine Möglichkeit, dem Widget beizubringen, nur die Termine zu verstecken, die nach dem zweiten Tag stattfinden?

Das Widget hängt unmittelbar vom CALVIEW-FHEM-Device ab; dort gibt es derzeit "heute", "morgen" und "alle"; somit gibt es zunächst einmal keine offensichtliche Möglichkeit. Eine verbleibende Möglichkeit wäre beispielsweise, ein neues FTUI-Widget-Attribut einzuführen ...

[onkeldittmeyer]

@onkeldittmeyer

hideLaterThan basiert auf einer relativen Betrachtung. Hängt damit also unmittelbar vom Aktualisierungszeitpunkt/intervall ab; wann man auf den Kalender schaut, sollte egal sein - wann das Calendar-FHEM-Device aktualisiert wird, ist wichtig.
(...)

Naja, ich aktualisiere schon deutlich häufiger. Und es tritt dann eben genau der Effekt auf, dass wirklich 48 Stunden als Maßstab genommen wird. Schade eigentlich, aber vielleicht wird es ja  noch geändert.

Bis dahin werde ich entweder damit leben müssen oder eben auf "Übermorgen" verzichten. So ist es etwas irreführend.

Aber Danke für die Aufklärung. Kann man irgendwo so eine Funktion freundlich nachfragen? Vielleicht wäre es ja kein Aufwand, sowas im Rahmen eines möglichen Updates einzubauen....

[OdfFhem]

Kann man irgendwo so eine Funktion freundlich nachfragen?

Frage ist jetzt, ob es Dir ausschließlich um einen Änderungswunsch in FTUI geht?

Beim widget_calview.js habe ich aktuell die Modulpflege von chris1284 übernommen und könnte Dir ein neues Attribut anbieten; vielleicht ist der Wunsch sogar für weitere Anwender interessant. Aktuell denke ich z.B. an data-ignoreLaterThan, sollte aber irgendjemand einen besseren Namen haben ...

Angedachte Logik für das neue Attribut:

• nur positive Werte werden als Referenzwert übernommen
• Referenzwert wird nur im Modus all ausgewertet
• ein Referenzwert bezieht sich immer auf das aktuelle Datum - unabhängig von der Uhrzeit
• Differenz in Tagen zwischen Termindatum und aktuellem Datum wird gebildet; ist der Differenzwert > Referenzwert, dann wird der Termin ignoriert

Beispiel für das aktuelle Datum 26.11.2019:

Code Auswählen Erweitern


26.11.2019 minus 26.11.2019 ergibt 0 Tage; kann also sinnvollerweise niemals ignoriert werden
27.11.2019 minus 26.11.2019 ergibt 1 Tag; wird für Referenzwert 0 ignoriert
28.11.2019 minus 26.11.2019 ergibt 2 Tage; wird für Referenzwerte 0,1 ignoriert
29.11.2019 minus 26.11.2019 ergibt 3 Tage; wird für Referenzwerte 0,1,2 ignoriert
.
.
.




Sollte man eine solche Funktionalität auch direkt in FHEM benötigen, dann kommt der Ansprechpartner auf die konkrete Frage an:

Für FHEM-Devices vom Typ "Calendar" gilt:
Modulverantwortlicher: neubert
Anfragen im Forum: Unterstützende Dienste/Kalendermodule

Für FHEM-Devices vom Typ "CALVIEW" gilt:
Modulverantwortlicher: chris1284
Anfragen im Forum: Unterstützende Dienste/Kalendermodule



P.S.: Es gibt wohl kein englisches Wort für übermorgen - Betonung auf ein Wort. Unter Umständen schon die erste Hürde ...

[onkeldittmeyer]

Also ich fände die Idee super. Die Variante halte ich sogar für besser als eine direkte Implementierung in FHEM, weil man im HTML-Code direkt für alle Kalender ein entsprechendes Attribut setzen kann.

Wir können ja ein Wort erfinden: "overtommorow"?

Naja, Deutsch ist schon präziser. Aber ich will es als Nicht-Mutterprachler nicht lernen müssen. Außerdem nützt uns das ja für das Problem hier nichts.

[OdfFhem]

@onkeldittmeyer

Ich habe widget_calview.js um das Attribut data-ignorelaterthan erweitert.

Folgende Abweichungen zum "Plan" gelten:

• Auch negative Werte werden als Referenzwert übernommen; für mehrtägige Termine nutzbar
• Referenzwert wird in allen Modi ausgewertet

Folgende Einstellung sollte alle Termine nach übermorgen ignorieren:

Code Auswählen Erweitern


data-ignorelaterthan="2"


Bitte die angehängte Datei aktivieren und testen ...
Neue Datei weiter unten ...

[onkeldittmeyer]

Hallo,

bin etwas spät dran. Danke für Deine Arbeit. Ich nehme an, ich überschreibe die im Verzeichnis "js" enthalte Datei einfach mit Deiner?

[OdfFhem]

@onkeldittmeyer

Genau; für den Test reicht das vollkommen.

[onkeldittmeyer]

Hhm,

mit

Code Auswählen Erweitern


<div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-max=11
                 data-ignorelaterthan="2"
                 data-start="notomorrow"
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white normal">
            </div>


bekomme ich folgende Fehlermeldung:

"Error widget_calview.js:204 TypeError: elem.getReading(...)val is undefined"

Wenn ich die Zeile entferne, geht es wieder.

[OdfFhem]

@onkeldittmeyer

Erscheint mir nachvollziehbar, da bei Dir kein bdate in data-detail enthalten ist. Wenn man nur einen Tag darstellt, durchaus plausibel.

Da muss ich wohl noch mal nachbessern ...

[onkeldittmeyer]

Ich verstehe zwar das Problem nicht, habe aber verstanden, dass ich nix verkehrt gemacht habe.

[OdfFhem]

@onkeldittmeyer

Du hast tatsächlich nix verkehrt gemacht, sondern ich habe (mindestens) einen Fall nicht berücksichtigt. Das Problem in diesem Fall ist eigentlich ganz einfach: Du hast das Feld bdate nicht in Dein data-detail integriert, so dass das Feld zunächst einmal nicht im FTUI zur Verfügung steht. Das Feld bdate wird aber zwingend benötigt, da an diesem Feld festgemacht wird, ob der Termin ignorert werden soll oder nicht. Jetzt sorgt das Modul in einem solchen Fall dafür, dass das Feld bdate trotzdem zur Verfügung gestellt wird.

Ich habe das Modul noch einmal für diesen "Spezialfall" überarbeitet.

Bitte die angehängte Datei aktivieren und testen ...
Neue Datei weiter unten ...

[onkeldittmeyer]

Der Fehler wird nicht mehr angezeigt. Allerdings sehe ich jetzt unter "übermorgen" alle Termine bis zu datamax, also sogar die von gestern.

[OdfFhem]

@onkeldittmeyer

Seltsam, kann ich nicht nachvollziehen. Ich habe einmal ein Beispiel mit 6 verschiedenen Ansichten eines CALVIEW-Devices gemacht und dies liefert bei mir das gewünschte Ergebnis (s. angehängten Screenshot).

Kannst Du mal folgendes Kommando (<Name vom CALVIEW-Device> ersetzen) in die FHEM-Kommandozeile eingeben und das Ergebnis hier einstellen?

Code Auswählen Erweitern


list NAME=<Name vom CALVIEW-Device> c-term c-today c-tomorrow t_001_bdate t_002_bdate t_003_bdate t_004_bdate t_005_bdate t_006_bdate t_007_bdate t_008_bdate t_009_bdate t_010_bdate t_011_bdate t_012_bdate t_013_bdate t_014_bdate t_015_bdate


Weiterhin wären Deine verwendeten calview-Widget-Definitionen aus der HTML-Datei interessant.

[onkeldittmeyer]

Hallo. Dein Befehl führt zu folgender Ausgabe:

Kalender             2019-12-10 16:10:00   c-term          20
                     2019-12-10 16:10:00   c-today         2
                     2019-12-10 16:10:00   c-tomorrow      3
                     2019-12-10 16:10:00   t_001_bdate     25.11.2019
                     2019-12-10 16:10:00   t_002_bdate     25.11.2019
                     2019-12-10 16:10:00   t_003_bdate     29.11.2019
                     2019-12-10 16:10:00   t_004_bdate     09.12.2019
                     2019-12-10 16:10:00   t_005_bdate     09.12.2019
                     2019-12-10 16:10:00   t_006_bdate     10.12.2019
                     2019-12-10 16:10:00   t_007_bdate     10.12.2019
                     2019-12-10 16:10:00   t_008_bdate     11.12.2019
                     2019-12-10 16:10:00   t_009_bdate     11.12.2019
                     2019-12-10 16:10:00   t_010_bdate     11.12.2019
                     2019-12-10 16:10:00   t_011_bdate     12.12.2019
                     2019-12-10 16:10:00   t_012_bdate     12.12.2019
                     2019-12-10 16:10:00   t_013_bdate     12.12.2019
                     2019-12-10 16:10:00   t_014_bdate     12.12.2019
                     2019-12-10 16:10:00   t_015_bdate     13.12.2019

[OdfFhem]

 c-today mit 2 Einträgen sieht gut aus.
c-tomorrow mit 3 Einträgen sieht auch gut aus.

Auffällig sind die Termine #1 - #5; sind das mehrtägige Termine oder dürften die eigentlich gar nicht mehr vorhanden sein?

[OdfFhem]

Ich bin mir ziemlich sicher, dass die fehlerhafte Darstellung an den (vermutlich) mehrtägigen Terminen liegt.

Aus diesem Grund habe ich die bisherige Verarbeitungstheorie für notoday und notomorrow im Modul abgeändert. In Anlehnung zu ignorelaterthan gibt es jetzt auch ein Attribut ignoreolderthan - Namen inspiriert durch den FHEM-Typ Calendar. Grundsätzlich bleibt aber die Frage offen, wie man denn bei einer solch selektiven Kalenderdarstellung überhaupt mit mehrtägigen Terminen umgeht. Momentan interessiert ja nur der Beginn eines Termines; das Ende eines Termines spielt keine Rolle.

Das Ergebnis zu einem erweiterten Test (jeder Termin dauert 4 Tage) ist im Anhang zu finden:

• weißer Hintergrund --- Termine, die vor heute begonnen haben und noch andauern
• roter Hintergrund --- Termine, die heute beginnen
• gelber Hintergrund --- Termine, die morgen beginnen
• grüner Hintergrund --- Termine, die übermorgen beginnen
• grauer Hintergrund --- Termine, die nach übermorgen beginnen, aber nicht in mehr als sieben Tagen
• schwarzer Hintergrund --- Termine, die erst in mehr als sieben Tagen beginnen

Demnach sollte mit der neuen Widget-Datei auch bei Dir die Anzeige funktionieren.


Bitte die angehängte Widget-Datei aktivieren und testen ...

[onkeldittmeyer]

Moin,

ich war die letzten Tage ziemlich eingebunden, tut mir Leid für die späte Antwort.

Erstmal Danke für Deine Analyse.  So ganz klar ist mir der Grund, aus dem es nicht funktioniert, tatsächlich nicht.

Die von Dir angesprochenen Termine 1-5 sind offenkkundig alte Termine, was aber insofern nicht schlimm sein dürfte, als das die ja gar nicht angezeigt werden.

Im Augenblick habe ich aber offenbar ein generelles Problem mit dem Kalender-Device. Es werden keine neuen Termine mehr geladen, in FHEM sind nur noch alte Termine. Ich werde noch wahnsinnig.

[onkeldittmeyer]

So, ich wieder. Habe heute Abend die Zeit gefunden, an FHEM herumzufummeln. Irgendwo in einem Kalender hatte ich "cutoffolderthan" mit 0d angegeben. Jetzt habe ich es auf 0 geändert und offenbar sind die alten Termine jetzt verschwunden.
Ich glaube, der Kalender war zu voll mit alten Terminen, so dass keine neuen mehr geladen werden konnten.

Jetzt habe ich jedenfalls "übermorgen" wieder eingebaut. Es scheint zu funktionieren:

Code Auswählen Erweitern


  <header class="bg-gray white small">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-ignorelaterthan="2"
                 data-start="notomorrow"
                 data-ignoreolderthan="0"
                 data-max=11
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>


Was ich nicht verstehe: Wofür ist data-ignorelaterhan? data-start "notomorrow" scheint zu funktionieren.

[OdfFhem]

@onkeldittmeyer

Neue Attribute:

• data-ignoreolderthan legt fest, ab wann Termine dargestellt werden
• data-ignorelaterthan legt fest, bis wann Termine dargestellt werden

Die Angaben beziehen sich jeweils auf das aktuelle Datum und werden in Tagen gemacht ...

Aus Kompatibilität werden data-get mit den Werten 'today' bzw. 'tomorrow' sowie data-start mit den Werten 'notoday' bzw. 'notomorrow' weiterhin unterstützt; ihr "Sinn" wird aber - soweit erforderlich - auf die neuen Attribute übertragen.

In Deinem Beispiel hat die Angabe von data-ignoreolderthan keine Auswirkung, da die Angabe von data-start automatisch data-ignoreolderthan festlegt.

[onkeldittmeyer]

Hi!

Kann ich so nicht bestätigen. Ohne data-start, also so:

Code Auswählen Erweitern


<header class="bg-gray white small">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-ignorelaterthan="2"
<!--             data-start="notomorrow" -->
                 data-ignoreolderthan="0"
                 data-max=11
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>


funktioniert es nicht mehr.

Mir wird dann unter "Übermorgen" in der FTUI-Seite im Widget nur Texmüll angezeigt (der u.a. auch Beschreibungen aus dem Kalender enthält). Mit data-start funktioniert es wie es soll.

[OdfFhem]

@onkeldittmeyer

Interessanter Effekt - liegt aber wohl daran, dass man innerhalb eines Tags mit dem ansonsten gebräuchlichen Auskommentieren anfängt. Dies ist in HTML nicht so vorgesehen und das Ergebnis folglich nicht wirklich vorhersehbar. Generell kann man ja nicht direkt innerhalb eines Tags ein anderes Tag starten ...

Ein Attribut (ohne Rauslöschen) unwirksam zu machen, gelingt z.B. indem man aus data-start einfach data---start o.ä. macht; damit hat es keine Bedeutung mehr.

Anmerkung zu Deinem Beispiel:
Ist data-start unwirksam, bleibt der übergebene Wert vom Attribut data-ignoreolderthan erhalten; "0" bedeutet aktuelles Datum. In Übermorgen würden dann Termine von heute - übermorgen ausgegeben. data-start="notomorrow" hingegen hätte das Attribut data-ignoreolderthan auf "2" gesetzt, so dass in Übermorgen Termine von übermorgen - übermorgen angezeigt würden.

[onkeldittmeyer]

Frohe Weihnachten!

Ah, OK. Wußte ich nicht. Ich bin mehr so der "Heimwerker" unter den Anwendern hier. Leute Fragen, die Ahnung haben (in dem Fall hier also Dich), rummurksen, wenn es schief geht, noch mal fragen.
An dieser Stelle also: Danke für Deine Geduld!

Mit

Code Auswählen Erweitern


<header class="bg-gray white small">Übermorgen</header>
            <div data-type="calview"
                 data-device="Kalender"
                 data-get="all"
                 data-ignorelaterthan="2"
                 data---start="notomorrow"
                 data-ignoreolderthan="2"
                 data-max=11
                 data-detail='["btime","summary"]'
                 data-detailwidth='["20","80"]'
                 data-class="left-align white large">
            </div>


geht es genauso wie mit dem data-start.

Überlebt die Sache auch ein FHEM-Update, oder muß ich die Widget-Datei dann nochmal auf's Pi kopieren?

[OdfFhem]

Natürlich auch von mir "Frohe Weihnachten!".



Die Überlebensfrage bzgl. FTUI-Update würde ich aktuell ganz klar mit einem NEIN beantworten, da es aus meiner Sicht keine konsequente Updatepolitik für Fremd-Widgets gibt. Man kann was vorschlagen, ob und wann es dann tatsächlich übernommen wird, keine Ahnung ...

Daher bleiben eigentlich nur alternative Taktiken, um nicht ständig nach einem Update Korrekturarbeiten vornehmen zu müssen:

• Widget-Datei via exclude_from_update-Attribut vom update ausnehmen
• Widget umbenennen (Datei alleine umbenennen reicht nicht)

Derzeit nutze ich bei mir die zweite Theorie, denn so erhält man zumindest weiterhin 1:1 den aktuellen FTUI-Stand.

[onkeldittmeyer]

Die erste Variante klingt irgendwie kompliziert, die zweite ist da vielleicht einfacher.
Benne ich dann zum Beispiel die Datei "widget_calview.js" in "widget_kalguck.js" um und mache in der index.html aus >data-type="calview"< dann >data-type="kalguck"<?

[OdfFhem]

Folgendes sollte für die erste Variante ausreichen:

Code Auswählen Erweitern


attr global exclude_from_update widget_calview.js

Immer vorausgesetzt, Du hast bisher kein exclude_from_update-Attribut in global gesetzt.


Die zweite Variante erfordert ein umbenanntes und angepasstes Widget-File; ebenso muss die Widget-Definition in der HTML-Datei angepasst werden ... also eindeutig aufwendiger als die erste Variante ... man erzeugt quasi eine Parallelwelt. Ich habe trotzdem mal eine kalguck-Variante angehangen ...

[onkeldittmeyer]

Ich habe mal die erste Variante getestet und hoffe, dass das so funktioniert. Das mit der Parallelwelt klingt etwas zu kompliziert.
Danke.

[OdfFhem]

Ob die erste Variante funktionieren würde, kannst Du mit "update check" ausprobieren: Folgendes sollte dabei angezeigt werden:

Code Auswählen Erweitern


fhemtabletui
List of new / modified files since last update:
.
UPD www/tablet/js/widget_calview.js (excluded from update)
.


[onkeldittmeyer]

Ich habe eben ein Update gemacht. Die FTUI-Seite sieht jedenfalls unverändert aus. Allerdings habe ich in den nächsten Tagen auch keine Termine.

Auf "update check" bekomme ich

"Downloading https://fhem.de/fhemupdate/controls_fhem.txt
nothing to do..."

[Init]

Hallo zusammen,

ist damit zu rechnen, dass die neuen Funktionalitäten irgendwann im normalen Update zur Verfügung stehen?

VG
Marc

[OdfFhem]

@Init

Das Projekt FTUI in der derzeitigen Form ist quasi im Endstadium und gilt folglich als "eingefroren"; derzeit ist eine komplett neue Version in der Entstehungsphase.

Sollte Interesse bestehen, kann ich das angesprochene Modul mit seinen neuen Funktionalitäten hier zum Download bereitstellen und die exclude_from_update-Theorie empfehlen ...

[Init]

@OdfFhem
Ohh, hab scheinbar zulang nichts mehr gemacht 

Die Version aus diesem Thread hab ich schon bei mir eingespielt und hatte jetzt auch noch andere Änderungen vorgenommen.

Wo kann man denn den Nachfolger von FTUI finden?

[OdfFhem]

@Init

Den Nachfolger kann man im GitHub von setstate finden. Ein kompletter Umstieg wäre zum jetzigen Zeitpunkt vermutlich zu früh, da die grundlegenden Konzepte immer noch im (täglichen) Wandel sind; aber ein wenig "Rumspielen" ist interessant ...

Für die neue Version gilt:

    This version is not compatible with older fhem-tablet-ui versions.
    This version is under construction.

Desweiteren würde mich interessieren, welche Änderungen Du noch vorgenommen hast. Vielleicht sind diese Änderungen von allgemeinen Interesse und man könnte diese somit in das "offizielle" Modul übernehmen ...

[Init]

Ich hatte leider in der aktuellen FHEM-Version die Möglichkeit des Start-Wertes erweitert, damit ein Blätten möglich ist.

Auf unserem Tablet wird der Kalender mit 3 Seiten (swiper) je 15 Einträgen angezeigt.

1. Seite: data-max=15
2. Seite: data-max=30 + data-start=15
3. Seite: data-max=45 + data-start=30

data-max sollte man natürlich nochmal anpassen (immer 15) und nur intern verändern, wenn es von anderen genutzt werden soll