FTUI Widget Theme: Unterschied zwischen den Versionen

Aus FHEMWiki
Zur Navigation springen Zur Suche springen
(Kapitel für bekannte Problembrowser eingefügt.)
(Typo, Datierung "Bekannte Probleme")
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 75: Zeile 75:
==Bekannte Probleme==
==Bekannte Probleme==
Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren.
Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren.
Aus diesem Grunde sei Empfohlen parallel andere Internet - Browser zu testen.
Aus diesem Grunde sei empfohlen, parallel andere Internet-Browser zu testen.


Gegenwärtiger Stand der getesteten Browser
Stand der getesteten Browser (9/2018)


{| class="wikitable"
{| class="wikitable"

Aktuelle Version vom 22. Januar 2022, 00:49 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

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.

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