VORSICHT beim Update von FTUI3

MDietrich · 31 Januar 2025, 09:44:03

Moin,
habe gerade ein Update durchlaufen lassen. Für FTUI3 gab es eine Menge Änderungen.
Mein Layout ist total daneben, Icons werden nicht gefunden, jede Menge Fehlermeldungen bei Labelzuweisungen

Gruß,
Matthias

marvin78 · 31 Januar 2025, 09:57:55

Du meinst das FTUI3, bei dem ganz deutlich darauf hingewiesen wird, dass es nicht kompatibel zu älteren Versionen ist?

https://github.com/knowthelist/ftui

MDietrich · 31 Januar 2025, 10:02:23

Ja, daß meine ich, Hatte vor 2 Wochen ein Update gemacht und mein Layout angepasst.
Es ist also ein Zustand, lange nach der Warnung!

setstate · 31 Januar 2025, 12:23:00

Das Update von gestern bringt ein neues Beispiel für ein nettes Mobil-Dashboard

MDietrich · 31 Januar 2025, 16:07:54

Hallo setstate,
bei dem Udpdate hat sich einiges bei mir verändert. Ich hatte bereits die neue Version, mein letztes Update war vom 22. Januar.
- das Layout des Grids hat sich verändert, im wesentlichen betroffn ist die Grit-Tile Höhe. Die unteren Tiels im Tabview waren vorher ganz unten (Bild1 und Bild2)
- Icons aus dem 'Thermostat' von Mr.Petz werden nicht gefunden ( das ist ein '//' im Namen) (Bild3)
- Beim Refresh der Webseite kommen eine ganze Reihe der Meldung aus der labelcomponent:86 TypeError: Cannot set properties of null (setting "textcontent") (Bild4)

Gruß,
Matthias

meier81 · 31 Januar 2025, 17:45:57

Hallo,

das kann ich leider auch bestätigen. War gerade fast fertig mit der großen Änderung vom letzten Jahr und dann gestern Abend leider wieder nach dem Update einiges im Argen.

Ich habe mal geschaut, die Datei die die Fehler und die Anzeigeprobleme verursacht ist die

Code Auswählen

/components/element.component.js
Wenn dieser Stand der Datei jetzt so bleiben soll wüsste ich gerne was jetzt zu ändern ist damit die ganzen Fehler (Iconfehler, Fehlermeldungen beim laden/refresh der Seite, etc.) zu beheben sind.

Gruß Markus

Jojo11 · 01 Februar 2025, 08:48:44

Moin zusammen,

ich versuche jetzt auch mal, meine Code anzupassen, damit das Ganze nach dem letzten major Update wieder so ausschaut wie vorher. Dabei ist mir aufgefallen, dass style-Angaben teilweise nicht mehr funktionieren, z.B.:

Code Auswählen

<ftui-column align-items="left" style="margin-left:10px;>Ist das gewollt bzw. gibt es dafür Abhilfe? Zur Feinjustierung habe ich das doch hier und da mal verwendet. Im icon-tag scheint das auch nicht mehr zu funktionieren. Selbst ein "!important" wird ignoriert

Angaben wie "background-color:red" funktionieren hingegen noch.

~~Weiter ist mir aufgefallen, dass labels jetzt ohne weitere Angabe sehr klein sind. Kann ich irgendwo zentral angeben, dass die Standardgröße z.B. "1em" sein soll?~~

schöne Grüße
Jojo

setstate · 01 Februar 2025, 12:50:55

margin und padding ist sind Standard-Attribute mit Defaultwert='' bei allen FTUI-Elementen. Beim Initialisieren werden dadurch alle style oder css Vorgaben für dieses Element mit '' überschrieben.
style="margin-left:10px;" hat also keine Wirkung. Also bitte keine margin und padding im Style-Attribute angeben. In meinen Beispielen benutze ich kein style-Attribute. Sollte alles ohne gehen.

So wäre es richtig

Code Auswählen

<ftui-column align-items="left" margin="0 0 0 10px">

Jojo11 · 01 Februar 2025, 13:05:01

Ja, das hatte ich gesucht. Jetzt passt es, danke!

Jojo11 · 02 Februar 2025, 10:08:23

Kann es sein, dass sich bei diesem Update am dropdown-Element etwas geändert hat?
Folgendes hat bisher immer funktioniert:

Code Auswählen

<ftui-dropdown [list]="lowerbattlimit:setList" [(value)]="lowerbattlimit"></ftui-dropdown>Der Dummy lowerbattlimit hat dabei ein setList

Code Auswählen

state:0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90Bei Klick auf das Dropdown kommen jetzt zwei Zeilen:
state
0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90
Gebe ich dagegen die Liste vor, funktioniert es:

Code Auswählen

<ftui-dropdown list="0,1,2,3,4,5,10,15,20,25,30,40,50,60,70,75,80,85,90" [(value)]="lowerbattlimit"></ftui-dropdown>
Woran kann das liegen?

schöne Grüße
Jojo

setstate · 02 Februar 2025, 12:46:06

ohne Angabe von delimiter wird einer gesucht. Hier wird ":" zuerst gefunden und benutzt.
Du müsstest den gewünschten Trenner angeben

Code Auswählen

delimiter=","

Jojo11 · 02 Februar 2025, 13:46:27

Top, das war's!
Herzlichen Dank! Da hätte ich wahrscheinlich alleine noch ne ganze Weile suchen müssen um drauf zu kommen. Dabei war ich schon im Quellcode der Beispielseite unterwegs

meier81 · 02 Februar 2025, 15:21:44

Hallo,

so hab mal ein bisschen geforscht und rausgefunden das meine Fehlermeldung (siehe Anhang) vom badge kommt. Diese funktionieren aber einwandfrei. Nehme ich die badge-Definitionen raus, sind die Fehler weg. Hier mal ein Auszug einer Definition:

Code Auswählen

      <ftui-column width="3%">
        <ftui-icon size="1" name="phone"
                   [hidden]="EG_wz_HW_FritzBox:tam1_newMsg | step('0:true, 1:false')"></ftui-icon>
        <ftui-badge [text]="EG_wz_HW_FritzBox:tam1_newMsg"
                    [hidden]="EG_wz_HW_FritzBox:tam1_newMsg | step('0:true, 1:false')">
        </ftui-badge>
      </ftui-column>

Gibt es hier einen Parameter den ich nicht gesetzt habe oder den er nun haben will?

Jojo11 · 02 Februar 2025, 16:29:58

Was mir bei Deinem Code auffällt, ist, dass Dein </ftui-icon> vor dem batch ist. Ich habe das immer so gemacht (batch innerhalb des icons)

Code Auswählen

<ftui-icon ...><ftui-badge size="-3" color="danger" ...></ftui-badge></ftui-icon>

Und so funktioniert es bei mir auch zuverlässig. Hat aber evtl. damit nichts zu tun...

schöne Grüße
Jojo

meier81 · 02 Februar 2025, 17:26:10

Hallo Jojo,

danke für deinen Tipp, hab es eben ausprobiert aber es ändert sich leider nichts an den vielen Fehlern die ich anstehen habe.

Hast du bei dir ftui auf dem aktuellsten Stand?

Ich habe auch Probleme seit dem letzten Update was die Anzeige betrifft, ich habe einige Stellen wo ich mit "width" angegeben habe, das Attribut scheint so jetzt auch nicht mehr zu funktionieren. Hier mal ein Beispiel:

Code Auswählen

  <ftui-grid-tile row="1" col="9" height="2" width="5">
    <ftui-grid-header>Debian & FHEM Monitor</ftui-grid-header>
    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Uptime"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:uptime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Letzer Neustart"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:starttime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="FHEM Uptime"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:fhemuptime_text"></ftui-label>
      </ftui-column>
    </ftui-row>

    <ftui-row>
      <ftui-column width="50%">
        <ftui-label size="1em" text="Letzer Neustart"></ftui-label>
      </ftui-column>

      <ftui-column>
    <ftui-label size="1em" [text]="NN_xx_SW_Sysmon:fhemstarttime_text"></ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

War vorher schön aufgeteilt in zwei Spalten a 50%, jetzt ist das total verschoben.

Jojo11 · 02 Februar 2025, 20:18:16

Mein ftui ist auf dem neuesten Stand. Fehlermeldungen sind mir keine aufgefallen.
Die Tabellen mit row und column hat es bei mir leider auch zerschossen. Da ich das nicht ganz nachvollziehen kann habe ich auf die Schnelle die columns durch einfache div-tags ersetzt - die kann ich präzise ausrichten. Aber das ist natürlich nicht ftui-spezifisch und nicht wirklich zu empfehlen

schöne Grüße
Jojo

setstate · 03 Februar 2025, 10:29:44

Es funktioniert nicht, wenn man nur bei einer Column die Weite angibt.
Entweder nirgends, dann wird gleichmässig verteilt (wenn der Inhalt es zulässt), oder man gibt es bei allen an.

Code Auswählen

      <ftui-row>
        <ftui-column width="25%" color="green">
          <ftui-label>25%</ftui-label>
        </ftui-column>
  
        <ftui-column width="50%" color="blue">
      <ftui-label>50%</ftui-label>
        </ftui-column>
  
        <ftui-column width="25%" color="red">
          <ftui-label>25%</ftui-label>
        </ftui-column>
      </ftui-row>

meier81 · 03 Februar 2025, 21:11:53

Hallo setstate,

vielen Dank für die Info. Hatte tatsächlich mal ganz kurz auch die Idee das mal zu probieren, hab´s dann aber doch nicht mehr probiert gehabt. Nur zum Verständnis: Vorher ging das ohne Probleme und mit dem aktuellen Update wird jetzt immer vorausgesetzt das entweder nichts angegeben wird bzw. man immer auf die Summe von 100% kommt.
Aber hab es jetzt angepasst, die Anzeigeprobleme sind nun alle weg.

Was ich aber weiterhin habe ist das wenn ich ein reload der Seite mache ich bei vielen Icons "File not found" stehen habe, ist aber nach ca. 3 Sekunden weg. Was mit hierbei aufgefallen ist ist das es alles Icons sind die dynamisiert sind, ich vermute das hier beim reload der Seite der Status der verknüpften Variable noch fehlt und er deshalb nicht weiß welches Icon er anzeigen soll. Hier mal eine Beispieldefinition wo ich dieses Verhalten habe:

Code Auswählen

<ftui-column>
  <ftui-icon size="3" [name]="NN_xx_SW_{{name}} | map('zuhause:home, schläft:bed, aufgestanden:child, abwesend: blind, verreist:plane')"></ftui-icon>
  <ftui-label size="1em">{{name}}</ftui-label>
</ftui-column>

Da hatte er ja vor dem Update zuerst mal kein Icon angezeigt und wenn dann der reload fertig war kam dann das richtige Icon.

Was aber tatsächlich stört sind die etlichen Fehlermeldungen die ich nach jedem reload erhalte, irgendwo scheint hier noch was im argen zu sein. Wie weiter oben schon berichtet scheint das Verhalten von den badge-Definitionen zu kommen, verhält sich das hier evtl. genauso wie es es hier für die Icons beschrieben habe?

LG Markus

Jojo11 · 04 Februar 2025, 07:53:01

Zu den icons: Definiere mal zusätzlich zu dem [name] tag noch ein name=... (mit einem Icon, welches verwendet werden soll bevor die Daten geladen wurden), dann sind die 404er Meldungen weg.

HGButte · 04 Februar 2025, 10:32:09

Zitat von: setstate am 03 Februar 2025, 10:29:44Es funktioniert nicht, wenn man nur bei einer Column die Weite angibt.
Entweder nirgends, dann wird gleichmässig verteilt (wenn der Inhalt es zulässt), oder man gibt es bei allen an.

Code Auswählen Erweitern
<ftui-row> <ftui-column width="25%" color="green"> <ftui-label>25%</ftui-label> </ftui-column> <ftui-column width="50%" color="blue"> <ftui-label>50%</ftui-label> </ftui-column> <ftui-column width="25%" color="red"> <ftui-label>25%</ftui-label> </ftui-column> </ftui-row>

Versuche auch gerade meine Layout Probleme zu beheben.
Ich habe sehr häufig "width=''" bzw. "height=''" verwendet um zu verhindern das ftui-column oder ftui-rows mehr Platz einnehmen als sie benötigen.
Wie kann ich sowas aktuell lösen?

Ein anderes Layout-Problem was ich habe:

-----------------------------------------
| 1 | 2 | 3 |
-----------------------------------------

Ich möchte dass Zelle (1) und Zelle (3) nur soviel Platz einnimmt wie notwendig und die Zelle (2) den restlichen Raum füllt.
Allerdings soll (2) nicht in Bereich von (3) hinein zeichnen oder (3) aus dem sichtbaren Bereich hinaus schieben.

Vielleicht kann mir dazu jemand weiterhelfen.

Bisher was grob so:

Code Auswählen

<ftui-row align-items="stretch">
		
		<ftui-column width="">
			<-- Zelle 1 -->
		</ftui-column>
		
		<ftui-column align-items="left">
			<-- Zelle 2 -->
		</ftui-column>
		
		<ftui-column align-items="right" width="">
			<-- Zelle 3 -->
		</ftui-column>
		
	</ftui-row>

//Edit: Habe es mitterweile selbst rausgefunden: grow="0"
Hatte mir zuvor ein css style gebastelt das "flex: 0" gesetzt hatte.
Dieses wurde mit der aktuellen Version von FTUI3 aber wieder tot gebügelt.

Eisix · 04 Februar 2025, 15:10:39

Hallo,

Das [text] vom Badge wirft auch den Error Label.component.js:86

Code Auswählen


␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-button class="size-2" fill="solid" shape="circle" color="white">
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-icon name="trash-o" color="brown" [class-name]="Abfall:Bioabfall_days | step('1:`size-2 spin`, 2:size-2')"></ftui-icon>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀<ftui-badge color="danger" [text]="Abfall:Bioabfall_days"></ftui-badge>
␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀␀</ftui-button>

Gruß
Eisix

meier81 · 05 Februar 2025, 15:07:04

Hallo setstate,

also mit dem Update von gestern Abend sind meine Fehlermeldungen alle weg und es funktioniert auch weiterhin alles wie es soll, vielen Dank für deine Mühen

LG Markus

Eisix · 05 Februar 2025, 17:23:02

Hallo,

Fehlermeldungen sind weg. Bei Circlemenue habe ich noch Probleme. Sieht für mich so aus das kein richtiges Overlay gemacht wird. Das Circlemenue ist auf die Zelle beschränkt. Tritt auch bei den Beispielen auf (Kreisanordnung).

Gruß
Eisix

HGButte · 05 Februar 2025, 18:35:35

Zitat von: HGButte am 04 Februar 2025, 10:32:09//Edit: Habe es mitterweile selbst rausgefunden: grow="0"
Hatte mir zuvor ein css style gebastelt das "flex: 0" gesetzt hatte.
Dieses wurde mit der aktuellen Version von FTUI3 aber wieder tot gebügelt.

Mit dem Update von gestern Abend ist mir meine Anpassung mit "grow='0'" wieder um die Ohren geflogen.
Jetzt funktioniert weder man alter Ansicht "width=''" noch mein Neuer mit "grow='0'".

Elemente mit "grow='0'" werden nun gar nicht mehr oder nur ein paar Pixel breit angezeigt.

Vielleicht kann mir zu meiner obigen Layoutfrage doch jemand helfen.

M.Piet · 14 März 2025, 11:20:56

Hallo zusammen,
ich habe nun auch alle nötigen Anpassungen vorgenommen, damit das neuste Update wieder fein angezeigt wird.

In Chrome am PC: alles fein.
In Fully bekomme ich aber beim Reload folgende Fehlermeldung, die ich vor dem Update nicht hatte:

speak.component.js:71
TypeError: Cannot read properties of undefined (reading "getVoices")

Jemand eine Idee, was das ist?