Recreate Sigenergy UI (using modbus sensors) as Home Assistant Card

sigen_modbus_card.yaml

type: custom:button-card
show_state: true
tap_action: none
custom_fields:
  home_image:
    card:
      type: picture
      image: local/Sigenergy/home_has_solar_has_car.png
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border: none;
          }
  sigenstor_home_image:
    card:
      type: picture
      image: local/Sigenergy/sigenstor_home.png
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border: none;
          }
  ammeter_home_image:
    card:
      type: picture
      image: local/Sigenergy/ammeter_home.png
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border: none;
          }
  ac_charger_bg_image:
    card:
      type: picture
      image: local/Sigenergy/ac_charger_bg.png
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border: none;
          }
  pv_power:
    card:
      type: custom:mushroom-template-card
      primary: "{{states('sensor.sigen_inverter_pv_power') | round(1) }}kW"
      secondary: SOLAR
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  load_power:
    card:
      type: custom:mushroom-template-card
      primary: "{{states('sensor.sigen_plant_consumed_power') | round(1) }}kW"
      secondary: HOME
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  grid_power:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set import = states('sensor.sigen_plant_grid_import_power') |
        round(1) %} {% set export =
        states('sensor.sigen_plant_grid_export_power') | round(1) %} {% if
        import > 0 %}
          {{ import }}kW
        {% elif export > 0 %}
          {{ -export }}kW
        {% else %}
          0
        {% endif %}
      secondary: |
        GRID
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  grid_flow_label:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set import = states('sensor.sigen_plant_grid_import_power')  |
        round(1)  %} {% set export =
        states('sensor.sigen_plant_grid_export_power') | round(1) 
         %} {% if import > 0 %}
          Importing
        {% elif export > 0 %}
          Exporting
        {% else %} {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 12px !important;
              font-weight: bold !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              color: lightgray !important;
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  battery_soc:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set soc = states('sensor.sigen_plant_battery_state_of_charge') %}  {%
        set soc_power = states('sensor.sigen_plant_battery_power') | round(1) 
        %}

        {% if soc_power != 0 %}
          {{ soc_power | abs }}kW · {{ soc }}%
        {% else %}
          {{ soc }}%
        {% endif %}
      secondary: SigenStor
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              overflow: visible !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  battery_discharge_label:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set soc = states('sensor.sigen_plant_battery_state_of_charge') %}  {%
        set soc_power = states('sensor.sigen_plant_battery_power') | round(1) 
        %}

        {% if soc_power < 0 %}
          Discharging
        {% else %}
          
        {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 12px !important;
              font-weight: bold !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              color: lightgreen !important;
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  battery_charge_label:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set soc = states('sensor.sigen_plant_battery_state_of_charge') %}  {%
        set soc_power = states('sensor.sigen_plant_battery_power') | round(1) 
        %}

        {% if soc_power == 0 %}
          
        {% else %}
          {% if soc_power > 0 %}
            Charging
          {% endif %}
        {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 12px !important;
              font-weight: bold !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              color: red !important;
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  ev_soc:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set power = states('sensor.buzz_lightgear_charger_power') | float %}
        {% set soc = states('sensor.buzz_lightgear_battery') %}  {% set range =
        states('sensor.buzz_lightgear_range') | round(0) %}  {% if power > 0 %}
          {{ power }}kW - {{ soc }}% ({{ range }}km)
        {% else %}
          {{ soc }}% ({{ range }}km)
        {% endif %}
      secondary: >
        {% set soc = states('sensor.buzz_lightgear_battery') %}  {% if soc ==
        'unknown' %}
          Car Asleep
        {% else %}
          Buzz Lightgear
        {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  water_diverter_power:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set power = states('sensor.sigen_2024052302935_smart_home_1_power') |
        float %} {% if power > 0 %}
          {{ power | round(2) }}kW
        {% else %}
          
        {% endif %}
      secondary: >
        {% set power = states('sensor.sigen_2024052302935_smart_home_1_power') |
        float %} {% if power > 0 %}
          🛁 Heating
        {% else %}

        {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  ev_ac_power:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set acrunstatus =
        states('sensor.sigen_ac_charger_system_state').split('-')[0] %} {% set
        amps = states('number.sigen_ac_charger_charger_output_current') %}  

        {% if acrunstatus == 'Charging' %}
          {{ states('sensor.sigen_ac_charger_charging_power') }} kW ({{ amps | float | round(0) | int }}A)
        {% else %}
          {{ acrunstatus }}
        {% endif %}
      secondary: |
        AC CHARGER
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 14px !important;
              font-weight: bold !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
            .secondary {
              font-size: 12px !important;
              color: gray !important;
              position: relative;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  ev_charging_label:
    card:
      type: custom:mushroom-template-card
      primary: >
        {% set soc_power = states('sensor.buzz_lightgear_charger_power') | float
        %}

        {% if soc_power > 0 %}
          Charging
        {% else %}
          
        {% endif %}
      multiline_secondary: false
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 12px !important;
              font-weight: bold !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              color: red !important;
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  ev_charging_icon:
    card:
      type: custom:mushroom-template-card
      icon: >-
        {% set soc_power = states('sensor.buzz_lightgear_charger_power') | float
        %}

        {% if soc_power > 0 %}
          mdi:lightning-bolt          
        {% endif %}
      icon_color: >-
        {% set soc_power = states('sensor.buzz_lightgear_charger_power') | float
        %}

        {% if soc_power > 0 %}
          red          
        {% endif %}
      fill_container: false
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 12px !important;
              font-weight: bold !important;
              letter-spacing: -0.1px !important; /* Reduce letter spacing */
              color: lightgreen !important;
              position: relative;
              overflow: visible !important;
              text-align: left;
            }
          .: |
            ha-card {
              background-color: transparent;
              border: none;
            }
  vertical_line:
    card:
      type: custom:button-card
      card_mod:
        style: |
          ha-card {
            background-color: transparent;
            border: none;
            position: relative;
            width: 1px;
            height: 110px; /* Adjust height as needed */
            background-color: gray; /* Light gray background */
            overflow: hidden;
            animation: rotation 2s linear infinite;
          }
          .line {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, green 50%, transparent 50%);
            background-size: 100% 200%;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(00deg);
            }
          }
styles:
  card:
    - align-self: start
    - height: >
        [[[ return states['input_number.sigen_home_card_height'].state + 'px';
        ]]]
    - opacity: 1
    - background-color: transparent
    - border: none
  custom_fields:
    home_image:
      - position: absolute
      - top: 5px
      - left: 10px
      - width: 395px
    sigenstor_home_image:
      - position: absolute
      - top: 5px
      - left: 10px
      - width: 395px
    ammeter_home_image:
      - position: absolute
      - top: 5px
      - left: 10px
      - width: 395px
    ac_charger_bg_image:
      - position: absolute
      - top: 5px
      - left: 10px
      - width: 395px
    pv_power:
      - position: absolute
      - top: 15px
      - left: 210px
      - width: 100px
    load_power:
      - position: absolute
      - top: 15px
      - left: 300px
      - width: 100px
    water_diverter_power:
      - position: absolute
      - top: 110px
      - left: 130px
      - width: 100px
    grid_power:
      - position: absolute
      - top: 300px
      - left: 300px
      - width: 100px
    grid_flow_label:
      - position: absolute
      - top: 335px
      - left: 300px
      - width: 100px
    battery_soc:
      - position: absolute
      - top: 300px
      - left: 175px
      - width: 100px
    battery_discharge_label:
      - position: absolute
      - top: 335px
      - left: 175px
      - width: 100px
    battery_charge_label:
      - position: absolute
      - top: 335px
      - left: 175px
      - width: 100px
    ev_soc:
      - position: absolute
      - top: 300px
      - left: 20px
      - width: 100px
    ev_ac_power:
      - position: absolute
      - top: 15px
      - left: 20px
      - width: 100px
    ev_charging_label:
      - position: absolute
      - top: 335px
      - left: 20px
      - width: 100px
    ev_charging_icon:
      - position: absolute
      - top: 245px
      - left: 10px
      - width: 100px
    vertical_line:
      - position: absolute
      - top: 47px
      - left: 305px
      - width: 1px
      - height: 100px

Looking forward to the card @H4TR1Z

Thank you and @fbradyirl both for putting the effort in

Thanks again @fbradyirl – a few days ago I uploaded a GIF showcasing my extended version of the energy visualization.

Initially, I was planning to release the updated YAML code directly. However, since I personally use a KOSTAL system, I had to backport the view for SIGENERGY users so they could also benefit from the improvements.

During that process, I realized it would make far more sense to turn this into a full Lovelace custom card, offering better flexibility, user configuration, and platform independence.

⸻

✅ Currently working features (YAML version): • Real-time animated energy flow with direction control • Automatic state detection (e.g. inverter inactivity) • Lines automatically turn off when no energy is flowing • Visually optimized for both dark and light mode • Smooth animation loop and modular component structure • YAML-based, backward compatible with existing setups

⸻

🔧 Planned features for the custom Lovelace card: • Easy UI-based entity configuration • Selection between W / kW display per sensor • Multiple layout backgrounds (e.g. with/without EV, battery, PV) • Multi-language support (English and German) • System-agnostic support: SIGENERGY, KOSTAL, and more • Available through HACS as a standalone custom card • Responsive layout for different screen sizes • Performance-optimized and easier to maintain

⸻

📌 The current implementation is heavily based on my own enhancements, but clearly inspired by your original YAML code. I intend to include a thank-you note crediting you as the original inspiration in the final repository.

If you’re okay with me developing a standalone card based on this, I’d appreciate your confirmation.

Any estimate on the release of your card? Looking forward to integrate it into my HA setup!