FTUI Widget Theme: Unterschied zwischen den Versionen
Ulm32b (Diskussion | Beiträge) K (Formulierung optimiert.) |
Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 32: | Zeile 32: | ||
===Vordefinierte Stylesheets=== | ===Vordefinierte Stylesheets=== | ||
Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können: | 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 '' | 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 55: | 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 74: | Zeile 72: | ||
File:FTUI_Daemmerung_3.jpg | File:FTUI_Daemmerung_3.jpg | ||
</gallery> | </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, ...
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