| 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>
