Skip to content

Instantly share code, notes, and snippets.

@fbradyirl
Last active June 25, 2025 11:36
Show Gist options
  • Save fbradyirl/08fef90bd11d7bdddf588a56e668d879 to your computer and use it in GitHub Desktop.
Save fbradyirl/08fef90bd11d7bdddf588a56e668d879 to your computer and use it in GitHub Desktop.
Recreate Sigenergy UI (using modbus sensors) as Home Assistant Card
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
@fbradyirl
Copy link
Author

fbradyirl commented Sep 9, 2024

Modbus Frontend Card

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

Screenshot 2024-09-10 at 09 35 01

Download the images from:

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:

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

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

@alexeiw123
Copy link

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

@moch8
Copy link

moch8 commented Mar 14, 2025

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

@BeauGiles
Copy link

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.

@VatzU
Copy link

VatzU commented Mar 17, 2025

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

  • height: 450px

@moch8
Copy link

moch8 commented Mar 18, 2025

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

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

  • height: 450px

@binil116
Copy link

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

@iJuiceman
Copy link

iJuiceman commented Mar 29, 2025

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

@binil116
Copy link

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.
Screenshot 2025-03-29 at 3 24 14 PM
Screenshot 2025-03-29 at 3 24 29 PM

@dusty44
Copy link

dusty44 commented Apr 1, 2025

@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

@f00lycooly
Copy link

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

@antony
Copy link

antony commented May 29, 2025

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.

@Sp3nge
Copy link

Sp3nge commented May 30, 2025

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

image

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

@Rocket-Search
Copy link

Your work looks amazing!

I just have one question:
Could you please let me know which register addresses and which Modbus slave device IDs you are using for the values?

Best regards,
T. Reineck

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment