Hallo,
in meiner Jalousiensteuerung habe ich etliche Push Buttons. Kann ich die in einer eigenen classe zusammenführen, um nicht bei jedem "push" den Background, Form, Farbe usw. wiederholen zu müssen ?
Klar. Einfach die Klasse an die Push-Objekte hängen und diese Klasse nach Belieben formatieren.
Oder du passt die Formatierung für alle Push-Objekte an. Ganz wie du möchtest.
Kannst du bitte einmal ein Beispiel geben, wie das in der css und der html dann aussehen müsste ?
Oh ja, natürlich.
Das Push-Widget wird bekanntermaßen so eingebunden:
<div data-type="push" data-device=... ></div>Um die Push-Objekte nun global formatieren zu können, gibt es folgende zwei Möglichkeiten, die ich nutze.
1. Per Klasse:Dies dient dazu, nur bestimmte, vorher festgelegte Push-Objekte zu formatieren. Das macht vor allem dann Sinn, wenn diese für eine Bestimmte Anwendung genutzt werden. Die Definition im HTML wird dann einfach durch die Angabe einer Klasse erweitert:
<div data-type="push" class="anwendung1" data-device=... ></div>In Deiner CSS-Datei kannst Du dann dieser Klasse entsprechende Attribute zuweisen:
.anwendung1{ background-color: #111111; }Du kannst auch mehrere Klassen vergeben. Diese werden dann mit Leerzeichen getrennt eingetragen.
<div data-type="push" class="klasse1 klasse2 klasse3" data-device=... ></div>
2. Alle Push-Objekte global formatieren:Nutzt man, wenn man grundsätzlich alle Objekte dieses Typs formatieren will. Hier muss erstmal nichts weiter im HTML eingefügt werden. Stattdessen greift man sich die Push-Objekte direkt im CSS.
div[data-type="push"] { background-color: #111111; }
Beides lässt sich auch gut kombinieren, sodass man eine selbst definierte Klasse für unterschiedliche Widgets verwenden kann.
Bis hier hin ist der Code nur beispielhaft und ungetestet.
Beispiel Circlemenu:Einen etwas komplexeren Code nutze ich beim Circle-Menü. Mir gefällt es besser, wenn der mittlere Knopf eines geöffneten Circle-Menü so aussieht, als wäre er aktiviert. Außerdem haben alle Elemente als Hintergrund-Symbol fa-circle (data-backgound-icon="fa-circle"). Dafür habe ich mein CSS wie folgt erweitert:
/* HAUPTSYMBOL */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-closed > li > div[data-type="push"] i#fg {color: #666666 !important;} /* Symbolfarbe geschlossen */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-open > li:first-child > div[data-type="push"] i#fg {color: #32a054 !important;} /* Symbolfarbe geöffnet */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-closed > li > div[data-type="symbol"] i#bg {color: transparent !important;} /* Symbolfarbe geschlossen */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-open > li:first-child > div[data-type="symbol"] i#bg {color: transparent !important;} /* Symbolfarbe geöffnet */
/* ITEMS */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-open > li:nth-child(n+2) {background-color: #666666 !important;} /* Rahmen */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-open > li:nth-child(n+2) i#bg {color: #111111 !important;} /* Symbolhintergrund */
Die Adressierung der Elemente ergibt sich aus dem HTML-Code, den man im Browser sieht.
.circleMenu-open > li:first-child adressiert dabei das erste li-Element innerhalb eines Objektes mit der Klasse .circleMenu-open (=das Hauptsymbol)
.circleMenu-open > li:nth-child(n+2) adressiert alle li-Elemente ab dem zweiten (=alle untergeordneten Elemente)
Da ich Symbol- und Push-Widgets als Hauptsymbol in Cirlce-Menüs für unterschiedliche Anwendungen nutze, musste ich diese auch separat formatieren.
Und einen Nachteil hat diese Variante, in der die Elemente ziemlich explizit angesprochen werden, auch:
Gibt es durch Updates der Widgets strukturelle Änderungen, die sich dann auf den erzeugten HTML-Code auswirken, könnte diese Formatierung eventuell nicht mehr funktionieren und muss angepasst werden. Bisher funktioniert es jedoch ganz hervorragend.
Ich hoffe, das war einigermaßen verständlich. Sonst frag gerne nochmal nach.
Vielen Dank für die Antwort !
Zitat von: Standarduser am 06 Februar 2017, 08:39:58
Außerdem haben alle Elemente als Hintergrund-Symbol fa-circle (data-backgound-icon="fa-circle"). Dafür habe ich mein CSS wie folgt erweitert:
wo und wie hast du das realisiert ?
Zitat
/* HAUPTSYMBOL */
div[data-type="circlemenu"] > .circlemenu-wrapper > .circleMenu-closed > li > div[data-type="push"] i#fg {color: #666666 !important;} /* Symbolfarbe geschlossen */
wofür steht das i#fg und das important ?
Den Hintergrund habe ich im HTML definiert, jedoch ohne irgendwelche Farbangaben, o.ä.
<div data-type="push" data-backgound-icon="fa-circle" ...>
Für den CSS-Code habe ich Dir mal einen Screenshot angehängt und markiert, wie hier zum entsprechenden Element navigiert wird.
i#fg ergibt sich daraus, wie das Widget selbst aufgebaut ist. Darauf hat eigentlich nur der Entwickler des Widget(-Systems) Einfluss und wir nehmen das als gegeben hin. Hier ist es eben genau jenes Element, welches ich formatieren wollte.
!important verleiht meinem Wunsch, das Element so zu formatieren, etwas mehr Nachdruck.
Alle Style-Formatierungen werden entsprechend der Reihenfolge ihres Auftretens abgearbeitet. Es gilt (ähnlich wie bei der Bundeswehr): der letzte Befehl zählt. Mit !important hat man jedoch die Möglichkeit, einen Style zu überschreiben, der nach der eigenen Anweisung auftaucht. Besitzt der jedoch auch ein !important, dann hat man es schwer.
Habe das nun so ein meiner fhem-tablet-ui-user.css eingertragen
.push-up {
data-icon:fa-chevron-up !important;
data-background-icon:fa-circle !important;
data-off-background-color:grey !important;
data-off-color:#222222 !important;
}
und der der HTML so:
<div data-type="push" class="push-up"
data-device="Rolladen.*"
data-set-on="up">
</div>
Scheint aber wirkungslos zu sein.
Glaub ich Dir aufs Wort ;)
Die "data-..."-Eigenschaften sind keine Eigenschaften aus HTML oder CSS, sondern sind zur Steuerung der Widgets da. Die Widgets (.js-Dateien im Ordner js) nehmen diese Eigenschaften und generieren daraus gültigen HTML-Code, den Du entsprechend Formatieren kannst.
Wenn ich jedoch sehe, was Du da versuchst, ist wohl ein Template das Mittel der Wahl:
https://github.com/knowthelist/fhem-tablet-ui#templates
Das habe ich mir fast gedacht. Danke aber trotzdem für deine Ausführungen. Dann schaue ich mir mal die Templates an.
Was ich vorhabe sind jeweils 4 Buttons (up,down,stop,schatten) für jede Jalousie (13 Stück). Es verändert sich in den Data-Definitionen ja lediglich der Data-Device Name. Wie stell ich das denn am Schlausten an ?
Poste mal Deinen Code, den Du bisher hast (für eine Jalousie)
<div class="page" id="content3">
<li>
<section style="background-color:#A4A4A4;">
<div class="thin center">Jalousiensteuerung</div>
</section>
</li>
<!-- Swiper -->
<div data-type="swiper" data-height="90%" data-width="100%" class="navbuttons" >
<ul>
<!-- Erste Seite -->
<li>
<div class ="col-1-2 large left-align">
<div>
<div class="col-1-4 large left-align">Alle</div>
<div class="col-1-8 inline">
<div data-type="push class="push-up"
data-device="Rolladen.*"
data-icon="fa-chevron-up"
data-background-icon="fa-circle"
data-off-background-color="grey"
data-off-color="#222222"
data-set-on="up">
</div>
</div>
<div class="col-1-8 inline">
<div data-type="push"
data-device="Rolladen.*"
data-icon="fa-chevron-down"
data-background-icon="fa-circle"
data-off-background-color="grey"
data-off-color="#222222"
data-set-on="down">
</div>
</div>
<div class="col-1-8 inline">
<div data-type="push"
data-device="Rolladen.*"
data-icon="fa-stop"
data-background-icon="fa-circle"
data-off-background-color="grey"
data-off-color="#222222"
data-set-on="stop">
</div>
</div>
<div class="col-1-8 inline">
<div data-type="push"
data-device="Rolladen.*"
data-icon="fa-bars"
data-background-icon="fa-circle"
data-off-background-color="grey"
data-off-color="#222222"
data-set-on="level 50">
</div>
</div>
</div>
Basieriend auf Deinem Code würde ich das so lösen:
Deinen jetzigen Code mit folgendem ersetzen:
<div class="page" id="content3">
<li>
<section style="background-color:#A4A4A4;">
<div class="thin center">Jalousiensteuerung</div>
</section>
</li>
<!-- Swiper -->
<div data-type="swiper" data-height="90%" data-width="100%" class="navbuttons" >
<ul>
<!-- Erste Seite -->
<li>
<div class ="col-1-2 large left-align">
<div class="col-1-4 large left-align">Alle</div>
<div data-template="template_jalousie.html" data-parameter='{"§jalousie":"Rolladen.*"}'></div>
Und nachfolgenden als template_jalousie.html abspeichern (oder Namen entsprechend anpassen).
<!-- Template Jalousiesteuerung
Aufruf mit
data-parameter='{"§jalousie":"<device>"}'
Beispiel:
<div data-template="template_jalousie.html" data-parameter='{"§jalousie":"Rolladen.EG.wz.links"}'></div>
-->
<div class="col-1-8 inline"><div data-type="push" data-device="§jalousie" data-icon="fa-chevron-up" data-background-icon="fa-circle" data-off-background-color="grey" data-off-color="#222222" data-set-on="up"></div></div>
<div class="col-1-8 inline"><div data-type="push" data-device="§jalousie" data-icon="fa-chevron-down" data-background-icon="fa-circle" data-off-background-color="grey" data-off-color="#222222" data-set-on="down"></div></div>
<div class="col-1-8 inline"><div data-type="push" data-device="§jalousie" data-icon="fa-stop" data-background-icon="fa-circle" data-off-background-color="grey" data-off-color="#222222" data-set-on="stop"></div></div>
<div class="col-1-8 inline"><div data-type="push" data-device="§jalousie" data-icon="fa-bars" data-background-icon="fa-circle" data-off-background-color="grey" data-off-color="#222222" data-set-on="level 50"></div></div>
Ich habe noch eine Änderung vorgenommen:
Die Überschrift "Alle" habe ich aus dem ursprünglichen DIV herausgelöst und eine Ebene höher angeordnet, damit Du den Text auf der Hauptseite hast. Wenn Dir das nicht gefällt, müsstest Du den wieder hinein bauen und als Parameter übergeben.
Cool !! :) :)
Vielen herzlichen Dank ! Das werde ich heute abend einmal einbauen.
ich kann hier mal mein Beispiel zeigen, evtl. hilft es auch ein wenig (mit Screenshot)
Den Modus habe ich jetzt nicht als Code dabei....
<!-- ============= Rollladen SZ =========== -->
<!-- ====================================== -->
<li data-row="3" data-col="5" data-sizex="4" data-sizey="4" class="semitransparent3d">
<header style="border-top-left-radius:8px;border-top-right-radius:8px;">Rollladen - Schlafzimmer</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell-30"> </div>
<div class="cell-10"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-up"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="on">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="75"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">75
</div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell-30"> </div>
<div class="cell-10 top-align large" data-type="label">Hoch</div>
<div class="cell-50 top-align medium" data-type="label">Home 75 %</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="cell-30"
data-type="circlemenu"
data-item-width="55"
data-item-hight="55"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
<div class="cell-10"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-minus"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="50"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">50
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="cell-30 wider top-align large MediumSpringGreen" data-type="label">Position</div>
<div class="cell-10 top-align large" data-type="label">Stop</div>
<div class="cell-50 top-align medium" data-type="label">Beschattung 50 %</div>
</div>
<!-- ============= Reihe 5 =========== -->
<div class="row">
<div class="cell-30"> </div>
<div class="cell-10"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-down"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="off">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="25"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">25
</div>
</div>
<!-- ============= Reihe 6 =========== -->
<div class="row">
<!--div class="cell-20" data-type="label"></div-->
<div class="cell-30"> </div>
<div class="cell-10 top-align large" data-type="label">Runter</div>
<div class="cell-50 top-align medium" data-type="label">Beschattung 25 %</div>
</div>
</div>
</li>
@Standarduser
Das hat jetzt super geklappt. Nun will ich das auch auf meine Thermostate umsetzen. Die Namensgebung ist immer "Thermostat.Raumx"
Die readings bei homematic Produkten stehen aber in unterschiedlichen Kanälen.
z.B.
measured_temp / desired_temp im Kanal Thermostat.RaumX_clime
batteryLever und Ventil im Kanal Thermostat.RaumX
Kann ich hier nur eine Variable "§Heizung:Wohnen" übergeben, aus der dann "Thermostat.Wohnen_clima" und "Thermostat.Wohnen" wird ? Idealerweise auch noch im "Label" ? Und wenn ja, wie ?
Vielen Dank
Ja. Ich weiß nicht, ob das nur zufällig funktioniert oder so gewollt ist, aber das geht.
Du kannst also einmal §Thermostat und an anderer Stelle §Thermostat_Clima verwenden, und im Ergebnis steht dann Thermostat.Wohnzimmer, bzw. Thermostat.Wohnzimmer_Clima. Das funktioniert wie suchen/ersetzen.
BTW: § ist eigentlich nicht notwendig. Das habe ich nur bei mir eingeführt, um diesen variablen Wert deutlicher zu kennzeichnen und etwas von der Masse an Parametern abzuheben.