Energy Flow Card Plus

repository·main·Indexed 42 days ago

https://github.com/flixlix/energy-flow-card-plus

A customizable Home Assistant dashboard card for visualizing energy distribution between solar, grid, and home batteries. Version 0.2.3 supports detailed configuration for power flow rates, individual device tracking, and power outage handling.

Tokens
8.2K
Snippets
12
Records
21
Agent score
4%

What's inside Energy Flow Card Plus

  1. Select an Energy Collection Key

    main

    By default, the card follows the energy collection of the dashboard it is currently rendered in. If you want the card to follow a specific energy dashboard (e.g., one created for a specific room or house), use the collection_key option.

    Collection keys follow the pattern energy_<dashboard_url>. For example, a dashboard at /energy-living-room uses the key energy_living_room.

    type: custom:energy-flow-card-plus
    collection_key: energy_living_room
    entities:
      grid:
        entity: sensor.grid_energy
      solar:
        entity: sensor.solar_energy
  2. How the Flow Formulas work

    main

    The card supports two different mathematical models for calculating the visual velocity (flow rate) of the dots on the lines.

    1. Standard Flow Formula (Relative)

    This is the default formula. It calculates flow rate relative to the total power in the system. As the total power changes, the velocity of individual lines changes to maintain a consistent visual density.

    Formula: max - (value / totalLines) * (max - min)

    • max: max_flow_rate configuration.
    • min: min_flow_rate configuration.
    • value: The power of the current line.
    • totalLines: The sum of all consumption and production lines.

    2. New Flow Formula (Absolute)

    This model calculates flow rate independently for each line. A specific wattage (e.g., 10W) will always result in the same dot velocity, regardless of what other devices are doing. This is often more intuitive for interpreting perceived power.

    To enable this, set use_new_flow_rate_model: true in your main configuration.

    Formula: if (value > maxIn) return maxOut; else return ((value - minIn) * (maxOut - minOut)) / (maxIn - minIn) + minOut;

    Configuration parameters for the New Model:

    • min_expected_power (minIn): The wattage at which the lowest speed is selected.
    • max_expected_power (maxIn): The wattage at which the highest speed is selected.
    • max_flow_rate (maxOut): The fastest speed (e.g., 1 dot per second).
    • min_flow_rate (minOut): The slowest speed (e.g., 1 dot every 5 seconds).
  3. Install Energy Flow Card Plus via HACS

    main

    The recommended way to install this card is through the Home Assistant Community Store (HACS).

    1. Ensure HACS is installed in your Home Assistant instance.
    2. Search for "Energy Flow Card Plus" within HACS.
    3. Download the card using the HACS user interface.
    Search for "Energy Flow Card Plus" in HACS and download.
  4. Add resource reference for Energy Flow Card Plus

    main

    After installing the card, you must register the JavaScript module as a resource in Home Assistant.

    YAML Configuration

    If you manage your dashboard via YAML, add the following to your configuration.yaml:

    resources:
      - url: /local/energy-flow-card-plus.js
        type: module

    Graphical Editor (UI)

    If you use the Home Assistant UI to manage resources:

    1. Enable Advanced Mode in your user profile.
    2. Navigate to Settings -> Dashboards.
    3. Click the three-dot icon and select Resources.
    4. Click the (+ ADD RESOURCE) icon.
    5. Enter the URL:
      • For Manual Install: /local/energy-flow-card-plus.js
      • For HACS Install: /hacsfiles/energy-flow-card-plus/energy-flow-card-plus.js
    6. Select JavaScript Module as the type.
  5. Configure device entities and display options

    main

    When defining devices (like grid, solar, battery, etc.) within the energy-flow-card-plus, you can use the following options to control how their state and metadata are displayed:

    • entity (required): The Home Assistant Entity ID providing the state value.
    • unit_of_measurement: A string for the unit (e.g., 'W', 'kW'). Note: Must be wrapped in quotes.
    • icon: An optional icon path to display next to the state.
    • unit_white_space (boolean): Defaults to true. Set to false to remove whitespace between the state and the unit.
    • display_zero (boolean): Defaults to false. Set to true to show info even if the state is 0 or unavailable.
    • display_zero_tolerance (number): If set, the device is displayed only if the state is greater than this value. This overrides the need for display_zero.
    • decimals (number): Number of decimal places to round the value to.
    • template (string): A HA Template to display. Note: This can only be used if entity is NOT set.
    • accept_negative (boolean): Defaults to false. If true, negative values are displayed as negative; otherwise, they are converted to positive.
    • sum_total (boolean): If true, the secondary info field on the solar bubble is summed with the main entity to create a total consumption value.
    • tap_action, hold_action, double_tap_action: Objects defining the Home Assistant actions triggered on the secondary info text.
  6. Configure Energy Flow Card Plus options

    main

    The energy-flow-card-plus card provides extensive configuration options for appearance and behavior. To achieve a look similar to the official Energy Flow Card, you only need to configure the entities object. Most other options are for advanced customization.

    Core Card Options

    NameTypeDefaultDescription
    typestringrequiredMust be custom:energy-flow-card-plus
    entitiesobjectrequiredOne or more sensor entities (see Entities object)
    titlestringTitle displayed at the top of the card
    dashboard_linkstringURL path to an Energy Dashboard (e.g., /energy)
    dashboard_link_labelstringGo To Energy DashboardOverrides the default link label
    second_dashboard_linkstringA second dashboard link (YAML Editor only)
    second_dashboard_link_labelstringGo To Energy DashboardOverrides the second default link label
    kilo_decimalsnumber1Decimals for kWh display
    base_decimalsnumber1Decimals for Wh display
    min_flow_ratenumber.75Seconds for the quickest dot to travel the card
    max_flow_ratenumber6Seconds for the slowest dot to travel the card
    kilo_thresholdnumber0Wh threshold before converting to kWh (0 = always kWh)
    clickable_entitiesbooleanfalseIf true, clicking an entity opens its more-info dialog
    min_expected_powernumber0.01Min Wh for New Flow Formula
    max_expected_powernumber2000Max Wh for New Flow Formula
    display_zero_linesobject{mode: "show"}See Display Zero Lines
    full_sizebooleanfalseExperimental: Card takes full height in panel mode
    style_ha_cardcssCSS for the card container (border/background)
    style_card_contentcssCSS for card content (circles/lines)
    use_new_flow_rate_modelbooleanfalseEnables New Flow Formula
    sort_individual_devicesbooleantrueSorts by power consumption -> entity id -> alphabetically
    allow_layout_breakbooleanfalseAllows up to 4 devices even if layout breaks
    collection_keystringBind to a specific energy data collection (e.g., energy_living_room)
  7. Configure line visibility modes

    main

    You can control how energy flow lines are displayed using the mode option. This is useful for visually de-emphasizing certain flows.

    Available modes:

    • show: Lines are fully visible.
    • hide: Lines are not shown.
    • transparency: Lines are shown with adjustable opacity.
    • grey_out: Lines are shown in a grey color.
    • custom: Allows manual selection of transparency or color.

    Associated options:

    • transparency: A number between 0 and 100. 0 is full opacity, 100 is completely hidden. Default is 50. Used when mode is transparency or custom.
    • grey_color: A HEX code string or an RGB list (e.g., [255, 255, 255]). Used when mode is grey_out or custom.
  8. Configure Power Outage handling

    main

    The Power Outage feature allows the card to react when the grid connection is lost. You can configure how the card detects the outage and how it represents the state (e.g., showing a generator).

    • entity (required): The Entity ID that changes state during an outage (e.g., binary_sensor.grid_connection_status).
    • entity_generator: The Entity ID providing the generator's power (e.g., sensor.generator_power). If omitted, the card assumes the grid is the only source.
    • state_alert: The state of the outage entity that triggers the alert. Defaults to 'on'.
    • icon_alert: The icon to show instead of the grid icon during an outage. Defaults to mdi:transmission-tower-off.
    • label_alert: Text displayed below the icon during an outage.
    • calculate_flow_rate:
      • false (default): No special calculation.
      • true: Calculates flow rate using a formula.
      • number: Sets a fixed interval for dots (e.g., 10 means one dot flows every 10 seconds).
  9. Minimal configuration for Grid and Solar

    main

    To display both grid and solar energy flows, configure the grid and solar entities. This example uses split entities for the grid.

    type: custom:energy-flow-card-plus
    entities:
      grid:
        entity:
          consumption: sensor.grid_consumption
          production: sensor.grid_production
          display_state: one_way
          color_circle: true
      solar:
        entity: sensor.solar_production
  10. Full configuration (Mix & Match)

    main

    This example demonstrates the full capability of the card, including custom icons, names, individual device tracking, and decimal formatting.

    type: custom:energy-flow-card-plus
    entities:
      home:
        entity: sensor.home_consumption
        color_icon: solar
      fossil_fuel_percentage:
        entity: sensor.fossil_fuel_percentage
        icon: mdi:pine-tree
        color_icon: true
        display_zero: true
        name: Non Fossil
        state_type: power
      grid:
        icon: mdi:ab-testing
        name: Provider
        entity:
          production: sensor.grid_production
          consumption: sensor.grid_consumption
      solar:
        icon: mdi:solar-panel-large
        entity: sensor.solar_production
      battery:
        name: Bateria
        icon: mdi:bat
        entity:
          consumption: sensor.battery_consumption
          production: sensor.battery_production
      individual:
        - entity: sensor.car_power
          icon: mdi:car-electric
          color: "#80b8ff"
          name: Denim Flash
          color_icon: false
        - entity: sensor.motorbike_power
          name: Qivi
          color_icon: true
          display_zero: true
          color: "#ff8080"
          icon: mdi:motorbike-electric
    base_decimals: 0
    kilo_decimals: 2
    min_flow_rate: 0.9
    max_flow_rate: 6
    kilo_threshold: 10000
    clickable_entities: true
    title: Energy Flow Card Plus
  11. Minimal configuration for Grid, Solar, and Battery

    main

    To display a complete energy ecosystem including grid, solar, and battery, use the following structure. Note the use of state_of_charge for the battery entity.

    type: custom:energy-flow-card-plus
    entities:
      grid:
        entity:
          consumption: sensor.grid_consumption
          production: sensor.grid_production
        display_state: one_way
        color_circle: true
      solar:
        entity: sensor.solar_production
      battery:
        entity:
          consumption: sensor.battery_consumption
          production: sensor.battery_production
        state_of_charge: sensor.battery_state_of_charge
        display_state: one_way
        color_circle: true
      home:
        color_icon: true
    kilo_threshold: 10000