Home Flow Card

Examples

Copy-pastable configs for the most common setups, each next to the card it draws.

Solar and a battery

The full house: solar, a battery with its state of charge, and the grid.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power
battery:
  entity: sensor.battery_power
  state_of_charge: sensor.battery_soc

Separate sensors, an outage and a generator

One sensor per direction, the grid's outage sensor, and a generator that appears when the grid goes down. Here the grid is down.

yaml

type: custom:home-flow-card
grid:
  entity:
    consumption: sensor.grid_import_power
    production: sensor.grid_export_power
  power_outage:
    entity: binary_sensor.grid_outage
generator:
  entity: sensor.generator_power
solar:
  entity: sensor.solar_power
battery:
  entity:
    consumption: sensor.battery_discharge_power
    production: sensor.battery_charge_power
  state_of_charge: sensor.battery_soc

A car charging off the sun

An electric car in front of the house, charging from the home's outlet, with its battery level on its label. It shows only while it is home, and waits faded and unplugged while its cable is out.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power
car:
  entity: sensor.wallbox_power
  state_of_charge: sensor.car_battery_level
  visibility:
    - condition: state
      entity: device_tracker.car
      state: home
  idle:
    - condition: state
      entity: binary_sensor.car_plugged_in
      state: "off"

A heat pump heating towards its target

A heat pump on the front wall, fed from the home's outlet, its fan turning while it runs. Its label shows its temperature and the target it heads for; a tap opens its thermostat.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power
heat_pump:
  entity: sensor.heat_pump_power
  climate: climate.heat_pump
  status: temperature_and_target

The same house in energy mode: each label shows what its node made, stored, bought or used over the period picked on the dashboard's energy date picker, and each wire its energy, a line each way where the grid or battery ran both ways. The battery's charge stays live.

yaml

type: custom:home-flow-card
mode: energy
grid:
  entity:
    consumption: sensor.grid_import_energy
    production: sensor.grid_export_energy
solar:
  entity: sensor.solar_energy
battery:
  entity:
    consumption: sensor.battery_discharge_energy
    production: sensor.battery_charge_energy
  state_of_charge: sensor.battery_soc

Live power or the day so far

Give the nodes their energy sensors too and the card gets a selector in its corner: live power, or today's energy, picked on the card itself rather than on a date picker.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power
battery:
  entity: sensor.battery_power
  state_of_charge: sensor.battery_soc
energy_entities:
  grid:
    consumption: sensor.grid_import_energy
    production: sensor.grid_export_energy
  solar: sensor.solar_energy
  battery:
    consumption: sensor.battery_discharge_energy
    production: sensor.battery_charge_energy

Your own battery thresholds

Turn the charge bar yellow and red where it matters for your battery.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
battery:
  entity: sensor.battery_power
  state_of_charge: sensor.battery_soc
  state_of_charge_severity:
    red: 25
    yellow: 50

The state of charge beside the value

Put the battery's charge on the value's line, or swap the two.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
battery:
  entity: sensor.battery_power
  state_of_charge: sensor.battery_soc
  state_of_charge_position: after_value

Grid only

Without solar or a battery, the house shows the grid feeding the home.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power

Thicker wires

Draw the wires twice as thick. They keep that size whatever the card's width.

yaml

type: custom:home-flow-card
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power
battery:
  entity: sensor.battery_power
  state_of_charge: sensor.battery_soc
wire_width: 2

Still numbers and wires

Plain numbers and no pulses, for a calmer dashboard.

yaml

type: custom:home-flow-card
animate_numbers: false
disable_dots: true
grid:
  entity: sensor.grid_power
solar:
  entity: sensor.solar_power

Try your own

Paste your config into the playground and drag the sensors to see every state of your house.