FTUI version 3

[mkriegl]

Wie kann man denn einen Zeilenumbruch erzwingen? Ich lasse mir die Wetterbeschreibung ausgeben und der Text ist für den Forecast mindestens 2 Zeilen

WGWetterFC:fc2_narrative

Code Auswählen Erweitern

        <ftui-row>
        <ftui-cell>
        <ftui-label [text]="PPWetter:fc1_date | toDate() | format('eeee')" class="size-2"></ftui-label>
       <ftui-label [text]="WGWetterFC:fc2_narrative"></ftui-label>
        </ftui-cell>
        </ftui-row>


[mr_petz]

@mkriegl

https://forum.fhem.de/index.php/topic,115259.msg1228653.html#msg1228653

LG

[mkriegl]

super, danke

[dennis_n]

Hallo zusammen,

ich steige gerade von FTUI auf FTUI3 um und arbeite mich gerade in die neue Syntax ein.
Jetzt habe ich mal einen dummy angelegt mit den Werten on und off. Je nachdem welcher Zustand der dummy hat, möchte ich ein Icon in rot oder grün anzeigen lassen.

Dazu habe ich das hier definiert:

Code Auswählen Erweitern

<ftui-icon name="circle" size="-3" [color]="Name_dummy | step('on:red, off:green')"></ftui-icon>

Aber die beiden definierten Farben werden mir nicht angezeigt. Das Icon ist standard grau.
was mache ich falsch?

Danke

Dennis

[yersinia]

Code Auswählen Erweitern

<ftui-icon name="circle" size="-3" [color]="Name_dummy | step('on:red, off:green')"></ftui-icon>
was mache ich falsch?

Du nutzt step falsch. Für Zuweisungen ist map zu nutzen, step ist für Zahlwertbereiche:

Code Auswählen Erweitern

<ftui-icon name="circle" size="-3" [color]="Name_dummy:READING | map(`on:red, off:green`)"></ftui-icon>

[dennis_n]

Ok danke.

So funktioniert es jetzt:

Code Auswählen Erweitern

<ftui-icon size="-3" [name]="Name_dummy:state | map('off: circle, on: circle')" [color]="Name_dummy:state | map('off:green, on:error')"></ftui-icon>

Gruss
Dennis

[mr_petz]

Ok danke.

So funktioniert es jetzt:

Code Auswählen Erweitern

<ftui-icon size="-3" [name]="Name_dummy:state | map('off: circle, on: circle')" [color]="Name_dummy:state | map('off:green, on:error')"></ftui-icon>

Gruss
Dennis

Hi,
| map('off: circle, on: circle') macht nicht viel sinn. Es wird nur beim ersten start nicht angezeigt wenn noch kein Event kommt. Danach wird es immer mit den entsprechenden colors angezeigt.
Hier würde name="circle" reichen.

LG

[dennis_n]

Jap, vielen Dank.

Wurde geändert und funktioniert.

Gruss
Dennis

[jual]

Hallo FTUI Fans. Mit etwas Hoffnung, dass ich über die Feiertage etwas Zeit finde, wollte ich mich mal in FTUI3 einarbeiten und habe direkt mal eine erste Frage. Sofern das Thema im Thread schon behandelt wurde, gerne darauf hinweisen und wie ich den entsprechenden Beitrag finde. Ich habe noch nicht alle 195 Seiten durchgelesen .

In FTUI2 habe ich mir für ein Tablet die Seiten so gebaut, dass die einzelnen Bereiche sich in Breite und Höhe verändern, wenn das Browserfenster in der Größe verändert wird. Im neuen FTUI3 habe ich noch nicht so richtig verstanden, was ich da genau machen muß, bzw. welche Befehle dafür benötigt werden. Mit "resize" habe ich auch schon experimentiert aber das funktioniert nur in der Breite. Mir fehlt irgendetwas, dass die Anzeigehöhe auf die Höhe des Browserfensters angepasst wird.

Im FTUI2 hatte ich einen Code, der in etwa wie folgt aussah:

Code Auswählen Erweitern



IN DER INDEXDATEI:
<div class="page" id="content_home"></div>


IN DER CONTENDATEI
<main id="content_home">
<div class="hbox">
<div class="vbox">
<div class="card">
                            Inhalt
</div">
</div>
        </div>
</main>


Mit ftui-row und ftui-column bin ich auch noch nicht weiter gekommen, weil ich nicht weiß, welcher Container da drum herum gehört, damit die Größe immer auf die Browsergröße ausgerichtet wird.

Vielleicht kann mir jemand mal einen Hinweise geben oder auf entsprechende Beispielcodes verweisen.

[setstate]

die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen

Beispiel: examples/grid_resize.html

[jual]

die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen

Beispiel: examples/grid_resize.html

Super, vielen Dank. Teste ich nachher direkt nochmal.

[jual]

die Behandlung von resize habe ich jetzt angepasst. Damit funktioniert das auch bei Höhenänderungen

Beispiel: examples/grid_resize.html

Kurze Rückmeldung zur resize-Anpassung. Diese funktioniert nun grundsätzlich, wie gewünscht. Trotzdem habe ich nochmal eine Verständnisfrage bzw. ein kleines Darstellungsproblem, bei dem ich nicht weiter komme.

Ich habe die Menüdarstellung aus dem Example menu.html als Basis genutzt und dann über "content" meine gewünschte Seite eingebunden. Diese besteht nun aus der Griddarstellung, was zunächst einmal auch alles funktioniert. Allerdings passt die Höhe noch nicht richtig und soweit ich das erkennen konnte, liegt dies am "ftui-row". Dieses Element hat eine größere Höhe, als alle anderen Elemente, was dazu führt, dass es über den Browserrand hinausragt. Auch nach oben hin scheint das Element von der Größe her bei Position 0 zu beginnen. Mein Gefühl ist, dass die Größe und Position dieses Elements nicht richtig zu den Elternelementen berechnet wird.

Die Frage ist, ob ich irgendeine Definition anpassen muss (diverse Tests mit height waren bisher nicht erfolgreich), es einen umschliessenden Containers bedarf oder die Kombination von "View" und "Grid" gar nicht zusammen passt.

Mein Code als Beispiel:

Code Auswählen Erweitern


<ftui-grid resize>

<ftui-grid-tile row="1" col="1" height="5" width="6">
<ftui-row>
<ftui-button [(value)]="wz_Lampen" states="an, aus">
<ftui-icon [name]="wz_Lampen | map('an:lightbulb-on, aus:lightbulb')" class="size-4"></ftui-icon></ftui-button>
</ftui-row>
<ftui-row >
...
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="1" col="7" height="5" width="3">
<ftui-row>
...
</ftui-row>
<ftui-row>
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="1" col="10" height="5" width="3">
<ftui-row>
...
</ftui-row>
...
<ftui-row>
</ftui-grid-tile>

</ftui-grid>



[setstate]

beim Grid habe ich noch eine Kleinigkeit gefunden, die das verursacht haben könnte. Teste jetzt nochmal.

[jual]

beim Grid habe ich noch eine Kleinigkeit gefunden, die das verursacht haben könnte. Teste jetzt nochmal.

Perfekt, so sieht das jetzt gut aus. Eine Kleinigkeit noch direkt, dann brauche ich nicht danach suchen. Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.

Danke für die schnellen Umsetzungen!

[yersinia]

Gibt es eine Einstellung, dass die Scrollbars des Browser verschwinden, wenn diese nicht notwendig sind. Aktuell werden beide Scrollbars noch angezeigt, ohne dass man scrollen kann, da die Größe ja jetzt passt.

Eigene user css einbinden und dann in diese

Code Auswählen Erweitern

html {
overflow-x: hidden;
overflow-y: hidden;
}
einfügen.