[AnimatedSVG]Fhemweb Widget für animierte SVG

[schwatter]

Nabend,

AnimatedSVG ist ein Fhemweb Widget zum animieren von SVG. Zum jetzigen Zeitpunkt werden nur SVGs von hier unterstützt: https://pictogrammers.com/library/mdi/
Deshalb liegt es erstmal im Contribute.

Download mit:

Code Auswählen Erweitern

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

Beispiel dummy

Code Auswählen Erweitern

defmod animatedSvg dummy
attr animatedSvg userattr animatedSVG
attr animatedSvg animatedSVG data:image/svg+xml;;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2C11A1%2C1%200%200%2C0%2011%2C12A1%2C1%200%200%2C0%2012%2C13A1%2C1%200%200%2C0%2013%2C12A1%2C1%200%200%2C0%2012%2C11M12.5%2C2C17%2C2%2017.11%2C5.57%2014.75%2C6.75C13.76%2C7.24%2013.32%2C8.29%2013.13%2C9.22C13.61%2C9.42%2014.03%2C9.73%2014.35%2C10.13C18.05%2C8.13%2022.03%2C8.92%2022.03%2C12.5C22.03%2C17%2018.46%2C17.1%2017.28%2C14.73C16.78%2C13.74%2015.72%2C13.3%2014.79%2C13.11C14.59%2C13.59%2014.28%2C14%2013.88%2C14.34C15.87%2C18.03%2015.08%2C22%2011.5%2C22C7%2C22%206.91%2C18.42%209.27%2C17.24C10.25%2C16.75%2010.69%2C15.71%2010.89%2C14.79C10.4%2C14.59%209.97%2C14.27%209.65%2C13.87C5.96%2C15.85%202%2C15.07%202%2C11.5C2%2C7%205.56%2C6.89%206.74%2C9.26C7.24%2C10.25%208.29%2C10.68%209.22%2C10.87C9.41%2C10.39%209.73%2C9.97%2010.14%2C9.65C8.15%2C5.96%208.94%2C2%2012.5%2C2Z%22%20%2F%3E%3C%2Fsvg%3E
attr animatedSvg readingList state
attr animatedSvg room Test
attr animatedSvg setList state:on,off
attr animatedSvg webCmd test
attr animatedSvg widgetOverride test:animatedsvg,state,on@green,off@grey,rotateLeft,size@50

setstate animatedSvg on
setstate animatedSvg 2025-12-11 15:24:26 state on

Code Auswählen Erweitern

widgetOverride test:animatedsvg,state,on@green,off@grey,rotateLeft,size@50

Code Auswählen Erweitern

widgetOverride test:animatedsvg,<reading>,<on state>@<color>,<off state>@color,<animation>,size@50
Animationsübersicht

Code Auswählen Erweitern

pulse
rotateLeft
rotateRight
rotate2d
bounce
shake

Ziele, bzw todo:

• Fhem-SVG unterstützen
• Direkt das Deviceicon ersetzen
• Vielleicht noch Raum für String gewähren

Gruß schwatter