Calview Widget: Kleine Erweiterungen

[chriss]

Hallo,

erst einmal ein frohes neues Jahr euch allen. Weiterhin möchte ich allen beteiligten, und natürlich insbesondere setstate, meinen Dank aussprechen wür diese tolle TabletUI!

Bei meinen ersten Gehversuchen mit der TabletUI (v2.4) ist mir negativ aufgefallen, dass die Einträge des Calview Widgets immer zentriert ausgegeben werden. Zudem wollte ich etwas Platz sparen, indem ich die Jahreszahlen bzw. die Sekunden nicht anzeige. Herausgekommen sind meine ersten paar Zeilen Javascript.

Ich habe das Widget um zwei weitere Parameter erweitert:

• data-colwidth: erlaubt die Einstellung von Spaltenbreiten, um eine vernünftige Formatierung hinzubekommen
• data-regexp: erlaubt die Filterung von Einträgen mittels match(regexp)

Ein Widget mit den folgenden Attributen erzeugt das angehängte Beispiel

Code Auswählen Erweitern


<div data-type="calview"
         data-device="CalendarView"
         data-get="all"
         data-start="notomorrow"
         data-max="4"
         data-detail='["bdate","btime","etime","summary"]'
         data-colwidth='["15%","10%","15%","60%"]'
         data-regexp='["\\d{2}.\\d{2}","\\d{2}:\\d{2}","\\d{2}:\\d{2}",".*"]'
         class="cell">
    </div>


Erklärung: Ich hatte erst die "col-x-y" Parameter verwendet. Das hat zwar grundsätzlich funktioniert, war aber nicht genau genug, da col-1-6 die kleinste Einheit ist. Daher bin ich jetzt über den Umweg gegangen eine hbox zu verwenden und die Spaltenbreiten mit 'style="width: XX%"' zu setzen. Ich habe versucht vernünftige Defaultwerte mitzugeben, kann aber nicht mehr garantieren, als dass es bei mir funktionert...

Sehr wahrscheinlich gibt es bessere und/oder einfachere Möglichkeiten meine Ziele zu erreichen. Falls ja, nennt sie mir bitte

Gruß,
Chris

[chris1284]

ich schau mir das mal an. (deine vorlage basiert übrigens auf einer alten version)

ich denke dass eine variable darstellung die sich nach dem "drumherum" richtet sinnvoller ist als feste werte zu geben aber es geht sicher beides zu realisieren.
(zb wenn elem.data('colwidth') != "undefined" dann die colwidth und hbox anwenden, ansonsten den defaultstyle)

Erklärung: Ich hatte erst die "col-x-y" Parameter verwendet. Das hat zwar grundsätzlich funktioniert, war aber nicht genau genug

aktuell werden genau so viele cols mit gleicher breite angelegt wie es anzuzeigende readings gibt, also theoretisch max 9 (col-1-9). optimal ist das nicht
ich habe aber auch schon überlegt das man ja für zeit und datums spalten eigentlich nicht so viel platz braucht und somit diese kleiner zu machen. wenn man jetzt noch davon ausgeht das nach der änderung (regexp) die breite noch variabler ist.... muss man mal schauen

mit dem regexp finde ich zu kompliziert. hier wäre , finde ich, es einfacher ein zb

      data-datestyle
      data-timestyle

oder

      data-dateregexp
      data-timeregexp

einzuführen.
dein regexp wirkt sich auf alle readings aus die man verarbeitet (datum in summary , location, description) meine ich.
mit deiner lösung muss mindestens eine prüfung rein if spalte = btime or etime  -> timeregexp anwenden, spalte = bdate or edate ->  dateregexp anwenden

[Puccini]

Ich hole den Thread nochmals raus, da ich auch eine Idee / Anfrage für eine Erweiterung dieses netten kleinen Widgets habe:
Ist es möglich die Spalten noch mit einem Titel zu versehen? So dass man sieht, was da wo wie zusammengebaut wurde?

Das wäre klasse!

Danke euch!

[OdfFhem]

@Puccini
Schaue ich mir die Woche mal an ...

[OdfFhem]

@Puccini
Mittlerweile hatte ich Gelegenheit, das Modul zu prüfen und habe folgende Änderungen vorgenommen:

• Es gibt ein neues Attribut data-header; wird dieses angegeben, so wird eine zusätzliche Tabellenzeile als Titelzeile generiert.
• Es gibt ein neues Attribut data-header-color; legt die Farbe der Titelzeile fest - ansonsten Rückfall auf data-color bzw. aktive Farbe.
• Das Attribut data-showempty wurde erweitert (Anregung aus https://forum.fhem.de/index.php/topic,93105.0.html). Neben true bzw. false kann nun auch ein frei wählbarer Text übergeben werden.

Beispielhafte Verwendung:

Code Auswählen Erweitern


  <div data-type="calview" data-device="TestkalenderView"
                           data-get="all"
                           data-header='["am","um","Zusammenfassung","Wochentag","Ort"]'
                           data-header-color="hotpink"
                           data-detail='["bdate","btime","summary","weekdayname","location"]'
                           data-color="lightblue"
                           data-showempty="Ausnahmsweise mal keine Termine"/>



Es wäre nett, wenn Du oder natürlich auch jeder andere Testwillige das angehängte Modul mal ausprobieren könnte.

[Puccini]

Ich versuch mich heute Abend mal daran
Vielen Dank!

[Puccini]

Mittlerweile hatte ich Gelegenheit, das Modul zu prüfen und habe folgende Änderungen vorgenommen:

Sieht gut aus.
Hab das mit dem header getestet

Vielen lieben Dank!

[OdfFhem]

@setstate

Wärst Du so nett, den Pull request #238 bzgl. widget_calview.js ins offizielle FHEM-Tablet-UI-Update zu übernehmen?

[yersinia]

@OdfFhem, ich habe versucht meine Änderungen in Deine von weiter oben einzuarbeiten.
Könntest du (und auch gerne andere Benutzer) testen, ob dies weiterhin funktioniert?

EDIT 2019-04-23: Anhang entfernt, weitere Änderungen wahrscheinlich im neuen Thread

[moonsorrox]

bei mir läuft es jetzt d.h. ich habe im Gegensatz zu letztens sofort die Einträge in all meinen calview Anzeigen drin.
Hast du eine farbliche Formatierung vorgenommen, bei mir sieht alles normal ohne Formatierung aus, so wie ich es bei mir integriert habe.

Ich habe aber aktuell auch keinen Termin der angezeigt wird.

[yersinia]

Ich habe aber aktuell auch keinen Termin der angezeigt wird.

Formatierungen habe ich nur in Abhängigkeit von daysleft < 8 Tage vorgenommen gehabt - dann ist die bg-color der Zeile gesetzt worden.
Wenn du keine Termine hast, kann auch nichts angezeigt werden.
Allerdings empfehle ich, die Diskussion im anderen Thread weiterzuführen. Ich denke, OdfFhem wird bald durch sein.