Hey zusammen,
habe hier mal eine Room Card zum basteln für euch.

type: custom:button-card
name: Raum
icon: mdi:shower
custom_fields:
temp: >
[[[ return states['sensor.deinsensor'].state + '°C'
]]]
hum: |
[[[ return states['sensor.deinsensor'].state + '%' ]]]
btn1:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:lamp
tap_action:
action: toggle
entity: light.deinsensor
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(240, 176, 0, 1)' if is_state('light.deinsensor', 'on') else 'rgba(255, 255, 255, 0.3)' }};
padding: 5px!important;
border-radius: 100px!
important;
}
- type: template
icon: mdi:window-shutter
tap_action:
action: toggle
entity: cover.deinsensor
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(69, 25, 25, 1)' if is_state('cover.deinsensor', 'closed') else 'rgba(255, 255, 255, 0.3)' }};
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
icon: mdi:window-closed
tap_action:
action: toggle
entity: binary_sensor.deinsensor
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(191,239,255, 1)' if is_state('binary_sensor.deinsensor', 'on') else 'rgba(255, 255, 255, 0.3)' }};
padding: 5px!important;
border-radius: 100px!important;
}
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:music
tap_action:
action: toggle
entity: media_player.deinsensor
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255, 207, 150, 1)' if is_state('media_player.deinsensor', 'playing') else 'rgba(255, 255, 255, 0.5)' }};
padding: 5px!important;
border-radius: 100px!important;
}
- type: template
icon: mdi:human-greeting-variant
tap_action:
action: toggle
entity: binary_sensor.deinsensor
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(104, 0, 0, 1)' if is_state('binary_sensor.bewegungsmelder_bad_oben_occupancy', 'on') else 'rgba(255, 255, 255, 0.3)' }};
padding: 5px!important;
border-radius: 100px!important;
}

styles:
grid:
- grid-template-areas: "\"n btn1 btn2\" \"temp btn1 btn2\" \"hum btn1 btn2\" \"i btn1 btn2\""
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content min-content 1fr
card:
- padding: 22px 8px 22px 22px
- height: 200px
custom_fields:
temp:
- justify-self: start
- font-size: 14px
- opacity: "0.7"
- padding-top: 10px
hum:
- justify-self: start
- font-size: 14px
- opacity: "0.7"
btn1:
- justify-content: end
- align-self: start
btn2:
- justify-content: end
- align-self: start
- padding-left: 6px
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: withe
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: "#20d450"
- border-radius: 500px
icon:
- position: relative
- width: 50px
- color: black
- opacity: "0.5"

PV Card:

type: custom:button-card
name: Photovoltaik
icon: mdi:solar-panel
custom_fields:
leistung: |
[[[
return 'Leistung: ' + (states['sensor.leer'].state >= 1000
? (Math.round(states['sensor.leer'].state / 10) / 100 + ' kW')
: (states['sensor.pv_power'].state + ' W'));
]]]
erzeugung: >
[[[ return 'Erzeugung: ' + states['sensor.leer'].state + '
kWh'; ]]]
einspeisung: |
[[[
return 'Einspeisung: ' + (states['sensor.leer'].state >= 1000
? (Math.round(states['sensor.leer'].state / 10) / 100 + ' kW')
: (states['sensor.leer'].state + ' W'));
]]]
eigenverbrauch: |
[[[
return 'Eigenverbrauch: ' + (states['ssensor.leer'].state >= 1000
? (Math.round(states['sensor.leer'].state / 10) / 100 + ' kW')
: (states['sensor.leer'].state + ' W'));
]]]
soc: >
[[[ return 'Batterie: ' + states['sensor.leer'].state + '
%'; ]]]
styles:
grid:
- grid-template-areas: |
"n n"
"btn leistung"
"btn erzeugung"
"btn einspeisung"
"btn eigenverbrauch"
"btn soc"
- grid-template-columns: min-content 1fr
- grid-template-rows: repeat(6, min-content)
card:
- padding: 22px 8px 22px 22px
- height: 200px
- background: none
- border-radius: 12px
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2)
custom_fields:
leistung:
- justify-self: end
- font-size: 16px
- color: "#f1c40f"
- opacity: "0.7"
erzeugung:
- justify-self: end
- font-size: 14px
- color: "#00cec9"
- opacity: "0.7"
einspeisung:
- justify-self: end
- font-size: 14px
- color: "#0984e3"
- opacity: "0.7"
eigenverbrauch:
- justify-self: end
- font-size: 14px
- color: "#e74c3c"
- opacity: "0.7"
soc:
- justify-self: end
- font-size: 14px
- font-weight: bold
- color: "#2ecc71"
- opacity: "0.7"
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: black
icon:
- position: relative
- width: 50px
- color: black
- opacity: "0.5"
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: "#e0a709"
- border-radius: 500px

Viel Spaß damit !