Probleme mit ftui3 seit dem letzten Update diese Woche

[meier81]

Hallo setstate,

ich habe leider Probleme mit der Anzeige meiner ftui3 Seite seit dem letzten Update diese Woche.

Nur meine Hauptseite sieht noch "normal" aus, alle weiteren Seiten hängen alle angezeigten Elemente oben links in der Ecke. Ich habe dir mal einen Screenshot angefügt das du siehst was ich meine.
Zudem ist jetzt auch auf der Hauptseite rechts ein ca. 5mm breiter schwarzer Leerraum senkrecht, das Bild wird also nicht mehr vollständig auf die Breite angepasst. Beim refresh kommt dort für ganz kurze Zeit ein Scrollbalken der dann wieder verschwindet und hinterlässt quasi die freie Fläche.

Als Datei habe ich die

Code Auswählen Erweitern

www/ftui/components/grid/grid.component.js ausgemacht, spiele ich die von vorher wieder ein sieht alles wieder super aus und mit der Änderung verhaut es mir alles von der Anzeige.

Kannst du das bitte nochmal prüfen bzw. mir mitteilen falls etwas zu ändern ist bei mir was ich ändern muss um diesen Fehler zu beheben.

LG und danke dir schonmal.

Markus

[Prof. Dr. Peter Henning]

Ich habe ein anderes Problem.

In einer FTUI3-Installation blende ich Daten aus einer anderen FTUI3-Installation ein.
Das ging bisher wunderbar, indem die betreffende Seite einfach ein

Code Auswählen Erweitern

  <meta name="fhemweb_url" content="http://<andere IP-Adresse>:8083/fhem/" />bekam. Seit dem Update werden allerdings alle Inhalte der eingeblendeten Seite extrem dunkel (unlesbar...) dargestellt - so wie es direkt nach dem Neuladen einer beliebigen FTUI3-Seite ist, wenn die Widgets noch nicht aktualisiert sind.

- Was kann man tun, um das zu vermeiden?
- Welche Dateien wurden geändert, die dieses Verhalten hervorrufen, gibt es evtl. einen Workaround?

LG

pah

[HGButte]

Hallo setstate,

ich habe leider Probleme mit der Anzeige meiner ftui3 Seite seit dem letzten Update diese Woche.

Nur meine Hauptseite sieht noch "normal" aus, alle weiteren Seiten hängen alle angezeigten Elemente oben links in der Ecke. Ich habe dir mal einen Screenshot angefügt das du siehst was ich meine.
Zudem ist jetzt auch auf der Hauptseite rechts ein ca. 5mm breiter schwarzer Leerraum senkrecht, das Bild wird also nicht mehr vollständig auf die Breite angepasst. Beim refresh kommt dort für ganz kurze Zeit ein Scrollbalken der dann wieder verschwindet und hinterlässt quasi die freie Fläche.

Als Datei habe ich die

Code Auswählen Erweitern

www/ftui/components/grid/grid.component.js ausgemacht, spiele ich die von vorher wieder ein sieht alles wieder super aus und mit der Änderung verhaut es mir alles von der Anzeige.

Kannst du das bitte nochmal prüfen bzw. mir mitteilen falls etwas zu ändern ist bei mir was ich ändern muss um diesen Fehler zu beheben.

LG und danke dir schonmal.

Markus

Bei mir ist's genauso.

Mit der neuesten Version scheinen das "Resize" nicht mehr zu gehen.

[setstate]

Ohne Beispielscode oder Demonstrator kann ich nicht sehen, was bei euch falsch ist oder wodurch die Probleme ausgelöst werden. Funktioniert den ./examples/grid.html ?

[Prof. Dr. Peter Henning]

Funktioniert den ./examples/grid.html ?

Ja.

Ich habe jetzt eine wahrscheinliche Ursache gefunden.
In die betreffende Seite binde ich folgendes JavaScript ein:

Code Auswählen Erweitern

const ftui_pv1_power    = () => input => pv1_power(input);
function pv1_power(power) {
    var a = document.getElementById('pv1a');
    var b = document.getElementById('pv1b');
    var c = document.getElementById('pv1c');
    var s;
    if (power > 0.0) {
        s = "url(#g_v_d)";
    } else {
        s = "url(#b_s)";
    }
    a.style.fill = s;
    b.style.fill = s;
    c.style.fill = s;
    return power;
}
Die pipeline Funktion ist also eigentlich nur ein "Durchlauferhitzer", die den Datenwert von Power einfach durchreicht. Allerdings zwischendrin - je nach Wert - ein fill-Pattern für ein anderes Element umschießt. Genauer ist das die Laufrichtung einer Animation.

In der Seite wird das dann verwendet als

Code Auswählen Erweitern

<ftui-label class="size-1" [text]="nt5000:Pac | fix(2) | ftui_pv1_power()">
                <span slot="unit" class="size--2">kW</span>
            </ftui-label>Und genau das funktioniert nicht mehr, dieses Label bleibt leer.

Edit: Nein, ist zwar ein neuer Fehler - aber nicht die Ursache des Problems. Wenn ich diese selbstdefinierten Pipeline-Funktionen herausnehme, sind alle Werte da und werden auch aktualisiert. Aber die Seite bleib trotzdem total dunkel.

LG

pah

[meier81]

Ohne Beispielscode oder Demonstrator kann ich nicht sehen, was bei euch falsch ist oder wodurch die Probleme ausgelöst werden. Funktioniert den ./examples/grid.html ?

Hallo setstate,

ja /examples/grid.html funktioniert bei mir soweit ohne Probleme. Ich habe dir hier mal einen Teil meiner Config hochgeladen, wie gesagt home funktioniert soweit und bei energie sind alle grid Elemente oben links an Position 1/1.

Falls du noch Infos brauchst melde dich einfach.

[HGButte]

Ich habe mal die diversen grid examples getestet.

grid_responsive.html reagiert auf das resizen des Browsers.

grid.html und grid_resize.html reagieren nicht auf das resizen.
Nur beim Reload wir das entsprechend layouted, aber ein keine Reaktion auf das Resizen des Browserfensters.

Ich habe auch mal mit Claude rumgespielt:

Warum das zu deinen Symptomen passt: Dein Grid reagiert nur noch auf Resize, wenn onConnected() tatsächlich läuft. Fällt der Hook aus, kommt der Resize-Observer nie in Gang. Außerdem hören die verschachtelten Grids nicht mehr auf ftuiComponentsAdded, sobald ein ftui-content seinen Inhalt nachlädt. Das erklärt, warum deren Kacheln in deinem DOM nur position: absolute haben. Ich habe aber nicht gesehen, warum der Hook bei dir ausfallen sollte. Denkbar ist ein Fehler in binding.connect(), das jetzt vor onConnected() läuft.

Mein Layout ist dem von meier81 sehr ähnlich.

In "content-home.html":

<ftui-grid margin="2" shape="round" resize>
  <ftui-grid-tile row="1" col="1" height="2" width="6">     <--- das grid-tile hat nur den style "position: absolute;" und das wars. keine width, height, left oder top.

[setstate]

neues Update -> ist es wieder besser jetzt ?

[Prof. Dr. Peter Henning]

Ich habe meinen Fehler auch weiter eingegrenzt.

Die folgenden Dinge funktionieren _nicht mehr_, wenn sie auf einer Seite verwendet werden, die mit der Direktive
     

Code Auswählen Erweitern

<meta name="fhemweb_url" content="http://192.168.0.90:8083/fhem/" />auf einer anderen Instanz von FTUI3 ausgeführt werden:

1. Selbst definierte Pipeline-Funktionen, so wie im Post unten dargestellt.

2. Popups. Ein Code wie

Code Auswählen Erweitern

<!--ftui-popup id="energydetails" width="80%" height="80%" timeout="120">
            <ftui-header>Energiedetails</ftui-header>
            <ftui-label color="white" class="size-0" slot="close" popup-close>Ausblenden</ftui-label>
            <ftui-content file="energydetail.html"></ftui-content>
        </ftui-popup-->Sorgt dafür, dass die Seite überhaupt nicht fertig gerendert wird, sie bleibt ausgegraut. Und zwar unabhängig von dem ftui-content-Tag.

Mit dem zweiten Fehler kann man leben, dann gibt es eben derzeit kein Popup.

Bei den Pipeline-Funktionen wüsste ich gerne, wie man das umgehen kann.

LG

pah

[Prof. Dr. Peter Henning]

neues Update -> ist es wieder besser jetzt ?

Leider nicht. Fehler mit Pipeline und Popup bestehen weiterhin.

LG

pah

[Prof. Dr. Peter Henning]

Und noch ein Fehler im allerletzten Update:

Code Auswählen Erweitern

<div style="position:absolute;left:300px;top:20px;width:300px">
      <ftui-clock format="hh:mm" style="font-family:Helvetica;font-size:70px;font-weight:bold;color:#cd2626;text-align:left"></ftui-clock>
    </div>
    <div style="position:absolute;left:300px;top:100px;width:300px">
      <ftui-clock format="ee, D. MMMM YYYY" style="font-family:Helvetica;font-size:30px;font-weight:bold;color:blue;text-align:left"></ftui-clock>
      </div>wird nur noch winzig dargestellt, Skalierung der Schrift geht nicht

LG

pah

[setstate]

ftui-header gibt es nicht, du musst ftui-popup-header benutzen

<ftui-popup-header>Energiedetails</ftui-popup-header>

[HGButte]

Bei mir scheint es zu passen. Danke.