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!

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 timeline or alpha version we can dig into ?

Thanks alot for all your effort in this @fbradyirl
My first ever project in HA and Yaml ;)
And would be lovely to see your work @H4TR1Z!
I have made SVG files exactly as Sigenergys moving in direction of the power. if you are interested in them?

Dont know how to make an fancy video/gif as you did :D
Link for moving flows.
https://gist.github.com/user-attachments/assets/98790131-352c-49e7-b3a0-191391bee547
Best regards!

Thanks alot for all your effort in this @fbradyirl My first ever project in HA and Yaml ;) And would be lovely to see your work @H4TR1Z! I have made SVG files exactly as Sigenergys moving in direction of the power. if you are interested in them? Dont know how to make an fancy video/gif as you did :D Link for moving flows. https://gist.github.com/user-attachments/assets/98790131-352c-49e7-b3a0-191391bee547 Best regards!

Very nice! Mind sharing your code?

Thanks alot for all your effort in this @fbradyirl My first ever project in HA and Yaml ;) And would be lovely to see your work @H4TR1Z! I have made SVG files exactly as Sigenergys moving in direction of the power. if you are interested in them? Dont know how to make an fancy video/gif as you did :D Link for moving flows. https://gist.github.com/user-attachments/assets/98790131-352c-49e7-b3a0-191391bee547 Best regards!

Very nice! Mind sharing your code?

Whole Yaml? or just the Svg files? i can share it all if needed :) If anyone just could show me where or HOW!? :P Not familiar with github

Thanks alot for all your effort in this @fbradyirl My first ever project in HA and Yaml ;) And would be lovely to see your work @H4TR1Z! I have made SVG files exactly as Sigenergys moving in direction of the power. if you are interested in them? Dont know how to make an fancy video/gif as you did :D Link for moving flows. https://gist.github.com/user-attachments/assets/98790131-352c-49e7-b3a0-191391bee547 Best regards!

Very nice! Mind sharing your code?

Whole Yaml? or just the Svg files? i can share it all if needed :) If anyone just could show me where or HOW!? :P Not familiar with github

Yes the .yaml.

You can use the "code" tag in the github comment window. Or put it in pastebin.com lol.

Its a working progress.

Pastebin wont let me....
Using "code" will make the thread so long. so hopefully this works?
https://limewire.com/d/n59es#in36tBdSth

Hi All,

I hope its OK, instead of continuing to post in this Gist, I've created a new thread in the 'Discussion' section of the Sigenergy-Local-Modbus repository. Hopefully this will provide a central place for people to easily find this card and everyones efforts.

If people believe the card is maturing 'enough', I'll also see about posting it into the repository that TypQxQ has mentioned for consolidating card/addons etc, that will then allow people to easily FORK and start contributing to it with trackable merges/PULLS.

The Discussion Thread is at: TypQxQ/Sigenergy-Local-Modbus#184

Just a thought... there's also the Power Flow Plus card. It looks completely different from the Sigen app but I prefer it as it's simpler and clearer. Just letting people know there's options.

Hi everyone,
sorry for the delayed response. I’m currently on vacation, and development will start the week after next. Thanks for your patience!

Hi everyone, sorry for the delayed response. I’m currently on vacation, and development will start the week after next. Thanks for your patience!

Looking forward to the release!

any news on the update? thanks

should this grow into something better than just a gist? This is great!

Hi everyone, sorry for the delayed response. I’m currently on vacation, and development will start the week after next. Thanks for your patience!

Certainly looking forwards to this @H4TR1Z Thanks

Still nothing? I'm getting desperate.

Its a working progress.

Pastebin wont let me.... Using "code" will make the thread so long. so hopefully this works? https://limewire.com/d/n59es#in36tBdSth

Would you mind sharing your yaml again for the animation?