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_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_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_grid_sensor_import_power') |
        round(1) %} {% set export =
        states('sensor.sigen_grid_sensor_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_grid_sensor_import_power')  |
        round(1)  %} {% set export =
        states('sensor.sigen_grid_sensor_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_energy_storage_system_soc') %}  {% set
        soc_power = states('sensor.sigen_ess_charge_discharge_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_energy_storage_system_soc') %}  {% set
        soc_power = states('sensor.sigen_ess_charge_discharge_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_energy_storage_system_soc') %}  {% set
        soc_power = states('sensor.sigen_ess_charge_discharge_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.myenergi_eddi_power_charging') | float %}
        {% if power > 0 %}
          {{ (power / 1000) | round(2) }}kW
        {% else %}
          
        {% endif %}
      secondary: >
        {% set power = states('sensor.myenergi_eddi_power_charging') | float %}
        {% if power > 0 %}
          🛁 {{states('sensor.myenergi_eddi_23546415_status')}}
        {% 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_2024052302935_acrunstatus') |
        float %} 

        {% if acrunstatus == 2 %}
          Charging
        {% elif acrunstatus == 3 %}
          Charging (Scheduled)
        {% elif acrunstatus == 5 %}
          Reserving
        {% else %}
          Available
        {% 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

Hi,

Thanks for putting this together. I pasted this into my card and got the following error "ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'return states['input_number.sigen_home_card_height'].state + 'px';'". Would you have any suggestions on how to fix this? I'm using cardmod 3.4.4 and button card 4.1.2 if that helps.

Thanks

I'm getting this error now too.

@moch8 @BeauGiles I have simply modified lines 515-517 to

• height: 450px

Thanks. I also found the Mushroom templates in HACs is required.

@moch8 @BeauGiles I have simply modified lines 515-517 to

• height: 450px

I am also getting the same error. I have added height. Still doesn't work.
Can I know how did you fixed it?

For anyone wanting to fix it, just replace line 515 with - height: 450px

Thanks. It's worked now and showing some readings. Can I know why the image is still not showing? I have attached some photos for reference.

@binil116
the image path needs to be edited to include "community"
so line 18 as example becomes:
image: local/community/sigenergy/sigenstor.png

this worked for me - but im having an issue where when i save the card i get an error 'a is not iterable' woks if i save as a badge but it doesnt display corectly