FTUI Widget Clock

Aus FHEMWiki
Version vom 13. Februar 2017, 00:05 Uhr von Ulm32b (Diskussion | Beiträge) (Erste Version. CSS-Klassen ungeprüft eingefügt.)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Todo: Die CCS-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>