FTUI Widget Theme: Unterschied zwischen den Versionen

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, ...

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

Ausrollung des Widgets in einem Forumsbeitrag

@@ Zeile 32: / Zeile 32: @@
 ===Vordefinierte Stylesheets===
 Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:
-<gallery>
+* fhem-blue-ui.css
-File:Theme_default.png|default
+* fhem-green-ui.css
-File:Theme_blue.png|fhem-blue-ui.css
+* fhem-mobile-ui.css
-File:Theme_green.png|fhem-green-ui.css
+* fhem-darkblue-ui.css
-File:Theme_mobile.png|fhem-mobile-ui.css
+* fhem-darkgreen-ui.css
-File:Theme_darkblue.png|fhem-darkblue-ui.css
+Zugehörige Beispielbilder siehe [[FHEM_Tablet_UI#Farben|Farben in FTUI]].
-File:Theme_darkgreen.png|fhem-darkgreen-ui.css
-</gallery>
 ===Hintergrundfarbe bei Tag===
@@ Zeile 74: / Zeile 72: @@
 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==
 *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]]