FTUI Widget Clock

Aus FHEMWiki
Todo: Die CSS-Klassen müssen noch überprüft werden.


Das Widget Clock ist ein Widget für FHEM Tablet UI, welches die aktuelle Zeit in digitaler Form wiedergibt.

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-format Format, siehe nachfolgende Tabelle
data-interval Aktualisierungsinterval in Milisekunden 1000
data-days Array der Bezeichner für Wochentagsnamen. Werden zur Ersetzung für die Formate l und D verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden, um englische Wochentagsnamen zu verwenden. ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"] data-days="english"
data-shortday-length Länge des abgekürzten Wochentagsbezeichners im Format D 3
data-months Array der Bezeichner für Monatsnamen. Werden zur Ersetzung für die Formate F und M verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden um englische Monatsnamen zu verwenden. ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] data-months="english"
data-shortmonth-length Länge des abgekürzten Monatsbezeichners im Format M 3

Bezeichner

Das Format wird als String angegeben. Die in der nachfolgenden Tabelle aufgeführten Bezeichner werden durch den aktuellen Wert ersetzt, die übrigen Zeichen bleiben stehen. Default "H:i:s"

Bezeichner Beschreibung
Y Jahreszahl, vierstellig
y Jahreszahl, zweistellig
m Monatszahl, mit führender Null
n Monatszahl, ohne führende Null
d Tag des Monats, mit führender Null
j Tag des Monats, ohne führende Null
H Stunde des Tages, mit führender Null
G Stunde im 24-Stunden-Format, ohne führende Null
i Minute der Stunde, mit führender Null
s Sekunde der Minute, mit führender Null
u Millisekunden mit führender Null
O Zeitunterschied zur Greenwich time (GMT) in Stunden
U Sekunden seit Beginn der UNIX-Epoche (January 1 1970 00:00:00 GMT)
w Wochentagszahl (Sonntag = 0, Samstag=6)
N Wochentagszahl nach ISO-8601 (Montag = 1, Sonntag = 7)
l Wochentag
D Wochentag, gekürzt
S Anhang der englischen Aufzählung für einen Monatstag, zwei Zeichen
F Monat als ganzes Wort, wie Januar oder März
M Monatsname gekürzt
g Stunde im 12-Stunden-Format, ohne führende Nullen
h Stunde im 12-Stunden-Format, mit führenden Nullen
a am/pm
A AM/PM
W ISO-8601 Wochennummer des Jahres

CSS-Klassen

sheet/row/cell-Layout
Klasse Beschreibung
sheet Startet eine neue Tabelle
row Neue Reihe in der aktuellen Tabelle
cell Neue Zelle (bzw. Spalte) in der aktuellen Reihe
cell-1-x Neue Zelle in der aktuellen Reihe mit einer festen Breite von X (z.B.: cell-1-3 (33%), cell-1-4 (25%))
cell-x Neue Zelle in der aktuellen Reihe mit einer festen Breite von X in Prozent (z.B.: cell-20 (20%), cell-40 (40%))
left-align Inhalt der Zelle linksbündig
right-align Inhalt der Zelle rechtsbündig
bottom-align Inhalt der Zelle am unteren Rand
top-align Inhalt der Zelle am oberen Rand
center-align Inhalt der Zelle zentriert
row/col-Layout
Klasse Beschreibung
col Neue Spalte in der aktuellen Zeile. Breite automatisch.
col-1-x Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%))
col-x Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%))
hbox/vbox-Layout
Generelle Klassen für die Positionierung
Vordergrundfarben
Hintergrundfarben
Rahmen
Größen
Schriftstil
Sonstiges

Beispiele

<div data-type="clock"></div>
<div data-type="clock" data-format="Y-m-d H:i:s"></div>
<div data-type="clock" data-format="l, j. F Y"></div>