Skip to content

Instantly share code, notes, and snippets.

@fbradyirl
Created April 2, 2025 11:07
Show Gist options
  • Save fbradyirl/6c35fe202579a780d963263ac960644c to your computer and use it in GitHub Desktop.
Save fbradyirl/6c35fe202579a780d963263ac960644c to your computer and use it in GitHub Desktop.
Recreate Sigenergy UI (using modbus sensors) as Home Assistant Card (using HACS sig integration)
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 !important;
border: none;
}
sigenstor_home_image:
card:
type: picture
image: local/Sigenergy/sigenstor_home.png
card_mod:
style: |
ha-card {
background-color: transparent !important;
border: none;
}
ammeter_home_image:
card:
type: picture
image: local/Sigenergy/ammeter_home.png
card_mod:
style: |
ha-card {
background-color: transparent !important;
border: none;
}
ac_charger_bg_image:
card:
type: picture
image: local/Sigenergy/ac_charger_bg.png
card_mod:
style: |
ha-card {
background-color: transparent !important;
border: none;
}
pv_power:
card:
type: custom:mushroom-template-card
primary: "{{states('sensor.sigen_plant_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 !important;
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 !important;
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 !important;
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 !important;
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 !important;
border: none;
}
battery_discharge_label:
card:
type: custom:mushroom-template-card
primary: >
{% 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 !important;
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 !important;
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 !important;
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 !important;
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
{% 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 !important;
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 !important;
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 !important;
border: none;
}
vertical_line:
card:
type: custom:button-card
card_mod:
style: |
ha-card {
background-color: transparent !important;
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment