FHEMWEB/AnimatedSVG
AnimatedSVG – animiertes SVG-Icon-Widget
Das AnimatedSVG-Widget visualisiert Gerätezustände als animiertes SVG-Icon im FHEMWEB (PGM2) Frontend. Die Animation und Farbe des Icons passen sich an ein definiertes Reading an.
Hilfe
- Forenthread zum AnimatedSVG Widget
1️⃣ Widget-Datei aus contrib laden
Die JS-Datei muss ins FHEM-Webverzeichnis kopiert werden.
{ Svn_GetFile('contrib/fhemweb_animatedsvg.js', 'www/pgm2/fhemweb_animatedsvg.js') }
2️⃣ Widget im Device einrichten
Syntax
<webCmd>:animatedsvg,<Reading>,<StateOn@ColorOn>,<StateOff@ColorOff>,<AnimationType>,[size@Px]
Parameter
| Parameter | Beschreibung |
|---|---|
Reading
|
Name des Readings, dessen Wert das Icon steuert (Standard: state) |
StateOn@ColorOn
|
Zustand für "ein" (z. B. on@#00ff00). Vergleich kann auch numerisch sein: >=<Zahl> |
StateOff@ColorOff
|
Zustand für "aus" (z. B. off@#666). Vergleich kann auch numerisch sein: <<Zahl> |
AnimationType
|
Art der Animation: pulse, rotateLeft, rotateRight, rotate2d, bounce, shake |
size@Px
|
Optional: Icongröße in Pixel (Standard: 1.3em) |
Beispiele
- String-Auswertung:
attr MyDevice webCmd animatedsvg,state,on@#00ff00,off@#666,pulse,size@32
- Numerischer Vergleich:
attr MyDevice webCmd animatedsvg,power,>=1@#ff0000,<1@#666,bounce,size@32
Hier wird das Icon animiert "on", wenn `power` >= 1 ist, und "off", wenn < 1.
Animationen
- **pulse** – pulsierende Skalierung
- **rotateLeft** – linksdrehend
- **rotateRight** – rechtsdrehend
- **rotate2d** – 3D-Drehung um Y-Achse
- **bounce** – leichtes Hüpfen
- **shake** – seitliches Wackeln
Icon laden
SVG-Icons können z. B. aus der Sammlung von pictogrammers.com bezogen werden. Bevor das Widget das SVG nutzen kann, muss das Device ein Userattr `animatedSVG` besitzen:
attr <Device> userattr animatedSVG
Das Base64-codierte SVG kann anschließend in diesem Attribut gespeichert werden:
attr <Device> animatedSVG data:image/svg+xml;base64,...
Hinweise
- FHEM-eigene Icons sind derzeit noch in Bearbeitung; die Nutzung externer SVGs ist vorübergehend der Standard.