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

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

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".