[GELÖST] Wie übergebenen Parameter für [hidden] nutzen?

[DocCyber]

Hallo zusammen.

Ich rufe example.html auf und übergebe dabei den Parameter icon.

Code Auswählen Erweitern

<ftui-content file="example.html" icon="info"></ftui-content>Nun möchte ich in der aufgerufenen Datei den Parameter icon nicht nur dazu benutzen, ein entsprechendes Icon anzuzeigen, sondern auch, um die Sichtbarkeit eines anderen Elements zu steuern.

Im Beispiel soll die Spalte nicht sichtbar sein, wenn das Icon 'info' heißt.

Code Auswählen Erweitern

  <ftui-column
    width="3em"
    [hidden]="{{icon}} | is('info')">
  </ftui-column>
funktioniert nicht.

Code Auswählen Erweitern

[hidden]="{{icon}} | map('info':true)"
geht auch nicht...



Kann mir jemand weiter helfen?

[MDietrich]

Moin,
ungeprüft: du braucht bei map ggfs. eine zweite Option:

Code Auswählen Erweitern

[hidden]="{{icon}} | map('info':true, .*:false)"
Mit einer ftui-column habe ich es aber noch nicht versucht. Mit Elementen wie button oder icon funktioniert es.
Was mit nocht einfällt wäre es mit

Code Auswählen Erweitern

| toBool()zu probieren.
Gruß,
Matthias

[DocCyber]

Hallo Matthias,
danke für deinen Vorschlag, aber dass geht leider auch nicht.
Mittlerweile habe ich etliche Dinge ausprobiert, nichts funktioniert.
Jetzt habe ich aber äußerst merkwürdige Umstände entdeckt.

Code Auswählen Erweitern

<ftui-content file="myContent/c-Test.html" hide="true" icon="football"></ftui-content>myContent/c-Test.html:

Code Auswählen Erweitern

<ftui-icon name="{{icon}}" size="2" hidden="{{hide}}"></ftui-icon>
<ftui-icon name="beer" size="2" ></ftui-icon>
<ftui-icon name="ambulance" size="2" hidden="false"></ftui-icon>Sobald hidden= im Code erscheint, verschwindet das Icon, und zwar unabhängig vom Wert für hidden.

Anders herum ist es genau so verrückt:
Setzt man die eckigen Klammern, also [hidden]=, dann wird das Icon immer angezeigt, und zwar ebenfalls völlig unabhängig vom angegebenen bzw übergebenen Wert.

Kann das jemand erklären?

[MDietrich]

Das ist echt tricky, ein direktes Parametrieren von hidden kriege ich auch nicht hin!!!!
Bei meinen Anwendungen übergebe ich immer entweder ein DEVICE oder ein READING, welches ich dann mit map anpasse, etwa so:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="5" width="5" color="grey">TEST
<ftui-content file="c_test.html" Bild="home" Anzeige="d_dummy1"></ftui-content>
</ftui-grid-tile>und

Code Auswählen Erweitern

<ftui-row>
<ftui-icon name="{{Bild}}" size="2"></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-icon name="cog" size="2" ></ftui-icon>
</ftui-row>
<ftui-row>
<ftui-label>Icon: {{Bild}}</ftui-label>
<ftui-label>Anzeige: {{Anzeige}}</ftui-label>
<ftui-label>Dummy:</ftui-label>
<ftui-label [text]= "{{Anzeige}}"></ftui-label>
<ftui-icon name="wrench" size="2" [hidden]="{{Anzeige}} | map('on : true, off : false')"></ftui-icon>
</ftui-row>
Ist ein wenig wie debugging zu alten BASIC Zeiten

[yersinia]

Wird der Inhalt aus content nicht bereits beim Seitenaufbau geladen und nicht erst, wenn man diesen aufruft? Das würde bedeuten, dass

Code Auswählen Erweitern

[hidden]=ein event benötigt (zB durch ein Reading), damit es gesetzt wird.

Ansonsten musst du hidden explizit setzen - und zwar bevor du den content aufrufst. Denn dann entscheidest du ja auch bereits, ob du den Inhalt dann auch sehen willst. Ggf wäre es einfacher, eine andere Content-Version zu nutzen.

Nutz doch deine Erkenntnis:

Sobald hidden= im Code erscheint, verschwindet das Icon, und zwar unabhängig vom Wert für hidden.

Code Auswählen Erweitern

<ftui-content file="myContent/c-Test.html" myhide=" hidden" icon="football"></ftui-content>

Code Auswählen Erweitern

<ftui-icon name="{{icon}}" size="2"{{myhide}}></ftui-icon>
<ftui-icon name="beer" size="2"></ftui-icon>
<ftui-icon name="ambulance" size="2" hidden="false"></ftui-icon>
man könnte auch mit inlineCSS arbeiten:

Code Auswählen Erweitern

<ftui-content file="myContent/c-Test.html" mystyle="display: none;" icon="football"></ftui-content>

Code Auswählen Erweitern

<ftui-icon name="{{icon}}" size="2" style="{{mystyle}}"></ftui-icon>
<ftui-icon name="beer" size="2"></ftui-icon>
<ftui-icon name="ambulance" size="2" hidden="false"></ftui-icon>

[DocCyber]

entweder ein DEVICE oder ein READING

Ja, so mache ich das bisher auch.
Manche Probleme erscheinen erst dann, wenn man es leider etwas anders braucht.

Aber mit eurer Hilfe werde ich schon noch eine gute Lösung finden.
@Yersinia hat auch ein paar Vorschläge gemacht...

[DocCyber]

Ansonsten musst du hidden explizit setzen

aber das habe ich doch gemacht: (hallo Yersinia  )

<ftui-content file="myContent/c-Test.html" hide="true" icon="football">
...
<ftui-icon name="{{icon}}" size="2" hidden="{{hide}}">

(oder meinst du etwas anderes?)

Nutz doch deine Erkenntnis:

Stimmt, das könnte man so machen und es funktioniert auch.
Aber solange nicht klar ist, warum allein das Wort 'hidden' diese Möglichkeit bietet, bevorzuge ich deinen weiteren Vorschlag mit inline-CSS.
Danke dafür.


Jetzt weiß ich aber noch immer nicht, warum ich mit Pipes wie map() oder isNot() einen übergebenen Parameter, hier z.B. icon, nicht bearbeiten bzw auswerten kann.
Dann könnte ich nämlich mein ursprüngliches Problemchen lösen und die Sichtbarkeit eines Elements vom Namen eines anderen abhängig machen.

Code Auswählen Erweitern

[hidden]="{{icon}} | map('info':true,'wrench':false)"Wenn {{icon}} in einem Reading verwendet wird, klappt das hingegen.

[yersinia]

Jetzt weiß ich aber noch immer nicht, warum ich mit Pipes wie map() oder isNot() einen übergebenen Parameter, hier z.B. icon, nicht bearbeiten bzw auswerten kann.
Dann könnte ich nämlich mein ursprüngliches Problemchen lösen und die Sichtbarkeit eines Elements vom Namen eines anderen abhängig machen.

Code Auswählen Erweitern

[hidden]="{{icon}} | map('info':true,'wrench':false)"Wenn {{icon}} in einem Reading verwendet wird, klappt das hingegen.

Weil dein {{icon}} kein event-erzeugendes, per FTUI3 in FHEM abonnierbares Ereignis ist, auf das FTUI3 reagieren könnte, wenn sich ein Status ändert.

(oder meinst du etwas anderes?)

Ja. Da {{identifier}} "nur" eine RegEx-Ersetzung zu sein scheint, kannst du hidden explizit auch als solches setzen. Du weisst doch schon beim Aufruf des contents, dass du gewisse Elemente verstecken willst - und nicht erst, wenn der content geladen worden und irgendwo ein event erzeugt worden ist.
Im aufrufenden content:

Code Auswählen Erweitern

<ftui-content file="myContent/c-Test.html" myhide=" hidden" icon="football"></ftui-content>und im content dann selbst

Code Auswählen Erweitern

<ftui-icon name="{{icon}}" size="2"{{myhide}}></ftui-icon>ergibt dann im geladenen (!) content

Code Auswählen Erweitern

<ftui-icon name="football" size="2" hidden></ftui-icon>
Ob

Code Auswählen Erweitern

<ftui-content file="myContent/c-Test.html" myhide=" hidden=\"true\"" icon="football"></ftui-content>funktioniert müsste man testen.

[DocCyber]

Weil dein {{icon}} kein event-erzeugendes, per FTUI3 in FHEM abonnierbares Ereignis ist, auf das FTUI3 reagieren könnte, wenn sich ein Status ändert.

Yow - es ist mittlerweile klar geworden, warum das so ist.
Danke für's Erklären.