I have created a custom UI card that is showing the house power consumption.
It is just a fancy way to see the value of the sensor:
This card is inspired by the animation in Tesla Mobile App:
Here is a link to GitHub repository with this card: https://github.com/bessarabov/animated-consumption-card
A bit more details are in my blog — https://ivan.bessarabov.com/blog/home-assistant-animated-consumption-card-is-released
Works Good nice one
would be good if change with the themes (dark theme not GOOD)
Thank you!
You are right, I’m using the default HA theme and I haven’t checked how this card is working with other themes.
I’ve just releases an updated version of this card (version 1.0.1) with some fixes to look better with dark themes.
Here is an example. On the left is the 1.0.0 version and on the right is the new 1.0.1
that was quick Heaps beater
thanks
Here
wanted to see how it was made up
card:
entities:
- entity: sensor.total_power_consumption
type: 'custom:animated-consumption-card'
- cards:
- card:
card_style:
opacity: 0.7;
direction: right
height: 35px
max: '${vars[0]}'
min: 0
padding: 2px
title_position: inside
type: 'custom:bar-card'
filter:
include:
- entity_id: '*sensor.*_power*'
state: '>0'
exclude:
- entity_id: sensor.total_power_consumption
sort: entity_id
type: 'custom:auto-entities'
type: 'custom:hui-vertical-stack-card'
show_header_toggle: false
type: entities
entities:
- sensor.daily_energy_consumption
type: 'custom:config-template-card'
variables:
- 'states[''sensor.total_power_consumption''].state'
also got me thinking want to see what sensors made up the sensor
with templates we can add a attribute_templates:
- platform: template
sensors:
total_power_consumption:
friendly_name: "Total Power Consumption"
unit_of_measurement: W
value_template: "{{ (states('sensor.dishwasher_power') | float) + (states('sensor.dryer_power') | float) + (states('sensor.fridge_power') | float) + (states('sensor.washing_power') | float) }}"
entity_id:
- sensor.dishwasher_power
- sensor.dryer_power
- sensor.fridge_power
- sensor.washing_power
attribute_templates:
Dishwasher: "{{states('sensor.dishwasher_power')}}"
Dryer: "{{states('sensor.dryer_power')}}"
Fridge: "{{states('sensor.fridge_power')}}"
Washing: "{{states('sensor.washing_power')}}"
now I can see what sensor I have added to the sensor.
Hi Ivan,
This is really nice.
2 request though.
Thanks
Rien
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)
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.
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…
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
