FTUI version 3

[Dracolein]

Habe die bas-icons auf dem raspi gelöscht, danach die zip-file runtergeladen, entpackt und die icons wieder in das richtige Verzeichnis verschoben.
Danach Cache leeren, Browserneustart, zur Sicherheit 2fach gemacht, weiterhin ohne Erfolg.
Ich glaube weiterhin nicht, dass die Icons das Problem sind, zumal obiger Hinweis von @yersinia bereits einen Effekt bei mir hatte - wenn auch mit erheblichen Nebenwirkungen.

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 Erweitern

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

Code Auswählen Erweitern

/* 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.

Dieser Versuch behebt bei mir erneut die bas-icon-Problematik, belässt aber die o.g. Nebenwirkungen, dass andere svg-Icons nicht mehr eingefärbt dargestellt werden.

[Dracolein]

Leute sorry, ich weiß nicht wie das passieren konnte, aber der Fehler liegt bei mir!
Und zwar habe ich irgendwie die geänderte Iconset-Definition im Code nicht abgespeichert! Dort stand bis grade

Code Auswählen Erweitern

icon-set="bas"
Wo ist der Smilie, der den Kopf gegen die Wand klatscht.... big sorry.

Mit

Code Auswählen Erweitern

icon-set="basline"
läuft alles!

[mr_petz]

...

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
...

Hatte ich hier alles schon erläutert...
Aber schön das es jetzt funzt...
LG

[torte]

Hallöchen,

wie kann ich Credential beim Aufruf übergeben?

Wenn ich meine Seite https://USER:PASSWORD@fhem.zuhausebeimir.de/fhem/ftui/handy.html
aufrufe erscheint diese zwar es gibt aber ein paar Einschränkungen.
Die Icons werden zb nicht angezeigt. 

In der BrowserConsole findet sich der Fehler

Code Auswählen Erweitern

TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: icons/none.svg
    at FtuiWeather.loadIcon (icon.component.js:79:7)
    at FtuiWeather.onAttributeChanged (weather.component.js:39:14)
    at FtuiWeather.attributeChangedCallback (element.component.js:76:12)
    at FtuiWeather.set (element.component.js:171:25)
    at ftui.binding.js:115:41
    at Array.forEach (<anonymous>)
    at FtuiBinding.onReadingEvent (ftui.binding.js:95:8)
    at Object.observer (ftui.binding.js:60:69)
    at ftui.helper.js:508:53
    at Array.forEach (<anonymous>)
(anonymous) @ icon.component.js:84

Hab da was bei Google zu gefunden bin aber ehrlich gesagt nicht schlau draus geworden.

[mr_petz]

@Dracolein, @yersinia, @LuGu

Ich hatte jetzt Zeit die ftui-weather Geschichte nachzustellen.
Man muss hier klar unterscheiden zwischen bas-master und bas-dev.
bas-dev: https://github.com/basmilius/weather-icons/tree/dev ist mit den offenen Wolken und dünneren Linien etc..
bas-master: https://github.com/basmilius/weather-icons/tree/master mit den Weiß im inneren der Sonne (im FTUI3) und etwas dickeren Linien.
Normal wäre ja ein master die Releaseversion, aber irgendwie steht das git auf dev wenn man es aufruft???

Wer die bas-master weiterhin nutzen möchte ohne dem Weiß im inneren der Sonne, Wolken etc. gibt in einer user.css folgendes ein:

Code Auswählen Erweitern


ftui-weather {
  --color-base: transparent;
}

Damit wird nur bei ftui-weather und bas-master das innere Transparent.

Edit: alternativ kann man in dem <ftui-weather> tag:

Code Auswählen Erweitern


color="transparent"

mit angeben, da sich currentColor darauf bezieht.

getestet unter FF und Chrome

LG mr_petz

[mr_petz]

Hi. kleines Update für die bas-dev line animated Icon´s.
Ich habe die Wolken geschlossen bei den animierten Line Icon´s.
Die benötigten wären:
overcast
overcast-day
overcast-night
partly-cloudy-day
partly-cloudy-night
partly-cloudy-day-fog
partly-cloudy-night-fog

Diese findet ihr im Anhang.

Ich habe nur im entsprechenden path die untere Öffnung mit "L 295.5 223.5" geschlossen.

Wer es noch bei den still Icon´s machen will, hier ist der path der Wolke:

Code Auswählen Erweitern


M295.5 223.5a56 56 0 000-112l-2.5.1a83.9 83.9 0 00-153-64.2 56 56 0 00-84.6 48.1 56.6 56.6 0 00.8 9 60 60 0 0011.2 119 L 295.5 223.5

Einfach mit Notepad++ oder ähnlichen bearbeiten.

LG mr_petz

[yersinia]

Ich habe nur im entsprechenden path die untere Öffnung mit "L 295.5 223.5" geschlossen.

Cool, Danke.

Mir ist zusätzlich aufgefallen, dass zumindest im Firefox die Animationen nicht funktionieren (zB beim rain.svg). Firefox meckert nicht interpretierbare Werte für Werte zwischen 1 und -1 an; ein Beispiel:

Code Auswählen Erweitern

Unerwarteter Wert 0s; x1.end+.33s beim Parsen des Attributs begin.

Auf der Konsole konnte ich das durch suchen und ersetzen fixen. Der erste Befehl wechselt in das Verzeichnis mit den animierten SVGs für basline. Alle anderen befehle übergeben die SVGs in dem Ordner (find) an sed zum ersetzen in den SVGs. Sudo weil user pi keine Berechtigungen für die Dateien von fhem hat. Ein Backup kann nicht schaden vorher, just in case.

Code Auswählen Erweitern

cd /opt/fhem/www/ftui/icons/weather/bas/line/all
sudo find *.svg -type f -exec sed -i 's/-.5s/-0.5s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .17s;/; 0.17s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.33s/+0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.33s/-0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".33s/"0.33s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .33s;/; 0.33s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.42s/+0.42s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".58s/"0.58s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".67s/"0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.67s/-0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.67s/+0.67s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/+.75s/+0.75s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".83s/"0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/-.83s/-0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .83s;/; 0.83s;/g' {} \;
Sollte analog auch auf fill anwendbar sein.

[mr_petz]

Ja ist seltsam unter FF.
Bei snow, drizzle und anderen Animierten ist auch ein bug drin. Es müssten 3 Schneeflocken/Tropfen nebeneinander kommen. Unter FF kommt nur die Linke oder 2.
So ein Verhalten hatte ich schon oft unter FF beim programmieren...
Da muss basmilius noch bissl dran arbeiten...
LG mr_petz

Edit:
Da fehlen auch führende nullen bei begin und keyTimes in der Animation...

[yersinia]

Bei snow, drizzle und anderen Animierten ist auch ein bug drin. Es müssten 3 Schneeflocken/Tropfen nebeneinander kommen. Unter FF kommt nur die Linke oder 2.
[...]
Da fehlen auch führende nullen bei begin und keyTimes in der Animation...

Das müsste eigtl mit dem Suchen&Ersetzen gefixt sein. Bei drizzle zB durch

Code Auswählen Erweitern

sudo find *.svg -type f -exec sed -i 's/-.83s/-0.83s/g' {} \;
sudo find *.svg -type f -exec sed -i 's/".83s/"0.83s/g' {} \;
und zusätzlich

Code Auswählen Erweitern

sudo find *.svg -type f -exec sed -i 's/; .83s;/; 0.83s;/g' {} \;
sudo find *.svg -type f -exec sed -i 's/; .17s;/; 0.17s;/g' {} \;
abgedeckt sein.

Ich hab es oben ergänzt.

[LuGu]

@mr-petz, @

Ich habe noch nicht ganz verstanden, was ihr da treibt.
Ich habe mir die Icons hier geholt:
https://github.com/basmilius/weather-icons/archive/refs/heads/master.zip
und habe keine Probleme mit der Animation. Sie sieht unter FF und Chrom gleich aus.
Da einzige, was ich geändert habe, ist stroke-width von "3" auf "2" geändert., damit die Icons etwas dezenter nicht so aufdringlich wirken.
Und den Tip von mr_petz

Code Auswählen Erweitern

ftui-weather {
  --color-base: transparent;
}
habe ich auch eingebaut.

Gruß LuGu

[mr_petz]

@LuGu

Laut deinem Beitrag von hier:
https://forum.fhem.de/index.php/topic,115259.msg1219769.html#msg1219769
hattest du da noch die Icons vom dev Branch.
Jetzt hast du die Icons vom master Branch.

Bei uns ging es jetzt um die vom dev Branch:
https://github.com/basmilius/weather-icons/archive/refs/heads/dev.zip
Hier ist das Verhalten so mit den offenen Wolken und der fehlerhaften Animation unter FF.

LG mr_petz

[LuGu]

@mr_petz.

Alles klar. Ja erst hatte ich den dev branch, bin dann nach euren ersten Informationen auf den master.zip gewechselt. 

Hauptsache, es läuft jetzt.
Werde mir aber auch noch mal den Unterschied in den svg's ansehen, um wieder was dazuzulernen.

Gruß LuGu

[muma]

Hallo zusammen,
in dem Wiki Artikel über Icons wird beschrieben, dass FHEM alle fill:#000000 und fill="#000000" durch eine Farbe ersetzt.
https://wiki.fhem.de/wiki/Icons

Kann es sein, dass die ftui3 das anders macht und wenn ja wie müsste ich denn ein icon svg gestalten, damit die Farbgebung klappt? 

[yersinia]

Kann es sein, dass die ftui3 das anders macht und wenn ja wie müsste ich denn ein icon svg gestalten, damit die Farbgebung klappt? 

Ja, weil

in dem Wiki Artikel über Icons wird beschrieben, dass FHEM alle fill:#000000 und fill="#000000" durch eine Farbe ersetzt.
https://wiki.fhem.de/wiki/Icons

beschreibt dies für FHEMWEB, nicht für FTUI.

IMHO kannst du, wenn du es nicht vorgeben willst, das fill: Attribut weglassen da FTUI3 dies via CSS vordefiniert.
Zum Testen kannst du ein einfaches SVG erstellen - und fill einmal über xml aber auch style setzen und schauen, wie FTUI3 es verarbeitet.

[muma]

Danke für die Rückmeldung @yersinia
Das erklärt schon mal, warum scheinbar generell alle Farben ersetzt werden.

Kann es sein, dass hierbei generell nur Pfade und keine Objekte aus dem SVG gefärbt werden
und bei den Pfaden generell nur der Innenbereichen und nicht die Kontur?