Icons

[Diblominschenör]

Hi Folks,

ich hab mal wieder mein FHEM verschönert und zwei SVG Icons an meine Bedürfnisse angepasst.
Ein Jeelink Icon mit PCA301 Firmware und ein ein JeeLink Icon mit LaCrosse Firmware.
Vielleicht kann es ja jemand brauchen.

Viel Spaß am Gerät!

[Wuppi68]

sorry, erst jetzt gesehen, dass da Anhänge dran waren ... wurden auf dem Mobilgerät nicht angezeigt

Stehen morgen via update zur Verfügung

Danke

[Torxgewinde]

Hallo,
Ich hätte da ein ein wenig ungewöhnliches SVG, welches mit einem CSS-Parameter --rssi gesteuert werden kann (0 bis 100 schaltet die Balken an und aus). Es ist ein Bargraph den ich für die WLAN Feldstärke nutze. Wollt ihr das auch aufnehmen?

Thread mit Demodevice zum Ansteuern wäre der hier:
https://forum.fhem.de/index.php?topic=141113.msg1337421#msg1337421

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen.

[Torxgewinde]

Angeregt durch @Beta-User habe ich der Windrose einen Zeiger verpasst, das wäre das gleiche Prinzip nur dass dafür der Parameter --myRot heißt. Testen kann man das im Browser, einfach den Debugger öffnen und dann mit der Maus den Wert beim Parameter --myRot fokussieren und mit dem Mausrad rauf und runterdrehen wie in dem Gif Du darfst diesen Dateianhang nicht ansehen.

[Torxgewinde]

Ich habe mich nochmal an den Bargraph gesetzt und graue Hintergrundbalken hinzugefügt, ich denke das sieht besser aus. Auch sollte man die Chance nicht ungenutzt lassen, die Übergänge mit einer Animation aufzuhübschen. Die Datei ist ist angefügt, so sieht das dann aus:

Du darfst diesen Dateianhang nicht ansehen.

[Sailor]

@Torxgewinde

Schreibe doch mal eine kurze Anleitung rein, wie du diese SVGs im Detail in fehm integriert hast.

Gruß
     Sailor

[Torxgewinde]

@Sailor: Klar, gerne.

Beschreibung von bargraph2.svg
Dieses SVG unterscheidet sich von einem statischen SVG dadurch, dass es mit eingebetteten CSS-Styles arbeitet. Dabei nutzt es den CSS-Variablenparameter --rssi, um davon abhängige Berechnungen durchzuführen. Der Parameter wird per CSS-Style an das SVG übergeben und sollte Werte zwischen 0 und 100 annehmen:

• --rssi: 100 → Alle Balken sind farbig.
• --rssi: 50 → Die untere Hälfte der Balken ist farbig, der Rest bleibt grau.
• --rssi: 0 → Nur die grauen Hintergrundbalken sind sichtbar.

Werte kleiner 0 haben den gleichen Effekt wie 0, Werte größer 100 entsprechen 100.
Ein wichtiger Vorteil: Das SVG funktioniert auch ohne die CSS-Variable als statisches Icon.

Integration in FHEM
FHEM bietet die Möglichkeit, Statusicons dynamisch zu aktualisieren – ohne eigenes JavaScript. Das bedeutet, dass Icons in der Weboberfläche automatisch an veränderte Werte angepasst werden können.

Um das Bargraph-Icon als Statusanzeige zu nutzen, muss ein passender Wert mit devStateIcon definiert werden.
Ein Beispiel für die Umrechnung eines Readings auf den Wertebereich 0–100:

• FHEM liest das Reading eines Geräts aus.
• Der Wert wird auf den Bereich 0–100 skaliert.
• FHEM aktualisiert das Icon automatisch bei neuen Werten.

Da das SVG außerhalb des Wertebereichs liegende Zahlen nicht fehlerhaft darstellt, ist keine explizite Begrenzung erforderlich.

Minimal und schön übersichtlich kann ein devStateIcon Attribut so aussehen:

Code Auswählen Erweitern

attr deinDeviceName devStateIcon {
  my $val = ReadingsNum($name, 'rssipeer', 0);
  my $val2 = 100 + $val;
 
  my $bargraph = FW_makeImage('bargraph');
  $bargraph =~ s/(<svg[^>]+style="[^"]*)--rssi:\d{1,3}/$1--rssi:$val2/;
 
  return $bargraph;
}
Dies hier stellt zwei Icons gleichzeitig dar und wird real genutzt für ein Tasmota-Device:

Code Auswählen Erweitern

attr meinTasmotaShellyDeviceDing devStateIcon {
  return FW_makeImage('light_question') if (ReadingsVal($name, "availability", "offline") eq "offline");

  my ($min, $max, $signal) = (-100, -50, ReadingsNum($name, 'Wifi_Signal', 0));
  my $val = 100 * ($signal - $min) / ($max - $min);
  my $bargraph = FW_makeImage('bargraph');
  $bargraph =~ s/(<svg[^>]+style="[^"]*)--rssi:\d{1,3}/$1--rssi:$val;/;
   
  foreach my $reading (keys %{$defs{$name}->{READINGS}}) {
    my $value = $defs{$name}->{READINGS}{$reading}{VAL} // '';
    $bargraph =~ s/%\Q$reading\E%/$value/g;
  }
 
  my $mstate = ReadingsVal($name, "state", "???");
  $mstate = 'unknown' if $mstate eq 'command';
  my $stateIco = FW_makeImage($mstate);
   
  return $stateIco."&nbsp;".$bargraph;
}
Testen des Parameters im Browser
Das Verhalten des Icons kann direkt im Browser getestet werden:

• SVG-Datei öffnen
• Entwicklerkonsole (F12) starten
• CSS-Wert --rssi anpassen
•   Direkt in das Feld eintippen
•   Alternativ: Mausrad oder Pfeiltasten nutzen

Dies funktioniert in Firefox, Chrome, Edge, Safari etc...

Animation & Einschränkungen
Im Standard-FHEM-Setup bleibt eine SVG-CSS-Animation meist unsichtbar, da das Icon bei einem Update komplett ersetzt wird. Dadurch kennt das neu geladene SVG den vorherigen Wert nicht.

Eine animierte Darstellung wäre mit JavaScript möglich. Ich habe bereits eine funktionierende Lösung entwickelt, aber sie ist noch nicht überall fehlerfrei einsetzbar. Wer sich dafür interessiert, findet mehr Details hier: https://forum.fhem.de/index.php?topic=141113.msg1337591#msg1337591
Es gibt auch weitere Erfolge wie hier: https://forum.fhem.de/index.php?topic=139548.msg1337651#msg1337651

Infos zum SVG-Icon weather_directions2.svg
Das SVG-Icon, das nach dem gleichen Prinzip funktioniert, ist weather_directions2.svg.
Hier wird die CSS-Variable --myRot genutzt, um die Rotation zwischen 0° und 360° zu steuern.

Auch hier gilt: Werte außerhalb dieses Bereichs sind kein Problem, da der Browser sie automatisch korrekt umrechnet.

Wenn man ein Testdevice haben möchte, hier wäre ein Dummy-Device:

Code Auswählen Erweitern

defmod bargraphSVG dummy
attr bargraphSVG devStateIcon {\
    my $val = 100+ReadingsVal($name, 'rssi', '???');;\
    my $bargraph = FW_makeImage('bargraph');;\
    $bargraph =~ s/(<svg[^>]+style="[^"]*)--rssi:\d{1,3}/$1--rssi:$val/;;\
    \
    return $bargraph;;\
}
attr bargraphSVG readingList rssi
attr bargraphSVG setList rssi
attr bargraphSVG webCmd rssi -100:rssi -82:rssi -55:rssi -40:rssi -10:rssi -3:rssi 0

[Sailor]

Hallo torxgewinde

Angeregt durch @Beta-User habe ich der Windrose einen Zeiger verpasst, das wäre das gleiche Prinzip nur dass dafür der Parameter --myRot heißt. Testen kann man das im Browser, einfach den Debugger öffnen und dann mit der Maus den Wert beim Parameter --myRot fokussieren und mit dem Mausrad rauf und runterdrehen wie in dem Gif

So habe ich das gemacht, aber leider sind 0° dummerweise 45° und ausserdem ist die Steigung gegen den Uhrzeigersinn und nicht wie es sein muesste mit dem Uhrzeigersinn.

https://www.spektrum.de/lexikon/geographie/windrichtung/9034

Weiterhin funktioniert der folgende Code leider nicht:

Code Auswählen Erweitern

attr myWeatherProplanta devStateIcon {
  my $val = ReadingsNum($name, "windDir", 0) - 45;
  my $WindDirPic = FW_makeImage("weather_directions2");
  $WindDirPic =~ s/(<svg[^>]+style="[^"]*)--myRot:\d{1,3}/$1--myRot:$val/;
  return $WindDirPic;
}

Was tun sprach Zeus?

Gruss
  Sailor

[Torxgewinde]

Edit #1: Noch ein paar Detailverbesserungen vorgenommen


In deinem Code ziehst du den Offset von 45° ab, aber es müsste andersherum ein, also von 45 den Reading-Wert abziehen, da kommt die falsche Richtung her. In dem Regex muss der Wert in "deg" übergeben werden.

Anbei das Icon mit verfeinerter Berechnung, aber auch einem ansehnlichem Startwert von 45°. Den z-index des Pfeils habe ich erhöht, damit er über der Windrose ist, indem der Pfad am Ende definiert ist. Du darfst diesen Dateianhang nicht ansehen.


Als Testdevice klappt es so. Der Pfeil wird separat auf grün gestyled, dem Icon geben wir hier eine eigene fill-Farbe von #999999 mit:

Code Auswählen Erweitern

defmod wetterSVG dummy
attr wetterSVG devStateIcon {\
    my $val = ReadingsVal($name, 'direction', '???');;\
    my $icon = FW_makeImage('weather_directions2@#999999');;\
    my $style = qq( #zeiger { fill: darkgreen;; stroke: green;; stroke-width: 100px;; } );;\
    \
    $icon =~ s/(<svg[^>]+style="[^"]*)--myRot:\s*\d{1,3}deg/$1--myRot:${val}deg/;;\
    $icon =~ s/(<svg[^>]*>)/$1<style>${style}<\/style>/;;\
    \
    return $icon;;\
}
attr wetterSVG readingList direction
attr wetterSVG setList direction
attr wetterSVG webCmd direction 0:direction 45:direction -45:direction 90:direction 180:direction 270:direction 333

[Sailor]

Hallo Torxgewinde

Edit #1: Noch ein paar Detailverbesserungen vorgenommen
t verfeinerter Berechnung, aber auch einem ansehnlichem Startwert von 45°. Den z-index des Pfeils habe ich erhöht, damit er über der Windrose ist, indem der Pfad am Ende definiert ist. Du darfst diesen Dateianhang nicht ansehen.

[Klugscheissermodus]
Immer noch ein kleiner Bug drin:

https://www.dwd.de/DE/service/lexikon/Functions/glossar.html?lv3=103182&lv2=102936
Die Windrichtung ist die Richtung, aus welcher der Wind weht. Sie wird bestimmt nach dem Polarwinkel (Azimut). Zur Richtungsangabe benutzt man die 360 Grad Skala des Kreises. Alle Richtungsangaben in Grad sind rechtweisend auf geographisch Nord bezogen, d.h. Ost = 90 Grad, Süd = 180 Grad, West=270 Grad und Nord=360 Grad.

sowie

https://windy-app.translate.goog/blog/what-is-wind-direction.html?_x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=de&_x_tr_pto=rq
1. Windpfeile
Die Windrichtung wird in Form von Pfeilen auf den Widgets der nächstgelegenen Orte, einschließlich Wetterstationen , angezeigt.
Beachten Sie, dass die Pfeilspitze in diesem Fall in die Richtung zeigt, in die der Wind weht, und der Anfang jedes Pfeils in die Richtung, aus der er weht.

Das bedeutet, wenn man es ganz genau nimmt, müssen die Pfeile nochmal um 180° gedreht werden.

Aber das kamm man auch im Attribut mit "-180" einfach hinkriegen!
[/Klugscheissermodus]

 

Spass beiseite. Die Windpfeile von denen die Rede sind, sind die "Fähnchen" mit den Windstärken. Also alles gut!


Gruss
    Sailor

[Torxgewinde]

Das Icon funktioniert also grundsätzlich bei dir?

Die Pfeilrichtung hängt davon ab, ob du es als Kompass oder als Windanzeige nutzt. Als Icon kann es ja beide Rollen annehmen.

Wie du schon festgestellt hast: Für Windrichtung ggf. einfach mit 180° verrechnen, dann passt es.

Dies Icon zeigt bei 0° nach oben/N (90°->E, 180°->S, 270°->W), den Rest muss dann der Anwender festlegen.

[Sailor]

Hallo Torxgewinde

Das Icon funktioniert also grundsätzlich bei dir?

Ja sehr gut!

Die Pfeilrichtung hängt davon ab, ob du es als Kompass oder als Windanzeige nutzt. Als Icon kann es ja beide Rollen annehmen.
Wie du schon festgestellt hast: Für Windrichtung ggf. einfach mit 180° verrechnen, dann passt es.
Dies Icon zeigt bei 0° nach oben/N (90°->E, 180°->S, 270°->W), den Rest muss dann der Anwender festlegen.

Ganz genau. Danke für deine Mühen.

Aber wenn wir schon dabei sind.
Kann man auch ein Icon mit dieser Vorgabe entwickeln?
https://www.harald-blazy.de/segelapps/windpfeile.html
Das muesste dann 3 Parameter haben:
Windrichtung in Grad
Windstärke in Knoten abgerundet auf 5 kn
Bewölkungsgrad 1/8 bis 8/8

Gruss
    Sailor

[Torxgewinde]

Aber wenn wir schon dabei sind.
Kann man auch ein Icon mit dieser Vorgabe entwickeln?
https://www.harald-blazy.de/segelapps/windpfeile.html
Das muesste dann 3 Parameter haben:
Windrichtung in Grad
Windstärke in Knoten abgerundet auf 5 kn
Bewölkungsgrad 1/8 bis 8/8

Ich bin mir da sicher, dass es geht, vermutlich auch komplett mit SVGs.

Aber, ich selbst werde da jetzt nicht dran machen. Vielleicht inspiriert die Methode der parametrisierbaren-SVGs jedoch jemanden dies anzugehen. Das Besondere sind eigentlich --cmp und --cmp2 Berechnungen wie beim Bargraph, der Rest ist halbwegs übliches SVG-XML mit CSS-Parametern.