(Schöne) Uhr in FHEM statt Logo

[KernSani]

and here we go.

Änderungen in der angehängten Test-Version:

• das Ganze SVG-Einfärben-Geraffel neu gemacht. Sekundenstriche gehen nichtmehr verloren, Aufruf asynchron...
• FHEm2005s letzte SVG-Datei eingebunden
• Coding (.js und .css) aufgeräumt

Falls die Variante zufrieden stellend läuft würde ich sie an post #1 anhängen und dann habe ich schon weitere Ideen:

• Die Zeiger noch SVGen (keine Ahnung ob das überhaupt geht)
• Das Ziffernblatt farblich abstufen (z.B. die Stundenstriche in einer anderen Farbe

Viel Spass,

Oli

[stromer-12]

Es sind alle Teilstriche da, und mein FF klemmt auch nicht mehr.
auf meinen Handy braucht Chrome noch ca 15 Sekunden für die eine Raumansicht, das waren vorher 2:10 min

[KernSani]

das waren vorher 2:10 min

und ohne Uhr?

[stromer-12]

Sind es 2 sek.

[FHEm2005]

Ich glaube die Umrechnung der 61 Elemente von 1200x1200 auf 120x120 frisst viel Zeit. Nächste Stufe wäre dann ein Grafik in der Größe 120x 120 nativ zu befüllen. Mal sehen was sich da heute noch machen läßt.

Gruß
Eberhard

Edit:
@oli: Die Zeiger in *.svg kannste haben. Bezüglich der unterschiedlichen Farben bei den Sekundenstrichen, musst Du die Grafik teilen auf Stunden und Sekunden. Da der Hintergrund transparent ist kannst Du sie übereinanderlegen. Deine Vorstellungen sind m.E. umsetzbar, gehen aber auf Kosten der Ladezeit. Vielleicht 2 Versionen, je nach Web-Instanz?

[carlos]

Beim save fhem.cfg kommt bei mir sogar immer ein timeout.
Ohne Uhr gehts schnell-
Gruß
Carlos

[FHEm2005]

Hi Oli,

in der Anlage habe ich ein Zifferblatt in der Größe 120px x 120px. Dieses hat weitere Besonderheiten. Die Grafik besteht jetzt aus 3 verschiedenen Ebenen, die dadurch getrennt angesprochen werden können.

1. Der äußere Kreis ist mit id="layer1" ansprechbar.
<g
     transform="translate(-539.74471,-539.75957)"
     id="layer1"
     style="display:inline"> ............... </g>

2. Die 12 Stundenstriche sind mit id="layer2" ansprechbar.
<g
     transform="translate(-539.74471,-539.75957)"
     id="layer2"
     style="display:inline"> ............... </g>

3. Die 60 Minutenstriche sind mit id="layer3" ansprechbar.
<g
     transform="translate(-539.74471,-539.75957)"
     id="layer3"
     style="display:inline"> ............... </g>


Jedes Element für sich kann aus- bzw. eingeblendet werden und so das Design des Zifferblattes verändern.
Einschalten: style="display:inline"  ; Ausschalten: style="display:none"

Gruß
Eberhard

[FHEm2005]

So, jetzt habe ich auch die neueste Version (aus #75) installiert.

Alles soweit ok, bis auf drei Sachen:
1. Ich habe keinen Rahmen passend zum Design "dark" mehr.

2. In der linken oberen Ecke habe ich ein Mini_Ziffernblatt. Das war wieder normal, nachdem ich in der fhem_niceclocks.js in Zeile 246 - 248 die Werte 1200 in 120 geändert habe.

3. Bei mir ist das Zifferblatt gegenüber den Zeigern nicht exakt positioniert. Das war zu beheben indem ich im Element svg{... margin: 2px 0px} nach  margin: 0px 0px geändert habe. In der CSS-Datei habe ich das Element nicht gefunden; in der JS-datei auch nicht. KernSani müsste wissen wo es liegt.

Gruß Eberhard

Edit: Ich konnte nicht bis drei zählen

[FHEm2005]

Hier nunr die drei Zeiger als SVG im Format 120 x 120.

analoghours.svg: layer1 = Zeiger, layer2 = Achse;
analogminutes.svg: layer4 = Zeiger, layer5 = Achse;
analogseconds.svg: layer6 = Zeiger, ohne Achse, deshalb in der Darstellung ganz nach unten.

Ich habe mal mein Zifferblatt "verbogen"; ob das Sinn der Sache wäre, sei mal dahingestellt. 

Grüße
Eberhard

[PNinBB]

Hallo,
ich habe die zip-Datei von #75 installiert. Alles funktioniert, insbesondere sind alle Striche da !
Wo/wie kann ich denn nun die Farben ändern ?
Besten Dank an die "Macher" !
Gruß
Peter

[Puschel74]

Daumen hoch
Die Uhr ist genial.

[FHEm2005]

@PNinBB:

Zur Farbänderung des gesamten Zifferblattes siehe #71 .

der niceclocksParam "clockFace" ist weiterhin für die Farbe verantwortlich, frisst jetzt aber alle HTML-Farben ("red", "#FF0000", oder "rgb(255,0,0)")

Beispiel für eine Web-Instanz mit limettengünem Zifferblatt:

Code Auswählen Erweitern

attr <deine Web-Instanz> niceclocksParam {"clockStyle" : "analog","clockFace" : "limegreen","keepBg" : false,"fixMenu" : false,"keepHeader" : true }


Eine gute Tabelle für Farben (auch für Farbschwache  ) befindet sich unter:
https://i-msdn.sec.s-msft.com/dynimg/IC24340.png

Das was ich oben gezeigt habe, ist Zukunftsmusik. Ich wollte zeigen, wie flexibel die Uhr mal geplant ist. Wer sich mit Notepad++ auskennt, kann sich schon heute sein individuelles Zifferblatt basteln. Besser ist es aber zu warten, bis KernSani die Parameter einprogrammiert hat. Das ist eine Nummer zu hoch für mich.

Gruß
Eberhard

@KernSani
Hi Oli,
was hältst Du davon, als nächstes die Digital-Uhr anzupacken und die Ziffern zu "färben". Allerdings würde ich gerne wissen, ob dafür Bedarf vorhanden ist. Will  Jemand so etwas haben, oder arbeitet die "Meute" mit analoger Uhr?

[Icinger]

Analog

[PNinBB]

@ FHEm2005:
Danke für die Hinweise. Habe mal mit Notepad++ an den Farben "gedreht". Alles gelungen (geht zwar wie "Steine sägen"!), ich habe aber keine Möglichkeit gefunden, den äußeren Ring einzufärben. Ich warte da lieber auf die "Zukunftsmusik.
Und was die Frage "digital" oder "analog" betrifft: ich bevorzuge die analoge Uhr.
Gruß
Peter

[moonsorrox]

Analog