Neuer Style: f18

[schwatter]

Nabend,

ich habe mich gerade an https://demo-fhem.cooltux.net/ erinnert.

1. Skin auf f18
2. Von Raum zu Raum geklickt.
3. Da wenig Devices in der Demo sind ist die Last nicht hoch, dennoch konnte ich den Effekt provozieren.
4. Hier eine Slow Motion: https://www.dropbox.com/scl/fi/1wqlyzghvf3fnbwi8pvyt/Aufzeichnung-2025-08-28-182204.mp4?rlkey=4jmmzuodn8ewyyielfed594u9&st=250brwnj&dl=0

Die Fehlerbeschreibung dafür ist Cumulative Layout Shift (CLS) oder Flash of Unstyled Content (FOUC)?
Nagelt mich nicht fest, ich bin nicht vom Fach.

Gruß schwatter

[rudolfkoenig]

2. Ich glaube allein durch WEBphone blendet f18 das Seitenmenü aus. <-- Das ist auch gut so. Nicht ändern.

Nein, das haengt von der "Aufloesung" des Endgeraetes ab.

Kannst Du mir eine Methode nennen, wie ich das testen kann?
Ich habe versucht es mit dem Chrome eigenen Network-Throttling zu simulieren, aber bei mir schaut alles immer sehr sauber aus, ich sehe keinen Unterschied zwischen alt und neu mit opacity.
Womoeglich haengt das Problem an der CPU?

Ich sitze auch noch auf dem Schlauch, wie ich das in f18 Special einbauen soll: f18.js kommt nach f18style.css, und f18style.css ist statisch.

Mit etwas Bastelei (FHEMWEB Attribute Css & JavaScripts) kann man das Feature auch ohne f18.js/f18style.css Modifikation haben

[schwatter]

Nein, das haengt von der "Aufloesung" des Endgeraetes ab.

Ok, dann hatte ich das falsch in Erinnerung.

Kannst Du mir eine Methode nennen, wie ich das testen kann?
Ich habe versucht es mit dem Chrome eigenen Network-Throttling zu simulieren, aber bei mir schaut alles immer sehr sauber aus, ich sehe keinen Unterschied zwischen alt und neu mit opacity.
Womoeglich haengt das Problem an der CPU?

CPU spielt definitiv eine Rolle. Zum erzwingen habe ich in Chrome auf einem I5 in W11 sowohl bei mir, als auch auf dem Demoserver
von Cooltux CLS nachstellen können. Dazu Netzwerk auf 3G und CPU-Verlangsamung auf 4x oder 6x.
Mein Server ist nicht der schnellste, das gebe ich zu. Ein Intel J4105 mit 16GB Arbeitsspeicher. Und Fhem ist da in Proxmox
eingesperrt. Aber die CPU idled trotzdem zwischen 3% und 8% im Proxmox-Terminal. Klicke ich viel hin und her, werden es auch mal 15%.
Sie Bilder im Anhang und das Video:
https://www.dropbox.com/scl/fi/v5t5fsoowz37mootsd7tp/drosselung_3G_CPU_6x.mp4?rlkey=ysxiipozy5njss0gz82qavatm&st=2x4055qh&dl=0

Ich sitze auch noch auf dem Schlauch, wie ich das in f18 Special einbauen soll: f18.js kommt nach f18style.css, und f18style.css ist statisch.

Der Vorschlag von mir ist erstmal auch nur statisch. Ich schaue auch, vielleicht fällt mir etwas ein.

Mit etwas Bastelei (FHEMWEB Attribute Css & JavaScripts) kann man das Feature auch ohne f18.js/f18style.css Modifikation haben

Bestimmt, die Lösung finde ich aber nicht gut.

Gruß schwatter

[tomcat.x]

Hallo zusammen,

ich bin bei der Suche auf diesen Thread gestossen, der letzte Eintrag ist schon ein paar Tage her, vielleicht passt es aber trotzdem besser hier rein als in einen neuen.

Aktuell nutze ich den f18 gar nicht. Ich stolpere aber immer mal wieder über Themen, die nur hier angepasst werden. Zuletzt das Thema WebApp und jetzt "[Voicecontrol] Button für Fhemweb". Bisher nutze ich "dark" und es war mir gar nicht aufgefallen, dass es bei bei f18 auch die Auswahl zwischen light und dark gibt. Der Style dark gefällt mir immer noch besser, aber ich wollte trotzdem mal den f18 ausprobieren. Denn wichtiger ist mir eigentlich die Optik im Floorplan und bei Bedarf dann die zusätzliche Funktionalität, die nur im f18 geht.

Jetzt zu meinem Thema. Ich dachte ja, der Floorplan würde ziemlich gleich aussehen. Nach ein paar Farbanpassungen tut er das auch, fast. Weiter oben gab es aber schon mal das Thema Transparenz. Ich habe ein paar versteckte Weblinks im Floorplan, um auf andere Seiten, Geräte Details oder die fhem Startseite zu kommen. Die stimmen kaum mit vorhandenen Icons überein, überlagern manchmal mehrere oder sind in einen freien Bereich. Versteckt habe ich die mit htmlattr style="color:transparent", als Text wir ein alias mit "XX" oder ähnlich verwendet (mehr Zeichen, wenn der Bereich größer sein soll). Mit dark sehe ich nichts im Floorplan, mit f18 dann "XX". Eventuell gibt es für meinen Anwendungsfall eine andere Lösung, aber generell will man vielleicht mal etwas ein- oder ausblenden, dafür wäre color:transparent auch eine Lösung.

Weiß jemand eine Lösung für mein Problem, damit Objekte wieder transparent gemacht werden können?

Bei Bedarf hier ein Beispiel:

Code Auswählen Erweitern

defmod WL_fhem_home weblink link https://fhem.domain.de:8083/fhem?
attr WL_fhem_home alias XX
attr WL_fhem_home fp_F_Dashboard_0 5,5,0,X,
attr WL_fhem_home htmlattr style="color:transparent"
attr WL_fhem_home room T_Types->WebLinks,X_System->Floorplan
Viele Grüße
Thomas

[rudolfkoenig]

Denn wichtiger ist mir eigentlich die Optik im Floorplan

Floorplan ist ein trauriges Thema, der Autor ist seit ca 9 Jahren nicht mehr aktiv.

Weiß jemand eine Lösung für mein Problem, damit Objekte wieder transparent gemacht werden können?

Versuchs mal mit "color:transparent!important"

[tomcat.x]

Floorplan ist ein trauriges Thema, der Autor ist seit ca 9 Jahren nicht mehr aktiv.

Dann sollte ich mir über die paar Weblinks vermutlich weniger Gedanken machen. Aber gerade funktioniert ja noch alles.

Versuchs mal mit "color:transparent!important"

Das war ja einfach Danke!