Uhr auf FHEM-Seite: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Verzeichnis der Dateien hinterlegt)
(→‎Links: Link ergänzt)
 
Zeile 29: Zeile 29:
== Links ==
== Links ==
* Eine weitere Möglichkeit, auf der FHEM-Seite eine Uhr darzustellen, wird in {{Link2Forum|Topic=31912|LinkText=diesem Forenthread}} beschrieben
* Eine weitere Möglichkeit, auf der FHEM-Seite eine Uhr darzustellen, wird in {{Link2Forum|Topic=31912|LinkText=diesem Forenthread}} beschrieben
* Und noch eine Möglichkeit, auf der FHEM-Seite eine Uhr darzustellen, wird in {{Link2Forum|Topic=53286|LinkText=diesem Forenthread}} beschrieben
* Und noch eine Möglichkeit (PTB/Bahnhofsuhr), auf der FHEM-Seite eine Uhr darzustellen, wird in {{Link2Forum|Topic=53286|LinkText=diesem Forenthread}} beschrieben
* Eine clock.js inkl. f18 für die Bahnhofsuhr {{Link2Forum|Topic=53286|Message=449780|LinkText= aus diesem Beitrag}} gibt es {{Link2Forum|Topic=53286|Message=746696|LinkText= in diesem Beitrag}}


[[Kategorie:Code Snippets]]
[[Kategorie:Code Snippets]]

Aktuelle Version vom 12. Januar 2018, 19:23 Uhr

Das "lächelnde Haus" ist natürlich das FHEM-Logo. Doch könnte es ja sein, dass eine eher nüchterne Seitendarstellung gewünscht ist, etwa, indem dort eine sekundengenaue Uhr eingeblendet wird.

Dazu sind - bei Verwendung von pgm2 - folgende Schritte vorzunehmen. Im Verzeichnis /fhem/www/pgm2 sind die zu ändernden Dateien zu finden.

1.Modifikation der Datei svg.jsAns Ende wird der folgende Code gestellt:

function GetClock(){
 d = new Date();
 nhour = d.getHours();
 nmin  = d.getMinutes();
 if(nmin <= 9){nmin="0"+nmin}
 document.getElementById('logo').innerHTML=nhour+":"+nmin;
 setTimeout("GetClock()", 1000);
}
window.onload=GetClock;

Selbstverständlich könnte man die Anzeige auf Sekunden ausdehnen, oder noch etwas komplizierter gestalten - der obige Code soll nur als Beispiel dienen. Auch erfolgt die Abfrage hier alle 1000 Millisekunden - das kann man bei reduziertern Genauigkeitsanforderungen auch heraufsetzen.

2. Modifikation der Datei style.css(bzw. von <xxx>style.css, wenn man einen anderen als den Default-Style verwendet)

Der Selektor für den Bereich des Logos wird ausgetauscht gegen:

#logo  { position:fixed; top:30px; left:20px;
      width:100px; height:105px; text-align:center;
      font-family:Times-Roman; font-size:xx-large; font-weight:bold;
      }

Selbstverständlich kann man hier noch verschiedene eigene Attribute einbauen, etwa die Farbe und Schriftgröße an eigene Wünsche anpassen.

Links