FTUI version 3

mr_petz · 25 April 2022, 17:40:38

@Dracolein

Willkommen zurück

zu 1.
Es gab mehrere color Änderungen in den Themes:
Hier z.Bsp.:
https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296
und mobile-theme:
https://github.com/knowthelist/ftui/commit/f7a30a6eb6ad2106f17b505aa943dcf4bd7e70fc#diff-5111255ac364faaa4a1b7693f55fef5be0a63711fa281f4684ec40a25abcd96c
und paar Themes sind dazu gekommen.

Das blue hat sich aber vom Hexwert im ftui-theme und in der color-attributes nicht geändet.
Jetzt kommt es drauf an welches Theme du hast.
Oder du erstellst dein eigenes Blau in einer user.css. So wird es nicht beim nächsten update geändert.

zu2.
Hast du auch den letzten Stand von basmilius (da waren auch paar updates die letzte Zeit)?
Wie sieht deine Definition jetzt aus? Es gab ja mehrere Änderungen in der weather.map.
Zur Zeit gibt es bas, basfill und basline als iconset.
Vermutlich hast du bas iconset, weil du alle in bas_ umbenannt hast.
Das soll in den nächsten Versionen komplett wegfallen:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L159

Bei basline z.Bsp. wäre es normal:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L237
und du kannst die Icons direkt übernehmen von basmilius ohne umbenennen.

Zieh sie dir nochmal neu und setze das iconset auf basline (Pfad wäre dann /icons/weather/bas/line/all/), weil bei mir ist alles gut. siehe Anhang.

LG mr_petz

Edit:
zum testen der Sonne kannst du diesen Code verwenden:
(Der ist unabhängig vom Reading)

Code Auswählen


<ftui-weather size="0" icon-set="basline" provider="proplantaICON" condition="t1">CLOUDLESS</ftui-weather>

alternativ:

Code Auswählen


<ftui-weather size="0" icon-set="basline" provider="proplantaICON_LONG" condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif">CLOUDLESS</ftui-weather>

SirMarco · 25 April 2022, 20:07:17

Zitat von: megadodopublications am 08 April 2022, 16:50:34
Hallo zusammen,

meine FTUI3 Installation startet sehr langsam; bei der Analyse habe ich verschiedene Auffälligkeiten gefunden, bei deren Bewertung/Analyse ich eure Unterstützung erbitte.

Mangels wirklicher Kenntnis, habe ich mich ein wenig in der Chrome Console langgehangelt:

3.)
ich sehe wiederkehrend in der Console Meldungen
Code Auswählen Erweitern
fhemservice - created filter with xx devices websocket restart connection websocket no connection found refresh nest start in ms ftuiapp init components - done

Details siehe Screenshot (mehrere)

FTUI3 läuft in einer eigenen FHEM Instanz; sowohl die FTUI3 als auch die Master Instanz laufen auf einem gemeinsamen Proxmox Host, Ressourcenauslastung dort ist unauffällig.

Frage: ist das normal im Zuge des Startups oder deutet das auf ein instabile Verbindungen hin?

Hallo megadodopublications

zu Punkt 3:

Habe das mal getestet. Bei mir ähnliches Verhalten und Konfiguration mit LXC Proxmox Container
Es kann ca 300x keine Connection gefunden werden.

Gleiches Verhalten auf dem FHEM Webserver.

Hast du schon etwas finden können warum das so ist?

Code Auswählen

Internals:
   BYTES_READ 5994649
   BYTES_WRITTEN 185691555
   CONNECTS   608
   DEF        8001 global
   FD         11
   FUUID      5e133be7-f33f-abcc-0498-91f6223522f57eda
   NAME       WWW_FTUI
   NR         100
   NTFY_ORDER 50-WWW_FTUI
   PORT       8001
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2022-04-21 18:57:11   state           Initialized
Attributes:
   CORS       1
   DbLogExclude .*
   csrfToken  none
   csrfTokenHTTPHeader 1
   group      WEB
   icon       rc_WEB
   longpoll   websocket
   room       00_System

Grüsse

Dracolein · 26 April 2022, 09:39:03

Zitat von: mr_petz am 25 April 2022, 17:40:38
Hast du auch den letzten Stand von basmilius (da waren auch paar updates die letzte Zeit)?
Wie sieht deine Definition jetzt aus? Es gab ja mehrere Änderungen in der weather.map.
Zur Zeit gibt es bas, basfill und basline als iconset.
Vermutlich hast du bas iconset, weil du alle in bas_ umbenannt hast.
Das soll in den nächsten Versionen komplett wegfallen:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L159

Bei basline z.Bsp. wäre es normal:
https://github.com/knowthelist/ftui/blob/dc688a618d49a244dd84d0bb9a8b0bd4e5bf992d/www/ftui/components/weather/weather.map.js#L237
und du kannst die Icons direkt übernehmen von basmilius ohne umbenennen.

Zieh sie dir nochmal neu und setze das iconset auf basline (Pfad wäre dann /icons/weather/bas/line/all/), weil bei mir ist alles gut. siehe Anhang.

Ich hab mir die bas-icons nochmal neu gezogen und in dem vorgesehenen Pfad eingefügt ( /icons/weather/bas/line/all/)
Meine Definition sieht so aus:

Code Auswählen

<ftui-weather popup-target="wettervorhersage" class="size-7" icon-set="basline" provider="proplantaICON" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>

("bas" habe ich bereits in "basline" geändert - Darstellung funktioniert grundsätzlich)

Habe die Sache mittels Deines Codeschnipsels getestet:

Zitat von: mr_petz am 25 April 2022, 17:40:38
alternativ:
Code Auswählen Erweitern
<ftui-weather size="0" icon-set="basline" provider="proplantaICON_LONG" condition="https://www.proplanta.de/wetterdaten/images/symbole/t1.gif">CLOUDLESS</ftui-weather>

und weiß der Teufel warum, so sieht es weiterhin aus:

mr_petz · 26 April 2022, 10:00:04

Mhh.
Cache vom Browser geleert?
Welches Theme benutzt du?

Dracolein · 26 April 2022, 10:08:10

Cache geleert.

<link href="themes/ftui-theme.css" rel="stylesheet">

Chromium Version 92.0.4515.98

mr_petz · 26 April 2022, 11:38:01

Also ich konnte weder in chrome, edge, FF ein Fehlverhalten feststellen.
Getestet mit den statischen noch mit den animierten Icons von bas.

Hast du irgendeinen Eintrag in einer user.css mit svg?
Vielleicht auch mal chromium aktualisieren. v98.0.4758.107 ist die Aktuelle...

LG

Dracolein · 27 April 2022, 08:25:58

Kurios, hier getestet im Firefox, siehe Anhang.

Die Füllfarbe, dieses grau ist #BFBFBF (lt. Photoshop) und diese Änderung bei mir ist zweifelsohne erst seit meinem letzten "Update all" vor wenigen Tagen.
Die Icons sind definitiv transparent, das konnte ich testen.
Es wirkt, als sei - und ich habe hier überhaupt keinen Schimmer - irgendwo definiert, dass bei gewissen Bildern eine Hintergrundfarbe =#BFBFBF verwendet werden soll?

yersinia · 27 April 2022, 08:47:04

Zitat von: Dracolein am 27 April 2022, 08:25:58Es wirkt, als sei - und ich habe hier überhaupt keinen Schimmer - irgendwo definiert, dass bei gewissen Bildern eine Hintergrundfarbe =#BFBFBF verwendet werden soll?

Kommentiere mal Zeile 23 in der icon.component.css aus:

Code Auswählen

/* fill: inherit !important; */
Die bezieht sich auf das sub-element g unter svg.
Dann einmal komplett neu laden - inkl geleertem cache.

Wenn das noch nicht hilft, auch Zeile 18 auskommentieren:

Code Auswählen

/* fill: inherit; */
Dann einmal komplett neu laden - inkl geleertem cache.

Wenn das noch nicht hilft, auch Zeile 13 auskommentieren:

Code Auswählen

/* fill: currentColor; */
Dann einmal komplett neu laden - inkl geleertem cache.

Die Änderungen sind erst mal zum Testen, werden beim nächsten Update überschrieben wenn icon.component.css nicht exkludiert wird.

Das Update kam am 20. Januar imho.

EDIT:

Zitat von: Dracolein am 27 April 2022, 08:25:58#BFBFBF verwendet werden soll?

Das kommt von der Vordergrundfarbe, welche --light ist und als

Code Auswählen

--light: #bfbfbf;
definiert ist.

currentColor übernimmt den Farbwert der Vordergrundfarbe (color) und übernimmt diesen (hier) als Hintergrundfarbe.

Ich weiss nicht, ob du es mit inline CSS überschreiben werden kannst, kannst es aber versuchen.

Dracolein · 27 April 2022, 09:26:57

Kurze Nachfrage: "komplett neu laden" = shutdown restart? Oder reicht es den Browser neu zu laden (inkl Cache leeren) ?

yersinia · 27 April 2022, 09:29:07

Zitat von: Dracolein am 27 April 2022, 09:26:57Oder reicht es den Browser neu zu laden (inkl Cache leeren) ?

Browser reicht; nur um sicherzustellen, dass der Browser die aktualisierten Dateien neu lädt.

Wenn du du mit dem WebDeveloper Tool vom Firefox umgehen kannst, kannst du das auch on-the-fly ändern: dort kannst du zur Laufzeit die CSS manipulieren; insbesondere Einträge löschen & hinzufügen.

Dracolein · 27 April 2022, 10:26:06

Zitat von: yersinia am 27 April 2022, 08:47:04
Kommentiere mal Zeile 23 in der icon.component.css aus:
Code Auswählen Erweitern
/* fill: inherit !important; */
Die bezieht sich auf das sub-element g unter svg.
Dann einmal komplett neu laden - inkl geleertem cache.

Dies hier führt zum gewünschten Ergebnis bei den bas-Icons, bringt aber Probleme bei anderen, im Einsatz befindlichen SVG-Icons, dessen Farben ich so definiert habe

Code Auswählen

<ftui-icon path="../images/openautomation" name="control_arrow_down_right" size="-2" color="red"></ftui-icon>
Diese Icons sind dann einfach nur noch schwarz, so wie die originale Bilddatei

yersinia · 27 April 2022, 12:10:12

Ja, mit Nebeneffekten war zu rechnen. Ich musste etwas probieren und hatte gehofft, dass man mit einem spezifischen selector hier auf basline einige spezifischen Werte an die SVG unterhalb von ftui-weather übergeben kann; in etwa so:

Code Auswählen

ftui-weather[icon-set="basline"] > span > svg g [fill],
ftui-weather[icon-set="basline"] > span > svg g[fill],
ftui-weather[icon-set="basline"] > span > svg path[fill] {
    fill: none !important;
}

Aber dies funktioniert irgendwie nicht. Eventuell muss ich mir das nochmal genauer ansehen. Oder setstate.

Durchs Testen habe ich dann aber noch einen anderen Weg gefunden, kann aber die Nebeneffekte nicht testen (aka ich sehe keine bei mir):
Einmal Zeile 13 auskommentieren:

Code Auswählen

/* fill: currentColor; */
und die Zeilen 16 und 17 ändern:

Code Auswählen

/* svg g[fill],
svg g [fill]  { */
svg g[fill] {

(entfernt die svg g [fill] Selektion)

Dadurch wird das fill-Element der basline svgs nicht übersteuert.

LuGu · 27 April 2022, 12:31:51

@Dracolein,

ich hatte die gleichen Effekte. Bei mir lag es aber an den bas icons.
Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git

Danach war alles bestens ohne irgendwelche css Änderungen.

Gruß LuGu

Dracolein · 27 April 2022, 12:49:31

Zitat von: LuGu am 27 April 2022, 12:31:51
@Dracolein,

ich hatte die gleichen Effekte. Bei mir lag es aber an den bas icons.
Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git

Danach war alles bestens ohne irgendwelche css Änderungen.

Gruß LuGu

Erkläre mir, wie du die Dateien "geholt" hast. Möglicherweise liegt dort mein Fehler (?). Ich habe sie einzeln per "Speichern unter" runtergeladen, da ich nirgendwo ein Package als Download fand.

yersinia · 27 April 2022, 12:59:26

Zitat von: LuGu am 27 April 2022, 12:31:51Habe die bas icons in fhem gelöscht und neu direct von git geholt.
https://github.com/basmilius/weather-icons.git

Man man man, da hätte man ja auch drauf kommen können @LuGu. *facepalm*

danke für den Tipp.
Was mich hier aber (noch) stört ist, dass die Wolken unten nicht geschlossen sind bei zB cloudy. Aber man muss auch anmerken, dass das neue Release 3 noch nicht raus ist.

Zitat von: Dracolein am 27 April 2022, 12:49:31Erkläre mir, wie du die Dateien "geholt" hast. Möglicherweise liegt dort mein Fehler (?). Ich habe sie einzeln per "Speichern unter" runtergeladen, da ich nirgendwo ein Package als Download fand.

github idF und stellt dir das repository als zip zur Verfügung: https://github.com/basmilius/weather-icons/archive/refs/heads/dev.zip (das kann man dann auch via wget dann auf den Raspi ziehen)
Die basline animierten svgs findest du dann unter weather-icons/tree/dev/production/line/svg.