(Schöne) Uhr in FHEM statt Logo

[SimonHipp]

@ SimonHipp:

Safari-Browser?
Wenn ja, ist das Problem wohl bekannt, aber noch offen (siehe #53 ff). Analog müsste aber gehen.

Gruß
Eberhard

Jup, Analog geht.
Hat bisher noch keiner eine Lösung für das Problem gefunden. Denke auch das es mal wieder an Safari liegt!

[PNinBB]

@ FHEm2005:
Vielen Dank ! Es war genau dieses Problem.
Gruß
Peter

[SimonHipp]

Ich hab mich nun mal dem Problem mit dem Safari und der Digital-UHR angenommen.
Hier das korrigierte File.
Ich habe es auf Firefox 35.0.1 / IE 10 / IE 11 / Safari 5.1.7 auf Windows, sowie Safari auf dem iPad/iPhone getestet, bei mir läuft es.
Könnt Ihr das bitte gegenprüfen und mir Rückmeldungen geben, danke!

[mahowi]

Irgendwie hab ich wohl jetzt den Überblick verloren. Ich habe die fhem_niceclocks.js und svg_analog.svg aus #99, analoghours.svg, analogminutes.svg und analogseconds.svg aus #83, den Rest aus dem Original.
Meine Konfiguration sieht so aus:

Code Auswählen Erweitern

attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam {"clockStyle" : "analog","clockFace" : "white","clockSeconds" : "red","analogBorder" : true,"keepBg" : false,"fixMenu" : false,"keepHeader" : true }

Allerdings sieht die Uhr jetzt so aus:
(https://dl.dropboxusercontent.com/u/83276402/niceclock_svg_fehler.PNG)

Muß das CSS aus #94 noch eingebunden werden?

Könnte vielleicht jemand den kompletten Ordner niceclocks mit aktuellem Stand hochladen?

[FHEm2005]

Windows Firfox 35.01: Zickt bei digital, dass sich das Fenster verschiebt und beim Rückgang auf analog auch nicht mehr normalisiert. das Zifferblatt fehlt. Auch nach dem Motto "Reboot tut gut" bleibt  der Fehler. Erneutes Downloaden der Version von #99 und shutdown + restart hat alles normalisiert.

Apple IOS 6.1.6 (ja, ich habe ein altes iPhone! ): Keine Anzeige der digitalen Uhr.

Wir müssen nur aufpassen, dass wir nicht nachher zwei versionen haben einmal Apple und einmal ROW.

@mahowi: nimm mal das "clockFace" : "white", raus.  aus'#98:

Die Variable 'clockface' wird in dieser Version (momentan) nicht mehr verwendet! Wer das nicht möchte, sollte diese Version NICHT verwenden!  Diese js-Datei funktioniert nur richtig mit der SVG-Datei aus dem vorherigen Thread #97.

In die #1 kann nur KernSani was eintragen.

Zusammenfassung:
Erforderlich für die Version mit der getrennten Farbgebung sind:

svg_analog.svg   aus #99
fhem_niceclocks.js aus #99
niceclocks.css aus zip-Datei in #1

Rahmen im style = dark:
Hinweise und Änderungen aus #94

Änderungen in Farbe und Schriftgröße des Datums:
Hinweise und Änderungen aus #93

Gruß
Eberhard

[mahowi]

Hallo Eberhard! Erstmal vielen Dank für Deine Mühen.

Leider sieht das Ganze noch nicht gut aus, siehe Screenshot. 

Ich habe jetzt mein niceclocks-Verzeichnis mal gelöscht und die Zip-Datei aus #1 neu heruntergeladen und entpackt. Dann svg_analog.svg aus #99 in niceclocks/images und fhem_niceclocks.js aus #99 in niceclocks. Dazu die myCSS_8083.css aus #93 und #94 in niceclocks. Das Verzeichnis sieht jetzt also so aus:

Code Auswählen Erweitern

pi@raspberrypi /opt/fhem/www $ ls -lahR niceclocks/
niceclocks/:
insgesamt 32K
drwxr-xr-x  3 fhem dialout 4,0K Jan 18 23:15 .
drwxr-xr-x 10 fhem dialout 4,0K Feb  9 19:47 ..
-rw-r--r--  1 fhem dialout  12K Feb  9 19:37 fhem_niceclocks.js
drwxr-xr-x  2 fhem dialout 4,0K Jan 31 23:47 images
-rw-r--r--  1 fhem dialout  532 Feb  9 19:43 myCSS_8083.css
-rw-r--r--  1 fhem dialout 1,3K Feb  1 00:22 niceclocks.css

niceclocks/images:
insgesamt 324K
drwxr-xr-x 2 fhem dialout 4,0K Jan 31 23:47 .
drwxr-xr-x 3 fhem dialout 4,0K Jan 18 23:15 ..
-rw-r--r-- 1 fhem dialout 4,8K Jan 31 23:46 analog_black.png
-rw-r--r-- 1 fhem dialout 8,5K Jan 31 23:47 analog_blue.png
-rw-r--r-- 1 fhem dialout 1,2K Jan  9 02:06 analog.gif
-rw-r--r-- 1 fhem dialout  466 Jan  9 02:22 analoghours.png
-rw-r--r-- 1 fhem dialout  351 Jan  9 02:22 analogminutes.png
-rw-r--r-- 1 fhem dialout  354 Jan 31 23:47 analogseconds.png
-rw-r--r-- 1 fhem dialout 5,0K Jan 31 23:46 analog_white.png
-rw-r--r-- 1 fhem dialout 2,2K Jan  9 23:40 digital.gif
-rw-r--r-- 1 fhem dialout  43K Jan  9 23:56 digitalhours.gif
-rw-r--r-- 1 fhem dialout  94K Jan  9 23:56 digitalminutes.gif
-rw-r--r-- 1 fhem dialout  94K Jan  9 23:43 digitalseconds.gif
-rw-r--r-- 1 fhem dialout  30K Feb  9 19:37 svg_analog.svg

fhem.cfg:

Code Auswählen Erweitern

attr WEB CssFiles niceclocks/niceclocks.css niceclocks/myCSS_8083.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam {"clockStyle" : "analog","clockSeconds" : "red","analogBorder" : true,"keepBg" : false,"fixMenu" : false,"keepHeader" : true }
clockFace ist also raus.

myCSS_8083.css:

Code Auswählen Erweitern

/* für den port 8083*/

/* Schrifteinstellung für den Wochentag*/

#ncDate > p:nth-child(1) {
  font-size: 9px;
  color:yellow;
}

/*Schrifteinstellung für das Datum */

#ncDate > p:nth-child(2) {
  font-size: 15px;
  color: blue;
}

#logo {
 
/* left: 31px;
  in fhem_niceclocks Zeile 229 geändert
  Zeile 229: logo.style.left="31px";*/
 
box-shadow: 5px 5px 5px #060606;
background: none repeat scroll 0% 0% #111;
border-radius: 8px;
border-spacing: 0px;
border: 1px solid #CCC;
padding: 9px;
}

Edit: Im IE 11 sieht es aus wie im 2. Screenshot, ohne das zu kleine Ziffernblatt in der Ecke, dafür ganz ohne Sekundenstriche und Umrandung.

[FHEm2005]

Hi mahowi,

das Problem ist hier, dass alle Einzelschritte auf einmal gemacht wurden. Wenn Du in der Reiehenfolge meiner Zusammenstellung vorgehst, kann der Fehler eher lokalisiert werden.

Im Ordner Images haben die Grafiken für die analoge Uhr bei mir folgende Rechte.

Code Auswählen Erweitern

-rw-r--r-- 1 fhem root   466 Jan 26 18:23 analoghours.png
-rw-r--r-- 1 fhem root   351 Jan 26 18:23 analogminutes.png
-rw-r--r-- 1 fhem root   354 Jan 27 17:27 analogseconds.png
-rw-r--r-- 1 fhem root 30245 Feb  8 16:10 svg_analog.svg

Hier scheint es wichtig zu sein, dass fhem zur Gruppe root gehört.
Der Rahmen und die Schriftänderungen gehören nicht zur Uhr, sondern wurden auf Wunsch extra gebaut.

Ich frage mich, warum Du die myCss_083.css im niceclocks-Ordner hast. Dort kannst Du sie auch nicht über fhem editieren.
Vorschlag: Die CSS-Datei in das Verzeichnis: /opt/fhem/www/pgm2 .  Dann passen auch die Rechte.
Die Initialisierung dann mit:

Code Auswählen Erweitern

attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css
Zum Editieren gehst Du dann über den Menüpunkt Edit files und findest Deine CSS unter den "styles". Du kannst dann die CSS-Datei zusätzlich für andere Anpassungen besser benutzen.

Und dann das Ganze schön schrittweise..... Nach jedem Schritt vorsichtshalber einen Neustart machen.

Gruß Eberhard

EDIT: Ich kann Dir bei dem IE leider nicht helfen, weil ich einen etwas älteren Rechner mit IE9 habe. Da wird die Uhr gar nicht angezeigt. Deshalb gibt es für mich nur den Firefox.

[mahowi]

Ok, dann nochmal ganz vorne und schrittweise. 

• Originalzustand mit Zip aus #1 und Einstellungen:
  

Code Auswählen Erweitern

attr WEB CssFiles niceclocks/niceclocks.css
attr WEB JavaScripts niceclocks/fhem_niceclocks.js
attr WEB niceclocksParam { "clockStyle" : "analog","clockFace" : "blue","analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }
Soweit ok, aber es wird kein Rahmen gezeichnet trotz "analogBorder" : true.

• Zip aus #75, diesmal also mit svg und denselben Einstellungen: Auch wieder kein Rahmen, aber sonst ok.
  
• Mit CSS aus #93 und #94 und entsprechender Änderung in fhem_niceclocks.js (logo.style.left="31px"; ), Einstellungen wie zuvor aber mit pgm2/myCSS_8083.css in CSSFiles:
  Diesmal wird der Rahmen angezeigt, die Uhr ist aber zum Menü verschoben.
• fhem_niceclocks.js und svg_analog.svg aus #99. Diesmal stimmt alles. 

Code Auswählen Erweitern

attr WEB niceclocksParam { "clockStyle" : "analog","clockCircle" : "blue","clockHours" : "yellow","clockSeconds" : "orange", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : true }

Jetzt muß ich nur wieder vernünftige Farben einstellen. 

Vielen Dank für die Hilfe!

[FHEm2005]

Wer sagt es denn?  Geht doch! 
Gruß
Eberhard

[moonsorrox]

Jetzt muß ich nur wieder vernünftige Farben einstellen. 

na das sieht doch wieder gut aus...!
Jetzt müßte nur noch einer alles zusammen in den Startpost bringen, so das jeder weiß, wenn er irgend etwas einstellen möchte egal ob nun mit oder ohne Rahmen und welche Farbe auch immer, er dann alles beisammen hat.
So wie ich das hier gerade sehe muss man alles zusammen suchen aus #1, #75, #93, #94 und #99

[FHEm2005]

Das geht nicht so einfach, weil der Initiator dieses Threads die letzten Beiträge wohl noch nicht mitbekommen hat.

Gruß Eberhard

[FHEm2005]

Bei einer Eingabe eines Hex-Wertes für die Farbe, z.B.

Code Auswählen Erweitern

"clockSeconds" : "#FF0000" für ROT bekommen ich Abbrüche durch Fehlinterpretation (Kein Scrollen mehr möglich!) . Hat jemand von euch erfolgreich für die neue Variante Hex-Zahlenwerte verwendet? Wenn ja welche Syntax?

Klartext und RGB-Angaben funktionieren.

Gruß
Eberhard

[mahowi]

Bei einer Eingabe eines Hex-Wertes für die Farbe, z.B.

Code Auswählen Erweitern

"clockSeconds" : "#FF0000" für ROT bekommen ich Abbrüche durch Fehlinterpretation (Kein Scrollen mehr möglich!) . Hat jemand von euch erfolgreich für die neue Variante Hex-Zahlenwerte verwendet? Wenn ja welche Syntax?

Klartext und RGB-Angaben funktionieren.

Der Fehler tritt bei mir auch auf. Hab's dann aber nicht weiter getestet. Muß die Raute eventuell in fhem maskiert werden (\#)?
Ich bin erst heute abend wieder in der Nähe meines Pis und komme von hier nur per ssh drauf und per telnet auf fhem.

[FHEm2005]

Wenn ich in der js-Datei die Default-Werte mit den Farben in Hex befülle, ist alles normal. Es muss also am Übergang Fhem => Javascript liegen.

Eine Maskierung des Doppelkreuzes mit "\#FF0000" führt zum o.g. fähler  .

Gruß
Eberhard

EDIT:Es scheint nicht zu funktionieren! Soll nur bei SVG-Dateien der Fall sein - und das Zifferblatt ist eine SVG!
Hier der Thread:   http://forum.fhem.de/index.php?topic=26870.0
Also geht nur Klartext oder rgb(0-255,0-255,0-255) oder rgb(1-100%,0-100%,0-100%) oder hsl(0-360,0-100%,0-100%)! Das dürfte reichen. Begraben wir das Doppelkreuz,Hash,Gatter und wie auch immer es heißen mag.

[mahowi]

Gilt wohl generell für fhem, daß man das "#" nicht in Atrributen verwenden kann. Wurde auch gerade in nem anderen Thread erwähnt. http://forum.fhem.de/index.php/topic,14425.msg260778.html#msg260778