Hallo zusammen,
ich nutze das Widget Calcview um Geburtstage anzuzeigen. Dies funktioniert auch super (HowTo: Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Calview#Geburtstagskalender_mit_Berechnung_des_Alters)).
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 (https://wiki.fhem.de/wiki/FTUI_Widget_Calview#Attribute) habe ich diesbezüglich nichts gefunden.
Die letzten Änderungen sind von @OdfFhem und @chris1284 (https://forum.fhem.de/index.php/topic,63575.msg850963.html#msg850963) vom 28.10.18.
Danke vorab.
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
<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>
Danke moonsorrox!
Ich hatte gestern noch etwas Zeit und habe das Widget etwas adaptiert - und die Option
data-backgroundcolor hinzugefügt:
<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 (https://forum.fhem.de/index.php/topic,63861.msg883962.html#msg883962) erst heute gesehen und diese Änderung ist im angehängten js nicht enthalten. :(
Edit 2019-04-21: Anhang (js) entfernt
ich habe das mal übernommen, aber nun sind bei mir alle Termine in FTUI weg... Muss ich in FTUI etwas verändern am Code...?
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.
Zitat von: yersinia am 21 April 2019, 15:01:35
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..!
<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 :-\
@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.
@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 (https://forum.fhem.de/index.php/topic,63861.msg932028.html#msg932028) 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 (https://forum.fhem.de/index.php/topic,97204.msg918623.html#msg918623) 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
Zitat von: yersinia am 21 April 2019, 21:05:06
@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...! ;)
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:
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.
Script nachgeladen - Code in index.html eingebaut - siehe unten:
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
Die Farben kann man ja entsprechend anpassen, ebenso den Hintergrund der Zeile.
Blinken, wenn Tag heute ist, wäre auch nicht schlecht.
@Neuhier
@moonsorrox
Ich habe noch zusätzliche class-Attribute eingeführt; mit dem bereits vorhandenen data-class gibt es nun folgende class-Attribute:
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.
Ich habe die Dateien/ Einstellungen nur übernommen/ reinkopiert, nix geändert.
Eventuell ist meine HTML schon anderst grundkonfiguriert.
Sieht aber trotzdem gut aus. 8)
Cool @OdfFhem, das ging ja fix! :o
Es sieht soweit gut aus. Insbesondere das Definieren von CSS Klassen ist genial. Zumal man durch die ftui_custom.css durchaus eigene Klassen bilden kann. :)
Ich hatte für meinen Hintergrund des hbox-div-Containers noch border-radius: 4px; für die abgerundeten Ecken verwendet, man könnte noch padding-left: 1px; setzen, dann ist es links nicht so dran geklatscht (wirkt sich allerdings aber auf die Gesamtbreite aus).
Leider kann ich es nocht nicht im FTUI Umfeld testen - aber Klugscheißen. 8)
Wichtig ist die CSS Hierarchie wenn man Klassen nutzt. Inline CSS (style=" ... ") überschreibt alles andere (https://www.w3schools.com/css/css_specificity.asp) (Zeilen 226 bis 230).
Es macht auch einen Unterschied ob man <div class="bigger left-align">...</div> oder <div class="left-align bigger">...</div> schreibt je nachdem welche Attribute in den Klassen hinterlegt sind.
In Zeile 224 würde ich das data-type="label" weglassen. Das Label-Widget wird hier nicht benötigt (es werden keine Device Daten über dieses Widget ausgelesen sondern durch das Calview Widget bereitgestellt):
text4spalte += "<div data---type=\"label\""zutext4spalte += "<div"
In Zeilen 253 bis 271 würde ich den Code von
if (spalte == 'age') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'bdate') {mytext += getText4Spalte(spalte,"",datesubstr,null);}
if (spalte == 'bdatetimeiso') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'btime') {mytext += getText4Spalte(spalte,"",null,timesubstr);}
if (spalte == 'categories') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'daysleft') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'daysleftLong') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'description') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'duration') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'edate') {mytext += getText4Spalte(spalte,"",datesubstr,null);}
if (spalte == 'edatetimeiso') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'etime') {mytext += getText4Spalte(spalte,"",null,timesubstr);}
if (spalte == 'location') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'source') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'sourcecolor') {}
if (spalte == 'summary') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'timeshort') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'weekday') {mytext += getText4Spalte(spalte,"",null,null);}
if (spalte == 'weekdayname') {mytext += getText4Spalte(spalte,"",null,null);}
auf folgendes kürzen (müsste gleiche Ergebnisse liefern bei kürzerer Laufzeit):
if ((spalte == 'bdate') || (spalte == 'edate')) {mytext += getText4Spalte(spalte,"",datesubstr,null);}
else if ((spalte == 'btime') || (spalte == 'etime')) {mytext += getText4Spalte(spalte,"",null,timesubstr);}
else if (spalte == 'sourcecolor') {}
else {mytext += getText4Spalte(spalte,"",null,null);}
Analog dazu Zeilen 293 bis 304 ändern zu:
mytext += "<div class=\"\" style=\"color:"+foregroundColor4data+";width:"+$width+"%;\">";
if (spalte == 'sourcecolor') {}
else {mytext += elem.getReading(readingPrefix+'_'+num+'_'+spalte).val;}
mytext += "</div>";
Im Swiper wird die Breite der Spalten noch in Abhängigkeit von der Anzahl der Spalten berechnet. Das könnte hässlich werden wenn alle gleich breit sind (Zeile 287).
Ich möchte trotzdem nochmals betonen: großartige Arbeit!
Ich habe es jetzt getestet und es funktioniert bei mir gut. Danke.
Einbindung wie folgt:
<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-daysleft-values='[1,3,8]'
data-daysleft-classes='["left-align big calview-lt1d","left-align large calview-lt3d","left-align normal calview-lt8d"]'
data-showempty="true"
data-onelinesum="yes"
data-sourcecolor="no"
data-dateformat="short"
data-timeformat="short"
data-dayname="yes"
data-oneline="yes"
data-class="left-align large">
</div>
In meiner ftui_custom.css hab ich folgendes:
div.calview-lt1d {
border-radius: 4px;
padding-left: 1px;
background-color: crimson;
}
div.calview-lt3d {
border-radius: 4px;
padding-left: 1px;
background-color: orange;
}
div.calview-lt8d {
border-radius: 4px;
padding-left: 1px;
background-color: green;
}
Was zum angehängten Ergebnis führt.
Dabei fällt auf, dass die CSS Klassen bei jeder Spalte gesetzt werden. Da mMn die Fromatierung Zeilenweise geschieht, sollte es auch zeilenweise sein. In CodeZeile 247 sollte dann die CSS Klasse hinzuggefügt werden:
mytext += "<div class=\"hbox cell\" style=\"height:auto;\">";
in etwa so:
mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";
In den letzten Tagen habe ich noch ein wenig an diesem Widget gearbeitet und folgende Änderungen vorgenommen:
Das Widget abonniert sehr viele Readings und bei jedem Event wurde bislang die komplette Kalender-Darstellung aufbereitet. Die Zahl der Aufbereitungen wurde deutlich reduziert, was in einer kürzeren Ladezeit resultieren sollte.
Die Swiper-Funktionalität wurde an die aktuell mit FTUI ausgelieferte Swiper-Version (3.4.2) angepasst. Desweiteren wurden - soweit sinnvoll - alle Darstellungsmöglichkeiten der Tabellenansicht auch für die Swiperansicht bereitgestellt. Zusätzlich wurden noch einige Attribute zur Steuerung der Swiperansicht eingeführt.
Letztlich wurden auch noch einige Code-Optimierungen durchgeführt.
Im Folgenden sind die derzeit zur Verfügung stehenden Attribute bzgl. Swiperansicht zusammengefasst:
data-swiperstyle="yes"
data-swiper-autoplay="2000"
data-swiper-effect="slide"
data-swiper-pagination="yes"
data-swiperstyle schaltet die Swiperansicht frei - jeder Kalendereintrag ist eine eigene Seite; es wird immer nur eine Seite aktiv dargestellt.
data-swiper-autoplay aktiviert den automatischen Wechsel der Kalendereinträge/Seiten (alle 2000ms).
data-swiper-effect legt fest, mit welcher Animation der Wechsel durchgeführt wird (derzeit sinnvoll nutzbar: slide bzw. flip)
data-swiper-pagination steuert, ob zusätzlich am unteren Rand eine Seitenübersicht eingeblendet wird (mit Umschaltmöglichkeit).
@yersinia
Das zeilenweise Setzen der Klasse hatte ich mal ausprobiert. Funktionierte eigentlich auch erwartungsgemäß gut, sorgte dann aber im weiteren Testverlauf für einige unschöne Nebeneffekte. Beispielsweise wurden die align-Angaben nicht mehr in sichtbare Resultate umgesetzt ... daher bin ich erst mal bei der aktuellen, spaltenorientierten Theorie geblieben. Deine restlichen Anregungen sollten - sofern nach der Modulumstellung noch relevant - eingeflossen sein.
Falls Du Zeit und Lust hast, kannst Du ja noch mal ein Auge auf den neuen Modulstand werfen.
Zu Testzwecken habe ich den neuen Modulstand
hier temporär weiter unten angehangen.
Danke @OdfFhem! :)
Sieht super aus. Hab es jetzt mit meiner Definiton (s.o.) getestet: funktionierte auf Anhieb. 8) Und läuft auch gefühlt schneller.
Swiper habe ich auch getestet - funktioniert, auch mit anderen Swipern auf der Seite. :o
Ausgezeichnet!
Vielen Dank!
Zitat von: OdfFhem am 28 April 2019, 15:05:11Das zeilenweise Setzen der Klasse hatte ich mal ausprobiert. Funktionierte eigentlich auch erwartungsgemäß gut, sorgte dann aber im weiteren Testverlauf für einige unschöne Nebeneffekte. Beispielsweise wurden die align-Angaben nicht mehr in sichtbare Resultate umgesetzt ... daher bin ich erst mal bei der aktuellen, spaltenorientierten Theorie geblieben. Deine restlichen Anregungen sollten - sofern nach der Modulumstellung noch relevant - eingeflossen sein.
Falls Du Zeit und Lust hast, kannst Du ja noch mal ein Auge auf den neuen Modulstand werfen.
Ja, das hatte ich auch festgestellt und dann auch etwas experimentiert. Ich habe dann in Zeile 317 (auch in deiner neusten Version vom Vorpost) den
else Zweig ersetzt (anstelle von
class4i nun
class4data):
var class4spalte = (header) ? class4header : class4data;Und dann weiter unten (Zeile 369):
mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";class4data zieht sich ja die Zellendefiniton aus dem
class-Attribut des
div-Containers (Zeile 269:
var class4data = elem.data('class');)
class4i übernimmt
class4data (Zeile 298) und wird überschrieben wenn
daysleftclasses gesetzt ist (Zeile 307).
Müsste also eigentlich passen - jdfs bei mir funktioniert es.
Für den Swiper wäre dann Zeile 349 analog:
mytext += "<div class=\"hbox " + class4i + "\" style=\"" + ((elem.data('swiper-navbuttons') == "yes") ? "width:95%;" : "")+ "\">";Was mir noch auffiel ist Zeile 136:
elemContainer = $('<div/>')Ist der HTML Tag hier richtig gesetzt? Entweder
<div> oder
</div>, oder? (Oder ist es eine Maskeirung?)
Edit:
Zeile 149 fehlt ein Semikolon hinter dem
position:static:
elemPagination = $('<div style=\"position:static;\"></div>')Danke nochmals für deine Arbeit, sieht gut aus!
Zitat von: yersinia am 28 April 2019, 20:43:37Ja, das hatte ich auch festgestellt und dann auch etwas experimentiert. Ich habe dann in Zeile 317 (auch in deiner neusten Version vom Vorpost) den else Zweig ersetzt (anstelle von class4i nun class4data):
var class4spalte = (header) ? class4header : class4data;
Und dann weiter unten (Zeile 369):
mytext += "<div class=\"hbox cell " + class4i + "\" style=\"height:auto;\">";
class4data zieht sich ja die Zellendefiniton aus dem class-Attribut des div-Containers (Zeile 269: var class4data = elem.data('class');)
class4i übernimmt class4data (Zeile 298) und wird überschrieben wenn daysleftclasses gesetzt ist (Zeile 307).
Müsste also eigentlich passen - jdfs bei mir funktioniert es.
Mir ist noch eingefallen, dass
class4i leer sein muss, wenn
daysleftclasses nicht gesetzt ist. Im Code wird
class4i automatisch gefüllt (Zeile 298), das könnte man ggf Abhängig von der Prüfung in Zeile 307 machen, oder?
@yersinia
In Deinem Anwendungsfall aus Beitrag #16 (23 April 2019, 17:19:23) verwendest Du zwei Attribute, die es nicht mehr gibt ...
data-onelinesum="yes"
data-dayname="yes"
elemContainer = $('<div/>')
Ist eine jQuery-Anweisung und erzeugt ein vollständiges div-Tag als DOM-Element. Für jQuery sind $("<div/>") und $("<div></div>") gleichwertig.
Solch ein selbstschließendes Tag direkt in einem HTML-Dokument angewendet, wird zwar in der Regel akzeptiert, führt aber offiziell zu invalidem HTML.
Das fehlende Semikolon habe ich ergänzt ...
class4i wird initial auf class4data gesetzt und nur dann überschrieben, wenn der resultierende Wert von daysleftClasses nicht leer ist. Das heißt, wer keine neue class für den daysleft-Fall definiert hat, "erbt" einfach die für den Normalfall vorgesehene class; wäre dies nicht so, müsste jeder, der daysleftValues nutzt auch daysleftClasses mit Werten füllen. Gleiches gilt übrigens auch für daysleftColors und daysleftBackgroundColors.
Ich steuere z.B. das Aussehen (Ausrichtung, Größe, ... ohne Farben) zentral über data-class und die Farben ausschließlich über data-color/data-background-color. Um nun im daysleft-Fall eine andere Farbdarstellung zu erzielen, reicht die Angabe von data-daysleft-color/data-daysleft-background-color; das restliche Aussehen kommt aus dem zentralen data-class. Will man aber im daysleft-Fall z.B. blinkende Einträge oder andere Schriftgrößen, kommt man um die Nutzung von data-daysleft-classes nicht herum und muss evtl. den kompletten Inhalt oder Teile von data-class duplizieren.
Vielen Dank nochmals für Test sowie Anmerkungen
Zitat von: OdfFhem am 29 April 2019, 19:12:25In Deinem Anwendungsfall aus Beitrag #16 (23 April 2019, 17:19:23) verwendest Du zwei Attribute, die es nicht mehr gibt ...
data-onelinesum="yes"
data-dayname="yes"
Danke für den Hinweis, zeigt aber auch: es wird ignoriert und beeinträchtigt (in meinem Fall) das erwartete Ergebnis nicht.
Zitat von: OdfFhem am 29 April 2019, 19:12:25
elemContainer = $('<div/>')
Ist eine jQuery-Anweisung und erzeugt ein vollständiges div-Tag als DOM-Element. Für jQuery sind $("<div/>") und $("<div></div>") gleichwertig.
Solch ein selbstschließendes Tag direkt in einem HTML-Dokument angewendet, wird zwar in der Regel akzeptiert, führt aber offiziell zu invalidem HTML.
Wieder was gelernt. Bedankt. :)
Zitat von: OdfFhem am 29 April 2019, 19:12:25class4i wird initial auf class4data gesetzt und nur dann überschrieben, wenn der resultierende Wert von daysleftClasses nicht leer ist. Das heißt, wer keine neue class für den daysleft-Fall definiert hat, "erbt" einfach die für den Normalfall vorgesehene class; wäre dies nicht so, müsste jeder, der daysleftValues nutzt auch daysleftClasses mit Werten füllen. Gleiches gilt übrigens auch für daysleftColors und daysleftBackgroundColors.
Ich steuere z.B. das Aussehen (Ausrichtung, Größe, ... ohne Farben) zentral über data-class und die Farben ausschließlich über data-color/data-background-color. Um nun im daysleft-Fall eine andere Farbdarstellung zu erzielen, reicht die Angabe von data-daysleft-color/data-daysleft-background-color; das restliche Aussehen kommt aus dem zentralen data-class. Will man aber im daysleft-Fall z.B. blinkende Einträge oder andere Schriftgrößen, kommt man um die Nutzung von data-daysleft-classes nicht herum und muss evtl. den kompletten Inhalt oder Teile von data-class duplizieren.
Ja, das verstehe ich und hab das auch im Code so verstanden. Das funktioniert ja soweit auch.
Was ich als nachteilig sehe ist die
SpaltenZellenweise Definition der class, demnach kann ich nicht
Zeilenweise die Ansicht definieren (was zB bei
border-radius: 4px; komisch aussieht) - zumal ich ja eh die Werte eigentlich indirekt nur pro Zeile setzen kann (für jede Spalte/Zelle die gleiche class). Von daher mein Gedankengang die optionalen classes gleich für das Zeilen-Div zu nutzen anstelle für jede Zelle einzeln. Oder irr' ich?
Zitat von: OdfFhem am 29 April 2019, 19:12:25Vielen Dank nochmals für Test sowie Anmerkungen
Gerne. Ist ja auch nicht Uneigenützig. ;) Dank dir vielmehr dass du dich der Sache annimmst und es umsetzt. :)
@yersinia
Da man das Verhalten bzgl. class-Anwendung nicht wirklich allgemeingültig in den Griff bekommen kann, habe ich noch zwei Erweiterungen am Modul vorgenommen.
Es gibt ein neues Attribut
data-class-usage - gültige Werte:
col bzw.
row. Hierüber kann man steuern, ob die angegebenen Werte für
data-header-class,
data-class bzw.
data-daysleft-classes einer kompletten Zeile einmalig oder jeder Spalte einzeln zugewiesen werden sollen.
Hierüber kann z.B. erreicht werden, dass eine ganze Zeile blinkt - inklusive Hintergrund; oder aber eben nur der Vordergrund.
Für alle, die noch mehr wollen, habe ich jedem calview-Element automatisch Klassen zugeordnet.
- 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 Kalendereintrags, falls kein daysleft-Fall vorliegt
- calview-col gilt für eine einzelne Spalte eines Kalendereintrags, falls kein daysleft-Fall vorliegt
- calview-row-daysleft-<n> gilt für eine komplette Zeile eines Kalendereintrags, falls ein daysleft-Fall vorliegt
- calview-col-daysleft-<n> gilt für eine einzelne Spalte eines Kalendereintrags, falls ein daysleft-Fall vorliegt
- <n> entspricht dem Eintrag im daysleft-Array - beginnend mit 1 (calview-row-daysleft-1, calview-row-daysleft-2, ...)
Eine beispielhafte, nicht optimierte CSS-Definition könnte folgendermaßen aussehen:
.calview {
background-color: #99ccff;
border-radius: 8px;
padding: 4px;
color: black;
}
.calview-row-header {
border-radius: 8px;
font-size:125%;
font-weight: bold;
}
.calview-col-header {
text-align: left;
}
.calview-row {
background-color: #c0c0c0;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}
.calview-col {
text-align: left;
}
.calview-row-daysleft-1 {
background-color: #ff8080;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}
.calview-col-daysleft-1 {
text-align: left;
}
.calview-row-daysleft-2 {
background-color: #ffffb3;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}
.calview-col-daysleft-2 {
text-align: left;
}
.calview-row-daysleft-3 {
background-color: #99ff99;
border-radius: 8px;
padding-left: 4px;
padding-right: 4px;
}
.calview-col-daysleft-3 {
text-align: left;
}
Über CSS-Selektoren kann man sich hier nach Herzenslust austoben ...
Zu Testzwecken habe ich den neuen Modulstand hier temporär angehangen.
@OdfFhem: DAS ist ja mal genial (insbesondere die dynamischen CSS Selektoren 8)). Danke. Läuft bei mir.
Einbindung bei mir:
<div data-type="calview"
data-device="Geburtstage"
data-get="all"
data-max="3"
data-detail='["bdate","summary","age"]'
data-detailwidth='["20","72","8"]'
data-class-usage="row"
data-daysleft-values='[1,3,8]'
data-daysleft-classes='["left-align big","left-align large","left-align normal"]'
data-showempty="true"
data-sourcecolor="no"
data-dateformat="short"
data-timeformat="short"
data-oneline="yes">
</div>
Meine dazugehörige CSS:
div.calview-col {
text-align: left;
}
div.calview-row-daysleft-1 {
border-radius: 4px;
padding-left: 1px;
background-color: crimson;
}
div.calview-col-daysleft-1 {
text-align: left;
}
div.calview-row-daysleft-2 {
border-radius: 4px;
padding-left: 1px;
background-color: yellow;
color: black;
}
div.calview-col-daysleft-2 {
text-align: left;
}
div.calview-row-daysleft-3 {
border-radius: 4px;
padding-left: 1px;
background-color: green;
}
div.calview-col-daysleft-3 {
text-align: left;
}
Es ist zwar etwas nervig, dass man die col einzeln nochmal definieren muss, dafür hat man aber maximale Flexibilität. Gefällt mir sehr gut.
Besten Dank! :D
(Wann geht das ins offizielle repository?)
Ich nutze derzeit "fullcalview", möchte aber auf "calview" umsteigen. Ich bin erstaunt, wieviel Änderungen bzw. neue Attribute hier gegenüber dem Wiki-Eintrag hinzugekommen sind. Gibt es für den aktuellen Stand eine Gesamtübersicht aller Attribute?
Damit würde sich Jeder bestimmt einfacher tun, als im gesamten Thread alles rauszupicken ;)
Danke und Gruß
Andreas
@somansch
Die Wiki-Seite wird in Kürze aktualisiert, da die Änderungen seit Mitte der Woche auch mit dem offiziellen FTUI-Update ausgeliefert werden.
Viele Grüße
Wiki-Seite wurde aktualisiert.
Anregungen/Kritik dazu sind willkommen ...
Viele Grüße
Hallo,
ich habe folgende Config im FTUI
<div data-type="calview"
data-device="MeinKalender"
data-get="all"
data-detail='["weekdayname","btime","summary"]'
data-detailwidth='["28","16","60"]'
data-max="7"
data-class="left-align bigger"
data-showempty="Keine Termine"
data-class-usage="row"
data-daysleft-values='[1,2,3,8]'
data-daysleft-classes='["blink","blink",""]'
></div>
Allerdings blinken bei mir die Termine nicht, die 1,2,3,8 Tage verbleiben.
Was mach ich falsch?
Ist die Klasse blink eine Animation?
@neyzen
Ich habe Dein div-Tag mal ausprobiert und bei mir blinken Termine, die heute bzw. in 1 oder 2 Tagen anstehen.
Anmerkung: Die beiden Arrays ...-values bzw. ...-classes enthalten nicht die gleiche Anzahl von Elementen (4 <> 3).
data-daysleft-values='[1,2,3,8]'
data-daysleft-classes='["blink","blink",""]'
- Deine Angabe heisst übersetzt: Alle Termine <=1 sollen blinken
- Deine Angabe heisst übersetzt: Alle Termine >1 und <=2 sollen blinken
- Deine Angabe heisst übersetzt: Alle Termine >2 und <=3 blinken nicht
- Deine Angabe heisst übersetzt: Alle Termine >3 und <=8 blinken nicht
- Deine Angabe heisst übersetzt: Alle Termine >8 blinken nicht
Angenommen, ich habe verstanden was Du machen willst, dann könnte es z.B. so aussehen:
data-daysleft-values='[3,7,8]'
data-daysleft-classes='["blink","","blink"]'
- Angabe heisst übersetzt: Alle Termine <=3 sollen blinken
- Angabe heisst übersetzt: Alle Termine >3 und <=7 blinken nicht
- Angabe heisst übersetzt: Alle Termine >7 und <=8 sollen blinken
- Angabe heisst übersetzt: Alle Termine >8 blinken nicht
Anmerkung: Die aufaddierten Werte im Array ...-detailwidth sollten 100 ergeben (104 > 100)
data-detailwidth='["28","16","60"]'
@yersinia
blink ist eine mit FTUI2 ausgelieferte Animation ...
Ok,
ich hab das etwas geändert jetzt sieht es so aus, aber nichts blinkt
<div data-type="calview"
data-device="MeinKalender"
data-get="all"
data-detail='["weekdayname","btime","summary"]'
data-detailwidth='["28","20","52"]'
data-max="7"
data-class="left-align bigger"
data-showempty="Keine Termine"
data-class-usage="row"
data-daysleft-values='[1,2,3]'
data-daysleft-classes='["blink","blink","blink"]'
></div>
Liegt es vielleicht an meinem calview device attribute.
Folgendes ist eingestellt
Internals:
DEF Kalender 2
FUUID 5c48d15a-f33f-2b39-3f0d-c24a5671f67d709e
INTERVAL 43200
KALENDER Kalender
NAME MeinKalender
NR 22
NTFY_ORDER 50-MeinKalender
STATE t: 8 td: 1 tm: 3
TYPE CALVIEW
READINGS:
xxxxxxx
Attributes:
disable 0
event-on-change-reading t_002_summary,t_002_bdate,t_003_summary,t_003_bdate,t_004_summary,t_004_bdate,t_005_summary,t_005_bdate
icon time_calendar
maxreadings 20
modes next
room Kalender
@neyzen
An Deinem CALVIEW-Device wird es vermutlich nicht liegen; allerdings verwende ich "event-on-change-reading .*".
Für das calview-Widget brauchst Du 1,2 und 3 nicht getrennt angeben, wenn diese gleich behandelt werden sollen. Die folgende Angabe würde für alle Termine in 3 Tagen oder weniger reichen:
data-daysleft-values='[3]'
data-daysleft-classes='["blink"]'
Um vom blink-Problem abzulenken, würde ich z.B. einen roten Hintergrund dazumixen.
data-daysleft-classes='["bg-red blink"]'
Wenn der rote Hintergrund funktioniert, dann scheint bei Dir die blink-Animation Probleme zu machen.
Wenn auch der rote Hintergrund Probleme macht, dann hast Du vielleicht nicht den notwendigen Modulstand.
Oder es liegt am verwendeten Browser ...
Offiziell müsste für das Modul widget_calview.js gelten:
UPD 2019-05-21_22:24:16 19808 www/tablet/js/widget_calview.js
Ok,
das mit dem
data-daysleft-classes='["bg-red blink"]' funktioniert auch nichts.
Ich hab jetzt mal einen kompletten Fhem update gemacht. Nichts ändert sich.
Allerdings ist mir aufgefallen das die Datei widget_calview.js einen anderen stand hat als die du angegeben hast
Bei mir: Zuletzt geändert 18.04.2018
Bei dir: 21.05.2019
Trotz update hat sich diese Datei nicht geändert. Wie bekomme ich den die aktuelle Version? Vermutlich liegt es dadran?
@neyzen
Zitat
update list ... Listet alle in der Verwaltungsdatei enthaltenen Repositorys auf.
Falls FTUI im Update enthalten wäre, dann sollte die Anzeige u.a. enthalten:
https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Ich vermute mal (fast), dass dies nicht enthalten ist; ansonsten wären die Module normalerweise gemäß der hinterlegten Liste updatiert worden.
Falls doch enthalten, dann müsste man das Update-Problem näher untersuchen ...
Falls nicht enthalten, muss man für sich abklären, ob
- man das Repository dauerhaft hinzufügen möchte ...
oder
- man das Repository nur temporär hinzufügt, genau das gewünschte Modul updatiert, anschließend das Repository wieder entfernt ...
oder
- man den aktuellen Stand der gewünschten Datei von GitHub herunterlädt und (nach Sicherung der bisher verwendeten Datei) lokal ersetzt ...
ein update list liefert
http://fhem.de/fhemupdate/controls_fhem.txt
https://raw.githubusercontent.com/uniqueck/fhem-abfall/master/controls_fhemabfall.txt
https://raw.githubusercontent.com/oskarn97/fhem-xiaomi-mqtt/master/controls_xiaomi-zb2mqtt.txt
Ich würde gerne die Datei widget_calview.js gerne selber runterladen und ersetzen.
Ich hab mal gesucht ist es diese?
https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/js/widget_calview.js
@neyzen
Sieht gut aus ...
Alles leuchtet lichterlo
Danke ;D