(Schöne) Uhr in FHEM statt Logo

[KernSani]

Hallo zusammen,

aufgrund der Diskussion in http://forum.fhem.de/index.php/topic,26182.msg191934.html#msg191934 habe ich mich etwas damit beschäftigt anstelle des grinsenden Hauses eine Uhr in FHEM anzuzeigen. Das Ergebnis - eine animierte digitale und eine animierte analoge Uhr auf Basis von Javascript und CSS - stelle ich hier gerne zur Verfügung.

Disclaimer:

• Die Uhren wurden für "dark" style entworfen, die analoge Uhr ist auch im default style einigermaßen ok.
• Die digitale Uhr ist ein ziemlich Gefrikkel mit der CSS-Positionierung, für den standard-"dark"-style passt das so weit, alle anderen styles sollten die Finger davon lassen.
• Javascript und CSS stammen überwiegend von joncom.be/code/css-clocks/ und wurden von mir für FHEM angepasst
• Getestet habe ich das Ganze mit Chrome, Firefox und Safari (IOS)

Installation:

• Angehängtes ZIP file entpacken und das komplette Verzeichnis "niceclocks" in das FHEM www-Verzeichnis legen (typischerweise /opt/fhem/www
• In der Datei niceclocks.js (im Verzeichnis niceclocks) die Variablen (s.u.) anpassen
• In der FHEMWEB-Instanz in der die Uhr angezeigt werden soll folgende Attribute setzen:
  

Code Auswählen Erweitern

attr <FHEMWEB-Device> CssFiles niceclocks/niceclocks.css
attr <FHEMWEB-Device> JavaScripts niceclocks/fhem_niceclocks.js
attr <FHEMWEB-Device> niceclocksParam {"clockStyle" : "analog","keepBg" : false,"fixMenu" : false,"keepHeader" : true }


"Konfiguration" der Uhr:
In den ersten Zeilen der .js-Datei sind folgende Parameter möglich:
Über das niceclocksParams Attribut kann die Uhr pro FHEMWEB-Device individuell konfiguriert werden. Wird ein Parameter/Wert-Paar nicht angegeben, werden die default-Werte genomen.

• clockStyle: "analog" oder "digital" (default ist "analog")
• fixMenu: Bei "false" (default) verhält sich das Menu wie gewohnt und scrollt mit. Bei "true" scrollt nur der Content, das Menu bleibt immer erreichbar. Funktioniert natürlich nur, wenn das Menu nicht zu lang ist
• keepBg: Das Logo im darkstyle ist tatsächlich ein Hintergrundbild, daher wird dieses in der default-Einstellung ("false") ausgeendet. Durch setzen von "true" bleibt ein eigenes Hintergrundbild erhalten
• keepHeader: Wenn keine Kommandozeile eingeblendet ist, klafft eine Lücke am oberen Rand. Diese kann durch setzen von "true" entfernt werden. Default ist "false".
• clockCircle: Farbe des Rahmens um die Uhr, default "white", rgb-Werte wie "rgb(110,186,110)" möglich
• clockHours: "white", Farbe der Striche für Stunden
• clockSeconds: "white", Farbe der Striche für Minuten
• hourHand: "white", Farbe des Stundenzeigers
• minuteHand: "white", Farbe des Minutenzeigers
• secondHand:"white", Farbe des Sekundenzeiger
• visCircle: "inline", Sichtbarkeit des äußeren Randes
• visHours: "inline", Sichtbarkeit der Striche für Stunden
• visSeconds: "inline", Sichtbarkeit der Striche für Minuten
• visHourHand: "inline", Sichtbarkeit des Stundenzeigers
• visMinuteHand: "inline", Sichtbarkeit des Minutenzeigers
• visSecondHand: "inline", Sichtbarkeit des äußeren Sekundenzeigers

Damit sollte die Uhr statt des Logos erscheinen.

Wenn der default style verwendet wird, bitte noch folgende Anpassung in niceclocks.js vornehmen:

Code Auswählen Erweitern

logo.style.left="40px";
durch

Code Auswählen Erweitern

logo.style.left="10px";
ersetzen.

Der Floorplan unterstützt derzeit noch keine eigenen Javascripts, daher funktioniert die Uhr dort nicht. Es gibt aber einen patch: http://forum.fhem.de/index.php/topic,31293.msg243580.html#msg243580 oder quick'n'dirty: http://forum.fhem.de/index.php/topic,31898.msg243595.html#msg243595

Um die Uhr in den Floorplan einzubinden sind die o.g. Attribute entsprechend für den jewweiligen Floorplan anzugeben. Bevor die niceclocksParams gepflegt werden können muss das Attribut als userAttribut erlaubt werden:

Code Auswählen Erweitern

attr <myFloorplan> userattr niceclocksParam

Wenn sich FHEM längere Zeit im Hintergrund befindet, kommt die Uhr irgendwie aus dem Tritt. Das passiert auch bei der Original-Uhr auf joncom.be/code/css-clocks/ und ich habe noch keine Lösung dafür gefunden. Ein Refresh (oder click z.B. auf einen anderen Raum) syncht die Uhr wieder - oder man wartet einfach, bis die Uhr im high-speed Tempo die aktuelle Uhrzeit wieder erreicht hat.

Für Anregungen und Erweiterungen bin ich natürlich immer zu haben.

Viel Spaß,

Oli
Update 06.02.2018
nochmal kleine Anpassungen für f18 Style
Update 16.01.2018
Die angehängte Version geht nun auch einigermassen mit dem neuen f18 style. Die Uhr ist dann nur bei angepinntem Menu sichtbar.

[moonsorrox]

super, sieht gut aus, schöne Spielerei 
Analog werde ich mal probieren, gefällt mir... und ab ins Wiki damit 

[Brockmann]

Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.

Irgendeine Idee, woran das liegen könnte?

[arne.dien]

Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.

Irgendeine Idee, woran das liegen könnte?

Mir geht's genauso...
Habe auch keine Idee...

[kumue]

..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...

Gruß Kai

[carlos]

Ich es auch mal nach der Anleitung hier versucht, aber bei mir wird nur das FHEM-Logo ausgeblendet und das FHEM-Menü scrollt nicht mehr mit.
Getestet mit Chrome und Firefox. Die Zugriffsrechte für den niceclocks-Ordner sind angepasst.

Irgendeine Idee, woran das liegen könnte?

Bei mir das gleiche

[KernSani]

seit dem letzten FHEM Update ist bei mir die Uhr auch verschwunden, da das logo invisible gesetzt ist. Folgende Zeile sollte Abhilfe schaffen (aus dem Kopf, heute abend kann ich ein Update posten):

Code Auswählen Erweitern

logo.style.visibility="visible";

Grüße,

Oli

[TomWest]

Danke für die tolle Arbeit. Nach dem Eintrag von

Code Auswählen Erweitern

logo.style.visibility="visible"; in die niceclocks.js sieht es bei mir allerdings jetzt so aus:

Ich warte dann mal bis heute Abend, bin schon gespannt.

[kumue]

..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...

sieht bei mir genauso aus wie bei TomWest

[moonsorrox]

meine digitale funktioniert noch...! 

[mahowi]

Bei mir werden weder die digitale noch die analoge Uhr angezeigt, dafür aber das Logo.

Code Auswählen Erweitern

logo.style.visibility="visible"; habe ich in niceclocks.js eingefügt.

[KernSani]

@mahowi, welchen style verwendest du?
@moonsorrox: das ist ja noch die "alte" clock.js - hast du in letzter Zeit mal ein Update des FHEM gemacht?
@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?

Grüße,

Oli

[kumue]

@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?

...ja, liegen im Verzeichnis /niceclocks/images und haben 644

Gruß Kai

[moonsorrox]

@moonsorrox: das ist ja noch die "alte" clock.js - hast du in letzter Zeit mal ein Update des FHEM gemacht?

ja klar gerade gestern erst und große Probleme gehabt (nicht mit der Uhr) und heute wieder ein Update gemacht.
Was ist daran alt  zeigt doch die Zeit 

[mahowi]

@mahowi, welchen style verwendest du?
[...]
@alle,die das Ziffernblatt, aber keine Zeiger sehen: Könnt ihr mal prüfen, ob die Dateien analogseconds.png, analogminutes.png, etc... im Verzeichnis /niceclocks/images liegen und die richtigen Rechte (644) haben?

Manchmal stellt man sich einfach ein bißchen doof an.  Ich hatte die Datei direkt in /opt/fhem anstatt /opt/fhem/www entpackt.

Aber die Uhren werden trotzdem nicht richtig angezeigt. Die Analoguhr hat wie bei den anderen keine Zeiger:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_analog.png)
Bei der digitalen Uhr wackelt dafür ein Zeiger durchs Bild, es wird aber keine Uhrzeit angezeigt:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_digital.png)

In beiden Fällen läßt sich die Menüleiste nicht mehr scrollen.

Die Rechte für alle Dateien sind fhem.root 644.