FTUI Widget Theme: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Formulierung aufgehübscht.)
Keine Bearbeitungszusammenfassung
 
(8 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 30: Zeile 30:


==Beispiele==
==Beispiele==
===Vordefinierte Stylesheets===
Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:
* fhem-blue-ui.css
* fhem-green-ui.css
* fhem-mobile-ui.css
* fhem-darkblue-ui.css
* fhem-darkgreen-ui.css
Zugehörige Beispielbilder siehe [[FHEM_Tablet_UI#Farben|Farben in FTUI]].
===Hintergrundfarbe bei Tag===
===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.
Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Bei Tageslicht nimmt dessen Reading ''light'' den Wert ''"6"'' an.
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
defmod Daemmerung Twilight <latitude> <longitude>
defmod Daemmerung Twilight <latitude> <longitude>
Zeile 44: Zeile 53:
In der HTML-Datei wird im ''<Head>'' das Widget platziert:
In der HTML-Datei wird im ''<Head>'' das Widget platziert:
<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>
Zeile 55: Zeile 64:
           data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
           data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
</syntaxhighlight>
</syntaxhighlight>
===Hintergrundbilder für die Dämmerung===
Das FHEM-Device ''Twilight'' unterscheidet zwischen astronomischer, nautischer und bürgerlicher Dämmerung. Auf dieser Basis können Tagesanfang und -ende einfach mit abgestuften Hintergrundbildern verknüpft werden.
<gallery>
File:FTUI_Daemmerung_1.jpg
File:FTUI_Daemmerung_2.jpg
File:FTUI_Daemmerung_3.jpg
</gallery>
==Bekannte Probleme==
Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren.
Aus diesem Grunde sei empfohlen, parallel andere Internet-Browser zu testen.
Stand der getesteten Browser (9/2018)
{| class="wikitable"
|-
! Browser!! Version !! Funktion
|-
| Chrome || 69.0.3497.100 || OK
|-
| Mozilla Firefox || 62.0 || NOK
|-
| Internet Explorer || ? || ?
|-
| Microsoft Edge || ? || ?
|-
| UC/Browser || ? || ?
|-
| Opera || ? || ?
|-
| Safari || ? || ?
|}
==Weitere Informationen==
==Weitere Informationen==
*Ausrollung des Widgets in einem [https://forum.fhem.de/index.php/topic,69259.0.html Forumsbeitrag]
*Ausrollung des Widgets in einem [https://forum.fhem.de/index.php/topic,69259.0.html Forumsbeitrag]


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

Aktuelle Version vom 3. August 2024, 09:48 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, ...

  • FTUI Theme Tag.png
  • FTUI Theme Abend.png
  • FTUI Theme Nacht.png

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

Vordefinierte Stylesheets

Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:

  • fhem-blue-ui.css
  • fhem-green-ui.css
  • fhem-mobile-ui.css
  • fhem-darkblue-ui.css
  • fhem-darkgreen-ui.css

Zugehörige Beispielbilder siehe Farben in FTUI.

Hintergrundfarbe bei Tag

Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device Twilight. Bei Tageslicht nimmt dessen Reading light 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="light"
          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" />

Hintergrundbilder für die Dämmerung

Das FHEM-Device Twilight unterscheidet zwischen astronomischer, nautischer und bürgerlicher Dämmerung. Auf dieser Basis können Tagesanfang und -ende einfach mit abgestuften Hintergrundbildern verknüpft werden.

  • FTUI Daemmerung 1.jpg
  • FTUI Daemmerung 2.jpg
  • FTUI Daemmerung 3.jpg

Bekannte Probleme

Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren. Aus diesem Grunde sei empfohlen, parallel andere Internet-Browser zu testen.

Stand der getesteten Browser (9/2018)

Browser Version Funktion
Chrome 69.0.3497.100 OK
Mozilla Firefox 62.0 NOK
Internet Explorer ? ?
Microsoft Edge ? ?
UC/Browser ? ?
Opera ? ?
Safari ? ?

Weitere Informationen

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