Custom Widget - PowerFlow

This widget is a power flow diagram, provided as an SVG with text and animations controlled by item states. This version contains 4 flows, each with animated power flow, representing grid, battery, solar and thermal power.

This widget is also intended to server as an example of how to create dynamic animated SVG widgets. The SVG is built as a separate file for convenience, so code modification is minimal.

Screenshot:
power-flow-anim-short

Widget: habpanel-powerflow-widget (github)

The appearance can be configured:

  • change the SVG
  • choice of 3 simple path animations
2 Likes

This is soooooo cool! But the used icons are pretty ugly :laughing:

Yes, this was the whole point. SVG can be beautiful or ugly (and this one is clearly on the ugly side :slight_smile: but this was meant as a demonstration of how you can link any svg property to openhab item values.

If you have any nice SVG to animate, it should be easy to link it to openhab, and hopefully get something that looks great :slight_smile:

Hey there, trying to get it to work. It does basically.
If i give the Values as kw (so 650W be 0.65) the Animations seem smooth. If i give the Watts directly, they are ridicoulus fast.

Also i can’t find a way to show Units after the Values, no matter if i give them as number:power or as strings.

As i almost understand nothing from this corner of the programming world, i wonder if you could give me a tip where to do this settings.

Kind Regards
Jens