Schwatter am 17. Dezember 2025 um 20:18 Uhr

2025-12-17T20:18:15Z

← Nächstältere Version		Version vom 17. Dezember 2025, 22:18 Uhr
Zeile 70:		Zeile 70:

	== Icon laden ==		== Icon laden ==
	=== FHEM-Icons ~~(empfohlen)~~ ===		=== FHEM-Icons ===
	SVG-Icons aus der FHEM-Icon-Bibliothek werden '''direkt unterstützt''':		SVG-Icons aus der FHEM-Icon-Bibliothek werden '''direkt unterstützt''':

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

	=== Inline-SVG ~~(optional)~~ ===		=== Inline-SVG ===
	Alternativ kann ein SVG direkt als Data-URL hinterlegt werden.		Alternativ kann ein SVG direkt als Data-URL hinterlegt werden.

Schwatter: Die Seite wurde neu angelegt: „rechts == 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 {{Link2Forum|Topi…“

2025-12-17T19:39:25Z

Die Seite wurde neu angelegt: „mini|rechts == 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 <code>icon</code>). === Hilfe === * Forenthread zum {{Link2Forum|Topi…“

Neue Seite

[[Datei:AnimatedSVG.gif|mini|rechts]]
== 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 <code>icon</code>).

=== Hilfe ===
* Forenthread zum {{Link2Forum|Topic=143313|LinkText=iconAnimated Widget}}

== 1️⃣ Widget-Datei aus contrib laden ==
Die JavaScript-Datei muss ins FHEM-Webverzeichnis kopiert werden.

<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_iconAnimated.js', 'www/pgm2/fhemweb_iconAnimated.js') }
</syntaxhighlight>

== 2️⃣ Widget im Device einrichten ==
=== Syntax ===
:<code><webCmd>:iconAnimated,<Reading>,<StateOn@ColorOn>,<StateOff@ColorOff>,<AnimationType>,[size@Px]</code>

=== Parameter ===
{| class="wikitable"
! Parameter
! Beschreibung
|-
| <code>Reading</code>
| Name des Readings, dessen Wert das Icon steuert (Standard: <code>state</code>)
|-
| <code>StateOn@ColorOn</code>
| Zustand für „ein“ (z. B. <code>on@#00ff00</code>).
Numerischer Vergleich möglich, z. B. <code>>=1</code>
|-
| <code>StateOff@ColorOff</code>
| Zustand für „aus“ (z. B. <code>off@#666</code>).
Numerischer Vergleich möglich, z. B. <code><1</code>
|-
| <code>AnimationType</code>
| Art der Animation (siehe unten)
|-
| <code>size@Px</code>
| Optional: Icongröße in Pixel (Standard: 40px)
|}

=== Beispiele ===
* Zeichenfolge:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,state,on@#00ff00,off@#666,pulse,size@32</code>

* Numerischer Vergleich:
:<code>attr MyDevice widgetOverride webCmd:iconAnimated,power,>=1@#ff0000,<1@#666,bounce,size@32</code>

Hier wird das Icon animiert „on“, wenn <code>power</code> ≥ 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''':

<syntaxhighlight lang="Perl">
attr <Device> icon <fhem-svg-iconname>
</syntaxhighlight>

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.

<syntaxhighlight lang="Perl">
attr <Device> userattr iconAnimated
</syntaxhighlight>

<syntaxhighlight lang="Perl">
attr <Device> iconAnimated data:image/svg+xml;base64,...
</syntaxhighlight>

In diesem Fall hat <code>iconAnimated</code> Vorrang vor dem <code>icon</code>-Attribut.
Eine gute Icon-Quelle dafür ist [https://pictogrammers.com/libraries/ pictogrammers.com].

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

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]

FHEMWEB/iconAnimated - Versionsgeschichte

Schwatter am 17. Dezember 2025 um 20:18 Uhr