Hi Ivan,
This is really nice.
2 request though.
- I would like to set my own (mdi) icons per card
- Is it possible to draw a thin line between the icon, just like the Tesla example
Thanks
Rien
1 Like
Thank you!
I have just released a new version 1.1.0 that implements your ideas.
The default behaviour of the card stays the same. The only thing you have to specify is entity.
But now there are several configuration parameters that are not required, but you can specify them if you like:
Here is how you can change the icons:
- type: 'custom:animated-consumption-card'
entity: sensor.total_power_consumption
left_icon: mdi:flash
right_icon: mdi:ceiling-light
And here is an example with a line:
- type: 'custom:animated-consumption-card'
entity: sensor.total_power_consumption
show_line: true
(And it is also possible to use custom icons and a line at the same time)
1 Like
Wow that’s fast !!!
I have a couple of Solar panels and also an electric point to charge my car (no Tesla)
Is it an idea to combine these 2 with your existing set up(more like the Tesla app), or do you want to keep it simple with the 2 devices - oneway setup?
I’m not sure.
I want this card to be simple to use. Now it is very simple, just one sensor and straightforward movement of a small circle from left to right.
I would like to improve this card to make it possible to visualize more complex relationship of the systems, but for the moment I have no idea how to do it right. Maybe in the future I will come to some solutions and I will implement them in this card, but please don’t expect it to happen.
1 Like
No worries it’s already super as it is right know
Hahaha!
I was desperatly searching mdi for an icon with utility pole, but i couldn’t find any, so I’ve used mdi:electron-framework as the icon in the left circle.
Thank you! After your screenshot I’ve managed to find this icon mdi:transmission-tower
Very cool card, thank you for your work on this.
One comment, when lovelace is showing 4 columns resulting in the graphics being shrunk the animated dot disappears for quite a long time ~15 seconds.
Hmm.
I was trying to reproduce it. On my mac book air with 1440×900 display in google chrome I can’t see the problem:
But if I enter “Configure UI” mode then I see the incorrect behaviour that you are describing:
(I wasn’t able to create a quick fix for this, for some reason the card is not getting the width that I’m using to calculate when to move the dot to the start)
Do you have such behaviour in edit more, or in normal mode?
I’m getting that behavior in both Edit and Normal mode.
Worth noting, I tested this on a couple of different computers today, it’s much worse with a small screen and made worse again if only a small amount of power being used.
When viewing on my desktop with a large monitor it worked as expected. Not a big issue if a pain to try
and resolve 
Hi Ivan,
The card broke due to the upgrade to 0.110
I know they changed t5he way icons are processed…
1 Like
Oh, my!
Thank you! I haven’t updated HA where I use this card, so I didn’t know about this problem.
I have just releases a new version of this card 1.2.0. I have tested this new version of the card with HA 0.110.0 and with some previous version of HA. It looks like everything is fine now. (commit with fix)
I want to thank Ludeeus for helping me find the solution — What is the proper way to change mdi icon size with the release 0.110.0?
Hi Ivan,
I still get version 1.1.0 via HACS, are you sure it has been commited?
Ooops. Sorry. I have forgotten that HACS needs a GitHub release not only tag.
I’ve updated the GitHub repo. So, I think now HACS will show 1.2.0
Superb,
It works again…
Thanks
Super! Thank you for reporting the bug.
Hi,
I started using another theme named " Blackened Theme "
Now I can’t see the moving dot no more. See screenshot.
Is this solvable?
Thanks in advance
I started using another theme named " Blackened Theme "
Now I can’t see the moving dot no more. See screenshot.
Oh, I see, thank you.
I have just released a new version 1.3.0 There is a new option circle_color, so I hope that something like this will solve your issue:
- type: 'custom:animated-consumption-card'
entity: sensor.total_power_consumption
circle_color: white
Well, frankly speaking I think that this is a bug in the theme. For the circle color I’m using a variable var(--primary-color) and suppose it to be different color than the background (but I’m not 100% sure). But I also think that there can be some use cases when somebody want to change the color of the circle even if is not the same color as the background, so I’ve decided that it is ok to have such option.
1 Like
frankly speaking I think that this is a bug in the theme. For the circle color I’m using a variable
var(--primary-color)and suppose it to be different color than the background
You may very well be correct, but Home Assistant’s support for dark themes is known to still have holes, so it’s possible that --primary-color is the only way to achieve the proper results. Very nice of you to provide a solution regardless!
1 Like
Thanks again 
There is the new card that looks great. Maybe it will suit your needs:
4 Likes