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

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?