FTUI Widget Clock: Unterschied zwischen den Versionen

Aus FHEMWiki
K (typo)
Keine Bearbeitungszusammenfassung
 
(11 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Todo|Die CSS-Klassen müssen noch überprüft werden.}}
Das [[{{PAGENAME}}|Widget Clock]] ist ein Widget für [[FHEM Tablet UI V2]], welches die aktuelle Zeit des jeweiligen Endgerätes in digitaler Form wiedergibt.
 
Das [[{{PAGENAME}}|Widget Clock]] ist ein Widget für [[FHEM Tablet UI]], welches die aktuelle Zeit in digitaler Form wiedergibt.


<gallery>
<gallery>
Zeile 17: Zeile 15:
!Beispiel
!Beispiel
|-
|-
|'''data-format'''||Format, siehe nachfolgende Tabelle||
|'''data-format'''||Format, siehe nachfolgende Tabelle||||
|-
|-
|'''data-interval'''||Aktualisierungsinterval in Milisekunden||1000||
|'''data-interval (''entfallen ab 10/2018!'')'''||Aktualisierungsinterval in Millisekunden||1000||
|-
|'''data-offset'''||Zeitzonenverschiebung
 
data-offset="2" => +2h gegenüber der FHEM-Server-Zeit.
 
data-offset="-1" => -1h gegenüber der FHEM-Server-Zeit.
||0||
|-
|-
|'''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-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-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-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
|'''data-shortmonth-length'''||Länge des abgekürzten Monatsbezeichners im Format M||3||
|}
|}
== Hinweise ==
Die Uhrzeit wird beim Start mit der FHEM-Server-Zeit per '{localtime}' abgeglichen. Man hat also auf seinem Telefon immer die aktuelle Home-Zeit in der FTUI-Anzeige, egal wo man sich gerade auf der Welt befindet.


== Bezeichner ==
== Bezeichner ==
Zeile 89: Zeile 97:
|}
|}


== CSS-Klassen ==
==Beispiele==
<syntaxhighlight lang="html">
<div data-type="clock"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_01.png]]


{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
<syntaxhighlight lang="html">
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
<div data-type="clock"
|-
    data-format="Y-m-d H:i:s"></div>
!class="mw-collapsible-content"|Klasse!!Beschreibung
</syntaxhighlight>
{{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}}
[[File:FTUI_Widget_Clock_05.png]]
|}


{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
<syntaxhighlight lang="html">
!colspan="2" style="text-align: left;"|row/col-Layout
<div data-type="clock" data-format="l, j. F Y"></div>
|-
</syntaxhighlight>
!class="mw-collapsible-content"|Klasse!!Beschreibung
[[File:FTUI_Widget_Clock_06.png]]
{{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">
<syntaxhighlight lang="html">
{|class="wikitable" style="width: 100%;"
<div data-type="clock" data-format="H:i"></div>
{{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}}
</syntaxhighlight>
|}</div>
[[File:FTUI_Widget_Clock_02.png]]
</div>


<div class="toccolours mw-collapsible mw-collapsed">'''Schriftstil'''<div class="mw-collapsible-content">
<syntaxhighlight lang="html">
{|class="wikitable" style="width: 100%;"
<div data-type="clock" data-format="l"></div>
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
</syntaxhighlight>
|}</div>
[[File:FTUI_Widget_Clock_03.png]]
</div>


<div class="toccolours mw-collapsible mw-collapsed">'''Sonstiges'''<div class="mw-collapsible-content">
<syntaxhighlight lang="html">
{|class="wikitable" style="width: 100%;"
<div data-type="clock" data-format="F"></div>
{{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}}
</syntaxhighlight>
|}</div>
[[File:FTUI_Widget_Clock_04.png]]
</div>
 
==Beispiele==
<source lang="html">
<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>
</source>


[[Kategorie:FHEM Tablet UI]]
[[Kategorie:FHEM Tablet UI V2|Clock]]

Aktuelle Version vom 2. August 2024, 15:39 Uhr

Das Widget Clock ist ein Widget für FHEM Tablet UI V2, welches die aktuelle Zeit des jeweiligen Endgerätes in digitaler Form wiedergibt.

  • FTUI Widget Clock 01.png
  • FTUI Widget Clock 02.png
  • FTUI Widget Clock 03.png
  • FTUI Widget Clock 04.png

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-format Format, siehe nachfolgende Tabelle
data-interval (entfallen ab 10/2018!) Aktualisierungsinterval in Millisekunden 1000
data-offset Zeitzonenverschiebung

data-offset="2" => +2h gegenüber der FHEM-Server-Zeit.

data-offset="-1" => -1h gegenüber der FHEM-Server-Zeit.

0
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

Hinweise

Die Uhrzeit wird beim Start mit der FHEM-Server-Zeit per '{localtime}' abgeglichen. Man hat also auf seinem Telefon immer die aktuelle Home-Zeit in der FTUI-Anzeige, egal wo man sich gerade auf der Welt befindet.

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>

FTUI Widget Clock 01.png 

<div data-type="clock"
     data-format="Y-m-d H:i:s"></div>

FTUI Widget Clock 05.png 

<div data-type="clock" data-format="l, j. F Y"></div>

FTUI Widget Clock 06.png 

<div data-type="clock" data-format="H:i"></div>

FTUI Widget Clock 02.png 

<div data-type="clock" data-format="l"></div>

FTUI Widget Clock 03.png 

<div data-type="clock" data-format="F"></div>

FTUI Widget Clock 04.png

Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Clock&oldid=39440“