Hallo,
ich habe in meiner TabUI einen Taster, der meine Zirkulationspumpe schaltet, darunter wird die Temperatur im Rücklauf angezeigt. Tastfunktion ist zwingend, da das Signal per FHEM an eine S7 weitergeleitet wird.
Da die Pumpe von verschiedenen Stellen im Haus geschaltet werden kann, kommt die Rückmeldung ebenfalls von der S7.
Ich versuche die ganze Zeit schon, wie man das in einem Widgetl zusammenfassen kann, also Tastfunktion, Temperaturanzeige in der Mitte und zusätzlich soll der Hintergrund die Farbe wechseln, wenn die Pumpe läuft.
Hat jemand vieleicht eine Idee, mit welchem Widget man das realisieren könnnte?
DAnke.
<!-- Pumpe -->
<div class="col-1_8">
<div data-type="symbol"
data-device="WW_Pumpe_ST"
data-states='["off","on"]'
data-icons='["oa-sani_water_tap","oa-sani_water_tap"]'
data-colors='["#b4b4b4","limegreen"]'
data-background-icons='["fa-square","fa-square"]'
data-background-colors='["#787878","#115d97"]'
onclick="ftui.setFhemStatus('set WW_Pumpe_EA trigger')"
class="big350">
</div>
<div data-type="label"
data-device="TempWW_Ruecklauf"
data-limits='[0,40,45]'
data-colors='["#b0c4de","orange","firebrick"]'
data-unit="°C"
data-fix="1"
class="big200">
</div>
</div>
Der Code sieht doch sehr gut aus. Was funktioniert dabei noch nicht wie gewünscht?
Es funktioniert alles, ich möchte das ganze aber gerne in nur einem Widget zusammenfassen.
Also ein Kreis im Hintergrund der die Farbe ändert, wenn die Pumpe läuft und die Temperaturanzeige in der Mitte des Kreises.
Zusätzlich soll beim berühren, der Triggerbefehl abgesetzt werden.
Beim zweiten Mal lesen habe ich es jetzt auch gesehen. Die Zahl anstatt des Icons.
Das sieht bestimmt nicht so schön aus, aber ist machbar.
Positioniere das Label einfach innerhalb des Symbol.
Also <div data-type="symbol" ...><div data-type="label" ...></div></div>
Dann noch etwas mit den Größen spielen, damit es passt. class="small". class="bigger"
Danke, werde es heute Abend mal probieren. Ziel ist ein einheitlichliches Erscheinungsbild, momentan sieht es so aus wie in angehängtem Bild.
@setstate: mir ist aufgefallen, das in der fhem-tablet-ui.css die Farbbezeichnung für hellblau falsch geschrieben ist: ligthblue anstatt lightblue, bei lightgray passt es. ;)
Hallo,
leider funktioniert das nicht. Das Symbol wird jetzt unter dem Label dargestellt.
Eigentlich wäre ja tatsächlich manchmal ganz praktisch wenn man in einem Switch einen kurzen Text statt eines Icons hätte, der Text könnte ja dann auch aus einem Reading kommen. Mehr als 3-4 Zeichen machen natürlich wenig Sinn.
Mit Label in Label geht es.
Beim außeren Label bedeuten die class folgendes:
fixedlabel - zeige nicht das Reading, sondern fix den HTML content (hier nix, leer)
bg-limit - beziehe die Farbänderung anhand der Limits auf den Background
icon - simuliere ein Symbol-Widget
square - rechteckig
<div class="col-1-8"">
<div data-type="label"
data-device="dummy2"
data-limits='["on","off"]'
data-colors='["#b4b4b4","green"]'
onclick="ftui.setFhemStatus('set WW_Pumpe_EA trigger')"
class="fixedlabel bg-limit icon square">
<div data-type="label"
data-device="dummy1"
data-get="temp"
data-limits='[0,40,45]'
data-colors='["#b0c4de","orange","firebrick"]'
data-unit="°C"
data-fix="1">
</div>
</div>
</div>
Das äußere Label könnte auch per CSS class verändert werden
<div class="col-1-8"">
<div data-type="label"
data-device="dummy2"
data-limits='["on","off"]'
data-classes='["bg-red","bg-green"]'
onclick="ftui.setFhemStatus('set WW_Pumpe_EA trigger')"
class="fixedlabel icon square">
<div data-type="label"
data-device="dummy1"
data-get="temp"
data-limits='[0,40,45]'
data-colors='["#b0c4de","orange","firebrick"]'
data-unit="°C"
data-fix="1">
</div>
</div>
</div>
Super, Danke es funktioniert.
Wenn mir nur noch jemand sagen könnte, wie ich die Größe ändern kann, sobald ich an irgendeiner Stelle eine Größenklasse angebe, ändert sich nur die Größe der Temperaturanzeige - die Hintergrundkachel bleibt so groß.
So, es geht. Wenn man unten stehende Definition in der fhem-tablet-ui.css anpasst.
Sicher gibt es einen eleganteren Weg, aber für mich reicht das erst mal so. DAnke.
div[data-type="label"].icon {
padding-top: 16px;
height: 50px;
width:50px;
}
jede Änderung geht aber beim nächsten Update verloren. Solche Sachen müssten in ein anders CSS File
< link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
Ich werde die Klasse aber jetzt in eine relative Maßangabe ändern, dann kann man auch die Größen Klassen hinzufügen. Wie 'large' oder 'medium'
div[data-type="label"].icon {
padding-top: 16px;
height: 4em;
width:4em;
}
Habe ich natürlich in meine user.css gepackt. ;)
Hätte ich direkt dabei schreiben sollen.
Die Variante mit der relativen Größe ist natürlich eleganter.
Danke nochmal.
Hallo setstate,
ich muss das Thema leider noch mal hochholen.
Seit dem letzen ( oder vorletzten) Update funktioniert die obige Konstruktion nicht mehr. Das erste Label wechselt leider nicht mehr die Farbe, wenn der Status auf "on" geht.
Hat sich am Label Widget etwas geändert?
Eine zweite Sache noch: ich habe eine Reihe mit 6 symbol und diesem label-widget in eine sheet / row / cell Konstruktion gepackt. Die 6 symbol-widgets ordnen sich alle mittig in ihrer Zelle an, nur das label widget ordnet sich links an. Daher auch die Konstruktion mit left-space, top-space. Mich stört das es absolute Angaben sind, die ja eigentlich nicht im Sinne der neuen Konstruktion sind.
Hier noch mal der aktuelle Code:
<div class="cell">
<div class="left-space-40">
<div data-type="label"
data-device="WW_Pumpe_ST"
data-get="state"
data-limits='["on","off"]'
data-classes='["bg-blue","bg-gray"]'
onclick="ftui.setFhemStatus('set WW_Pumpe_EA trigger')"
class="bigger fixedlabel icon square">
<div data-type="label"
data-device="TempWW_Ruecklauf"
data-limits='[0,38,43]'
data-colors='["#f2f2f2","orange","red"]'
data-unit="°C"
data-fix="1"
class="large top-space-30">
</div>
</div>
</div>
</div>