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

Modbus Frontend Card

This is an attempt to build a nice looking card which reads the Sigenergy modbus sensor values in Home Assistant.

Download the images from:

• https://app-eu.sigencloud.com/assets/assets/images/home_has_solar_has_car.png
• https://app-eu.sigencloud.com/assets/assets/images/sigenstor_home.png
• https://app-eu.sigencloud.com/assets/assets/images/ammeter_home.png
• https://app-eu.sigencloud.com/assets/assets/images/ac_charger_bg.png
• more images here if you need others: https://github.com/vdvmichel/sigen-app-images

and place those in the directory /config/www/Sigenergy/ on your HA instance.

The data being read is all local via Modbus. Install the Sigenergy-Home-Assistant-Integration integration.

Now install the following via HACS:

• button-card
• card-mod
• Mushroom Lovelace

You might also see some MyEnergy (EDDI) and Tesla references in the yaml. If you have either of those, install their corresponding HACS components:

• My-Energy
• Tesla

Once all that is set up, create a new card in HA, and edit the yaml and paste in the above. Delete parts you don't need.

Still todo:

• Add lines indicating energy flow.
• Add data from Sigen AC EV Charger (from modbus)

Discussion Thread

Updated version using HACS integration: https://gist.github.com/fbradyirl/6c35fe202579a780d963263ac960644c

This is amazing! I'm excitedly watching for how to integrate the AC EV charger :)

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

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

Solved the image problem for me - it was the capitalisation of the folder.
Changing it to sigenergy instead of Sigenergy in the code, and also the folder name instantly solved it

The image problem for me was resolved in quite a different way, but I studied other plugins to get it to work.

After uploading the images to /var/www/community/sigenergy (Linux/UNIX is case-sensitive - as any sane OS should be) rather than the image path being local/community/sigenergy/... or any variation, the solution for my images was the following path:

hacsfiles/sigenergy/ac_charger_bg.png

no idea why mine is different, but, that's what worked.

Hello, I made the following lines and wonder if anyone would be willing to continue my work to make pulse work?

type: custom:button-card show_state: true tap_action: none group_expand: false hold_action: action: none double_tap_action: action: none layout: vertical size: 40% card_size: 3 color_type: icon show_name: true show_icon: true show_units: true show_label: false show_entity_picture: false show_live_stream: false card_mod: style: .: | @keyframes pulse { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } @keyframes pulse-reverse { 0% { background-position: 100% 0%; } 100% { background-position: 0% 0%; } } ha-card: | background-color: transparent; border: 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; } solar_roof_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 65px; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--warning-color) 0%, var(--warning-color) 50%, transparent 50%, transparent 100%); background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(-56deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } roof_house_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 30px; height: 3px; border-radius: 2px; background: linear-gradient(to bottom, var(--warning-color) 0%, var(--warning-color) 50%, transparent 50%, transparent 100%); background-size: 100% 200%; transition: opacity 0.5s ease-in-out; transform: rotate(95deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } roof_battery_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 90px; height: 3px; border-radius: 2px; background: linear-gradient(to right, red 0%, red 50%, transparent 50%, transparent 100%); background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(90deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } battery_roof_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 25px; height: 3px; border-radius: 2px; background: linear-gradient(to right, lightgreen 0%, lightgreen 50%, transparent 50%, transparent 100%); background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(15deg); transform-origin: 0 0; animation: pulse-reverse 2s linear infinite; opacity: 1; } house_load_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 70px; height: 3px; border-radius: 2px; background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 50%, transparent 50%, transparent 100%); background-size: 100% 200%; transition: opacity 0.5s ease-in-out; transform: rotate(92deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } house_grid_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 25px; height: 3px; border-radius: 2px; background: linear-gradient(to right, lightgreen 0%, lightgreen 50%, transparent 50%, transparent 100%); background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(15deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } grid_house_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 35px; height: 3px; border-radius: 2px; background: linear-gradient(to right, red 0%, red 50%, transparent 50%, transparent 100%); background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(-25deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } house_charger_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 100px; height: 3px; border-radius: 2px; background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(18deg); transform-origin: 0 0; background: linear-gradient(to right, gray 0%, gray 50%, transparent 50%, transparent 100%); animation: pulse 2s linear infinite; opacity: 1; } charger_ev_vertical_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 40px; height: 3px; border-radius: 2px; background-size: 100% 200%; transition: opacity 0.5s ease-in-out; transform: rotate(90deg); transform-origin: 0 0; background: linear-gradient(to bottom, gray 0%, gray 50%, transparent 50%, transparent 100%); animation: pulse 2s linear infinite; opacity: 1; } charger_ev_horizontal_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 40px; height: 3px; border-radius: 2px; background-size: 200% 100%; transition: opacity 0.5s ease-in-out; transform: rotate(180deg); transform-origin: 0 0; background: linear-gradient(to right, gray 0%, gray 50%, transparent 50%, transparent 100%); animation: pulse 2s linear infinite; opacity: 1; } battery_discharge_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 50px; height: 5px; border-radius: 2px; background: linear-gradient(to bottom, lightgreen 0%, lightgreen 50%, transparent 50%, transparent 100%); background-size: 100% 200%; transition: opacity 0.5s ease-in-out; transform: rotate(90deg); transform-origin: 0 0; animation: pulse 2s linear infinite; opacity: 1; } battery_charge_line: card: type: custom:button-card color_type: blank-card card_mod: style: | :host { width: 50px; height: 5px; border-radius: 2px; background: linear-gradient(to bottom, red 0%, red 50%, transparent 50%, transparent 100%); background-size: 100% 200%; transition: opacity 0.5s ease-in-out; transform: rotate(90deg); transform-origin: 0 0; animation: pulse-reverse 2s linear infinite; opacity: 1; } pv_power: card: type: custom:mushroom-template-card primary: "{{states('sensor.solar_power_kw') | float(0) | 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; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .: | ha-card { background-color: transparent; border: none; } load_power: card: type: custom:mushroom-template-card primary: "{{states('sensor.home_power_kw') | float(0) | 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; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .: | ha-card { background-color: transparent; border: none; } charger_power: card: type: custom:mushroom-template-card primary: >- {{states('sensor.YOUR_EV_CHARGER_POWER_SENSOR') | float(0) | round(1) }} kW secondary: 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; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .: | ha-card { background-color: transparent; border: none; } grid_power: card: type: custom:mushroom-template-card primary: > {% set grid_power_w = states('sensor.grid_net_power_2') | float(0) %} {% set grid_power_kw = (grid_power_w / 1000) | round(2) %} {{ grid_power_kw }} kW 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; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .: | ha-card { background-color: transparent; border: none; } grid_flow_label: card: type: custom:mushroom-template-card primary: > {% set grid_power_w = states('sensor.grid_net_power_2') | float(0) %} {% if grid_power_w > 10 %} Importing {% elif grid_power_w < -10 %} 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; color: {% set grid_power_w = states('sensor.grid_net_power_2') | float(0) %} {% if grid_power_w > 10 %} red !important; {% elif grid_power_w < -10 %} lightgreen !important; {% else %} lightgray !important; {% endif %} 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.deyeinvertermaster_battery_soc') | default('unknown', true) %} {% set soc_power = states('sensor.battery_monitor_total_power') | float(0) | 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; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; 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_power = states('sensor.battery_monitor_total_power') | float(0) | 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; 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_power = states('sensor.battery_monitor_total_power') | float(0) | round(1) %} {% 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; color: red !important; position: relative; 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(0) %} {% if power > 0 %} {{ (power / 1000) | round(2) }}kW {% else %} {% endif %} secondary: > {% set power = states('sensor.myenergi_eddi_power_charging') | float(0) %} {% if power > 0 %} 🛁 {{states('sensor.myenergi_eddi_23546415_status') | default('')}} {% 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; overflow: visible !important; text-align: left; } .secondary { font-size: 12px !important; color: gray !important; position: relative; letter-spacing: -0.1px !important; overflow: visible !important; text-align: left; } .: | ha-card { background-color: transparent; border: none; } styles: card: - align-self: start - height: | [[[ if (states['input_number.sigen_home_card_height']) { return states['input_number.sigen_home_card_height'].state + 'px'; } else { console.error("Entity 'input_number.sigen_home_card_height' not found for card height, using fallback."); return '400px'; } ]]] - 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: 30px - left: 90px - width: 395px solar_roof_line: - position: absolute - top: 110px - left: 180px - width: 40px - height: 3px roof_house_line: - position: absolute - top: 30px - left: 220px - width: 40px - height: 3px roof_battery_line: - position: absolute - top: 110px - left: 183px - width: 40px - height: 3px battery_roof_line: - position: absolute - top: 225px - left: 210px - width: 40px - height: 3px house_load_line: - position: absolute - top: 165px - left: 316px - width: 40px - height: 3px house_grid_line: - position: absolute - top: 238px - left: 258px - width: 50px - height: 3px grid_house_line: - position: absolute - top: 246px - left: 280px - width: 40px - height: 3px house_charger_line: - position: absolute - top: 200px - left: 125px - width: 50px - height: 3px charger_ev_vertical_line: - position: absolute - top: 0px - left: 50px - width: 40px - height: 3px charger_ev_horizontal_line: - position: absolute - top: 205px - left: 110px - width: 40px - height: 3px pv_power: - position: absolute - top: 15px - left: 210px - width: 100px load_power: - position: absolute - top: 15px - left: 300px - width: 100px charger_power: - position: absolute - top: 300px - left: 20px - 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: 350px - left: 300px - width: 100px battery_soc: - position: absolute - top: 300px - left: 175px - width: 100px battery_discharge_label: - position: absolute - top: 350px - left: 175px - width: 100px battery_charge_label: - position: absolute - top: 350px - left: 175px - width: 100px - height: 110px