Wie kann man das Valueicon einer RG zentrieren?

[Invers]

Wie kann man das Valueicon einer RG zentrieren? Hab schon überall gesucht, aber nicht erfolgreich.
Danke im Voraus.

[Spook112]

Genau vor der Frage stehe ich auch.
Über valueIcon habe ich es nicht hin bekommen - wäre aber froh, wenn jemand von den Spezialisten dafür eine Lösung hätte.

Allerdings habe ich einen Workaround gefunden.
Benutzen von valueFormat führt zum Ziel.

Beispiel:

Code Auswählen Erweitern

......
elsif ($READING eq "mower-status" && ($VALUE eq "parked_timer" || $VALUE eq "parked_daily_limit_reached")) {
  '<img src="/fhem/www/images/openautomation/scene_robo_lawnmower.svg" style="display:block;margin:auto;width:28px;height:28px">'}
......

Vorne der Vergleich spielt keine Rolle - entscheidend ist dieser Teil

Code Auswählen Erweitern

{
  '<img src="/fhem/www/images/openautomation/scene_robo_lawnmower.svg" style="display:block;margin:auto;width:28px;height:28px">'}Dort wird mittels HTML code der Pfad zu dem Icon (hier im SVG Format) angegeben und definiert wie es angezeigt werden soll.
In meinem Fall zentriert und da eine SVG Vektorgrafik mit von mir definierter Größe.

Vielleicht hilft das ja dem Einen oder Anderen

Was ich leider nicht geschafft habe - dem SVG eine andere Farbe zu geben.
Bin für jede Idee dazu dankbar.

[eisman]

hi,

oder:

Code Auswählen Erweitern

attr WetterAlert devStateIcon 0:message_attention@#8C8C8C .*:message_attention@#FF0000
attr WetterAlert devStateStyle style="text-align:center;;;;


Code Auswählen Erweitern

defmod rg.Wetterstatus readingsGroup Wetterstation:state@WetterAlert,<Wetter>....
attr   rg.Wetterstatus valueIcon {"direction" => "%devStateIcon", "state" => "%devStateIcon"}

gruss

[Spook112]

Kurz zu meinem Workaround oben - der funktioniert auch direkt in valueIcon. Es muss nicht in valueFormat sein. Farbe vergeben habe ich aber trotzdem nicht hin bekommen.

Nun zu der Lösung von eisman.

Ich muss zugeben ich verstehe sie nicht.
Erster Code Block,
Meine Interpretation: wenn State Wert = 0  dann Icon = message_attention in der Farbe #8C8C8C
                      wenn beliebiger anderer Wert dann dasselbe Icon in anderer Farbe FF0000

So weit so gut und so vermutlich im Device WetterAlert umzusetzen.

Zweiter Code Block,
Meine Interpretation: Erste Zeile definiert die readingsGroup rg.Wetterstatus mit der Header-Zeile.
                      Zweite Zeile zeigt den Eintrag in valueIcon, aber in wie weit wird da jetzt das Icon zentriert. Das wurde zwar im Ursprungs-Device mittels devStateStyle gemacht, aber schlägt das bis in die readingsGroup durch?

Und darüber hinaus. In meinem Fall oben geht es ja nicht um State und dort mögliche Formatierung über devStateStyle sondern um beliebige andere readings. Wo soll/kann ich da dann einen entsprechende Formatierung mitgeben?
Und es geht auch nicht "nur" um die Header Zeile sondern um viele Zeilen in denen valueIcons zu sehen sind - siehe Anhang.

Bin für jeden Hinweis und Erklärung der "Abläufe" dankbar.

[Spook112]

Nach weiterem Probieren nun doch noch eine "einfache" Lösung gefunden
Die Lösung liegt in der Kombination aus:
dem Attribut

Code Auswählen Erweitern

valueColumns und dem hier zu verwendenden "Wert"

Code Auswählen Erweitern

{'align="center"'}
Damit wird für alle Spalten der Tabelle - sowohl für Text als auch für Icons - zentrierte Darstellung vorgegeben.

In Ergänzung dazu das Attribut:

Code Auswählen Erweitern

cellStyle für die anderweitig auszurichtenden "nur Text Spalten".
Diese wurden dann wie unten zu sehen formatiert bzgl. Ausrichtung des Textes, Breite der Spalte etc.

Code Auswählen Erweitern

{"c:1" => 'style="width:320px;font-size:16px;text-align:left;color:black"',
"c:2" => 'style="width:40px;font-size:16px;text-align:center;color:black"',
"c:3" => 'style="width:90px;font-size:16px;text-align:center;color:black"',
"c:4" => 'style="width:90px;font-size:16px;text-align:center;color:black"',
"c:5" => 'style="text-align:center;width:70px;font-size:16px;color:black"',
"c:6" => 'style="align:center;text-align:center;width:90px;font-size:16px"',
"c:7" => 'style="text-align:left;width:190px;font-size:16px"'}Damit wurde das erreicht was gewünscht war.
Darstellung im Anhang.

Danke für Tipps und Anregungen.

[eisman]

hi,

als beispiel:

Wetterwarnung > 0 = keine Meldung...

Code Auswählen Erweitern

defmod WetterAlert dummy
attr WetterAlert DbLogExclude .*
attr WetterAlert alias Wettermeldung
attr WetterAlert devStateIcon 0:message_attention@#8C8C8C .*:message_attention@#FF0000
attr WetterAlert devStateStyle style="text-align:center;;;;
attr WetterAlert group Alert
attr WetterAlert mqttDefaults base={"M8/Wetter/WetterAlert"} pub:qos=0 sub:qos=2 retain=0
attr WetterAlert mqttSubscribe *:topic={"$base/$name"}
attr WetterAlert readingList state text headline
attr WetterAlert room System->Wetterstation
attr WetterAlert setList state

der Luftdruck im device Formatiert:

Code Auswählen Erweitern

defmod WetterPressure dummy
attr WetterPressure DbLogExclude .*
attr WetterPressure alias Pressure
attr WetterPressure devStateIcon { my $STRG = "";; my $VZ ="";; my $FRGB = "#FFA500";;\
  my $New  = ReadingsVal($name,"pressure",1000);; \
  my $Old  = ReadingsVal($name,"pressure-old",1000);;\
  \
  if   ($Old >  $New) { $VZ = "▼;" }\
  elsif($Old <  $New) { $VZ = "&#x25B2;;" }\
  elsif($Old == $New) { $VZ = "&#x25cf;;" }\
 \
  $STRG = $STRG . "<span style='font-weight:bold;;;;font-size:10px;;;;color:#FFA500;;;;'>Luftdruck</span><br>";;\
\
  if   ($New <   955                ) { $FRGB = "#D02090" }\
  elsif($New >=  955 and $New <  965) { $FRGB = "#EE82EE" }\
  elsif($New >=  965 and $New <  982) { $FRGB = "#0000FF" }\
  elsif($New >=  982 and $New <  998) { $FRGB = "#00FFFF" }\
  elsif($New >=  998 and $New < 1016) { $FRGB = "#00FF00" }\
  elsif($New >= 1016 and $New < 1032) { $FRGB = "#FFFF00" }\
  elsif($New >= 1032 and $New < 1050) { $FRGB = "#FFFF00" }\
  elsif($New >= 1050                ) { $FRGB = "#FF0000" }\
  \
$STRG = $STRG . "<span style='font-size:12px;;;;color:" . $FRGB . ";;;;'>" . $New . "</span>";;\
$STRG = $STRG . "<span style='font-weight:bold;;;;font-size:10px;;;;color:#C8C8C8;;;;'> hPa</span>";;\
    \
return $STRG;;\
}
attr WetterPressure devStateStyle style="text-align:left;;;;"
attr WetterPressure group weather
attr WetterPressure oldreadings pressure
attr WetterPressure readingList state pressure
attr WetterPressure room System->Wetterstation
attr WetterPressure setList state  pressure
attr WetterPressure stateFormat pressure
attr WetterPressure userReadings pressure-old { OldReadingsVal($name,"pressure",0)}

und die readingsGroup:

Code Auswählen Erweitern

defmod rg.Wetterstatus readingsGroup Wetterstation:state@WetterAlert,<Wetter>,state@anz1\
Wetterstation:state@WetterDay,state@WetterAktuell,state@WetterSonne,state@Windchill,state@WetterMonth\
Wetterstation:state@WetterStr,direction@Windrose,state@WetterHof\
Wetterstation:state@WetterPressure,state@WetterHumidity,<>,state@Windspeed,state@Visibility
attr rg.Wetterstatus DbLogExclude .*
attr rg.Wetterstatus alias rgWetterStatus
attr rg.Wetterstatus cellStyle {"r:1,c:2" => 'style="text-align:center;;;;color:#FFA500;;;;font-size:19px;;;;font-weight:bold;;;;"'}
attr rg.Wetterstatus noheading 1
attr rg.Wetterstatus nonames 1
attr rg.Wetterstatus notime 1
attr rg.Wetterstatus room System->Wetterstation
attr rg.Wetterstatus style style="border:0px;;background:none;;box-shadow:none;;"
attr rg.Wetterstatus valueColumns {"Wetter" => 'colspan="3"', "direction" => 'colspan="3"'}
attr rg.Wetterstatus valueIcon {"direction" => "%devStateIcon", "state" => "%devStateIcon"}

gruss

[eisman]

Nach weiterem Probieren nun doch noch eine "einfache" Lösung gefunden
Die Lösung liegt in der Kombination aus:
dem Attribut

Code Auswählen Erweitern

valueColumns und dem hier zu verwendenden "Wert"

Code Auswählen Erweitern

{'align="center"'}
Damit wird für alle Spalten der Tabelle - sowohl für Text als auch für Icons - zentrierte Darstellung vorgegeben.

In Ergänzung dazu das Attribut:

Code Auswählen Erweitern

cellStyle für die anderweitig auszurichtenden "nur Text Spalten".
Diese wurden dann wie unten zu sehen formatiert bzgl. Ausrichtung des Textes, Breite der Spalte etc.

Code Auswählen Erweitern

{"c:1" => 'style="width:320px;font-size:16px;text-align:left;color:black"',
"c:2" => 'style="width:40px;font-size:16px;text-align:center;color:black"',
"c:3" => 'style="width:90px;font-size:16px;text-align:center;color:black"',
"c:4" => 'style="width:90px;font-size:16px;text-align:center;color:black"',
"c:5" => 'style="text-align:center;width:70px;font-size:16px;color:black"',
"c:6" => 'style="align:center;text-align:center;width:90px;font-size:16px"',
"c:7" => 'style="text-align:left;width:190px;font-size:16px"'}Damit wurde das erreicht was gewünscht war.
Darstellung im Anhang.

Danke für Tipps und Anregungen.

"r:1,c:2" kann man auch noch die Zelle auswählen

die Änderung mache ich im Devise und mit der RG stelle ich sie zusammen.
so bin ich in allen Bereichen flexibel...

gruss