Animated Arrows for Energy PV

[RZmedia24openHAB (Patrick R.)]

Hello,

i am made in openhab 4.3 a SOLAR-Page Dashboard to View in Realtime the PV-Situation like a Monitor (PV-Input, BAT-IN/BAT-OUT and Home

I dont know how i made a simple widget to start it if an Item XY was higher 0 to start the Animated Green Arrows wenn Positive 0 and Red Arrows when Negative 0.

i am draw the Arrows manually and post it here:

For Example.

If PV-Input or Home was 0, then going not visible
If PV-Input or Home was higher 0, then green Arrows going from left to right

If BAT-INPUT was Positive, then make Green Arrows from Up to Down
If BAT-INPUT was Negative, then make Red Arrows from Down to Up
If BAT-INPUT was 0, then going not visible

Must i Made 3 Widgets or Is it not Possible?

Is this only Possible in HABpanel?

Thanks.

[JustinG]

This is possible with custom widgets. In fact, you have a couple different options. The two easiest ways to get animations would be with css animation directives or using animated svgs. There are several examples of both of these types around the forums:

Here are animated arrows with css:

Animated widget css integration

Hi, I’m trying my first widget right now, now I want to include an animated arrow…how can I put this css code in the widget config? body{ margin: 0; padding: 0; #background-color: #fff; } .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 20px; height: 20px; border-bottom: 5px solid #000; border-right: 5px solid #000; transform: rotate(135deg); margin: -25px; animation: an…

Here a system where arrows are animated inside an svg:

OH4: SVG Animation using shape other than circle

Hi All I am trying to replicate an animation from an APP inside my openHAB. With help so far I have managed to get the following working: [Inverter Animation] The animation uses the following code: - component: f7-row config: preserveAspectRatio: xMidYMid slice style: height: auto tag: svg …

And here’s a discussion of how to change the direction of an animation:

OH4: Understanding animation flow direction from energy widget

Hi All I am trying to understand the direction “flow” of the animations in the widget as per the following: Specifically I am trying to understand, for example: - component: f7-row config: tag: path id: path3 d: M0,56 H110 stroke: teal stroke-width: 1 …

In all of these cases, though, you’ll want to make sure you have a pretty good understanding of how to use widget expressions if you want things to change based on the values of your items:

Widget Expressions & Variables