Lovelace: Power wheel card

[gurbyz (Gerben)]

Here’s my Power Wheel Card. If you already have some sensors set up for your solar panels and grid power, you’ll enjoy this card, I hope! Please be gentle, because this is my first topic on this forum ever and also my first custom card. Pls leave a message if you like the card.

EDIT: Updated for release 0.0.12.

power-wheel-card

An intuïtive way to represent the power and energy that your home is consuming or producing.

Direct link to GitHub. The readme in GitHub is the most up-to-date version.

Features

Features of the custom power-wheel-card:

• Displays the three values (solar, grid and home) in ‘a wheel’.

• Has different views for showing power values, showing energy values and showing costs/savings: the power view, the energy view resp. the money view.
  The initial view can be set. Click the unit to switch between views.

• Has options for a different card title per view.

• Can auto-toggle between views.
  Click the recycle icon to turn on or off the auto-toggle.
  You can choose the initial state of the auto-toggle.
  You can choose a custom period (in seconds) between views.

• Calculates the current power that you nett consume from the grid: grid power.
  Input for the calculation is the power that you consume from the grid and the power that you produce to the grid.

• Calculates the current power that your home is consuming: home power.
  Input for the calculation is the power that your solar panels produce and the power consumed from and produced to the grid.

• Calculates the energy that you nett consumed from the grid: grid energy.
  Input for the calculation is the energy that you consumed from the grid and the energy that you produced to the grid.

• Calculates the energy that your home is consuming: home energy.
  Input for the calculation is the energy that your solar panels produced and the energy that you consumed from and produced to the grid.

• Calculates the costs/savings for all the energy values. Takes into account different rates for consuming and producing energy from and to the grid.

• Displays the transition between these power, energy and money values as arrows.
  E.g. if your solar power panels produce power, the arrow from solar to home turns active.
  And if your solar power panels produce enough power to deliver some back to the grid, the arrow from solar to grid turns active.

• Arrows can have values next to them. Zero values are suppressed. And values on the arrows are visible only when relevant. E.g. on a sunny day when part of your produced solar panel energy was returned to the grid and the other part was consumed by your home.

• Has support for setups that don’t have separated grid sensors for consuming and producing.
  In these setups arrow values and arrow coloring are not available in energy view and money view due to lack of input details.

• Optionally uses icons of your own choice, which can be set by card parameters or taken from your customize: sensor settings.

• Optionally colors the consuming icons yellow and the producing icons green. You can choose your own colors for consuming and producing.

• Works for default theme and custom themes that use standard CSS vars.

• Has support for HACS to check for a new release.

Requirements for the power view

1. You need to have a working sensor for your solar power.
   Write down the entity id of this sensor. This is YOUR_SOLAR_POWER_SENSOR in the instructions below.

   • The sensor could have an icon (optional) that will override the default icon in the power-wheel-card if the card parameter solar_icon is not used.
   • The sensor state value should be a positive number when producing power.

2. You either need to have (i) separate grid power sensors for consuming and producing OR need to have (ii) one (nett) grid power sensor:

   1. You need to have a working sensor for your grid power consumption (i.e. power you consume from the grid).
      Write down the entity id of this sensor. This is YOUR_GRID_POWER_CONSUMPTION_SENSOR in the instructions below.

      You need to have a working sensor for your grid power production (i.e. power you produce to the grid).
      Write down the entity id of this sensor. This is YOUR_GRID_POWER_PRODUCTION_SENSOR in the instructions below.

      • Preferably these sensors have the same update interval as the sensor for solar power. (If not, the calculated value for home power can give unreal results sometimes.)
      • The sensor state values should be a positive number.

      OR:

   2. You need to have a working sensor for your (nett) grid power.
      Write down the entity id of this sensor. This is YOUR_GRID_POWER_SENSOR in the instructions below.

      • Default the polarity of this parameter has to be positive for producing (to the grid) and negative for consuming (from the grid).

3. For all these sensors:

   • A unit_of_measurement has been set up, e.g. 'W' or 'kW'.
   • The unit_of_measurement is the same as the other power sensors.
   • The sensor state should always be parsable to an int or - even better - a float value.

You don’t always need a sensor for your (nett) grid power but you can use it if you have it available and want to use its icon.

You don’t need a sensor for your home power, but you can use it if you have it available and want to use its icon. The value of this sensor will not be used.

Example requirements configuration

This is not the configuration of the power-wheel-card itself, but an example configuration that’s needed to have input sensors for the power-wheel-card.
An example configuration in configuration.yaml to comply to the requirements:

sensor:
  - platform: template
    sensors:
      solar_power:
        friendly_name: 'Solar power production'
        unit_of_measurement: 'W'
        value_template: >-
          {{ state_attr("sensor.youless", "pwr") }}
      grid_power_consumption:
        friendly_name: 'Grid power consumption'
        unit_of_measurement: 'W'
        value_template: >-
          {{ (1000 * (states("sensor.power_consumption") | float) | int }}
      grid_power_production:
        friendly_name: 'Grid power production'
        unit_of_measurement: 'W'
        value_template: >-
          {{ (1000 * (states("sensor.power_production") | float) | int }}

In this example the sensors names for YOUR_SOLAR_POWER_SENSOR, YOUR_GRID_POWER_CONSUMPTION_SENSOR and YOUR_GRID_POWER_PRODUCTION_SENSOR are solar_power, grid_power_consumption resp. grid_power_production.

Not visible in the example above, but of course you have to have installed the hardware and configured it to feed your sensors.
In the example above I used a rest sensor for my Youless for the solar power.
For the grid power I used a dsmr sensor for my Iskra Smart Meter.
Because my solar power sensor and dsmr sensor don’t report in the same unit of measurement, I had to convert that.

Tip. If you are creating extra sensors for the power-wheel-card, maybe you want to exclude them in your recorder: setting.
Extra sensors based on your heavily updating DSMR sensors will let your database grow fast.

Requirements for the energy view

The energy view itself is not required. As a result you don’t have to specify any energy view related card parameters.
The toggle functions to switch between views will be disabled.

Tip. You can skip this paragraph and start with a more simple setup first.

But if you want the energy view:

1. Comply to all the requirements of the power view first.

2. Decide what kind of energy sensors you want to use.
   You could use your smart meter counters directly, but using self made sensors for e.g. energy consumed or produced since last midnight could provide more meaningful information on your power-wheel-card.
   Then you are able to see the actual energy costs/savings today in the money view.

3. You need to have a working sensor for your solar energy.
   Write down the entity id of this sensor. This is YOUR_SOLAR_ENERGY_SENSOR in the instructions below.

   • The sensor could have an icon (optional) that will override the default icon in the power-wheel-card if the card parameter solar_icon is not used.
   • The sensor state value should be a positive number for having produced energy.

4. You either need to have (i) separate grid energy sensors for consuming and producing OR need to have (ii) one (nett) grid energy sensor and a home energy sensor:

   1. You need to have a working sensor for your grid energy consumption (i.e. energy you consumed from the grid).
      Write down the entity id of this sensor. This is YOUR_GRID_ENERGY_CONSUMPTION_SENSOR in the instructions below.

      You need to have a working sensor for your grid energy production (i.e. energy you produced to the grid).
      Write down the entity id of this sensor. This is YOUR_GRID_ENERGY_PRODUCTION_SENSOR in the instructions below.

      • Preferably these sensors have the same update interval as the sensor for solar energy. (If not, the calculated value for home energy can give unreal results sometimes.)
      • The sensor state values should be a positive number.

      OR: (not recommended)

   2. You need to have a working sensor for your (nett) grid energy.
      Write down the entity id of this sensor. This is YOUR_GRID_ENERGY_SENSOR in the instructions below.

      You need to have a working sensor for your home energy, because it can’t be calculated.
      Write down the entity id of this sensor. This is YOUR_HOME_ENERGY_SENSOR in the instructions below.

      • Default the polarity of these parameters have to be positive for producing (to the grid) and negative for consuming (from the grid).
      • Nb. You will lack arrow coloring and arrow values in the energy view and money view due to supplying too less information to calculate these.

5. For all these sensors:

   • A unit_of_measurement has been set up, e.g. 'Wh' or 'kWh'.
   • The unit_of_measurement is the same as the other energy sensors.
   • The sensor state should always be parsable to an int or - even better - a float value.

You don’t always need a sensor for your (nett) grid energy but you can use it if you have it available and want to use its icon.

You don’t always need a sensor for your home energy, but you can use it if you have it available and want to use its icon.

Requirements for the money view

The money view itself is not required. As a result you don’t have to specify any money view related card parameters.
The toggle functions to switch to the money view will be disabled.

But if you want the money view:

1. Comply to all the requirements of the energy view first.
2. Supply the card parameter energy_price.

The power-wheel-card has one price for the energy. If your energy price is depending on the (time of) day, please supply the average price for high and low tariff or choose to not use the money view.

Instructions

1. Check the requirements above. If you don’t comply to the requirements, the card won’t be much of use for you or just won’t work.

2. Download the file power-wheel-card.js.

3. Save the file in the www folder inside your Home Assistant config folder.

4. Include the card code in your ui-lovelace.yaml file:

resources:
  - url: /local/power-wheel-card.js?v=1
    type: module

Note. The actual number in v=A_NUMBER isn’t relevant. You have to increase the number whenever updating the source code to avoid having to manually clear the cache of your browsers and mobile apps.

5. Include a configuration for the power-wheel-card in your ui-lovelace.yaml file:

views:
  - id: example_view
    cards:
      - type: custom:power-wheel-card
        solar_power_entity: sensor.YOUR_SOLAR_POWER_SENSOR
        grid_power_consumption_entity: sensor.YOUR_GRID_POWER_CONSUMPTION_SENSOR
        grid_power_production_entity: sensor.YOUR_GRID_POWER_PRODUCTION_SENSOR

There are many more card parameters available, but it’s advised to start with this simple setup to get things running.

Card parameters

Parameter	Type	Mandatory?	Default	Description
type	string	required		Type of the card. Use "custom:power-wheel-card".
title	string	optional	"Power wheel"	Title of the card in all views, if not overridden with a title per view.
title_power	string	optional	Value of title.	Title of the card in power view.
title_energy	string	optional	Value of title.	Title of the card in energy view.
title_money	string	optional	Value of title.	Title of the card in money view.
solar_power_entity	string	required		Entity id of your solar power sensor. E.g. sensor.YOUR_SOLAR_POWER_SENSOR. See requirements above.
grid_power_consumption_entity (A)	string	optional, always together with B		Entity id of your sensor for power that you are consuming from the grid. E.g. sensor.YOUR_GRID_POWER_CONSUMPTION_SENSOR. See requirements above.
grid_power_production_entity (B)	string	optional, always together with A		Entity id of your sensor for power that you are producing to the grid. E.g. sensor.YOUR_GRID_POWER_PRODUCTION_SENSOR. See requirements above.
solar_energy_entity	string	optional	Default the energy view will not be enabled.	Entity id of your solar energy sensor. E.g. sensor.YOUR_SOLAR_ENERGY_SENSOR. See requirements above.
grid_energy_consumption_entity (D)	string	optional, always together with E	Default the energy view will not be enabled.	Entity id of your sensor for energy that’s consumed from the grid. E.g. sensor.YOUR_GRID_ENERGY_CONSUMPTION_SENSOR. See requirements above.
grid_energy_production_entity (E)	string	optional, always together with D	Default the energy view will not be enabled.	Entity id of your sensor for energy that’s produced to the grid. E.g. sensor.YOUR_GRID_ENERGY_PRODUCTION_SENSOR. See requirements above.
energy_price	float	optional	Default the money view will not be enabled.	The price of your energy per unit of energy. E.g. 0.20.
money_unit	string	optional	"€"	The unit of energy_price. This unit will be used for displaying all money values.
solar_icon	string	optional	The icon of your own customized solar sensor(s). If not available, then "mdi:weather-sunny" will be used.	Icon for solar power and energy.
grid_icon	string	optional	The icon of your own customized grid sensor(s) if its entity parameter is set. If not available, then "mdi:transmission-tower" will be used.	Icon for grid power and energy.
home_icon	string	optional	The icon of your own customized home sensor(s) if its entity parameter is set. If not available, then "mdi:home" will be used.	Icon for home power and energy.
power_decimals	integer	optional	0	Number of decimals for the power values.
energy_decimals	integer	optional	3	Number of decimals for the energy values.
money_decimals	integer	optional	2	Number of decimals for the money values.
color_icons	boolean	optional	true	To color the consuming icons green and the producing icons yellow. Icon values will have an absolute value. This setting only is affecting the three big icons for solar, home and grid. The arrows have colors by default.
consuming_color	string	optional	The yellow color for --label-badge-yellow from your theme. If not available, then "#f4b400" will be used.	CSS color code for consuming power icons if color_icons is set to true. Examples: "orange", "#ffcc66" or "rgb(200,100,50)". Don’t forget the quotation marks when using the # color notation.
producing_color	string	optional	The green color for --label-badge-green from your theme. If not available, then "#0da035" will be used.	CSS color code for producing power icons if color_icons is set to true.
initial_view	string	optional	"power"	The initial view that will displayed. Allowed values are "power" for power view, "energy" for energy view and "money" for money view.
initial_auto_toggle_view	boolean	optional	false	The initial state of the auto-toggle for views.
auto_toggle_view_period	integer	optional	10	Period in seconds between views when auto-toggle for views is turned on.
debug	boolean	optional	false	Logs debug information in the console of your browser. Useful when you want to investigate or register an issue.

Some extra parameters for users who don’t have separate grid sensors for producing and consuming:

Parameter	Type	Mandatory?	Default	Description
grid_power_entity (C)	string	optional, but required if you don’t have A and B		Entity id of your nett grid power sensor if you don’t have separate sensors for grid power production (to the grid) and grid power consumption (from the grid). E.g. sensor.YOUR_GRID_POWER_SENSOR.
grid_energy_entity (F)	string	optional, but required if you don’t have D and E and want to use the energy view		Entity id of your nett grid energy sensor if you don’t have separate sensors for grid energy production (to the grid) and grid energy consumption (from the grid). E.g. sensor.YOUR_GRID_ENERGY_SENSOR.
home_energy_entity (G)	string	optional, but required if you don’t have D and E and want to use the energy view		Entity id of your home energy sensor if you don’t have separate sensors for grid energy production (to the grid) and grid energy consumption (from the grid). E.g. sensor.YOUR_HOME_ENERGY_SENSOR.
production_is_positive	boolean	optional	true	If you use C, F or G you can specify the polarity of these input sensors. Use true for producing to the grid has positive values in your input sensors. Use false for producing to the grid has negative values.

Some extra parameters for advanced users who use dynamic icons in their HA setup and want to use them in the power-wheel-card:

Parameter	Type	Mandatory?	Default	Description
home_power_entity	string	optional	Default the icon specified in home_icon will be used. If not specified "mdi:home" will be used.	Entity id of your home power sensor if you want to use its icon in the power view instead of supplying a static home_icon on card level.
grid_power_entity	string	optional	Default the icon specified in grid_icon will be used. If not specified "mdi:transmission-tower" will be used.	Entity id of your grid power sensor if you want to use its icon in the power view instead of supplying a static grid_icon on card level.
home_energy_entity	string	optional	Default the icon specified in home_icon will be used. If not specified "mdi:home" will be used.	Entity id of your home energy sensor if you want to use its icon in the energy view instead of supplying a static home_icon on card level.
grid_energy_entity	string	optional	Default the icon specified in grid_icon will be used. If not specified "mdi:transmission-tower" will be used.	Entity id of your grid energy sensor if you want to use its icon in the energy view instead of supplying a static grid_icon on card level.

More about icons

The icons for solar and grid can be set by card parameters as shown in the tables above.
If you don’t specify them as card parameters, the icons are taken from your own sensors for solar power and grid power (in the power view) and from your own sensors for solar energy and grid energy (in the energy view and money view).
You could have specified those with the customize: option for homeassistant in your configuration.yaml.

If you haven’t set up any icons for them, default icons will be used in all views. For solar: mdi:weather-sunny; and for grid: mdi:transmission-tower.

An example for reusing the icons of your sensors used in the power view, to be put in configuration.yaml:

homeassistant:
  customize:
    sensor.YOUR_SOLAR_POWER_SENSOR:
      icon: mdi:white-balance-sunny
    sensor.YOUR_GRID_POWER_SENSOR:
      icon: mdi:flash

Advanced configuration example

A more advanced example for in the ui-lovelace.yaml file:

- type: custom:power-wheel-card
  title_power: "Power distribution"
  title_energy: "Energy distribution"
  title_money: "Energy costs/savings"
  solar_power_entity: sensor.YOUR_SOLAR_POWER_SENSOR
  grid_power_consumption_entity: sensor.YOUR_GRID_POWER_CONSUMPTION_SENSOR
  grid_power_production_entity: sensor.YOUR_GRID_POWER_PRODUCTION_SENSOR
  solar_energy_entity: sensor.YOUR_SOLAR_ENERGY_SENSOR
  grid_energy_consumption_entity: sensor.YOUR_GRID_ENERGY_CONSUMPTION_SENSOR
  grid_energy_production_entity: sensor.YOUR_GRID_ENERGY_PRODUCTION_SENSOR
  energy_price: 0.20
  money_unit: "$"
  solar_icon: "mdi:white-balance-sunny"
  grid_icon: "mdi:flash"
  home_icon: "mdi:home-assistant"
  power_decimals: 2
  energy_decimals: 2
  money_decimals: 0
  color_icons: true
  consuming_color: "#33ff33"
  producing_color: "#dd5500"
  initial_view: "energy"
  initial_auto_toggle_view: true
  auto_toggle_view_period: 5

License

This custom card is licensed under the Apache License 2.0.

Credits

• gurbyz

[VDRainer]

Great work, thanks for sharing.
Would be nice to config the icons for solar and grid power in lovelace too, so you dont’t need the customize.

[gurbyz (Gerben)]

I like your idea. I can make extra options like the home_power_icon and have as fallback the customized icons. And as fallback for that the default icons. Something for a next release.

[Mariusthvdb (Marius)]

Nice! ive implemented it and is seems to calculate correctly, though Im not sure about the graphical representation.

In regular HA I use:

calculated_bruto_verbruik:
  friendly_name: Bruto verbruik
  unit_of_measurement: 'Watt'
  value_template: >
    {{ (states('sensor.zp_actuele_opbrengst')|int)
     + (states('sensor.netto_verbruik')|int) }}

solar power = sensor.zp_actuele_opbrengst’
smartmeter used power = sensor.netto_verbruik

adding these calculates total power consumption.

based on that I have this sensor:

levering_of_verbruik:
  friendly_name_template: >
    {% if states('sensor.netto_verbruik')|int > 0 %} Verbruik
    {% else %} Levering
    {% endif %}
  icon_template: >
    {% if states('sensor.netto_verbruik')|int > 0 %} mdi:import
    {% else %} mdi:export
    {% endif %}
  value_template: >
    {{states('sensor.netto_verbruik')|int}}

Displaying as:

your card:

numbers are correct!

I tried to change the icon in the module to mdi:solar-power but it won’t change…

could you have a look?

[gurbyz (Gerben)]

@Mariusthvdb

is seems to calculate correctly, though Im not sure about the graphical representation.

The representation in the wheel is what I intended to display: you are consuming from the grid (bottom left, 2514 W) and all is consumed by your home (bottom right, 2514 W).

Can you share your config that gave an issue with the solar_power_icon? Then I can try to reproduce it. (Please note, that solar_power_icon isn’t an option for the card (yet ) and that supplying an icon via customize requires a restart of HA.)

[Mariusthvdb (Marius)]

@gurbyz

Can you share your config that gave an issue with the solar_power_icon?

I changed line 19:

  ? solarPowerState.attributes.icon : 'mdi:solar-power';

nothing happening though…

I know the icon is correct, since I use it as my view icon also:

[gurbyz (Gerben)]

Could you try the note in the instructions (just below no. 4) and increase the number of v and refresh Lovelace? I suspect it’s a caching problem.

[Mariusthvdb (Marius)]

no that’s not it, I have refreshed cache and reloaded, as is visible because I also changed the icon size to the default HA size 25x25px

I have set it as instructed:

  - url: /local/lovelace/power-wheel-card.js?v=1
    type: module

still no mdi:solar-power…

[gurbyz (Gerben)]

Hmmmm, I couldn’t reproduce the issue. Maybe try to bypass the network for the lovelace service worker since you are changing the code? See docs here.

Or: you can try the dev branch. There you’ll find a power-wheel-card that’s not released yet, but has an extra option to set a solar_power_icon as a card option as suggested by @VDRainer earlier today.

Hope this helps.

[Mariusthvdb (Marius)]

@gurbyz

Hmmmm, I couldn’t reproduce the issue.

you mean you were able to set the mdi:solar-power icon as I tried it and have it in the frontend?

@gurbyz

Or: you can try the dev branch. There you’ll find a power-wheel-card that’s not released yet, but has an extra option to set a solar_power_icon as a card option

sure, be glad to try, if you could provide the link… cant find it on your repo?

[gurbyz (Gerben)]

@Mariusthvdb

you mean you were able to set the mdi:solar-power icon as I tried it and have it in the frontend?

Yep, I could have your icon. Had to refresh a lot though. When I increased the v value it was quicker.

Link to the dev branch / unreleased version is here. See also the readme in the dev branch for the extra options.

[Mariusthvdb (Marius)]

well this is really strange…

change to your dev-branche code, and adapted setup to:

  - type: 'custom:power-wheel-card'
    title: 'Power distribution'
    solar_power_entity: sensor.zp_actuele_opbrengst
    solar_power_icon: 'mdi:solar-power'
    grid_power_entity: sensor.calculated_bruto_verbruik
    home_power_icon: 'mdi:home'

immediate effect: the icons were back to the 48x48 size (as is in the .js file) so correct, but the solar power icon was not displayed.
I tried to reset icon size again to 25x25, et voila, immediate effect, smaller icons.
still no ‘mdi:solar-power’ though…

[VDRainer]

I tried the dev branch too and everything works as expected.
No problems with icons.
@gurbyz, thanks for adding the icon options.

[Mariusthvdb (Marius)]

@Mariusthvdb

solar-power

made it.
I had to change one of the sensors, because now sun was up, i could see I had entered the total usage, and not the netto usage (total minus solar), which is directly then from my smart-power-meter into the config settings of the module.

numbers now add up correctly, so cool. But what this change made apparent was that the module takes the icons of the original sensors, and since I had already customized those (as I am slowly migrating from legacy HA, I have customized all of my entities), the module shows these icons.
So that might be of note for you, when the icons are already customized, settings in the power-wheel-card config don’t apply.

[sparkydave (🇦🇺 Dave)]

Very nice. One thing that I think would make it look nicer and more wheel-like is to have curved arrows between the icons. Just a thought

[Mariusthvdb (Marius)]

yes, or another thought:

makes it directly visible:
what the sun is producing, and what the house is consuming (including costs) or returning to the grid (including profit)…

bw @gurbyz, would you please care and change to round to max 2 decimals:

[Klagio]

I love it, now I really need solar panels

[jstride (Jake Stride)]

Worked straight away for me as we just had our solar commissioned yesterday so perfect timing

[meizenga (not4u)]

Worked straight away here. Just like @Mariusthvdb said, I would like to see a the number round to max 3 decimals.
@gurbyz Great job!

[Klagio]

OT: which inverter/system are you using?

I am interested to know which model/brand are more suited to integrate in HASS.

First I would buy the solar panels, and at a second stage also a battery (Tesla perhaps?), so would be nice to have a system that has it all: solar production, consumption from solar, consumption from network, consumption from battery, battery status, in order to have some logic and program it in the most efficient way