uiTable: Größe für ICON bzw. icon_label einstellen?

[gestein]

Hallo,

ich verwende die DOIF von hier https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Visualisierung:_Anwesenheitsstatus um die Anwesenheiten darzustellen.
Eines vorweg: funktioniert super und schaut toll aus

Ich würde gerne den Batterie-Status der Gtags bei den Icons anzeigen lassen.
Dazu habe ich die "sub bat_icon2" aus dem Beispiel https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#hsv-Funktion_f.C3.BCr_Farbskalierungen eingefügt und in der Template-Definition verwendet.

Die Batterie wird auch färbig neben dem Icon für die Anwesenheit angezeigt.
Es ist nur viel zu groß, nämlich genauso groß wie das Icon für die Anwesenheit.

Kann man irgendwie bestimmen, wie groß das angezeigte Icon sein soll?

Momentan sieht die Template-Definition einfach mal nur so aus:

Code Auswählen Erweitern

DEF TPL_person (bat_icon2($3).icon_label([$SELF:$1] eq "on" ? "$2\@DarkOrange":"$2\@Grey","$1","#e67e00","white",-10))

Danke im Voraus
lg, Gerhard

[Damian]

Hallo,

ich verwende die DOIF von hier https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Visualisierung:_Anwesenheitsstatus um die Anwesenheiten darzustellen.
Eines vorweg: funktioniert super und schaut toll aus

Ich würde gerne den Batterie-Status der Gtags bei den Icons anzeigen lassen.
Dazu habe ich die "sub bat_icon2" aus dem Beispiel https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#hsv-Funktion_f.C3.BCr_Farbskalierungen eingefügt und in der Template-Definition verwendet.

Die Batterie wird auch färbig neben dem Icon für die Anwesenheit angezeigt.
Es ist nur viel zu groß, nämlich genauso groß wie das Icon für die Anwesenheit.

Kann man irgendwie bestimmen, wie groß das angezeigte Icon sein soll?

Momentan sieht die Template-Definition einfach mal nur so aus:

Code Auswählen Erweitern

DEF TPL_person (bat_icon2($3).icon_label([$SELF:$1] eq "on" ? "$2\@DarkOrange":"$2\@Grey","$1","#e67e00","white",-10))

Danke im Voraus
lg, Gerhard

Icons werden durch FHEM-eigene Funktion dargestellt und dort ist die Skalierung der icons nicht vorgesehen. Da müsste man etwas Eigenes in html basteln, was die Icons skaliert - das habe ich aber nicht programmiert.

[gestein]

Hallo Damian,

ich verstehe. Schade.
Zur Not kann ich ja ein paar Icons erstellen, die ich händisch kleiner mache.

Vielen Dank
lg, Gerhard

[Sany]

Hi,

das geht schon: Die Funktion zur Darstellung der Icons ist FW_makeImage. Laut Wiki https://wiki.fhem.de/wiki/DevelopmentFHEMWEB-API gibts 3 Parameter: das Icon, Alternativtext und css-class. in uiTable ist die Funktion ICON eigentlich nur die Funktion FW_makeImage, aber nur mit einem Parameter: dem Icon.
Ich bin bei meinen "Studien" zu F18 darauf gestoßen, wie man sich das nun zu Nutze machen kann, und es funktioniert ganz prima.

Zuerst: es gilt nur für die WEB-Instanz, auf der nachher die Seite aufgerufen wird. Ggf. muss das bei allen WEB.* eingetragen werden, wo man das möchte:
im Attribut Css wird eingetragen/hinzugefügt:

Code Auswählen Erweitern

.smallIcon { height: 20px;  }
In der uiTable einfach den Aufruf

Code Auswählen Erweitern

ICON("icon\@farbe") ersetzen durch

Code Auswählen Erweitern

::FW_makeImage("icon\@farbe","","smallIcon"), und schon wird das Icon mit ca 60% Größe angezeigt. Den px-Wert eben entsprechend anpassen/ausprobieren. Man kann auch die Hintergrundfarbe des Icons ändern:

Code Auswählen Erweitern

.jetBackground {
background-color: yellow;
}

.aviaBackground {
background-color: ghostwhite;
}

.shellBackground {
background-color: black;
} sind Beispiele, die Anzeige der Spritsorten farblich richtig zu haben, da die svg-Icons von den Herstellern "durchsichtig" waren.
Und noch ein Beispiel, um den Hintergrund zu animieren: Ich habe bei Bad/WC-Fenster mir je einen caution und einen warning-Level definiert (je nachdem, wie lange auf oder wie kalt) und entsprechend wird beim Fenstericon nur der Parameter für css ausgetauscht. Das ergibt dann einen langsam pulsierenden orangenen Hintergund für caution oder einen schneller rot pulsierenden Hintergrund für warning.

Code Auswählen Erweitern

.iconAnimCaution {
height: 15%;
animation: pulseCaution 5s infinite;
animation-timing-function: ease;
}

.iconAnimWarning {
height: 15%;
animation: pulseWarning 2s infinite;
animation-timing-function: ease;
}


@keyframes pulseCaution {
  0% {
    background-color: #252525;
  }
  50% {
    background-color: #ffd700;
  }
}

@keyframes pulseWarning {
  0% , 100% {
    background-color: #252525;
  }
  50% {
    background-color: #ee1111;
  }
}
Sehe gerade, da hab ich die Größe auch gleich mit angepasst. Das muss man nach eigenem Geschmack ausprobieren.

So, viel Spaß und Erfolg damit!

P.S. Ich habe eigentlich keine Ahnung von css, nur soviel, dass ich weis um was es da geht und so ein kleinwenig manchmal wie. Das oben gezeigte ist eher durch viel lesen und rumprobieren entstanden, evtl. unterstützt von früheren Versuchen zu TableUI. Also kann ich vermutlich keine gezielten Fragen beantworten und bin aber Meinung, da geht noch viel mehr (z.B. Icon rotieren lassen oder "wackeln" als "eye-catcher" und und und.....

[gestein]

Das funktioniert!!

Die ersten Versuche schauen schon mal gut aus.
Jetzt muss ich noch herausfinden, wie ich das Icon für die Batterie näher zum Anwesenheits-Icon bringen kann.

Vielen Dank!
lg, Gerhard

[gestein]

Die Animation habe ich auch gerade ausprobiert.
Klappt im Prinzip auch, aber dann ist die Zeile viel höher dargestellt und das Icon für die Batterie ist wieder gleich groß wie das für die Anwesenheit.
Der Hintergrund für das Batterie-Icon wird gepulst dargestellt.

lg, Gerhard

[Damian]

Was wohl auch funktioniert ist:

in uiTable:

Code Auswählen Erweitern

"<style>.mysvg {height:20px;}</style>".::FW_makeImage("fuel\@red","","mysvg")