Hi guys,
I have read up and down and I am impressed about the answers and what you have built.
I am trying to acomplish something but I am stuck now… My target is to have a panel with different cards. Each card is a “big” button-card with the main function, e.g. light. But on the same Card I want to put additional cards (button-cards) for e.g. my covers, my switches, showing information such as Temperature and Humidity and a graph for my CO2 value. So far so good.
At this point appologies for everything that comes next - I am still learning and this is quite new to me.
There are two attemps I am trying
#1 (preferred)
Using a layout-card as grid and adding each item as an individual button-card, this gives me much more felxibility using javascript to get the entity state etc. I think this is much cleaner and I can use the entities assigned to a button-card in it’s full potential.
Downside, I did not figure out how to put a background and a border to make it look like a card
#2
Using one button card and working with custom_fields. This is great because I have one main card where i can add all the styles and I am position each custom_field by top,left, … This is awesome and looks pretty neat.
Downside, when I am working with templates and then try to e.g. fire-dom and pass “entity.entity_id”, it will not give the entity ID of the custom_field, but the main one from the button-card.
I hope this was understandable what I mean.
#1
###### Left Card #####
- type: custom:layout-card
layout_type: grid
layout_options:
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(2, 1fr), auto
grid-template-areas: |
"light switch cover"
"name name name"
"graph graph graph"
cards:
## Light Card
- type: custom:button-card
entity: light.office_top
aspect_ratio: 5/3
view_layout:
grid-area: light
template:
- icon_light_new
- icon_card
## Switch
- type: custom:button-card
entity: switch.doorbird_relay_1
view_layout:
grid-area: switch
template:
- icon_switch_new
## Cover
- type: custom:button-card
entity: cover.eg_esszimmer_hof_rollladen
view_layout:
grid-area: cover
template:
- icon_cover_new
## Name and Labels
- type: custom:button-card
entity: light.office_top
view_layout:
grid-area: name
name: Left Card
label: |
[[[
var temp = states['sensor.room_sensor_co2_temperature_office'].state;
var hum = states['sensor.room_sensor_humidity_office'].state;
var icon = "<ha-icon icon='mdi:thermometer' class='yellow'></ha-icon>" + temp + "°C <ha-icon icon='mdi:water-percent' class='blue'></ha-icon>" + hum +"%";
return icon;
]]]
template:
- button_label_new
## graph
- type: custom:mini-graph-card
entities:
- sensor.room_sensor_co2_bedroom
view_layout:
grid-area: graph
show:
icon: false
name: false
state: true
font_size: 60
color_thresholds:
- value: 0
color: "#00ff00"
- value: 800
color: "#ffff00"
- value: 1200
color: "#ff8000"
- value: 1600
color: "#ff0000"
style: |
ha-card {
box-shadow: none;
}
###### Left Card ENDS HERE #####
#2
###### Right Card #####
- type: custom:button-card
entity: light.office_top
custom_fields:
## Switch
switch:
card:
entity: switch.homematic_ip_wama
icon: >
[[[
var stat = states['switch.homematic_ip_wama'].state;
return stat === 'on' ? 'mdi:power-plug' : 'mdi:power-plug-off';
]]]
## Cover
cover:
card:
entity: cover.og_bad_rollladen
type: custom:button-card
color: >
[[[
var stat = states['cover.og_bad_rollladen'].state;
if (stat === 'open'){
return 'rgba(0, 150, 150, 0.7)';
}else if( stat === 'opening' || stat === 'closing'){
return 'rgba(150, 0, 0, 0.7)';
}else{
return 'rgba(0, 0, 150, 0.7)';
}
]]]
icon: >
[[[
var stat = states['cover.og_bad_rollladen'].state;
return stat === 'closed' ? 'mdi:blinds' : 'mdi:blinds-open';
]]]
## Name and Label
button_label:
card:
entity: light.office_top
name: "Right Card"
template:
- light_tap
label: |
[[[
var temp = states['sensor.room_sensor_co2_temperature_office'].state;
var hum = states['sensor.room_sensor_humidity_office'].state;
var icon = "<ha-icon icon='mdi:thermometer' class='yellow'></ha-icon>" + temp + "°C <ha-icon icon='mdi:water-percent' class='blue'></ha-icon>" + hum +"%";
return icon;
]]]
## graph + value, as I wanted to put the value lower
graph:
card:
entities:
- sensor.room_sensor_co2_bedroom
value:
card:
entity: sensor.room_sensor_co2_bedroom
template:
- icon_light
- icon_card
- icon_switch
- icon_cover
- graph
- button_label
- glow_card
###### Right Card ENDS HERE #####
Example of the Switch Template used in #2 in “button_card_templates”:
icon_switch:
custom_fields:
switch:
card:
type: custom:button-card
tap_action:
action: fire-dom-event
browser_mod:
command: popup
card:
type: entities
entities:
- type: custom:button-card
entity: >
[[[ return entity.entity_id ]]]
## The above DOES NOT WORK, it will not give me the entity of the Switch (e.g. switch.homematic_ip_wama)
## but will give me the entity of the "main" button-card (e.g. light.office_top)
I do hope and appreciate that you read till here and would be able to point me in the right direction what I am doing wrong or if there is a better approach to this.
But I can give you a hint, on how you could approach this for yourself. 
At least I hope so. 