Hallo
ich hatte in irgendeinem Forenbeitrag ein klasse Cockpit für die Heizungssteuerung gesehen, dass ich in Teilen nachbauen möchte. Ich bekomme es aber nur teilweise hin und hoffe auf den einen oder anderen Tip von Euch
1. Ausgangspunkt
mit dem folgenden Coding bekomme ich das in Bild 1 dargestellte Ergebnis
<header>Heizung</header>
<div >
<div data-type="switch"
data-device="Bad_Heizung_Clima"
data-get="controlMode"
data-cmd="set"
data-get-on='["auto","manual"]'
data-set-on="auto"
data-set-off="manual"
class="mini left inline"
data-icons='["oa-sani_heating_automatic"]'
data-on-colors='["green","red"]'
data-background-icon="">
</div>
<div data-type="label" style="color:#ffe066" class="cell">Bad</div>
<div data-type="thermostat"
data-device="Bad_Heizung_Clima"
data-valve="ValvePosition"
data-temp="measured-temp" data-fix="1" data-step="0.5"
data-set="desired-temp"
class="cell medium"
data-fgColor="#F2ECE9"
data-min="10" data-off="off" data-max="28" data-boost="boost">
</div>
<div data-type="label"
data-device="Bad_Heizung_Clima"
data-get="measured-temp"
class="large top-narrow-2x"
data-unit=" °C"
data-limits='[0,18,20,21.5]'
data-colors='["red","green","blue","#ff00ff"]'>
</div>
</div>
2. Unterschiedliche Größe des Icons
Im Vergleich zum weißen Test wird das Heizungs-Automatic-Icon größer dargestellt.
<!-- Test ================================================================================ -->
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<div data-type="switch"
data-device="Bad_Heizung_Clima"
data-get="controlMode"
data-get-on='["auto","manual"]'
data-set-on="auto"
data-set-off="manual"
class="small"
data-icons='["oa-sani_heating_automatic","fa-ban"]'
data-on-colors='["green","red"]'
data-background-icon="">
</div>
<div data-type="symbol"
data-device="Bad_Heizung"
data-get="batteryLevel"
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
class="mini"
data-icons='["oa-measure_battery_100 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-on-colors='["green","green","green","yellow","red"]'>
</div>
3. Kein Abstand vom Rand
Ich finde keine Möglichkeit, bei der Definition "Class="left"" das Icon einige Pixel nach rechts zu verschieben, damit da nicht so an den Rand gequetscht aussieht.
4. Class left beeinflusst das eigentlich darunter liegende Widget
Mit dem Einfügen von "Class="left"" wird das darunter liegende Widget hochgezogen (siehe Bild 2)
5. Keine Möglichkeit für weiteres Widget auf gleicher Linie
Jetzt möchte ich gerne noch die Batterie rechts angezeigt bekommen. Verschiedenste Versuche verschieben mir aber die Positionierungen in irgendeiner Weise (siehe Bild 3)
Hier der Versuch "inline als Gruppe abzubilden
<div class="inline">
<div data-type="switch"
data-device="Bad_Heizung_Clima"
data-get="controlMode"
data-cmd="set"
data-get-on='["auto","manual"]'
data-set-on="auto"
data-set-off="manual"
class="mini left"
data-icons='["oa-sani_heating_automatic"]'
data-on-colors='["green","red"]'
data-background-icon="">
</div>
<div data-type="label" style="color:#ffe066" class="cell">Bad</div>
<div data-type="symbol"
data-device="Bad_Heizung"
data-get="batteryLevel"
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
class="mini right"
data-icons='["oa-measure_battery_100 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-on-colors='["green","green","green","yellow","red"]'>
</div>
</div>
6. Bei fht80b 2 %-Zeichen bei actuator
Anscheinend liefert das fht80b bei actuator ein %-Zeichen. (siehe Bild 4) Wie kann das eliminiert werden ?
1.-2. class="small" ist ungleich class="mini" -> also unterschiedliche Größen. Außerdem: "mini" gibt es nicht beim Switch/Symbol, deshalb -> default-Größe
Die class Inhalte sehen sehr zusammenkopiert aus.
"left" mit "inline" zusammen macht keinen Sinn.
"inline" ohne einen weiteren "inline" Partner um eine Line zu bilden macht auch keinen Sinn
usw.
Am besten alle erst einmal alle class leeren -> class=""
und dann überlegen, wie soll es ausgerichtet werden. Was soll in eine Reihe, was untereinander. Mittig oder alles Links.
Wie soll es denn am Ende aussehen? So wie Bild1, wenn man die Class-Teile etwas aufräumt
<div>
<div data-type="switch"
data-device="BadHeizung_Clima"
data-get="controlMode"
data-cmd="set"
data-get-on='["auto","manual"]'
data-set-on="auto"
data-set-off="manual"
data-icons='["oa-sani_heating_automatic"]'
data-on-colors='["green","red"]'
data-background-icon=""
class="inline">
</div>
<div class="inline">Bad</div>
<div data-type="symbol"
data-device="BadHeizung"
data-get="batteryLevel"
data-states='["3|3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-icons='["oa-measure_battery_100 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-colors='["green","green","green","yellow","red"]'
class="inline">
</div>
</div>
<div data-type="thermostat"
data-device="BadHeizung_Clima"
data-valve="ValvePosition"
data-temp="measured-temp" data-fix="1" data-step="0.5"
data-set="desired-temp"
data-fgColor="#F2ECE9"
data-min="10" data-off="off" data-max="28" data-boost="boost">
</div>
<div data-type="label"
data-device="BadHeizung_Clima"
data-get="measured-temp"
data-unit=" °C"
data-limits='[0,18,20,21.5]'
data-colors='["red","green","blue","#ff00ff"]'
class="big top-narrow left-space">
</div>
Hallo setstate
klasse, wie einem wieder einmal geholfen wird :)
Vielleicht noch ein Hinweis, beim data-set-on/off muss ich für HM
ZitatcontrolMode
hinzufügen.
Danke
Jürgen