Improve arrow animation

[mumpf]

Hi,

your card is perfect from functionality point of view, but the arrow animation (jumping arrows) is not really nice (my opinion).
I could successfully modify your card to suggest an improvement, you can see it in the video (in attached zip).

I can't offer you a pull request, because I have no idea how to build your project. So I modified just the resulting .js-file. But I attached the js-file I modified, so you can see in a diff the few changes I made. Probably you like it and can inlude it in your card.

power-distribution-card.zip

Regards, Waldemar

[JonahKr]

I will add it as a new animation type i think and maybe change the disable_animation to animation with the 3 options: none, fluent, jumpy(maybe i can come up with a better word...)
The current animation (the jumpy one) is similar to E3DC so i want to still have it included.
Thanks alot for the contribution 👍

Additionally i wanted to say i really like your idea of replacing the ratio with the battery percentage. 💯
Maybe this is a better way of displaying the battery SOC then what i had previously planned.

And regarding how the project is structured:
Typescript is just like Javascript with the difference being you have fixed Types(String, Int etc...)
So in the Source folder here you will find all the files. THey are split up into different files to make it easier to work with.
To compile the JS file you'll need to have NodeJS installed and then just run npm run-script build in the project directory.
You will see if all checks passed and if so, find the compiled JS in the dist folder.

[JonahKr]

@mumpf Feel free to write down some improvement ideas if you want 👍

[mumpf]

I have a few ideas...

• user can choose the color of the arrows, ideally per entity. I.e.
  • solar:
    ...
    color_arrow_left: red
    color_arrow_right:; green
  • home:
    ...
    color_arrow_left: blue
    color_arrow_right: blue
• as an alternative, you could offer a color_template property per entity...
• If the output unit is Watt (W), I would format the output value to integer.
• for 'unit_of_display' I would suggest a third value "mixed", which displays values <1000W as integer Watt values (i.e. 672 W), but values >= 1000W as float in kW (i.e. 1.23 kW)

Regarding the battery soc display: My "misuse" of the ratio bar is not really my favorite.... somehow funny that you like it. An alternative idea:

• allow additional information for each entity, displayed in a small font directly next to the icon of the entity.
• this can be used for any information, like battery soc, or windspeed or pool temperature or car soc.

Regards,
Waldemar

[JonahKr]

I finished the animation change here: 1c97b16
Its now Vector based instead of Border based.
Coloring is not yet included but i will work on all the coloring stuff for the objects in the near future to get everything standardized.