FTUI version 3

[setstate]

Moin Setstate,

im Popup gibt es scheinbar noch ein Bug.
Ein Image aus einem FHEM Reading mit einer URL wird im Popup nicht angezeigt.

<ftui-image [src]="myDummy:state"></ftui-image>

Kannst Du das bestätigen oder ist das noch nicht fertig?

VG

oh, ja. Das ist ein kniffliger Bug. Ich suche ...

[octek0815]

@octek0815

mit den Icons meine ich folgendes Konstrukt

Code Auswählen Erweitern


                <ftui-cell>
                        <ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
                                <ftui-icon class="size-1"
                                        path="../images/openautomation/"
                                        [name]="Heizung.Status_WZ:Heizung | map('manuell:sani_heating_manual, automatic:sani_heating_automatic, boost:sani_heating_boost, off:general_aus')"
                                        [color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"
                                ></ftui-icon>
                        </ftui-button>
                </ftui-cell>

Die Icons kommen aus openautomation und fhemSVG, ../image funtioniert nicht da anscheinend die Unterverzeichnisse nicht durchsucht werden.

Gruss
Eisix

Moin Esix,

das mit den original Icons funktioniert nicht (Farbproblem).

Kopiere doch die SVG Icons nach ../icons im neuen FTUI3 Pfad (vorher natürlich durch IconMoon jagen damit das mit den Farben funktioniert).
Ich packe immer ein Unterstrich an den Anfang des Namens vom Icon, um diese von den vorhanden Icons abzugrenzen.

So könnte dann der Code aussehen...

Code Auswählen Erweitern


<ftui-cell>
<ftui-button (value)="Heizung.Status_WZ:Heizung" states="manuell,automatic,boost,off" shape="circle" color="Heizung_WZ:stateColor" fill="solid">
<ftui-icon class="size-1"
[name]="Heizung.Status_WZ:Heizung | map('manuell:_sani_heating_manual, automatic:_sani_heating_automatic, boost:_sani_heating_boost, off:_general_aus')"
[color]="Heizung.Status_WZ:Heizung | map('manuell:blue, automatic:mygreen, boost:red, off:grey')"></ftui-icon>
</ftui-button>
</ftui-cell>


Grüße
Olli

[Eisix]

Hallo octek,

das war mein Plan b. Habe ich bei den Kleinklima Icons schon so gemacht. Für die openautomation icons hatte setstate schon mal was an der css gedreht. Grundsätzlich bevorzuge ich aber ein zentrales Icon Repository.

Danke
Eisix

[setstate]

Farbige OA Icons funktionieren doch. Siehe https://forum.fhem.de/index.php/topic,115259.msg1103837/topicseen.html#msg1103837

[octek0815]

Wie kann ich in einem Popup bei ftui-row oder ftui-column die gesamte Breite ausnutzen.
Irgendwie gelingt mir das nicht. Hier mein Code...

Code Auswählen Erweitern


<ftui-popup id="popup-wetterwarnung" timeout="120" width="1093px" height="651px">
<header class="size-5">Wetterwarnung</header>
<ftui-row>
<ftui-column>
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_ShortText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_LongText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_Start_Date"><span slot="start">Von: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_0_Start_Time"></ftui-label></span></ftui-label></ftui-label>
<ftui-label [text]="System_Unwetterzentrale:Warn_0_End_Date"><span slot="start">Bis: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_0_End_Time"></ftui-label></span></ftui-label></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_1_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_ShortText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_LongText"</ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_Start_Date"><span slot="start">Von: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_1_Start_Time"></ftui-label></span></ftui-label></ftui-label>
<ftui-label [text]="System_Unwetterzentrale:Warn_1_End_Date"><span slot="start">Bis: </span><span slot="end">|<ftui-label [text]="System_Unwetterzentrale:Warn_1_End_Time"></ftui-label></span></ftui-label></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column>
<ftui-image src="http://www.unwetterzentrale.de/images/map/bayern_index.png" nocache width="400"></ftui-image>
</ftui-column>
</ftui-row>
</ftui-popup>


[setstate]

du hast ganz viele <ftui-label>, wo das > fehlt.
Muss aber nicht die Ursache deines Problems sein.

Wo soll mehr Breite hin? In der linken Spalte hast du pro Reihe 3 Spalten, die sich gleichmässig den Platz teilen. Link hast du ein Icon, was im Screenshot nicht zu sehen ist, Mitte der Text und rechts eine leere Spalte, die aber auch 1/3 des Platzes einnimmt.

Code Auswählen Erweitern


<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
                  ... Text
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>

[octek0815]

du hast ganz viele <ftui-label>, wo das > fehlt.
Muss aber nicht die Ursache deines Problems sein.

Wo soll mehr Breite hin? In der linken Spalte hast du pro Reihe 3 Spalten, die sich gleichmässig den Platz teilen. Link hast du ein Icon, was im Screenshot nicht zu sehen ist, Mitte der Text und rechts eine leere Spalte, die aber auch 1/3 des Platzes einnimmt.

Code Auswählen Erweitern


<ftui-row>
<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>
<ftui-column>
                  ... Text
</ftui-column>
<ftui-column>
</ftui-column>
</ftui-row>

Das mit den fehleneden > hatte ich inder Tat übersehen, danke für den Hinweis. Ist aber nicht die Ursache.
Wenn ich das hier...

Code Auswählen Erweitern


<ftui-column>
<ftui-image [src]="System_Unwetterzentrale:Warn_0_IconURL" nocache></ftui-image>
</ftui-column>

...komplett wegnehme sieht es aus wie im angehängten Bild. Keine Zentrierung und keine Nutzung der vollen Column Breite.

PS: Das mit dem Icon ist das Problem mit dem Image im Popup aus einem Reading.

[setstate]

Am Image Bug bin ich dran. Im Chrome geht es schon, Safari stäubt sich aber noch.

Weite kannst du mit width anpassen

Code Auswählen Erweitern

<ftui-column width="20%">

[octek0815]

Am Image Bug bin ich dran. Im Chrome geht es schon, Safari stäubt sich aber noch.

Weite kannst du mit width anpassen

Code Auswählen Erweitern

<ftui-column width="20%">

Ja super, damit ist es gut und der Bugfix für Image im Popup funktioniert auch perfekt. Danke!!!

[octek0815]

Wie kann ich das hier realisieren?

Es soll beim Drücken des Buttons die URL in den State eines Dummy geschrieben werden:

Code Auswählen Erweitern


<ftui-button (value)="dIPCAMhaustuerURL" states='http://10.20.8.99:58081' fill="clear">
<ftui-icon style="font-size:1em;" name="_security_camera" popup-target="popup-ipcam-haustuer" color="white"></ftui-icon>
</ftui-button>


Ausgeführt wird das...

[Eisix]

Farbige OA Icons funktionieren doch. Siehe https://forum.fhem.de/index.php/topic,115259.msg1103837/topicseen.html#msg1103837

Ja aber nicht die von fhemSVG.

Gruß
Eisix

[setstate]

Ja aber nicht die von fhemSVG.

Gruß
Eisix

Jetzt aber.
Leider musste ich auf die pösen inline Styles mit ganz pöse, pöse !important draufhauen 

[Eisix]

Und wie mach ich das dann wenn ich fhemSVG und openautomation in einem Icon hab. Kann ich zwei Pfade in path angeben oder wie?

[setstate]

Und wie mach ich das dann wenn ich fhemSVG und openautomation in einem Icon hab. Kann ich zwei Pfade in path angeben oder wie?

ach, jetzt versteh ich ... Durch das map - einmal Icons aus dem Path und andermal aus dem anderen

Dann muss man für path auch ein map machen

Code Auswählen Erweitern


[path]="dummy1 | map('0: `../images/openautomation/`, 1: `../images/fhemSVG/`')"
[name]="dummy1 | map('0: audio_audio, 1: alexa')"


Oder alles in einen Folder werfen, wie schon vorgeschlagen.

[piccer]

Hallo,

ich hab jetzt seit einiger Zeit ein altes Ipad3 an der Wand, jetzt wollte ich FTUI 3 testen, aber siehe da, alle Geräte und Browser spielen mit, das Ipad aber nicht mehr. Nichtmal die verlinkten Examples funktionieren. Javascript-Problem? Wird es jetzt Zeit, das Ipad in Rente zu schicken?

Grüße
Piccer