Animated Heat Pump Flow / HVAC System Status Lovelace Card

Share your Projects! Custom Integrations
1

:thermometer: Heat Pump Flow Card - Animated System Visualization

I’d like to share a custom Lovelace card I’ve been working on for visualizing heat pump systems in Home Assistant.

Heat Pump Flow Card

Heat Pump Flow Card provides real-time animated visualization of your heat pump system with flowing water, temperature-based color gradients, and dynamic system metrics.

:sparkles: Key Features:

  • :cyclone: Animated water flow - Dots move along pipes at speeds based on actual flow rates
  • :thermometer: Temperature-based colors - Pipes change from blue (cold) to red (hot) based on real temperatures
  • :arrows_counterclockwise: Rotating fan - Spins based on actual fan speed (0-100%)
  • :oil_drum: Dual tank support - Buffer tank and DHW tank with gradient temperature visualization
  • :fire: Auxiliary heater - Inline electric heater with dynamic glow animations
  • :twisted_rightwards_arrows: Diverter valve - Visual indicator showing DHW heating flow direction
  • :bar_chart: Real-time metrics - COP, thermal power, energy consumption, costs, and runtime
  • :chart_with_upwards_trend: Custom sensors - Add your own metrics in a configurable grid layout

:warning: Fair Warning:

This card was designed around my personal heat pump configuration, which is more complex than typical installations (buffer tank, DHW tank, multiple zones, auxiliary heater, etc.). Configuration may require some thinking and experimentation to adapt it to your specific setup. The documentation is comprehensive, but you’ll likely need to map your sensors carefully to your system.

:package: Installation:

Available via HACS - search for “Heat Pump Flow Card”, or install manually from the repository.

:pray: Looking for Feedback:

I’d really appreciate feedback, especially from folks with different heat pump configurations! What works? What doesn’t? What features would make it more useful for your setup?

Repository: GitHub - jasipsw/heat-pump-flow-card: A heat pump lovelace card

Thanks for taking a look!

4 Likes
2

The card looks very good however a lot of heat pump systems do not have a buffer tank, just the heat pump a 3 port valve for DHW and heating (radiators or Underfloor heating).
It would be good if you can make the buffer tank optional, thanks.

3

That’s a great card. Long term I would plan to build something like this to capture boiler, buffer tank, DHW tank and manifolds. I have the stats installed via esp8266 chips but would have no idea where to start with graphics. Can anyone point to tutorials?

4

Hey, thanks for that awesome project.
I have been looking for something like this for a long time and haven’t found anything suitable. I ended up building something myself, bit i’m not happt with it.

Is it possible to display two hwating zones?
I have two:

  1. Radiators (unmixed)
  2. UFH (mixed)
5

This looks great. I have a similar setup to a heat pump with a 3‑port valve and no buffer tank, so making that optional would be really useful. I’ve also been planning to build something like this for my boiler and manifold setup (as ptogher14 mentioned), and I’m curious if you have any pointers on where to start with the graphics side; I’ve been reviewing system diagrams like https://www.mesa-plumbing.com/heating/heat-pump-services/ to see how others handle flow visualization. And seconding the question about multiple heating zones. I’ve got both radiators and UFH. Thanks for sharing this.