[Gelöst] Wie die Größe von Icons in deStsateIcon ändern?

[Gisbert]

Hallo,

gibt es eine Möglichkeit in Fhem vorhandene Icons in ihrer Größe zu ändern? Das Icon "euro", das als Bild das €-Symbol darstellt, ist viel zu groß ausgefallen im Verhältnis zur Schriftgröße und anderen Icons. Ziel wäre eine Größe von 1/2 bis 2/3 der Urspungsgröße, und ich möchte es in devStateIcon einsetzen.

Viele​ Grüße​ Gisbert​

[Beta-User]

Für das roborock-attrTemplate hatte Rudi mal diesen Vorschlag gemacht:

Code Auswählen Erweitern

attr DEVICE devStateIcon { '<img src="fhem/images/DEVNAME_map.svg" style="max-width:256;;max-height:256;;">' }
Sollte sich anpassen lassen .

[TomLee]

Fast  , es geht so nur wenn man die Maßeinheit mit angibt, zumindest bei mir:

Code Auswählen Erweitern

{ '<img src="/fhem/images/fhemSVG/euro.svg" style="max-width:50px;;max-height:50px;;">' }

[Gisbert]

Hallo Beta-User,
hallo TomLee,

vom Prinzip funktioniert es schon, ich hätte allerdings gleich erwähnen sollen, dass ich das devStateIcon in einem DOIF nutze und ich fallabhängige Farben haben möchte, also so:

Code Auswählen Erweitern

attr DEVICE devStateIcon (cmd_1|cmd_2):euro@red (cmd_3|cmd_4):euro@gray
"euro" gegen den Perlbefehl zu ersetzen, funktioniert natürlich nicht, das wäre auch zu einfach gewesen.

Gibt es für diesen Fall vielleicht auch eine Lösung?

Viele​ Grüße​ Gisbert​

[KernSani]

Es gibt eine FW_makeImage (oder so ähnlich) Funktion. Kann ich später mal raussuchen, der kann man wenn ich mich recht erinnere eine CSS-Klasse mitgeben (neben Icon und Farbe) damit könnte man evtl. etwas basteln...


Kurz, weil mobil....

[TomLee]

Hab mir dazu bis jetzt folgendes zusammengereimt:

Code Auswählen Erweitern

{my $a = 'euro@red';;$a='euro@gray' if (ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2");;"<div>" . FW_makeImage("$a","euro") ."</div>"}

FW_makeImage kann man einen optionalen dritten Parameter mitgeben

Eine Zeichenkette, die eine CSS-Klasse angibt.

Ich verstehe es so das man hier jetzt irgendwie die Größenangaben reinpacken kann,aber wie, finde kein Beispiel.

Ebentuell bin ich aber mit Zeichenkette und CSS-Klasse einfach auf dem falschen Dampfer.

[KernSani]

Du müsstest eine eigene CSS-Klasse definieren, die die width und/oder height Angaben enthält, entweder in einer separaten Datei, die über FHEMWEB mit eingelesen wird oder direkt in deinem Coding. Diese Klasse kannst du dann der Funktion mitgeben.


Kurz, weil mobil....

[Beta-User]

Hmm, es sollte doch möglich sein, auch die Hintergrundfarbe mitzugeben:

Code Auswählen Erweitern

{my $col = ReadingsVal($name, "state", "cmd_1") =~ m/cmd_1|cmd_2/ ? 'red' :'gray' ); return qq(<img src="/fhem/images/fhemSVG/euro.svg" style="max-width:50px;;max-height:50px;;background-color:$col;;">) }

[Gisbert]

Hallo Beta-User,

leider noch nicht ganz, das was beabsichtigt ist, aber die Größe lässt sich ändern.

• nach 'gray' ist eine Klammer zuviel
• mit background-color wird der Hintergrund rot eingefärbt, immerhin funktioniert das Prinzip, aber ich möchte das Symbol in roter oder grauer Farbe

color statt background-color führt aber leider nicht zu Ziel.

Viele Grüße Gisbert

[Damian]

Code Auswählen Erweitern

attr di_icon devStateIcon {my $a = 'euro@red';;$a='euro@gray' if (ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2");;'<style>.mysvg {height:10px;; width:10px}</style>'.FW_makeImage("$a","euro","mysvg")}

[TomLee]

Sehr cool, Danke für die Auflösung.

Oder halt die Variante, weil die auch gezeigt wurde:

Code Auswählen Erweitern

{my $a = ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2" ? 'euro@red' :'euro@gray';;'<style>.mysvg {height:10px;; width:10px}</style>'.FW_makeImage("$a","euro","mysvg")}

[Damian]

oder direkt ohne Variablen:

Code Auswählen Erweitern

attr di_icon devStateIcon {('<style>.mysvg {height:10px;; width:10px}</style>'.FW_makeImage(ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2" ? 'euro@red' :'euro@gray',"euro","mysvg"))}

[Gisbert]

Hallo Damian,
hallo TomLee, Beta-User und KernSani,

oder direkt ohne Variablen:

Code Auswählen Erweitern

attr di_icon devStateIcon {('<style>.mysvg {height:10px;; width:10px}</style>'.FW_makeImage(ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2" ? 'euro@red' :'euro@gray',"euro","mysvg"))}

Diese Variante habe ich jetzt eingebaut, und sie funktioniert tadellos.
Vielen Dank für diese Lösung.

Viele Grüße Gisbert

[TomLee]

Ich muss hier nochmal weil mir das jetzt schon wieder auffällt.

Ich hab seit diesem Thread immer noch ein Test-Device im Raum Test:

Code Auswählen Erweitern

defmod doif_T DOIF ([du_t1:"on"])(set du_t1 off)\
DOELSEIF\
([du_t1:"on"])(set du_t1 off)\
DOELSEIF\
([du_t1:"on"])(set du_t1 off)\
DOELSEIF\
([du_t1:"on"])(set du_t1 off)
attr doif_T comment {my $a = 'euro@red';;;;$a='euro@gray' if (ReadingsVal($name, "state", "dead") =~ "cmd_1|cmd_2");;;;"<div>" . FW_makeImage("$a","euro","max-width:100px;;max-height:100px;;") ."</div>"}\
\
\
{my $a = ReadingsVal($name, "state", "cmd_1") =~ "cmd_1|cmd_2" ? 'euro@red' :'euro@gray';;'<style>.mysvg {height:200px;; width:200px}</style>'.FW_makeImage("$a","euro","mysvg")}
attr doif_T devStateIcon {'<style>.mysvg {height:400px;; width:400px}</style>'.FW_makeImage(ReadingsVal($name,'state','cmd_1') =~ 'cmd_1|cmd_2' ? 'euro@red' :'euro@gray','euro','mysvg')}
attr doif_T room Test

setstate doif_T cmd_1
setstate doif_T 2022-04-22 13:44:07 Device du_t1
setstate doif_T 2022-04-22 13:44:07 cmd 1
setstate doif_T 2022-04-22 13:44:07 cmd_event set_cmd_1
setstate doif_T 2022-04-22 13:44:07 cmd_nr 1
setstate doif_T 2022-04-22 13:44:07 e_du_t1_events off
setstate doif_T 2022-04-22 09:14:22 mode enabled
setstate doif_T 2022-04-22 13:44:07 state cmd_1

Warum werden die Größenangaben ignoriert, es ist das letzte Beispiel von Damian und ich meine das hatte damals geklappt ?