[iconAnimated]Fhemweb Widget für animierte SVG

[schwatter]

17.12.25 - Namen geändert. Harmoniert dadurch besser mit mit der Namensgebung, der anderen Widgets.
17.12.25 - Unterstützung für Fhemicon's hinzugefügt. Unterstützung für Flex Skin hinzugefügt. Mehr Animationen hinzugefügt.


Nabend,

iconAnimated ist ein Fhemweb Widget zum animieren von SVG.


Animationsübersicht

Code Auswählen Erweitern

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

Infos zum Download und Einrichten finden sich im Wiki:
https://wiki.fhem.de/wiki/FHEMWEB/iconAnimated
https://wiki.fhem.de/wiki/FHEMWEB/Widgets

Gruß schwatter

[schwatter]

Nabend,

Update im Contrib

• Das FHEM-Icon in der linken Spalte wird durch das SVG des animatedsvg-Widgets ersetzt.
• Falls kein Icon in den Attributen (attr icon ...) definiert ist, wird das Icon vom Widget trotzdem erzeugt.

Gruß schwatter

[schwatter]

Moin,

Update im Contrib

• Numerische >= und < Zustandsprüfung hinzugefügt

Beispiel:

Code Auswählen Erweitern

widgetOverride test:animatedsvg,state,>=10@green,<10@grey,shake,size@50

Gruß schwatter

[schwatter]

Nabend,

Update im Contrib

• Namen des Widget geändert.Harmoniert dadurch besser mit mit der Namensgebung, der anderen Widgets.
• Mehr Animationen hinzugefügt.
• Unterstützung für Fhemicons hinzugefügt.
• Unterstützung für Skin Flex hinzugefügt.

Gruß schwatter

[ergerd]

Hallo schwatter,

nach dem herunterladen des js Files bekomme ich folgende Meldung:

Code Auswählen Erweitern

fhemweb_animatedsvg.js line 1:
SyntaxError: expected expression, got '<'
Kann ich noch etwas zur Analyse beisteuern?

Grüße ergerd

[schwatter]

Hallo ergerd,

durch die Namensänderung hat sich auch der Aufruf geändert.

Code Auswählen Erweitern

widgetOverride test:iconAnimated,state,>=10@green,<10@grey,shake,size@50
Mehr Informationen gibt es hier:
https://wiki.fhem.de/wiki/FHEMWEB/iconAnimated

Gruß schwatter

[ergerd]

Hallo schwatter,

habe ich jetzt korrigiert, allerdings wird jetzt kein Icon mehr angezeigt.

Code Auswählen Erweitern

Internals:
   FUUID      693b0ee7-f33f-e471-9a48-56d2d0c1fbf76e8c
   FVERSION   98_dummy.pm:0.256060/2022-02-01
   NAME       animatedSvg
   NR         354
   STATE      off
   TYPE       dummy
   READINGS:
     2025-12-17 21:47:13   state           off
Attributes:
   DbLogExclude .*
   iconAnimated data:image/svg+xml;;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 21V15H3.5C3.18 14.06 3 13.05 3 12C3 7.03 7.03 3 12 3H22V9H20.5C20.82 9.94 21 10.95 21 12C21 16.97 16.97 21 12 21H2M5 12C5 13.28 5.34 14.47 5.94 15.5L9.4 13.5C9.15 13.06 9 12.55 9 12C9 11.35 9.21 10.75 9.56 10.26L6.3 7.93C5.5 9.08 5 10.5 5 12M12 19C14.59 19 16.85 17.59 18.06 15.5L14.6 13.5C14.08 14.4 13.11 15 12 15L11.71 15L11.33 18.97L12 19M12 9C13.21 9 14.26 9.72 14.73 10.76L18.37 9.1C17.27 6.68 14.83 5 12 5V9M12 11C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13C12.55 13 13 12.55 13 12C13 11.45 12.55 11 12 11Z" /></svg>
   readingList state
   room       Test
   setList    state:on,off
   userattr   iconAnimated
   widgetOverride webCmd:iconAnimated,state,on@#00ff00,off@#666,rotateLeft,size@50


[schwatter]

Hallo ergerd,

1. Lösch deinen dummy und teste meinen:

Code Auswählen Erweitern

defmod animatedIconTest dummy
attr animatedIconTest userattr iconAnimated
attr animatedIconTest icon secur_alarm
attr animatedIconTest iconAnimated data:image/svg+xml;;;;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 21V15H3.5C3.18 14.06 3 13.05 3 12C3 7.03 7.03 3 12 3H22V9H20.5C20.82 9.94 21 10.95 21 12C21 16.97 16.97 21 12 21H2M5 12C5 13.28 5.34 14.47 5.94 15.5L9.4 13.5C9.15 13.06 9 12.55 9 12C9 11.35 9.21 10.75 9.56 10.26L6.3 7.93C5.5 9.08 5 10.5 5 12M12 19C14.59 19 16.85 17.59 18.06 15.5L14.6 13.5C14.08 14.4 13.11 15 12 15L11.71 15L11.33 18.97L12 19M12 9C13.21 9 14.26 9.72 14.73 10.76L18.37 9.1C17.27 6.68 14.83 5 12 5V9M12 11C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13C12.55 13 13 12.55 13 12C13 11.45 12.55 11 12 11Z" /></svg>
attr animatedIconTest readingList state val
attr animatedIconTest room Test
attr animatedIconTest setList state:on,off val
attr animatedIconTest stateFormat Status: state
attr animatedIconTest webCmd test:on,off
attr animatedIconTest widgetOverride test:iconAnimated,state,on@cyan,off@grey,rotate2d,size@50

setstate animatedIconTest Status: on
setstate animatedIconTest 2025-12-17 22:10:33 state on
setstate animatedIconTest 2025-12-14 09:40:04 val 10
2. Ich habe einen Bug gefunden. Dein webCmd darf nicht mit state benannt werden. Da muss ich nochmal schauen wo es hakt.

3. Schau ob Fhem das neue Widget findet.
http://deineIp:deinPort/fhem/www/pgm2/fhemweb_iconAnimated.js

4. Wenn ja, dann STRG + F5.

5. Wenn nein, dann Fhem neustarten.


Gruß schwatter

[ergerd]

Hallo schwatter,

jetzt habe ich wieder den Fehler:

Code Auswählen Erweitern

fhemweb_iconAnimated.js line 1:
SyntaxError: expected expression, got '<'
js File wird gefunden, fhem neu gestartet, es wird auch wieder ein Icon angezeigt

[Damian]

Man sollte allerdings wissen, dass SVG-Animationen verhältnismäßig viel Performance im Browser kosten. Deshalb habe ich z. B. die Voreinstellung eines blinkenden Punktes in meiner Card-Funktion wieder deaktiviert.

[schwatter]

Hallo

@ergerd,

funktioniert es jetzt? Oder hast du trotzdem das Icon angezeigt wird noch den Fehler?

@Damian
Mh kann ich nicht behaupten. Ich habe als Server einen Intel(R) Celeron(R) J4105 CPU. Zur Anzeige z.B ein olles Amazon FireHdPlus,
,Mi9t und eine Poco M5s. Alles keine Leistungswunder und es ist flott.


Gruß schwatter

[ergerd]

Hallo schwatter,

mit deinem dummy wird zwar ein Icon angezeigt aber es kommt der Fehler mit der expected expression, got '<'

Grüße ergerd

[Damian]

@Damian
Mh kann ich nicht behaupten. Ich habe als Server einen Intel(R) Celeron(R) J4105 CPU. Zur Anzeige z.B ein olles Amazon FireHdPlus,
,Mi9t und eine Poco M5s. Alles keine Leistungswunder und es ist flott.

siehe: https://forum.fhem.de/index.php?topic=126880.msg1214711#msg1214711

Insb. ungünstig, wenn man per RDP remote auf dem Server arbeitet.

[schwatter]

Moin,

den Link habe ich zur Kenntnis genommen, danke. Letztlich ist hier aber auch jeder selbst in der Verantwortung. Man kann FHEM mit zu vielen notify, DOIF, at und ähnlichen Konstrukten ebenso in die Knie zwingen.

Wenn man merkt, dass es ruckelt, ist man in der Regel selbst der Verursacher. Ich definiere bewusst nicht alle Icons als Animation, sondern nur dort, wo es sinnvoll ist und einen Mehrwert bietet. Zum Beispiel bei einer Pumpe. Probier das Widget doch mal aus. Erstens auf deine Einschätzung lege ich natürlich auch Wert und zweitens möchte ich natürlich wissen,
wo ist der Fehler von ergerd.

Alggemein zu den positiven Aspekten wie ich finde:

1.CSS-Animationen statt JS-Timer
Die Animationen laufen rein über @keyframes + transform/opacity. Das ist GPU-beschleunigt und deutlich effizienter als setInterval.

2.Nur ein globales <style> für Animationen
Das CSS wird einmal eingefügt (animatedIconAnimations), kein Style-Spam pro Icon.

3.Kein permanentes Polling
FW_queryValue + informid → Updates nur bei Reading-Änderung.

4.SVG wird nur einmal geladen & vorbereitet
Danach nur Klassenwechsel + fill-Änderung.


Negative,

Ich denke ab 20 bis 30 Mini-Animationen kippt die Stimmung, je nach Device.


@ergerd

Mach bitte nochmal ein:

1.

Code Auswählen Erweitern

{ Svn_GetFile('contrib/fhemweb_iconAnimated.js', 'www/pgm2/fhemweb_iconAnimated.js') }
2.
STRG+F5 umd das JS Widget zu reseten

3.
Probier mal ohne extrenes SVG. Nur Fhem Icon.

Code Auswählen Erweitern

defmod animatedIconTest dummy
attr animatedIconTest userattr iconAnimated
attr animatedIconTest icon secur_alarm
attr animatedIconTest readingList state val
attr animatedIconTest room Test
attr animatedIconTest setList state:on,off val
attr animatedIconTest stateFormat Status: state
attr animatedIconTest webCmd test:on,off
attr animatedIconTest widgetOverride test:iconAnimated,state,on@red,off@grey,alarm,size@50

setstate animatedIconTest Status: on
setstate animatedIconTest 2025-12-18 07:59:54 state on
setstate animatedIconTest 2025-12-14 09:40:04 val 10
Wenn das bei dir nicht funktioniert, dann könnte es ein Kodierungsproblem sein...


Gruß schwatter

[ergerd]

Hallo schwatter,

das funktioniert jetzt, auch mit externem SVG.

Vielen Dank!

Grüße
ergerd