Ich migriere gerade meine FTUI2 Oberfläche nach FTUI - Performance-mäßig liegen da Welten zwischen!
Ich hänge an folgendem Button (ohne Anspruch, dass es bereits in Version 2 die "korrekte" Art gewesen wäre...).
Wie wäre das Äquivalent in FTUI3?
<div
style="padding-top: 15px;"
class="big"
data-device="UG_Hobby_Thermostat"
data-type="switch"
data-icon="fa-tv"
data-background-icon="-"
data-get="1.ACTIVE_PROFILE"
data-states='["1","2"]'
data-set="datapoint 1.ACTIVE_PROFILE"
data-set-states='["2; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2","1; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1"]'
data-colors='["blue","gray"]'
></div>
Vereinfacht soll er einfach zwischen diesen beiden Profilen hin- und her switchen.
Danke für Eure Tipps - ich stehe im Moment auf dem Schlauch...
Hi, eine Frage vorweg. Ist hier UG_Hobby_Thermostat das device und UG_Waschkueche_Thermostat das Reading? Oder ein weiteres device?
Hier sieht es so aus als wäre 1.ACTIVE_PROFILE dein Reading. Oder?
Wenn das separate devices sind, dann kannst du die mit @click im ftui-button einfügen.
Schau dir die example vom button an. Da ist ein Beispiel für (value)===set und [value]===get um Verschiedene devices zu vereinen.
Hier zum Beispiel:
<ftui-button fill="outline" shape="circle"
[value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
(value)="Sonos_Kueche" states="play, pause">
<ftui-icon [name]="Sonos_Kueche:transportState | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
Sonos_Kueche:state | map('play: stop, pause: play')">
</ftui-icon>
</ftui-button>
Bei dir sehe ich es jetzt so:
<ftui-button
@click="javascript:sendFhem('set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1')"
[value]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE"
(value)="UG_Hobby_Thermostat" states=1, 2">
</ftui-button>
alternative:
<ftui-button
@click="javascript:sendFhem('set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1')"
[(value)]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE"
states=1, 2">
</ftui-button>
icon kannst du einfach mit reinpacken wenn du magst.
Das @click wird hier aber immer ausgeführt. Ich denke das ist so nicht gewollt. Oder?
Du möchtest bestimmt bei state 1 UG_Waschkueche_Thermostat auf 1 und bei state 2 UG_Waschkueche_Thermostat auf 2 setzen.
Mal schauen wie man das hinbiegt...
Edit. Ich würde auf den button triggern mit [hidden] und einen zweiten erstellen der dann erscheint im Wechsel.
Bsp. folgt...
LG mr_petz
Tatsächlich sind es zwei Devices, deren State ich jeweils gleichartig schalte. Anzeigen tue ich via Symbol nur den state vom ersten Device.
Übersetzt: ich habe einen Hobby-Raum (mein Büro ;-) und eine Waschküche. Über den Button schalte ich das Heizprofil um (Profil 2=Arbeitszeit=werktags heizen vs. Profil 1=Urlaubszeit=durchgehend nur Erhaltungsheizen). Der Einfachheit halber mache ich das im Nebenraum (Waschküche mit Bad) ebenfalls...
Aber ich glaube für die Lösungsfindung ist das erstmal irrelevant und kann weggelassen werden (das pfriemel ich dann hinterher rein).
Deine Lösung probiere ich mal aus!
Hier das [hidden] Beispiel:
<ftui-button [hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('1: true, 2: false')"
@click="javascript:sendFhem('set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2')"
[(value)]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE"
states=1,2">State1
</ftui-button>
<ftui-button [hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('2: true, 1: false')"
@click="javascript:sendFhem('set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1')"
[(value)]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE"
states=2,1">State2
</ftui-button>
Einfach beide Button rein und nach dem betätigen/einlesen ist je nach Zustand einer im Hindergrund.
LG mr_petz
Treffer!
Die Idee mit dem hidden hat funktioniert. Den Code musste ich noch ein wenig umbauen, aber so funktioniert es:
<ftui-button [hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('1: false, 2: true')"
@click="sendFhem('set UG_Hobby_Thermostat datapoint 1.ACTIVE_PROFILE 2; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2')">
<ftui-icon class="size-3" name="house-user" color="blue"></ftui-icon>
</ftui-button>
<ftui-button [hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('1: true, 2: false')"
@click="sendFhem('set UG_Hobby_Thermostat datapoint 1.ACTIVE_PROFILE 1; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1')">
<ftui-icon class="size-3" name="house-user" color="gray"></ftui-icon>
</ftui-button>
Schön. Dann kannst du auch den Button weglassen:
<ftui-icon class="size-3" name="house-user" color="blue"
[hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('1: false, 2: true')"
@click="sendFhem('set UG_Hobby_Thermostat datapoint 1.ACTIVE_PROFILE 2; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 2')"
></ftui-icon>
<ftui-icon class="size-3" name="house-user" color="gray"
[hidden]="UG_Hobby_Thermostat:1.ACTIVE_PROFILE | map('1: true, 2: false')"
@click="sendFhem('set UG_Hobby_Thermostat datapoint 1.ACTIVE_PROFILE 1; set UG_Waschkueche_Thermostat datapoint 1.ACTIVE_PROFILE 1')"
></ftui-icon>
@click geht auch bei icon, label, usw...
LG mr_petz
Ach so - das spart natürlich Code :-)
ps. [hidden] funktioniert auch bei fast allen in FTUI3 wie @click ;)
LG mr_petz
Die Doku ist leider unvollständig auf Github und alles kann ich auch nicht aus dem JS-Code herauslesen - aber gut zu wissen :-)
Vielen Dank!