Interactive Card — A Custom Card Experience for Home Assistant Energy Management

Hi everyone! :grinning_face:

I’d like to share a project I’ve been working on recently: Interactive Card.

Like many Home Assistant users, I started with a few basic energy cards to build my dashboard. As I added more sensors and devices over time, the dashboard became increasingly powerful—but also increasingly complex.

I wanted a better way to present energy information than simply stacking individual sensor cards. My goal was to create something that feels more like a complete home energy management interface while keeping the flexibility that Home Assistant provides.

That’s what led me to build Interactive Card.

Why this project?

Home Assistant already provides excellent energy monitoring capabilities. However, building a clean, consistent, and user-friendly energy dashboard often requires combining many different custom cards and maintaining a large amount of YAML configuration.

Instead of creating another standalone visualization card, I wanted to build a collection of reusable cards that work together as a unified dashboard experience.

The goals are simple:

1.Quickly understand the current energy status of the home

2.View historical energy trends in a more intuitive way

3.Monitor individual circuits in real time

4.Maintain a consistent visual style and interaction throughout the dashboard

The current dashboard is built around my own Home Assistant energy monitoring setup.

(Dashboard overview image here)

The overall design is inspired by modern smart home applications. Rather than presenting energy data as a collection of numbers, the goal is to provide a clearer overview of how energy is being used throughout the home.

The dashboard currently consists of three main sections. Energy KPI provides a quick overview of key energy metrics such as current power, today’s energy usage, energy cost, and other customizable indicators. It supports flexible configuration of Home Assistant entities, custom titles, icons, and units, automatic power and energy unit conversion, and easy card management directly from the user interface. Energy Trend is designed to visualize how energy data changes over time. Since many energy sensors update very frequently, displaying every raw data point can result in noisy charts, so the Trend card uses smoothed curves by default to highlight overall trends while also offering a precise mode for viewing the original data. It currently supports multiple data series, different chart modes, configurable time ranges, and multiple Y-axes. Circuit Monitoring focuses on the real-time status of individual electrical circuits, displaying information such as power consumption, device icons, status indicators, and last update times to help users quickly identify high-power devices or unusual circuit activity.

What’s Next?

This is the first public release of Interactive Card, and there is still plenty to improve.

Some of the planned work includes:

1.Improving compatibility across different Home Assistant installations

2.Preparing the project for HACS

3.Supporting more smart devices and integrations

4.Adding more configurable energy management scenarios

Feedback Welcome!

This is my first time sharing the project with the Home Assistant community, so I’d really appreciate any suggestions, ideas, or feedback.

GitHub

:backhand_index_pointing_right:GitHub Link:https://github.com/greenFly-bill/interactive-card_0.1

Thanks for taking a look!

I’d also love to see how others have designed their own Home Assistant energy dashboards or approached energy management in their setups. :handshake:

2 Likes

:backhand_index_pointing_right:Link to the previous post→https://community.home-assistant.io/t/interactive-card-a-custom-card-experience-for-home-assistant-energy-management/1021091

This Week’s Update — A More Native Editing Experience

This week, I focused on simplifying how the existing cards are viewed and configured inside HA. :grinning_face:

The biggest change is a clearer separation between viewing and editing. Clicking a card on the dashboard is now reserved for viewing more detailed information, rather than mixing viewing and configuration into the same interaction. The existing + button remains the main entry point for managing which cards are displayed. !

I also added a Home Assistant-style visual configuration editor for the card groups. KPI, Trend and Circuit sections can now be configured through a more native editing workflow instead of relying primarily on interactions inside the dashboard itself.

Individual card editing has moved into this configuration experience as well. For KPI and Circuit, clicking a card directly in the editor preview opens its individual settings, so the dashboard itself can remain focused on everyday use while configuration stays inside Home Assistant’s editing flow.

In short, the interaction model is becoming:

Dashboard:

Click a card → View details

+ → Manage which cards are displayed

Home Assistant Editor:

→ Configure the card group

→ Click preview cards to edit individual cards

This keeps the dashboard cleaner in normal use, while making customization feel more consistent with the rest of Home Assistant.

New — Automation Scenarios

This update introduces Automation Scenario, designed to bring Home Assistant automations directly into the Dashboard.

A real-world home scenario often involves more than a single Automation. It may include multiple automations, sensors, and devices working together. Automation Scenario brings these related elements into a single Scenario, turning separate automation rules into a more complete experience that is easier to understand and control.

Three examples are currently included:

· Solar Water Heating

· EV Smart Charging

· Pet Care

You can also start from Custom / Blank to create your own Scenario using your own entities and existing Automations.

Each Scenario focuses on the information that matters most for that use case, including current status, key data, automation activity, progress or thresholds, as well as Last Action and Next Decision. This makes it easier to understand what the scenario is doing now and what it is likely to do next.

Clicking a Scenario opens a unified control panel for everyday interaction. Users can adjust scenario modes and strategies, control related devices, enable or disable linked automations, and use Manual Override when needed.

More detailed setup is handled through the visual configuration editor. Here, users can configure what appears in each Scenario, including live information, status and progress displays, scenario controls, device controls, and the grouping and linking of existing Home Assistant Automations or Blueprints.

Automation Scenario follows the same design and interaction language as the existing KPI, Trend, and Circuit cards, extending the dashboard from simply viewing energy data to also understanding and interacting with how the home responds to it.

A complete Home Assistant Automation YAML is included below using Solar Water Heating as an example. You can expand the section to view and copy the full configuration.

Solar Water Heating

This example automatically controls the water heater based on available solar power:

· When solar power stays above 2000 W for 10 seconds, the water heater turns on and switches to the Solar strategy.

· When solar power stays below 800 W for 30 seconds and it is before 17:00, heating stops and waits for solar power to recover.

· After 17:00, if heating is still needed, the water heater turns on and switches to the Grid strategy.

· When Manual Override is enabled, the automation will not run.

View full Automation YAML

alias: 00-Smart Water Heater merged

description: Solar intelligent water heater control

triggers:

  • trigger: numeric_state

    entity_id:

    • input_number.solar_power

    above: 2000

    for:

    seconds: 10

  • trigger: numeric_state

    entity_id:

    • input_number.solar_power

    below: 800

    for:

    seconds: 30

  • trigger: time

    at: “17:00:00”

conditions:

  • condition: state

    entity_id: input_boolean.manual_override

    state: “off”

actions:

  • choose:

    • conditions:

      • condition: numeric_state

        entity_id: input_number.solar_power

        above: 2000

      sequence:

      • action: input_boolean.turn_on

        target:

        entity_id: input_boolean.water_heater

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_status

        data:

        option: Running

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_strategy

        data:

        option: Solar

      • action: input_text.set_value

        target:

        entity_id: input_text.heating_reason

        data:

        value: Solar surplus available

    • conditions:

      • condition: numeric_state

        entity_id: input_number.solar_power

        below: 800

      • condition: time

        before: “17:00:00”

      sequence:

      • action: input_boolean.turn_off

        target:

        entity_id: input_boolean.water_heater

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_status

        data:

        option: Waiting

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_strategy

        data:

        option: Wait

      • action: input_text.set_value

        target:

        entity_id: input_text.heating_reason

        data:

        value: Waiting for solar surplus

    • conditions:

      • condition: time

        after: “17:00:00”

      sequence:

      • action: input_boolean.turn_on

        target:

        entity_id: input_boolean.water_heater

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_status

        data:

        option: Running

      • action: input_select.select_option

        target:

        entity_id: input_select.heating_strategy

        data:

        option: Grid

      • action: input_text.set_value

        target:

        entity_id: input_text.heating_reason

        data:

        value: Start now to meet target time

mode: single

Before using this example: Replace the Entity IDs with the corresponding entities in your own Home Assistant setup.

input_number.solar_power → your solar power sensor

input_boolean.water_heater → your water heater switch or control entity

input_boolean.manual_override → your Manual Override helper

input_select.heating_status → your heating status entity

input_select.heating_strategy → your heating strategy entity

input_text.heating_reason → your heating reason entity

The 2000 W / 800 W thresholds and the 17:00 fallback time are example values and can be adjusted to match your own solar system, water heater, and daily schedule.

The status, strategy, and reason entities in this example are Helpers used to provide richer information to Automation Scenario. If your water heater or other smart devices already provide equivalent status information, you can connect those entities directly instead of using the example Helpers.

EV Smart Charging

EV Smart Charging brings key charging information such as current SOC, target SOC, electricity price, available solar power, charging power, and departure time into a single Scenario.

Instead of checking these entities and related automations separately, the Scenario provides a unified view of the current charging status, strategy, and activity, making it easier to understand whether the EV is charging, why it is waiting, and what may happen next.

Pet Care

Pet Care brings feeding and temperature-related automations together into a single Scenario.

For example, scheduled feeding, feeding safety checks, high-temperature protection, and temperature recovery can continue to run as separate Home Assistant Automations, while the Scenario presents them together with feeding status, food remaining, room temperature, and recent activity.

Custom Scenarios

The three scenarios above are examples rather than fixed templates. You can also start from Custom / Blank to create a Scenario around your own Home Assistant setup.

Choose your own Scenario name and status entity, link the automation.* entities you already use, and configure the data, activity information, and controls you want to show.

This means Automation Scenario can also be used for things like Garden Irrigation, Home Security, Battery Management, Pool Heating, or any other automation setup in your home.

Automation Scenario does not replace Home Assistant Automations. Home Assistant continues to handle the actual Triggers, Conditions, and Actions, while Automation Scenario provides a visual layer for understanding and interacting with them from the dashboard.

Whether you start with one of the examples or build a completely custom Scenario around your own automations, the idea is the same: bring related automations, devices, and information together as one understandable home scenario.

This is still evolving, and I’d love to hear how you would use Automation Scenario with your own Home Assistant setup.

:sun:More detailed configuration and examples are available in the GitHub: :backhand_index_pointing_right:https://github.com/greenFly-bill/agents-home-assistant-integration-analysis