Hallo,
ich versuche mit einem ftui-button bei einem hold Ereignis ein Popup zu öffnen, welches dann den Namen des Bindungs aus dem Button erhält, um weitere Elemente damit im Popup arbeiten zu lassen.
Ganz konkret geht es darum, dass ich nur ein Popup Element definieren möchte, welches von allen Licht-Buttons aufgerufen werden kann, um den Dim-Wert einzustellen.
Meine Definition des Buttons sieht aktuell so aus:
<ftui-button [(value)]="gt.zb.grp.1" @hold="dimmer.open()" color="current" f
<ftui-icon [name]="gt.zb.grp.1 | map('on:lightbulb-on, off:lightbulb, unreachable:question')" size="1"></ftui-i
<ftui-label>Garten</ftui-label>
</ftui-button>
Meine Definition des Popups sieht dann wie folgt aus. Wobei ich bei dem $event schon über das Debugging alles mögliche versucht habe, um an den Namen des Input Bindings heran zukommen.
<ftui-popup id="dimmer" timeout="30">
<ftui-label [text]="$event.target.binding.config.input.readings" size="2"></ftui-label>
<ftui-knob [(value)]="$event.target.binding.config.input.readings:pct"
[color]="cold-hot"
type="handle" min="1" max="100" step="0.5" ="%" has-value-text></ftui-knob>
</ftui-popup>
Leider fehlen mir da ein wenig die JS Grundlagen. Kann mir einer von Euch hier einen Tipp geben?
Vielen Dank.
Polaris
da sehe ich keine einfache gängige Möglichkeit. Sooo flexibel ist ftui3 nicht. Nach dem Laden der Seite ist die config sehr statisch. Bindings werden nicht ständig neu überprüft und upgedated.
@Polaris
Man könnte es mit einem [hidden] und local binding lösen. Bsp.:
<ftui-button [(value)]="gt.zb.grp.1" @hold="dimmer.open();fhemService.updateReadingItem('local-gt.zb.grp', { value: 'gt.zb.grp.1', });">
<ftui-icon [name]="gt.zb.grp.1 | map('on:lightbulb-on, off:lightbulb, unreachable:question')" size="1"></ftui-icon>
<ftui-label>Garten</ftui-label>
</ftui-button>
<ftui-button [(value)]="gt.zb.grp.2" @hold="dimmer.open();fhemService.updateReadingItem('local-gt.zb.grp', { value: 'gt.zb.grp.2', });">
<ftui-icon [name]="gt.zb.grp.2 | map('on:lightbulb-on, off:lightbulb, unreachable:question')" size="1"></ftui-icon>
<ftui-label>Garten</ftui-label>
</ftui-button>
<ftui-popup id="dimmer" timeout="30" width="200px" height="200px">
<ftui-cell>
<ftui-label [text]="local:gt.zb.grp" size="2"></ftui-label>
<ftui-knob [(value)]="gt.zb.grp.1:pct" [hidden]="local:gt.zb.grp | map('gt.zb.grp.1:false,.*:true')"
type="handle" min="1" max="100" step="0.5" ="%" has-value-text></ftui-knob>
<ftui-knob [(value)]="gt.zb.grp.2:pct" [hidden]="local:gt.zb.grp | map('gt.zb.grp.2:false,.*:true')"
type="handle" min="1" max="100" step="0.5" ="%" has-value-text></ftui-knob>
</ftui-cell>
</ftui-popup>
so wird immer über local:gt.zb.grp das aktuelle Device im popup sichtbar...
Musst halt nur das value im updateReadingItem tauschen.
LG mr_petz
Ich muss hier auch mal aufspringen.
Stelle gerade von FTUI2 auf FTUI3 um und bin noch auf ein solches Popup Problem gestoßen.
Ich habe ein mir ein template gebaut, welches von diversen 'ftui-content' Elementen verwendet wird.
<ftui-column>
<ftui-label text-align="right" @click="popup_{{var_device}}.open()">
<ftui-icon name="cog"></ftui-icon>
</ftui-label>
</ftui-column>
<ftui-popup id="popup_{{var_device}}" timeout="0">
<header>{{var_name}}</header>
<ftui-row>
<ftui-knob [value]="{{var_device}}:positionSlat" min="0" max="99"
[color]="{{var_device}}:positionSlat | step('0: success, 50: warning, 99: danger')">
</ftui-knob>
</ftui-row>
</ftui-popup>
Faktisch möchte ich damit meine Raffstore einzeln über jeweils ein Popup ansteuern.
Die Übersichtsseite mit den Raffstoren schaut in etwa so aus:
<ftui-grid-tile row="1" col="6" height="3" width="5">
<header>Schlafen</header>
<ftui-column align-items="top">
<ftui-column width="100%">
<ftui-content file="./template/template_raffstore.html" var_device="OG_SCHLAFEN_RAFF_2" var_name="Klein"></ftui-content>
<ftui-content file="./template/template_raffstore.html" var_device="OG_SCHLAFEN_RAFF_1" var_name="Gross"></ftui-content>
</ftui-column>
</ftui-column>
</ftui-grid-tile>
<ftui-grid-tile row="7" col="1" height="1" width="5" >
<header>Arbeiten</header>
<ftui-column align-items="top">
<ftui-column width="100%">
<ftui-content file="./template/template_raffstore.html" var_device="EG_AR_RAFF_01" var_name="Arbeiten"></ftui-content>
</ftui-column>
</ftui-column>
</ftui-grid-tile>
Leider öffnet sich so das Popup nun jeweils zentriert und mit width und height relativ zum ftui-grid-tile von wo das Popup getriggert wird.
Abhängig von der Größe des ftui-grid-tile mal mehr mal weniger zu gebrauchen.
Ich brauche es aber zentriert und mit width und height relativ zur kompletten Seite.
Lässt das realisieren oder muss es so machen wie es Polaris vorgeschlagen hat.
Bei FTUI2 hatte das funktioniert.
Danke für die Unterstützung.
Dafür gibts
Hallo,
wenn ich es richtig verstehe, solltest Du mal folgende Definition ausprobieren:
<ftui-popup id="popup_{{var_device}}" position="page" timeout="0">
Grüße Gerald.
Zitat von: BigGB am 29 Dezember 2023, 10:35:20<ftui-popup id="popup_{{var_device}}" position="page" timeout="0">
Genau das wars. Jetzt bin ich CSS bedingt auch schlauer geworden.
Danke Gerald.
Mittlerweile habe ich das Ganze ohne Popup gelöst, weils bedienungstechnisch so schneller geht.