FTUI Widget Theme: Unterschied zwischen den Versionen

Aus FHEMWiki
Zur Navigation springen Zur Suche springen
KKeine Bearbeitungszusammenfassung
K (Formulierung aufgehübscht.)
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 31: Zeile 31:
==Beispiele==
==Beispiele==
===Hintergrundfarbe bei Tag===
===Hintergrundfarbe bei Tag===
Bei Tageslicht soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Dessen Reading ''"light"'' enthält bei Tageslicht den Wert ''"6"''.
Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Bei Tageslicht nimmt ''STATE'' den Wert ''"6"'' an.
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
defmod Daemmerung Twilight <latitude> <longitude>
defmod Daemmerung Twilight <latitude> <longitude>
Zeile 45: Zeile 45:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung"  
<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung"  
           data-get="light" data-get-on="6" data-get-off="!6" />
           data-get-on="6" data-get-off="!6" />
</syntaxhighlight>
</syntaxhighlight>



Version vom 18. August 2018, 02:30 Uhr

Das Theme Widget ist ein Widget für FHEM Tablet UI, mit dem - gesteuert über ein Device - ein Stylesheet aktiviert und deaktiviert werden kann. Damit lassen sich kontextspezifische Designs realisieren, z.B. abhängig von Homestatus, Tageszeit, Jahreszeit, ...

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-device FHEM-Device, dessen Reading ausgewertet werden soll
data-get Name des Readings, das den Wert enthält STATE
data-get-on Wert, bei dem die css-Datei aktiviert wird true,1,on
data-get-off Wert, bei dem die css-Datei deaktiviert wird !on
href Pfad und Name der angepassten css-Datei href="css/Layout_Tag.css"

Das Widget muss im <Head> innerhalb eines <link rel="stylesheet" ...> angeordnet werden, vgl. Beispiel.

Hinweise

  • Man darf die css/fhem-tablet-ui.css nicht deaktivieren.

Beispiele

Hintergrundfarbe bei Tag

Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device Twilight. Bei Tageslicht nimmt STATE den Wert "6" an.

defmod Daemmerung Twilight <latitude> <longitude>

Die Datei "Layout_Tag.css" enthält die Farbdefinition:

body {
    background-color: #3A374A !important;
}

In der HTML-Datei wird im <Head> das Widget platziert:

<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung" 
          data-get-on="6" data-get-off="!6" />

Umschaltung zwischen alternativen Stylesheets (hier day.css und night.css)

<link rel="stylesheet" href="css/day.css" data-type="theme"
          data-device="ftui1" data-get="theme" data-get-on="day" data-get-off="!day" />
<link rel="stylesheet" href="css/night.css" data-type="theme"
          data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />

Weitere Informationen