nicedates.js: Hübsche (relative) Zeitangaben mit Longpoll-Support

peterk_de · 14 Dezember 2014, 01:12:33

Die Lösung mit Anleitung gibt es im zweiten Posting

---

Hallo zusammen,

bevor ich mich selbst ransetze, will ich der Gefahr begegnen, das Rad neu zu erfinden: In meinem Floorplan und auch an einigen Stellen im FHEM-Web lasse ich mir gerne Zeitpunkte von Ereignissen anzeigen (z.B. wann wurde zuletzt der Testalarm beim Rauchmelder ausgelöst, wann wurde die Türklingel betätigt etc.).

Aktuell mache ich das per Attribut showtime, per Userreading, per stateFormat / ReadingsTimestamp oder halt mit dem eingebauten Template im Floorplan. Klappt soweit auch, nur ist die absolute Zeit - insbesondere im Floorplan - echt sperrig und das Lesen dauert unnötig lang.

Ich hätte hier gerne eine Angabe à la "vor 3h", "vor 5 min", "gestern, 17:00 Uhr", "vor n Tagen" etc. Und das ganze sollte natürlich im Floorplan live mitlaufen (denn eine Aktualisierung ist ja auch nötig, wenn kein neues Event kommt --> Javascript). Hat da jemand zufällig schoneimal so etwas gebastelt? Ich hab da bislang nichts nennenswertes gefunden.

peterk_de · 06 Januar 2015, 23:58:36

OK, ein paar Wochen später und noch keine Meldung, das schrie dann doch nach einem eigenen kleinen Projekt ... und hier ist es nun. Ich habe im Prinzip die oben genannten Anforderungen von mir komplett umgesetzt - plus x:

Die ISO-Zeitstempel in FHEMWeb werden per Javascript durch einstellbare hübschere Zeitangaben ersetzt - natürlich auch solche, die in der Zukunft liegen.
Realisiert habe ich es als FHEMWeb-Javascript-"Widget": Installation ist einfach, konfigurierbar ist das ganze über ein Attribut der gewünschten FHEMWeb-Instanz bzw. des gewünschten Floorplans.
Das ganze nutzt die mächtige moment.js Bibliothek. Dadurch gibt es z.B. out-of-the-box-support für verschiedenste Sprachen ohne eigene Strings zusammenbasteln zu müssen (Sprache per Attribut auswählbar)
Es sind 3 verschiedene Darstellungsmodi (alle, die moment.js bietet) verfügbar und per Attribut auswählbar: Komplett relativ (z.B. vor 3 Minuten / vor 10 Tagen - so ziemlich wie in meinem Eingangsposting beschrieben); halb relativ (z.B. Heute, 15:04 Uhr) oder wie gehabt absolute (statische) Zeitstempel, aber individuell formatiert (z.B. Mittwoch, 13. August um 10:00 Uhr)
Die relativen Zeitstempel (z.B. vor 1 Minute) laufen auf Wunsch (und per default) mit! D.h. kein Refresh der Seite nötig.
Kompletter Longpoll-Support, d.h. auch per Longpoll neu hereinkommende Zeitstempel werden formatiert.
Per Regex einstellbar, welche Timestamps ersetzt werden sollen: Alle (default) oder nur ausgewählte
Readingsgroups und Floorplans werden unterstützt (getestet), dem Einsatz in Readingshistory und Dashboard sollte prinzipiell aber auch nichts im Wege stehen (ist aber noch ungetestet).
Da Javascript, passiert das ganze nur im FHEMweb-Frontend. Andere Applikationen (z.B. FHEMremote für iOS) werden davon nicht beeinflusst, es erzeugt (bis auf das Laden der Scripte) keine zusätzliche Serverlast und es sind dafür keine zusätzlichen Perlmodule nötig, so dass auch Raspberry, FritzBox und Co. kein Problem sind. Nachteil: Es erzeugt natürlich mehr Client-Load (was z.B. auf schwachbrüstigen Tablet-PCs als FHEM-Display spürbar sein könnte) und ist browserabhängig (aktuell getestet mit Safari und Firefox unter Mac OS X und iOS

Installation

FHEM darf nicht älter als vom 17.01.2015 sein (update ausführen)
Ordner /opt/fhem/www/nicedates/ anlegen
Angehängte Datei dort hineinkopieren
Neueste Datumslibrary moment-with-locales.js von http://momentjs.com herunterladen und mit in den Ordner tun; ggf. das Rechte setzen für beide Dateien nicht vergessen (chown -R fhem /opt/fhem/www/nicedates)
nicedates als Widget in gewünschter FHEM-Web-Instanz und/oder im gewünschtem Floorplan anmelden: attr meineFhemWebInstanzOderMeinFloorplan JavaScripts nicedates/fhem_nicedates.js - wenn ihr noch andere Widgets geladen habt (z.B. codemirror), müsst ihr das natürlich entsprechend anpassen.
Das war es. Jetzt sollten nach einem Reload alle Zeitstempel im Webinterface bzw. im Floorplan in der Form Today, 5:00 am o.ä. ersetzt werden (Default-Sprache ist Englisch).

Konfiguration

Die Konfiguration erfolgt über ein JSON-Objekt, das ihr eurer FHEM-Web Instanz (oder eurem Floorplan) über das Attribut "nicedatesParam" mitgebt, z.B.:

Code Auswählen

attr meinefhemwebinstanz nicedatesParam {"locale" : "de", "mode" : "fromNow","verbose" : "4"}

Für einen Floorplan nehmt ihr die Änderungen genauso vor - jeder Floorplan kann (und muss) also seine eigenen Einstellungen bekommen. Die Änderungen werden spätestens nach einem Seitenreload übernommen. Folgende Settings könnt ihr vornehmen (bitte entschuldigt, ich hatte es zuerst in Englisch geschrieben und bin nun zu faul es zu übersetzen) - es sind die Default-Werte mit angegeben, falls ihr den entsprechenden Wert nicht überschreibt:

Code Auswählen


{
  // output language. Possible Values: see moment.js documentation. 
  locale : "en", 
  
  // Display mode. One of the following 3 options - see moment.js documentation for details
  //   fromNow: e.g. 45 minutes ago
  //   calendar: e.g. Last Monday 2:30 AM
  //   format: Absolute Date; use formatString below
  mode   : "calendar", 
  formatString : "dddd, MMMM Do YYYY, h:mm:ss a",               
  
  // search scope:  "" (empty) replaces each and every Timestamp in FHEMWEB (default)
  //   "regex" replaces Timestamps based on regular Expression.
  //   The value of the attributes id, informid or class of the
  //   element containing the timestamp or one of its parent-nodes
  //   must match regex (case insensitive). Example: 
  //      replace: 'readingsgroup',
  //      ...only replaces Timestamps in a Readingsgroup-Table  
  searchScope: "",
 
  // Regex matching the timestamps as they appear in FHEMWEB (and hopefully not in Logfiles etc.)
  // You may possibly need to change this to match your installation. 
  timestampRegex: "(\\d{4})-(\\d{2})-(\\d{2}) (\\d{2}):(\\d{2}):(\\d{2})",
  
  // Update timestamps by Timer - no Page-Refresh or longpoll is required for up-to-date relative times then.
  // ignored when mode is "format" because no timed updates necessary here
  timed_updates : true,     
  timed_updates_interval : 10,  // Timer refresh intervall in Seconds. 
  
  // Update Timestamps on longpoll events. Can be left on even longpoll in FHEM is deactivated - should do no harm.
  longpoll_updates : true,      
  
  // Logging verbosity. Default value is sometimes used even 
  // when it is overridden (during start up before loading user attributes). Range 1...5 as known from FHEM. 
  verbose : 3             
}

Ich würde mich freuen, wenn ihr das mal ordentlich durchtestet - bei Problemen bitte verbose wie oben beschrieben auf 5 setzen und einen Blick in die Javascript-Konsole des Browsers werfen und ggf. anhängen. Es gibt sicher noch viele Bugs zu entdecken - also viel Spaß

Edit

Die neueste stabile Version hängt immer an diesem Posting, Zwischenversionen sind in Beiträgen im Thread zu finden.

Code Auswählen


// Version History
// 0.1 - 2015-01-06a:  - initially posted Release.
// 0.2 - 2015-01-20:   - now requires FHEM Version from 2015-01-17 or newer (run update!)
//                              - fixed Regex to not change timestamps in Filelog-Textdisplay 
//                             - new Parameter "timestampRegex" that makes this Regex user-configurable
//                             - excluded HTML-Textarea and -Input elements from replacements
//                             - refactored script startup using FHEMweb-Umbau
// 0.2.1 - 2015-01-21:  - Fixed Compatibility Issue with other .js-widgets

rapster · 07 Januar 2015, 00:08:22

Danke für deine Mühe, wird definitiv diese Woche noch angetestet, sehr cool!

rudolfkoenig · 07 Januar 2015, 08:36:26

Koennt ihr das bitte auch mit dem FHEMWEB_JS_UMBAU SVN-Branch testen, die Aenderungen sollten in den naechsten Tagen im trunk landen. Das longpoll Mechanismus aendert sich leicht, und updateLine ist "unerwuenscht" (deprecated), obwohl sie noch funktionieren sollte. jquery wird immer geladen, und loadScript sollte jetzt zuverlaessiger sein.

KernSani · 17 Januar 2015, 00:53:17

Cool. Funktioniert (FHEM Update gestern). War ein bisschen ein Gefummel, das gemeinsam mit einer CALVIEW readingsgroup hinzukriegen, aber klappt.

Danke!

Grüße,

Oli

peterk_de · 17 Januar 2015, 08:39:58

Oh das freut mich, mit Zeitpunkten in der Zukunft hatte ich es noch gar nicht getestet

Was musstest du denn hinfummeln?

Das Umbau-Update hat bei mir auch keine Probleme verursacht, im Webinterface geht es nach wie vor, nur der Floorplan macht noch Probleme (tat er aber schon vorher) da bin ich noch auf der Suche. Auf den neuen Updatemechanismus baue ich es auch noch um.

KernSani · 17 Januar 2015, 09:05:22

Zitat von: peterk_de am 17 Januar 2015, 08:39:58Was musstest du denn hinfummeln?

In der readingsgroup für CALVIEW kommt das Datum ohne das absolute-timestamp Attribut, daher musste ich mir das per ValueStyle dazu basteln.

Zitatnur der Floorplan macht noch Probleme (tat er aber schon vorher)

nutze ich nicht

ZitatAuf den neuen Updatemechanismus baue ich es auch noch um.

das teste ich dann gerne auch

Grüße,

Oli

peterk_de · 17 Januar 2015, 19:52:43

Zitat von: rudolfkoenig am 07 Januar 2015, 08:36:26
Koennt ihr das bitte auch mit dem FHEMWEB_JS_UMBAU SVN-Branch testen, die Aenderungen sollten in den naechsten Tagen im trunk landen. Das longpoll Mechanismus aendert sich leicht, und updateLine ist "unerwuenscht" (deprecated), obwohl sie noch funktionieren sollte. jquery wird immer geladen, und loadScript sollte jetzt zuverlaessiger sein.

Hi Rudi,ich bin gerade dabei das auf die Änderungen anzupassen und habe dabei Probleme mit dem Floorplan. Im Developer Forum schriebst du:

Zitat
Man kann sowohl alles in www/pgm2 einchecken, dann wird fhemweb_knob.js automatisch laden. Oder man packt es nach www/knob, dann muss der Anwender das FHEMWEB JavaScripts Attribut spezifizieren. Auf diesem Weg kann man auch FHEM-Attribute spezifizieren (XXXParam, wobei XXX.js das spezifizierte JavaScript is), das ist mAn aber gar nicht notwendig, weil man die Parameter besser nach dem "knob" spezifizieren kann.

Nutze ich die erste Variante (www/pgm2/fhemweb_nicedates.js), wird meine Javascript-Datei immer geladen (auch im Floorplan); ich kann dann aber keine Param-Attribute spezifizieren, die ich aber schon an irgendeiner Stelle benötige (Sprache etc.). Nutze ich die zweite Methode (www/nicedates/fhem_nicedates.js), wird die Javascript-Datei im Floorplan nicht geladen (wo sie aber m.E. am meisten Sinn macht), auch wenn ich sie im JavaScript-Attribut korrekt angebe (im normalen FHEMweb aber schon), dafür kann ich nun die XXXParam-Attribute angeben.

Ist dieses Verhalten gewollt? Oder kann ich irgendwie die zweite (schönere) Methode dazu überreden, das .js auch im Floorplan zu laden? LG!

rudolfkoenig · 17 Januar 2015, 20:15:02

1. Stimmt, ind diesem Fall kann man keine Parameter spezifizieren.
2. Das muesste mit dem aktuellen (== seit heute frueh per update verfuegbaren) FLOORPLAN gehen, dank andres FLOORPLAN patch. Allerdings muss man die noetigen Attribute fuer FLOORPLAN per userattr "manuell" erlauben.

peterk_de · 17 Januar 2015, 21:48:15

Zitat von: rudolfkoenig am 17 Januar 2015, 20:15:02
1. Stimmt, ind diesem Fall kann man keine Parameter spezifizieren.
2. Das muesste mit dem aktuellen (== seit heute frueh per update verfuegbaren) FLOORPLAN gehen, dank andres FLOORPLAN patch. Allerdings muss man die noetigen Attribute fuer FLOORPLAN per userattr "manuell" erlauben.

Jupp. Das war's. Nach dem Update läuft es auch im Floorplan fantastisch. Ich habe das Eingangsposting entsprechend angepasst.

Cybers · 18 Januar 2015, 08:07:28

@KernSani
kannst du mir den Code für Calview Readinggroup bzw. das Define geben?

KernSani · 18 Januar 2015, 22:16:10

Einbau in CALVIEW:

Warnung: Ich verwende CALVIEW im Wesentlichen für den Abfallkalender + Schulferien, also ganztägige Termine. Daher wird die Uhrzeit hier nicht berücksichtigt.

Voraussetzung: CALVIEW (neueste Version, nicht mehr die, die das Datum als readingsnamen verwendet) mit entsprechender Readingsgroup ist bereits am Laufen. Nicedates ist am Laufen.

DEF der Readingsgroup:

Code Auswählen

AbfallKalView:t_001_bdate,t_001_summary AbfallKalView:t_002_bdate,t_002_summary AbfallKalView:t_003_bdate,t_003_summary
"AbfallKalView" ist natürlich durch den eigenen CALVIEW zu ersetzen. Dies liefert die nächsten drei Termine, bei Bedarf einfach erweitern,

timestamp formatieren und als HTML-attribut mitgeben über das valueStyle-Attribut der readingsgroup (hier wird zusätzlich die Ausgabe noch anders farblich dargestellt, wenn ein Termin heute ist):

Code Auswählen

{my ($myStyle) = "data-absolute-timestamp='".formatCalDate($VALUE)."'"; if ($VALUE eq localtime("%d.%m.%Y")) {$myStyle.=" style='color: rgb(110,186,110)'";}; return $myStyle}

formatCalDate is eine Funktion, die ich eigentlich mal zu einem anderen Zweck geschrieben habe, aber hier wiederverwende. Einfügen in 99_myUtils.pm:

Code Auswählen

sub formatCalDate {
 use Time::Piece;
 my ($d,$f) = @_;
 my ($dt) = Time::Piece->strptime($d,'%d.%m.%Y');
 if(!$f) {$f="%Y-%m-%d %H:%M:%S"}; 
 return $dt->strftime($f);
}

Viel Spass und alles ohne Gewähr.

Grüße,

Oli

peterk_de · 18 Januar 2015, 22:25:26

Hi Oli,

das dort als Attribut hineinzupacken sollte eigentlich gar nicht nötig sein, das legt sich das nicedates.js-Script selbst an. Geparst wird dazu der Elementtext, d.h. man kann es auch per ValueFormat machen und dort deine formatCalDate aufrufen (und bei ValueStyle dann den Formatierungsteil). Ist in dem Fall, da CalView offensichtlich von selbst keine ISO-Zeitstempel ausspuckt, aber vom Aufwand her "gehüpft wie gesprungen"

Auf jeden Fall danke für deinen Code

KernSani · 18 Januar 2015, 23:24:26

Hi Peter,

da hast du natürlich recht, aber warum einfach, wenn's auch umständlich geht

ToJu · 20 Januar 2015, 09:12:13

Hallo,

vielen Dank für dieses Script. Läuft bei mir mit Update vom 19.01.14 wie oben beschrieben.
Allerdings werden bei mir alle Daten der Logfiles in der Anzeige (falsch) angepasst, wenn ich sie mir als Text ausgeben lasse. Die Sekundenangaben stimmen nicht (uralte Einträge) und ersetzen alle Datumsangaben. Dies gilt nicht für das globale Logfile, da dort das Datum anders formatiert ist.

Code Auswählen

vor ein paar Sekunden Fenster_Kueche battery: ok
vor ein paar Sekunden Fenster_Kueche type: HMS100TFK
vor ein paar Sekunden Fenster_Kueche geschlossen
vor ein paar Sekunden Fenster_Kueche switch_detect: off
vor ein paar Sekunden Fenster_Kueche battery: ok
vor ein paar Sekunden Fenster_Kueche type: HMS100TFK
vor ein paar Sekunden Fenster_Kueche geschlossen
vor ein paar Sekunden Fenster_Kueche switch_detect: off
vor ein paar Sekunden Fenster_Kueche battery: ok
vor ein paar Sekunden Fenster_Kueche type: HMS100TFK
vor ein paar Sekunden Fenster_Kueche geschlossen
vor ein paar Sekunden Fenster_Kueche switch_detect: off
vor ein paar Sekunden Fenster_Kueche battery: ok
vor ein paar Sekunden Fenster_Kueche type: HMS100TFK
vor ein paar Sekunden Fenster_Kueche geschlossen
vor ein paar Sekunden Fenster_Kueche switch_detect: on
vor ein paar Sekunden Fenster_Kueche battery: ok
vor ein paar Sekunden Fenster_Kueche type: HMS100TFK
vor ein paar Sekunden Fenster_Kueche offen

Kannst du hier nochmal schauen, ob man es für Logfiles deaktiviert bekommt oder zumindest korrekt formatiert? Oder liegt der Fehler irgendwo in meinen Einstellungen?

Vielen Dank und viele Grüße,
Torben