Home Assistant custom card "animated-consumption-card"

The Tesla company is not only about cars. The other product that this company is selling is a huge battery Tesla Powerwall. This devices is created to work with solar panels.

The house is getting electricity from the grid and from the solar panels on the roof. If the house is consuming less power than the solar panels create, then the excess is stored in Tesla Powerwall. When it is needed you can get power from that storage.

There is a Tesla Mobile App. In this app there is super neat and informative way to show what is going on:

After I saw this animation I've decided that I want to see something similar in the smart home system that I have in my house — Home Assistant.

Home Assistant is a great thing. Anybody can create something for this system. If you know modern frontend technologies you can create Home Assistant custom components with ease. I'm not a professional frontend developer, so I have spend a lot of time, but I have created the card that I wanted.

I don't have solar panels and I don't have big battery to store electricity. Because of that my card is much simpler than Tesla Mobile App. There is only two elements in this card: the grid and the house:

The speed of the "electron" depends of the power consumption. The more power the house is consuming the faster the speed.

You need to pass this card a sensor with your consumption:

- type: 'custom:animated-consumption-card'
  entity: sensor.total_power_consumption

In my case I'm using smart plugs TP-Link HS110 to get information about power consumption. I'm summing the values I get from the smart plugs:

sensor:
  - platform: template
    sensors:
      total_power_consumption:
        unit_of_measurement: W
        value_template: "{{ (states('sensor.tplink_watts') | float) + (states('sensor.tplink2_watts') | float) + (states('sensor.tplink3_watts') | float) }}"
        entity_id:
          - sensor.tplink_watts
          - sensor.tplink2_watts
          - sensor.tplink3_watts

This is not the best possible solution. In my house not all devices are connected via smart plugs, so in my case this card shows not the whole house consumption, but only the consumption of the devices that are plugged into several TP-Link HS110.

It is better to get values from the house main electric meter, but for now I don't have that data in Home Assistant.

The card installation is standard. You can copy file by hand, or install it via HACS. All the details how to install and use this card is in GitHub repo.

I will be happy if you find this card useful.

Here is a link to the repo with this card:

https://github.com/bessarabov/animated-consumption-card