FTUI Widget Clock

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

vbox	Vertikale Box - Inhalte übereinander
hbox	Horizontale Box - Inhalte nebeneinander
card	Eine "Haupt"-Box
phone-width	Breite darf nicht unter die Display-Breite des Gerätes sinken
full-height	Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height)
full-width	Inhalt geht über die gesamte Breite des Browser-Fensters (100% width)
grow-0	Box darf nicht wachsen
grow-1	Standardgröße der Box
grow-2	Box darf um das doppelte wachsen
grow-x	Box darf um das X-fache wachsen
items-top	Inhalte der Box werden oben ausgerichtet
items-center	Inhalte der Box werden zentriert
items-bottom	Inhalte der Box werden unten ausgerichtet
items-space-between	Übriger Platz zwischen den Elementen in der Box
items-space-around	Übriger Platz um die Elemente in der Box

Generelle Klassen für die Positionierung

inline	Positioniert Elemente in einer Reihe, kein Zeilenumbruch
newline	Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch
top-space	15px zusätzlicher Platz oben
top-space-2x	30px zusätzlicher Platz oben
top-space-3x	45px zusätzlicher Platz oben
left-space	15px zusätzlicher Platz links
left-space-2x	30px zusätzlicher Platz links
left-space-3x	45px zusätzlicher Platz links
right-space	15px zusätzlicher Platz rechts
right-space-2x	30px zusätzlicher Platz rechts
right-space-3x	45px zusätzlicher Platz rechts
top-narrow	-15px näher am oberen Rand
top-narrow-2x	-30px näher am oberen Rand
top-narrow-10	-10px näher am oberen Rand
left-narrow	15px weiter links
left-narrow-2x	30px weiter links
left-narrow-3x	45px weiter links
right-narrow	15px weiter rechts
right-narrow-2x	30px weiter rechts
right-narrow-3x	45px weiter rechts
centered	Horizontal zentriert (muss im Eltern-<div> gesetzt werden)
wider	15px Abstand rund um das Element
narrow	Weniger Abstand zum Element darüber
fullsize	100% Breite und Höhe
compressed	Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum das Icon benötigt wird
height-narrow	Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können
w1x	Einfache fixe Breite
w2x	Doppelte fixe Breite
w3x	Dreifache fixe Breite
maxw40	Maximale Breite 40px
doublebox-v	Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können
doublebox-h	Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können
triplebox-v	Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können

Vordergrundfarben

red	Vordergrundfarbe rot
green	Vordergrundfarbe grün
blue	Vordergrundfarbe blau
lightblue	Vordergrundfarbe hellblau
orange	Vordergrundfarbe orange
gray	Vordergrundfarbe grau
lightgray	Vordergrundfarbe hellgrau
white	Vordergrundfarbe weiß
black	Vordergrundfarbe schwarz
mint	Vordergrundfarbe minzgrün
yellow	Vordergrundfarbe gelb

Hintergrundfarben

bg-red	Hintergrundfarbe rot
bg-green	Hintergrundfarbe grün
bg-blue	Hintergrundfarbe blau
bg-lightblue	Hintergrundfarbe hellblau
bg-orange	Hintergrundfarbe orange
bg-gray	Hintergrundfarbe grau
bg-lightgray	Hintergrundfarbe hellgrau
bg-white	Hintergrundfarbe weiß
bg-black	Hintergrundfarbe schwarz
bg-mint	Hintergrundfarbe minzgrün
bg-yellow	Hintergrundfarbe gelb

Rahmen

verticalLine	Grauer Linie am rechten Rand des Elements
border-black	Schwarzer Rahmen um das Element
border-white	Weißer Rahmen um das Element
border-orange	Oranger Rahmen um das Element
border-red	Roter Rahmen um das Element
border-green	Grüner Rahmen um das Element
border-mint	Minzgrüner Rahmen um das Element
border-lightblue	Hellblauer Rahmen um das Element
border-blue	Blauer Rahmen um das Element
border-gray	Grauer Rahmen um das Element
border-yellow	Gelber Rahmen um das Element
border-lightgray	Hellgrauer Rahmen um das Element

Größen

mini	Setzt die Größe des Elementes auf 50%
tiny	Setzt die Größe des Elementes auf 60%
small	Setzt die Größe des Elementes auf 80%
normal	Setzt die Größe des Elementes auf 100%
large	Setzt die Größe des Elementes auf 125%
big	Setzt die Größe des Elementes auf 150%
bigger	Setzt die Größe des Elementes auf 200%
tall	Setzt die Größe des Elementes auf 350%
great	Setzt die Größe des Elementes auf 450%
grande	Setzt die Größe des Elementes auf 600%
gigantic	Setzt die Größe des Elementes auf 144px

Schriftstil

thin	dünne Schrift
bold	fette Schrift
darker	Schriftfarbe grau
truncate	Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt

Sonstiges

blank	Öffnet die angegebene URL in einem neuen Fenster
transparent	Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)
half-transparent	Element ist halb durchscheinend (opacity: 0.5)
blurry	Element wird in einen stark verschwommen, grauen Schatten umgewandelt
shake	Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden.
fail-shake	Element wackelt kurz hin und her und bleibt dann stehen
marquee	Element wandert wiederholt von rechts nach links
icon round	Erzeugt einen Hintergrund mit abgerundeten Kanten
icon square	Erzeugt einen Hintergrund mit eckigen Kanten
readonly	Manuelle Änderung des Device-Zustandes nicht möglich
blink	Blinkende Animation für Label- oder Switch-Widget
rotate-90	Element (z.B. Bild) um 90° rotieren
horizontal	Element horizontal ausrichten
circleborder	Runder Rahmen um ein Label-Widget
autohide	Versteckt das Element, wenn das angegebene Reading ungültig ist
notransmit	Verhindert den Versand von Befehlen an FHEM
tab	Fehler: Klasse nicht vorhanden
FS20	Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format
value	Zeigt ein Label am Element, das den aktuellen Wert enthält
novalue	Zeigt den Wert nicht als Text, nur als Grafik an
timestamp	Zeigt den Timestamp eines Readings statt dessen Inhalt
percent	Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um.
nocache	Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache

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>