(Schöne) Uhr in FHEM statt Logo

[golem]

Digital (Text only)

[raimundl]

Danke!

Analog

LG

[Pi-Heiko]

Hallo zusammen,

da kommt man nach einigen Tag mal wieder zurück und ihr habt gewaltig was umgesetzt.
Da muss man auch einmal ein Lob aussprechen.

Ich habe nun einmal eine Frage:
wie kann ich die Größe des Tages und des Datums verändern ?

Gruß Heiko

[FHEm2005]

Hi Heiko,

ich habe mir für jede Web-Instanz eine eigene CSS_Datei angelegt, die nur nur bei Aufruf über deren Port verwendet wird. Es gibt bei mir eine myCSS_8083.css, myCss_8084.css und eine myCSS_8085.css im Ordner   /opt/fhem/www/pgm2  . Sie war leer bis auf    /* für den port 8083*/ usw. in der ersten Zeile.

Danach sind die CSS-Dateien über das Menue Edit files im Bereich der css-Dateien zu finden.  In Deine verwendete CSS-Datei fügst Du mi copy/past den nachfolgenden Code ein.

Code Auswählen Erweitern

/* 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;
}

Damit die CSS-Datei auch aktiv wird habe ich sie natürlich mit einem Attribut eingebunden:

Code Auswählen Erweitern

attr WEB CssFiles pgm2/myCSS_8083.css niceclocks/niceclocks.css

Wenn alles geklappt hat, sieht Dein Datum wie das Photo zeigt aus. Das ist nur zum Zeigen, ich werde das bei mir wieder ändern.
Viel Erfolg!

Gruß
Eberhard

[FHEm2005]

Die bisherige Anweisung, in der die Uhr an den style = dark angepasst wird, passt seit der letzten SW-Änderung nicht mehr. Deshalb gibt es hier eine neue Anweisung auf Basis einer eigenen CSS-Datei. Hierzu siehe auch der vorherige Thread.  Dazu ist in der myCSS_8083.css (oder wie die eigene CSS_Datei auch heißen mag) folgendes hinzuzufügen:

Code Auswählen Erweitern

#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;
}

Leider muss zur exakten Positionierung die Datei fhem_niceclocks.js in der Zeile 229 (bezogen auf notepad++) wie folgt geändert werden:

Code Auswählen Erweitern

logo.style.left="31px";

Gruß
Eberhard

[Pi-Heiko]

Hallo,

woran kann das nur liegen?

habe die Aktuelle Niceclock mal heruntergeholt und mir eine css angelegt mit den beiden Erweiterungen in den 2 letzten Thread.
Dabei ist die Uhr über meinem FHEM logo angezeigt und ohne die eingegebenen Farben und Rahmen.
und in meiner Hauptseite hat es etliche sachen zerschossen und komplett falsch dargestellt.
Kann das mit dem Webbrowser zusammenhängen zufällig ?

Grüße

[FHEm2005]

Welchen Browser hast Du?

Hast Du vielleicht vergessen, die CSS-Dateien aus #93 einzubinden? Aufpassen, wenn Du bereits eine eingebunden hast, dann ist es erforderlich die Zweite mit Leerzeichen getrennt hinter die Bestehende zu schreiben (Siehe Muster in #93).

Gruß
Eberhard

[FHEm2005]

Ich habe die SVG-Datei nocheinmal überarbeitet. In der bisherigen Version wurde jedes der 73 Elemente bezüglich ihrer Farbe nacheinander geändert.

Durch Verschiebung der Eigenschaften nach oben in die Ebenen hinein, wird je Ebene die Farbe einmal verändert. Damit müssen aus der js-Datei heraus nur noch drei Elemente angesprochen werden. Ich erhoffe mir von der schlankeren Struktur eine (vielleicht) schnellere Ladezeit und für Oli eine leichtere Programmierung.

Die Gesamtstruktur aus #81 bezgl. der Ebenen und der zugeörigen ID's hat sich nicht verändert.

Die Datei arbeitet mit der aktuelle fhem_niceclocks.js zusammen.

Grüße
Eberhard

@Oli: Ich habe Dir eine PN geschickt. Die digitale Variante hat sich wohl erledigt.

[FHEm2005]

Nach der hervorragenden Vorarbeit von KernSani habe ich mir erlaubt die js-Datei in der Darstellung in einigen Punkten zu ändern.

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.

Dafür gibt es die drei Bildelemente einzeln: clockCircle, clockHours und clockSeconds. Damit können die einzelnen Bildelemente (bis auf die Zeiger) unabhängig von einander eingefärbt werden.

Damit man zur Gestaltung freie Hand hat, besteht nun die Möglichkeit jedes Element auszublenden. Dafür gibt es die Variablen:
visCircle, visHours und folgerichtig auch visSeconds. Alle diese Variablen können lediglich zwei unterschiedliche WErte annehmen: 'inline' (default-Wert) oder 'none'

Beispiel:

Code Auswählen Erweitern

"visCircle" : "none"
blendet den Kreis aus. Eine Variable "visCircle" : "inline"  macht keinen Sinn, da bereits default.

Alle anderen Parameter habe ich nicht angefasst!

In dem Bild habe ich euch ein paar Muster aufgezeigt. So sollte für jeden Geschmack etwas dabei sein. 

Viele Grüße
Eberhard

Edit: die Beschreibung des letzten Bildes ist falsch!! richtig:
Default-Werte mit:
"visHours": "none" und
"clockSeconds":"red"
"clockCircle":"limegreen"

[FHEm2005]

Noch eine kleine kosmetische Änderung:

Die Layer waren wie folgt verteilt.

layer3    = Sekunden
layer2    = Stunden
layer1    = Kreis

Die Sekundenstriche legten sich auf die Stundenstriche. das sah blöd aus. Deshalb habe ich die Hirarchie geädert, dass sich die Stundenstriche auf die Sekundenstriche legen.

Es muss owohl die svg-Datei im niceclocks/image-Ordner als auch die js-Datei im niceclocks-ordner getauscht werden.

Gruß
Eberhard

[PNinBB]

Ich habe von #99 die js-Datei und auch die Uhr-Datei eingebaut. Farben und Sichtbarkeit soweit OK.
Nur verschiebt sich etwas im Webfrontend (oben links); die Kommandozeile ist überdeckt und nicht mehr funktionstüchtig !?
Gruß
Peter
(//)

Nachtrag: habe fhem auch neu gestartet; gleiches Bild.

[Inputsammler]

Echt cool

Eine sehr nette spielerei.

Danke

[SimonHipp]

Guten Abend,

ich habe das Script aus der Seite1 in Verwendung und wollte nun heute endlich mal mein iPad als Wandanzeige in Betrieb nehmen.
Leider läuft hier die "Digital" Uhr nicht, es stehen nun 0000 da.
Hat hier bereits jemand eine Lösung für das Problem?
Bin für jeden Tipp dankbar!


Grüße
Simon

[FHEm2005]

@PNinBB:

Schau mal bei #34 bis #36 nach, da war das Problem schon mal.

Gruß
Eberhard

[FHEm2005]

@ SimonHipp:

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

Gruß
Eberhard