devStateicon im Dashboard grösser darstellen

[hdosw]

Hallo,

ich habe eigene SVG-icons (s.Anhang). Diese möchte ich ohne am icon etwas ändern zu müssen etwas grösser in meinem Dashboard anzeigen lassen, weiss aber nicht wie.
Irgendeinen Tip?

[betateilchen]

Das "s" in svg steht für scalable... also die Größe änderbar, ohne am icon etwas ändern zu müssen.

Wenn die beiden Screenshots aus der FHEMWEB Oberfläche stammen, kannst Du die zu verwendende Größe über einen eigenen style (ein eigenes css) definieren.

[hdosw]

Hallo und danke für die Antwort. Kannst du mir noch sagen wie ich einen eigenen style definieren kann und wie der dann aussehen soll?

[TomLee]

Kannst du mir noch sagen wie ich einen eigenen style definieren kann und wie der dann aussehen soll?

Hallo,

Damian hat hier mal gezeigt, wie man im "Perl-devStateIcon" eine eigene CSS-Klasse definiert.

Hilft Dir das weiter ?

Gruß Thomas

[hdosw]

Hallo Thomas,
danke für deine Antwort. Ich hab das ganze versucht umzusetzen was mir leider nicht gelingt. Bei mir sind es 2 svg-icons nähmlich taster2_on.svg und taster2_off.svg. Diese möchte ich grösser im Dashboard. 

Konfiguriert ist das devStateIcon in einem DUMMY:

Code Auswählen Erweitern

defmod Anel_SD_01_dummy dummy
attr Anel_SD_01_dummy alias 1-Telefon
attr Anel_SD_01_dummy devStateIcon on:taster2_on:off off:taster2_off:on
attr Anel_SD_01_dummy group Netzsteckdosen Büro Dieter
attr Anel_SD_01_dummy icon ge_wht_steckdose
attr Anel_SD_01_dummy room Dieter,Power Control
attr Anel_SD_01_dummy webCmd :

setstate Anel_SD_01_dummy off
setstate Anel_SD_01_dummy 2024-12-13 16:54:49 state off
Kannst Du mir in meinem Fall weiterhelfen?

Gruß

Dieter

[TomLee]

Bei mir funzt sowas:

Code Auswählen Erweitern

attr Anel_SD_01_dummy devStateIcon {('<style>.mysvg {height:20px;; width:20px}</style>'.FW_makeImage(ReadingsVal($name,'state','on') eq 'on' ? 'taster2_on' : 'taster2_off','tastericon','mysvg'))}
Muss aber zugeben, das ich gerade selbst nicht dahinterkomme warum damit auch geschalten werden kann. Hätte erwartet das damit nur die Anzeige erfolgt.

edit:
Schalten ist so nur mit on und off in setList möglich.

[hdosw]

Hallo Thomas,

super danke für den Tip  So kann ich die Grösse ändern.
Schalten geht dann zwar nur mit setList was aber kein Problem ist.
Ich habe das ganze jetzt so abgeändert:

Code Auswählen Erweitern

{('<style>.taster2_off {height:25px;; width:60px}</style><style>.taster2_on {height:25px;; width:60px}</style>'.FW_makeImage(ReadingsVal($name, "state", "on") =~ "off" ? 'taster2_off' :'taster2_on'))}
Das hat den Vorteil, dass von den insgesamt 8 taster2-icons alle angepasst werden.
Somit muss ich das nur bei einem dummy eingeben und alle anderen werden in der
definierten Größe angezeigt ohne dass ich devStateIcon ändern muss
und schalten geht dann bei den anderen 7 ohne setList.

Gruß
Dieter

[TomLee]

Nur kurz zu dem noch:

Code Auswählen Erweitern

<style>.taster2_off {height:25px;; width:60px}</style><style>.taster2_on {height:25px;; width:60px}</style>
Hier der erstbeste Link (ohne viel erklären zu müssen), den ich dazu gefunden habe, um das meinem Verständnis nach, mit der style-Angabe weniger umständlich zu anzugehen:

https://www.shecodes.io/athena/20479-how-to-apply-css-to-multiple-classes