Autor Thema: (Schöne) Uhr in FHEM statt Logo  (Gelesen 102571 mal)

Offline KernSani

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3537
(Schöne) Uhr in FHEM statt Logo
« am: 11 Januar 2015, 00:54:56 »
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:
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:
logo.style.left="40px";durch
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:
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.
« Letzte Änderung: 06 Februar 2018, 22:45:27 von KernSani »
RasPi: RFXTRX, HM, zigbee2mqtt, mySensors, JeeLink, miLight, squeezbox, Alexa, Siri, ...
Gefällt mir Gefällt mir x 7 Liste anzeigen

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 4097
  • Online
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #1 am: 11 Januar 2015, 01:29:09 »
super, sieht gut aus, schöne Spielerei  ;)
Analog werde ich mal probieren, gefällt mir... und ab ins Wiki damit  :D
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline Brockmann

  • Sr. Member
  • ****
  • Beiträge: 917
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #2 am: 12 Januar 2015, 08:56:17 »
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?

Offline arne.dien

  • Jr. Member
  • **
  • Beiträge: 76
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #3 am: 12 Januar 2015, 09:27:37 »
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...
FHEM 5.9, RasPi 3 B, HM-LAN, RFXtrx433, Harmony
Homematic, Licht, Rolladen, Heizkörper, Rauchmelder...
ESP RGBWW, LD316...

Es ist selten zu spät aber immer höchste Zeit...

Offline kumue

  • Hero Member
  • *****
  • Beiträge: 1041
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #4 am: 12 Januar 2015, 10:09:07 »
..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...

Gruß Kai

Offline carlos

  • Developer
  • Full Member
  • ****
  • Beiträge: 479
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #5 am: 12 Januar 2015, 11:11:43 »
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
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

Offline KernSani

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3537
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #6 am: 12 Januar 2015, 11:13:00 »
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):

logo.style.visibility="visible";
Grüße,

Oli
RasPi: RFXTRX, HM, zigbee2mqtt, mySensors, JeeLink, miLight, squeezbox, Alexa, Siri, ...

Offline TomWest

  • Full Member
  • ***
  • Beiträge: 122
    • Ferien im Kutscherhaus im Rheinland
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #7 am: 12 Januar 2015, 11:54:58 »
Danke für die tolle Arbeit. Nach dem Eintrag von 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.
« Letzte Änderung: 12 Januar 2015, 11:56:37 von TomWest »
FHEM on R-π - HM-TC-IT-WM-W-EU - HM-LC-Sw1-FM - HM-SCI-3-FM - HM-CC-RT-DN

Offline kumue

  • Hero Member
  • *****
  • Beiträge: 1041
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #8 am: 12 Januar 2015, 11:59:04 »
Zitat
..nette Idee, nur werden bei mir nicht die Zeiger für h,m,s angezeigt...

sieht bei mir genauso aus wie bei TomWest

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 4097
  • Online
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #9 am: 12 Januar 2015, 12:19:47 »
meine digitale funktioniert noch...!  ;)
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline mahowi

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1207
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #10 am: 12 Januar 2015, 16:59:15 »
Bei mir werden weder die digitale noch die analoge Uhr angezeigt, dafür aber das Logo. logo.style.visibility="visible"; habe ich in niceclocks.js eingefügt.
CUBe (MAX): HT, FK | CUBe (SlowRF): ESA2000WZ
JeeLink: LaCrosse | nanoCUL433: Smartwares SHS-51001-EU, EM1000GZ
ZME_UZB1: GreenWave PowerNode, Popp Thermostat | SIGNALDuino: HE877, X10 MS14A, Revolt NC-5462,  IT Steckdosen + PIR
tado° | Milight | HUE, Lightify | SmarterCoffee

Offline KernSani

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3537
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #11 am: 12 Januar 2015, 17:57:22 »
@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
RasPi: RFXTRX, HM, zigbee2mqtt, mySensors, JeeLink, miLight, squeezbox, Alexa, Siri, ...

Offline kumue

  • Hero Member
  • *****
  • Beiträge: 1041
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #12 am: 12 Januar 2015, 18:13:31 »
Zitat
@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

Offline moonsorrox

  • Hero Member
  • *****
  • Beiträge: 4097
  • Online
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #13 am: 12 Januar 2015, 18:40:16 »
@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  :D
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

Offline mahowi

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1207
Antw:(Schöne) Uhr in FHEM statt Logo
« Antwort #14 am: 12 Januar 2015, 21:22:13 »
@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.
CUBe (MAX): HT, FK | CUBe (SlowRF): ESA2000WZ
JeeLink: LaCrosse | nanoCUL433: Smartwares SHS-51001-EU, EM1000GZ
ZME_UZB1: GreenWave PowerNode, Popp Thermostat | SIGNALDuino: HE877, X10 MS14A, Revolt NC-5462,  IT Steckdosen + PIR
tado° | Milight | HUE, Lightify | SmarterCoffee