[FTUI][Widget Calview] Warn icon oder farbliche Markierung möglich?

[yersinia]

Hallo zusammen,

ich nutze das Widget Calcview um Geburtstage anzuzeigen. Dies funktioniert auch super (HowTo: Wiki).

Gibt es eine Option, dass man das Warn Icon anzeigen lassen kann, wenn sich ein Geburtstag nähert (basierend auf Reading t_nnn_daysleft des CALVIEW Devices)?
Oder das man optional die entsprechenden Einträge farblich markieren kann - entsprechend der Nähe des Termins zu heute. Also Geburstag in < drei Tagen -> rot; Geburtstag in < sieben Tagen -> Gelb; sonst ohne Hintergrundfarbe?

In den Attributen habe ich diesbezüglich nichts gefunden.

Die letzten Änderungen sind von @OdfFhem und @chris1284 vom 28.10.18.

Danke vorab.

[moonsorrox]

schau mal in meinen Code ob du dieses so meinst..?

Für dich wäre der Teil mit dem "View_T" welches mein Calview für den entsprechenden Kalender ist. Ich habe die so genannt View_T - für Termine, View_G - für Geburtstage usw.
Ich wollte den Code nicht unnötig zerpflücken deshalb hängt da unten noch ein "template" drin    dafür gibt es irgendwo im Forum auch ein Beispiel, ich lasse mir 4 Termine oder Geburtstage anzeigen und aktuell ist er dann in "rot" oder ich habe eine Termin für morgen in "grün"
Beide habe ich auch noch nicht hinbekommen c-today und c-tomorrow, dazu habe ich auch irgendwo eine Frage im Forum, aber bisher noch keine Antwort

Code Auswählen Erweitern

<div class="card">
<!-- Termine Box -->
<div class="vbox" style="background-color:#1f222e;">
<div class="" style="margin-top:0px; font-size:100%; color:MediumSpringGreen">Termine</div>
<div class="card grow-2">
<div class="hbox" style="margin-top:10px;">
<div class="top-narrow" data-type="popup" data-height="260px" data-width="1200px" data-return-time="45" data-mode="fade"  data-draggable="true">
<div class="vbox">
<div class="hbox">
<!-- (Icon) -->
<div class="large" data-type="symbol" data-device="View_T" data-get-off="0"
data-get-on="(1|2|3|4|5|6|7|8|9)" data-get="c-tomorrow" data-warn="c-tomorrow" data-warn-background-color="crimson"
data-off-color="white" data-on-color="MediumSpringGreen" data-icon="oa-time_calendar">
</div>
</div>
</div>
<div class="dialog bg-darkgray">
<header style="background-color:#1f222e;">
<div class="sheet">
<div class="left" style="margin-left:15px; margin-top:17px; margin-bottom:15px; font-size:20px; color:MediumSpringGreen;">=== Nächste Termine ===</div>
<div data-type="link" data-color="crimson" data-icon-left="fa-times" data-background-color="#1f222e" class="right big" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="card bg-darkgray" style="margin-left:15px; margin-top:0px;">
<!--div class="crimson" style="font-size:130%;" data-type="calview" data-device="View_T" data-get="today" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-showempty="false" data-max="3"></div-->
<!--div class="MediumSpringGreen" style="font-size:130%;" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div-->
<div class="MediumSpringGreen border-top-blue1" style="left-align; font-size:140%;" data-type="calview" data-device="View_T" data-get="tomorrow" data-detailwidth='["8","10","10","26","46"]' data-detail='["daysleftLong","weekdayname","btime","summary","location"]' data-max="3"></div>
<div class="" style="font-size:120%;" data-type="calview" data-device="View_T" data-get="all" data-class='left-align' data-detailwidth='["10","8","8","5","30","39"]' data-detail='["daysleftLong","weekdayname","bdate","btime","summary","location"]' data-start="notomorrow" data-max="4"></div>    
</div>
</div>
</div>
<div style="margin-top:-7px;" data-template="EG_template_kalenderT.html"></div>
</div>
</div>
</div>
</div>

[yersinia]

Danke moonsorrox!

Ich hatte gestern noch etwas Zeit und habe das Widget etwas adaptiert - und die Option data-backgroundcolor hinzugefügt:

Code Auswählen Erweitern

<div data-type="calview"
                        data-device="Geburtstage"
                        data-get="all"
                        data-max="3"
                        data-detail='["daysleft","bdate","summary","age"]'
                        data-detailwidth='["8","20","64","8"]'
                        data-showempty="true"
                        data-onelinesum="yes"
                        data-sourcecolor="no"
                        data-dateformat="short"
                        data-timeformat="short"
                        data-dayname="yes"
                        data-oneline="yes"
data-backgroundcolor="yes"
                        data-class="left-align large">
                </div>
Die Option ist optional und standardmässig deaktiviert. Wenn das Reading daysleft < 2 ist, färbt sich der Hintergrund Orange (#ff9933), bei < 8 auf Grün (#339933). Man könnte überlegen, ob man das noch dynamisch gestaltet. (daysleft muss nicht als Spalte angegeben werden)

Weiterhin habe ich noch einige Code-Anpassungen durchgeführt, die das Laden (zumindest bei mir deutlich) beschleunigen:

• kein data-type=label für die div Container
• die if Abfragen auf die Spalten verkürzt
• den CSS Code optmiert
• eine UniqueID eingeführt für den Swiper eingeführt, damit müssten mehrere Swiper auf einer Seite möglich sein (thx @Bruchbude)

Leider habe ich die Änderung von @OdfFhem erst heute gesehen und diese Änderung ist im angehängten js nicht enthalten.

Edit 2019-04-21: Anhang (js) entfernt

[moonsorrox]

ich habe das mal übernommen, aber nun sind bei mir alle Termine in FTUI weg... Muss ich in FTUI etwas verändern am Code...?

[yersinia]

1. Hast du die Seite neu geladen?
2. Hast du die js von oben nach /opt/fhem/www/tablet/js kopiert? (und hoffentlich vorher das originale widget_calview.js gesichert)?
3. Hast du das CALVIEW Device angepasst (in meinem Beispiel Geburtstage)?
4. Wie sieht dein Widget-Aufruf aus? (gerne auch anonymisiert)

Kurz weil Mobil.

[moonsorrox]

1. Hast du die Seite neu geladen?
2. Hast du die js von oben nach /opt/fhem/www/tablet/js kopiert? (und hoffentlich vorher das originale widget_calview.js gesichert)?
3. Hast du das CALVIEW Device angepasst (in meinem Beispiel Geburtstage)?
4. Wie sieht dein Widget-Aufruf aus? (gerne auch anonymisiert)

Kurz weil Mobil.

zu 1. ja
zu 2. ja und ja
zu 3. ja

dazu folgendes, ich aktualisiere die Seite und es wird nichts angezeigt alle meine Einträge bei mir in Popups sind weg die Popups leer und mein aktueller Geburtstag von heute auf der Startseite ist auch weg, ich aktualisiere nochmal immer noch leer, ich aktualisiere ein drittes mal also so ca. nach gefühlt 25 sec sind alle Einträge wieder da einschließlich deinem FTUI Code der dann auch orange unterlegt ist...

zu 4. habe eigentlich zum probieren/testen deinen Code 1 zu 1 übernommen..!

Code Auswählen Erweitern

<div data-type="calview"
                        data-device="View_G"
                        data-get="all"
                        data-max="3"
                        data-detail='["daysleft","bdate","summary","age"]'
                        data-detailwidth='["8","20","64","8"]'
                        data-showempty="true"
                        data-onelinesum="yes"
                        data-sourcecolor="no"
                        data-dateformat="short"
                        data-timeformat="short"
                        data-dayname="yes"
                        data-oneline="yes"
data-backgroundcolor="yes"
                        data-class="left-align large">
                </div>

spiele ich das aktuelle widget_calview.js zurück funktioniert es auf Anhieb das alle Daten wieder da sind.
Mir sieht es so aus als wenn es eigentlich nur eine sehr lange Ladezeit braucht, so wie oben geschrieben um die 25 sec 

[OdfFhem]

@yersinia

Grundsätzlich finde ich es gut, wenn Wünsche zur Verbesserung eines Widgets geäußert werden - im Idealfall sogar schon mit genaueren Vorstellungen, Umsetzungsideen oder auch vorgefertigten Codeteilen.

Unglücklich finde ich aber, wenn auf einmal "jede Menge" neuer Modulversionen auftauchen (im aktuellen Fall 2 unterschiedliche und dann auch noch in 2 verschiedenen Threads) und nachher keiner mehr so richtig weiß, welche Version denn eigentlich die ist, die am Ende dann auch den Weg ins offizielle Update findet. Damit sind Überraschungen beim nächsten Update quasi schon vorprogrammiert.

Da ich aktuell die Pflege des calview-Widgets von chris1284 übernommen habe, würde ich es begrüßen, wenn Du möglichst keine neuen Modulstände bereitstellst. Wenn unbedingt notwendig, dann bitte nur innerhalb des damit thematisch verbundenen Threads und nur für eine begrenzte Zeit.

!!! Das ist jetzt definitiv nicht böse gemeint, sondern soll vielmehr ein wenig dem Chaos vorbeugen.
!!! Und soll auch auf keinen Fall heißen, dass man nicht mitentwickeln darf/soll, denn schließlich lebt FHEM ja vom Mitmachen.



Neben den obigen Anmerkungen möchte ich noch sagen:

• 
  Auf jeden Fall werde ich mir die Änderungen zum swiperstyle näher anschauen und bei korrekter Funktion auch übernehmen; allerdings muss ich dazu selbst erst einmal eine kleine swiper-Umgebung aufbauen. Bislang habe ich mich immer gefragt, ob diese Funktionalität überhaupt genutzt wird - diese Frage ist ja nun beantwortet.
  
• 
  Die Änderungen zur Verkürzung/Optimierung des Codes hatte ich teilweise auch schon einmal überlegt, aber habe es bisher meist beim Alten belassen, da jede auch noch so kleine Änderung zumindest rein theoretisch das Potential für einen Seiteneffekt hat. Daher verfolge ich eher die Theorie, wenn nicht nötig, dann Finger weg. Überrascht hat mich allerdings die Verwendung von data-type="label", das werde ich mir wohl noch mal näher ansehen müssen.
  
• 
  Bzgl. der eigentlichen Fragestellung aus diesem Thread hatte ich neben den Osterfeierlichkeiten mal testweise zwei neue, arraybasierte Attribute data-daysleft-values und data-daysleft-colors ins Modul integriert. Ich hatte mich für die Beeinflussung der Vordergrundfarbe entschieden, da das eigentliche CALVIEW-Device selbst auch nur mit Vordergrundfarben arbeitet und eine Hintergrundänderung immer gleich die Oberflächenharmonie "zerstört" - ich lasse mich da aber auch gerne eines Besseren belehren. Bei Interesse kann ich den neuen Modulstand gerne mal zu Testzwecken bereitstellen.
  

[yersinia]

@moonsorrox: ja, an der Ladezeit könnte es liegen, wenn es besonders viele Einträge aus dem CALVIEW device gibt. Meine FTUI benötigt insgesamt auch ~10sek ladezeit beim ersten Aufruf. Mein CALVIEW Device hat allerdings auch nur um die 5 Einträge, von daher kann ich die Ladezeit bei mir nicht nachvollziehen. Sorry. :/ Bei mir funtktioniert es eher flüßig. Allerdings hat OdfFhem auch recht und der Wildwuchs kann zu genau solchen Situationen führen...

@OdfFhem: Danke für das konstruktive Feedback. Ja, du hast recht. Es ist nicht der ideale Weg solche Erweiterungen in dieser Art und Weise zu vermitteln. Ich muss gestehen, dass ich auch nicht wirklich herausfinden konnte, wer der Maintainer ist. Im widget selbst finde ich dich als letzter Contributor (und darübr hinaus nichts weiter), im Wiki Artikel fand ich keinen Hinweis und die Forensuche ist....gewöhnungsbedürftig. Über das Ändrungsdatum und dann via User im Forum einen Thread zu finden war auch ohne Erfolg. Von daher dieser Weg.
Das oben angehängte Modul habe ich entfernt. Den Vorschlag im anderen Thread lass ich noch.

Gedanken, welche ich mir gemacht habe (und in meiner Version vorschnell über Ostern auch umgesetzt hatte, mit offensichtlichen mäßigen Erfolg):

• Den Swiper nutze ich selbst nicht. Aber mir ist aufgefallen, dass der Swiper ohne ID läuft - damit wird es schwierig, wenn es einen weiteren Swiper gibt. Die Lösung mit UniqueID hatte mal der User Bruchbude für das UWZ Modul bereitgestellt. Ich hab die identische Funktion für ein DWD Warn Widget benutzt und funktioniert bei mir tadellos.
• einige Code-Optimierungen sehe ich bei den if (spalte = 'foo') {...}; Blöcken , da die meisten Konvertierungen identisch sind; btime und etime sind gleich, sowie bdate und edate; sourcecolor bleibt leer und der Rest ist mMn identisch (Übernahme 1:1) (gibt es Spalten, außer sourcecolor, die explizit ignoriert werden?)
• die gleichen if Bedingungen bauen immer wieder den gleichen <div> Container zusammen; in deiner neuen Version ist dies allerdings gefixed
• Im inline CSS gibt der SVN Version gibt es ein leeres color: Attribut, das würde ich, wenn color nicht gesetzt ist, weg lassen; bzw. dynamisch aufbauen
• bezgl Vordergrund/Hintergrundfarbe könnte man das optional gestalten: Man könnte data-colormode = [background|color] oä mitgeben und es darüber steuern; ergänzend zu deinem data-daysleft-value und data-daysleft-colors
• Die Hintergrundfarbe könnte man relativ einfach dynamisch via inline CSS des Zeilenweisen-hbox-div-Container setzen. Der Rest ist in Abhängigkeit vom Reading daysleft des CALVIEW devices
• der data-type="label" fiel mir nebenbei auf - ist hier wahrscheinlich obsolet

[moonsorrox]

@moonsorrox: ja, an der Ladezeit könnte es liegen, wenn es besonders viele Einträge aus dem CALVIEW device gibt. Meine FTUI benötigt insgesamt auch ~10sek ladezeit beim ersten Aufruf. Mein CALVIEW Device hat allerdings auch nur um die 5 Einträge, von daher kann ich die Ladezeit bei mir nicht nachvollziehen. Sorry. :/ Bei mir funtktioniert es eher flüßig. Allerdings hat OdfFhem auch recht und der Wildwuchs kann zu genau solchen Situationen führen...

ich habe auch nur 5 Einträge bei den Geburtstagen, aktuell stehen sogar nur 4 drin, trotzdem dauert es eine gefühlte Ewigkeit bis die drin standen..
Aber ich warte jetzt erst mal ab wie sich das Modul weiter entwickelt, habe ja aktuell keine Probleme damit und wollte auch nur mal deine Umsetzung testen...! 

[OdfFhem]

Ich habe einen neuen Modulstand fertiggestellt, der u.a. die Möglichkeiten zur Einfärbung des Widgets deutlich erweitert.


Im Folgenden sind die zur Verfügung stehenden Attribute bzgl. Anpassung von Vorder- bzw. Hintergrundfarbe zusammengefasst:

Code Auswählen Erweitern


  data-header-color="hotpink"
  data-header-background-color=""


  data-color="yellow"
  data-background-color=""

  data-sourcecolor="yes"

  data-daysleft-values='[4,8,12]'
  data-daysleft-colors='["red","lightgreen","hotpink"]'
  data-daysleft-background-colors='["orange","","blue"]'


Attribute nach dem Muster data-header-* ermöglichen die Einfärbung der optionalen Titelzeile für die Spalten (z.B. data-header='["am","Zusammenfassung","Ort"]').

Attribute nach dem Muster data-daysleft-* ermöglichen die Einfärbung der Kalendereinträge - abhängig vom daysleft-Reading.
Die Angaben im Beispiel sorgen dafür, dass Termine,

• 
  die in 4 oder weniger Tagen anstehen, rot auf orange dargestellt werden
  
• 
  die in 8 oder weniger Tagen anstehen, mit lightblue als Vordergrundfarbe dargestellt werden
  
• 
  die in 12 oder weniger Tagen anstehen, hotpink auf blue dargestellt werden
  
• 
  alle anderen Einträge werden abhängig von sourcecolor bzw. data-color und data-background-color eingefärbt
  

Es wäre nett, wenn Ihr die temporär hier weiter unten angehängte Datei testen würdet ... positive wie negative Anmerkungen sind willkommen.

[Neuhier]

Script nachgeladen - Code in index.html eingebaut - siehe unten:

[moonsorrox]

das sieht jetzt optisch nicht so überragend aus, dass geht besser 

yersinia hatte das etwas schöner mit der Farbunterlegung der gesamten Zeile...!

Wobei ich es ansprechender finde wenn eine ganze Zeile farblich entweder der "background" oder die "font/Schrift" in einer anpassbaren Farbe wären.
Wie gesagt ist nur meine eigene Meinung und keine Kritik

[Neuhier]

Die Farben kann man ja entsprechend anpassen, ebenso den Hintergrund der Zeile.
Blinken, wenn Tag heute ist, wäre auch nicht schlecht.

[OdfFhem]

@Neuhier
@moonsorrox

Ich habe noch zusätzliche class-Attribute eingeführt; mit dem bereits vorhandenen data-class gibt es nun folgende class-Attribute:

Code Auswählen Erweitern


  data-header-class="bigger"

  data-class="left-align"

  data-daysleft-classes='["red bg-yellow blink right-align","","blue bg-white"]'


Dadurch sind die Möglichkeiten zur variablen Formatierung nochmals deutlich gestiegen und beschränken sich nicht auf Farbanpassungen.

Beachten muss man dabei allerdings, dass die data-daysleft-Attribute ersetzend wirken - werden also data-daysleft-Attribute genutzt (und auch gefüllt), ersetzen sie bei passender Bedingung komplett den Inhalt der allgemeinen data-Attribute. Im obigen Beispiel wird also das left-align durch die gefüllten days-left-classes überschrieben und hat folglich keine Bedeutung mehr; nur im zweiten Fall bleibt der Wert erhalten, da der class-Wert nicht gefüllt ist.

@Neuhier

Die Darstellung im von Dir angehängten Screenshot kann ich nicht nachvollziehen.
Bei mir sieht die Darstellung wie im hier angehängten Screenshot aus ... auch schon ohne die neuen Möglichkeiten ...



Zu Testzwecken habe ich den neuen Modulstand hier temporär weiter unten angehangen.

[Neuhier]

Ich habe die Dateien/ Einstellungen nur übernommen/ reinkopiert, nix geändert.
Eventuell ist meine HTML schon anderst grundkonfiguriert.
Sieht aber trotzdem gut aus.