FHEMWEB/iconAnimated

iconAnimated – animiertes SVG-Icon-Widget

Das iconAnimated-Widget visualisiert Gerätezustände als animiertes SVG-Icon im FHEMWEB (PGM2) Frontend. Farbe und Animation des Icons passen sich dynamisch an ein konfiguriertes Reading an.

Neben inline eingebetteten SVGs werden auch FHEM-Icons direkt unterstützt (Attribut icon).

Hilfe

Forenthread zum iconAnimated Widget

1️⃣ Widget-Datei aus contrib laden

Die JavaScript-Datei muss ins FHEM-Webverzeichnis kopiert werden.

{ Svn_GetFile('contrib/fhemweb_iconAnimated.js', 'www/pgm2/fhemweb_iconAnimated.js') }

2️⃣ Widget im Device einrichten

Syntax

<webCmd>:iconAnimated,<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`). Numerischer Vergleich möglich, z. B. `>=1`
`StateOff@ColorOff`	Zustand für „aus“ (z. B. `off@#666`). Numerischer Vergleich möglich, z. B. `<1`
`AnimationType`	Art der Animation (siehe unten)
`size@Px`	Optional: Icongröße in Pixel (Standard: 40px)

Beispiele

Zeichenfolge:

attr MyDevice widgetOverride webCmd:iconAnimated,state,on@#00ff00,off@#666,pulse,size@32

Numerischer Vergleich:

attr MyDevice widgetOverride webCmd:iconAnimated,power,>=1@#ff0000,<1@#666,bounce,size@32

Hier wird das Icon animiert „on“, wenn power ≥ 1 ist, und „off“, wenn < 1.

Animationen

alarm – Alarmartige Skalierung + Rotation
blink – Blinkende Anzeige
flow – sanfte vertikale Bewegung
heat – Hitze-/Flammenanimation
heatDevice – Geräte die Hitze ausstrahlen
pulse – pulsierende Skalierung
ring – klingelnde Bewegung
robot – Roboterartige Rotation
rotateLeft – Rotation nach links
rotateRight – Rotation nach rechts
rotate2d – 3D-Drehung um Y-Achse
bounce – leichtes Hüpfen
shake – seitliches Wackeln
swing – pendelnde Bewegung

Icon laden

FHEM-Icons (empfohlen)

SVG-Icons aus der FHEM-Icon-Bibliothek werden direkt unterstützt:

attr <Device> icon <fhem-svg-iconname>

Das Widget lädt das SVG automatisch aus dem attr icon und animiert es entsprechend.

Inline-SVG (optional)

Alternativ kann ein SVG direkt als Data-URL hinterlegt werden.

attr <Device> userattr iconAnimated

attr <Device> iconAnimated data:image/svg+xml;base64,...

In diesem Fall hat iconAnimated Vorrang vor dem icon-Attribut. Eine gute Icon-Quelle dafür ist pictogrammers.com.

Hinweise

Das Widget funktioniert nur mit SVG-Icons.
PNG/JPG werden ignoriert.
Fhemicons sind etwas zickig. Beispiel rotateLeft und das Icon "aurora".