FTUI Widget Clock: Unterschied zwischen den Versionen

Aus FHEMWiki
K (typo)
K (Abschnitt CSS-Klassen gelöscht)
Zeile 88: Zeile 88:
|style="text-align:center"|'''W'''||ISO-8601 Wochennummer des Jahres
|style="text-align:center"|'''W'''||ISO-8601 Wochennummer des Jahres
|}
|}
== CSS-Klassen ==
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}
<div class="toccolours mw-collapsible mw-collapsed">'''hbox/vbox-Layout'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Generelle Klassen für die Positionierung'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Vordergrundfarben'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Hintergrundfarben'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Rahmen'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Größen'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Schriftstil'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">'''Sonstiges'''<div class="mw-collapsible-content">
{|class="wikitable" style="width: 100%;"
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}
|}</div>
</div>


==Beispiele==
==Beispiele==

Version vom 13. Februar 2017, 10:10 Uhr

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

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>