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

Thanks @fbradyirl! Over the past few days, I’ve greatly expanded your original codebase and added a range of new features and enhancements, including visual improvements, dynamic behaviors, and condition-based animations.

I’ll be publishing my extended version here on GitHub soon, in case it’s helpful to others or sparks ideas for further development. Really appreciate your work, it was an excellent foundation to build upon!

Thanks @fbradyirl! Over the past few days, I’ve greatly expanded your original codebase and added a range of new features and enhancements, including visual improvements, dynamic behaviors, and condition-based animations.

I’ll be publishing my extended version here on GitHub soon, in case it’s helpful to others or sparks ideas for further development. Really appreciate your work, it was an excellent foundation to build upon!

That is really cool! I never got time to add the animations. I look forward to seeing your code and will link to it from here also.

@H4TR1Z wow that looks great ! Looking forward to the code release. TIA.

Thanks @fbradyirl! Over the past few days, I’ve greatly expanded your original codebase and added a range of new features and enhancements, including visual improvements, dynamic behaviors, and condition-based animations.

I’ll be publishing my extended version here on GitHub soon, in case it’s helpful to others or sparks ideas for further development. Really appreciate your work, it was an excellent foundation to build upon!

I am eagerly awaiting the code release! Well done!

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.

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

@H4TR1Z absolutely, that all sounds amazing. Thank you!

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!