New Custom UI card to show animated power consumption

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:

A bit more details are in my blog —


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



wanted to see how it was made up


    - entity: sensor.total_power_consumption
      type: 'custom:animated-consumption-card'
    - cards:
        - card:
              opacity: 0.7;
            direction: right
            height: 35px
            max: '${vars[0]}'
            min: 0
            padding: 2px
            title_position: inside
            type: 'custom:bar-card'
              - entity_id: '*sensor.*_power*'
                state: '>0'
              - 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
  - sensor.daily_energy_consumption
type: 'custom:config-template-card'
  - 'states[''sensor.total_power_consumption''].state'


1 Like

also got me thinking want to see what sensors made up the sensor

with templates we can add a attribute_templates:

  - platform: template
        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) }}"
            - sensor.dishwasher_power 
            - sensor.dryer_power
            - sensor.fridge_power
            - sensor.washing_power
          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.

  • 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



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
Schermafbeelding 2020-04-26 om 14.27.45

Schermafbeelding 2020-04-26 om 14.42.18


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.


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 :slight_smile:

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


It works again…