Sorry for not being too clear, what I want to know is how I can utilize a variable that I defined in my view:
- type: vertical-stack
view_layout:
grid-area: main
cards:
- type: custom:button-card
template: room_card
variables:
room_card_name: Schlafzimmer
room_card_icon: mdi:bed-king-outline
room_card_temp: sensor.bedroom_echo_temperature
entity_1: light.bedroom
entity_1_icon: mdi:bed-outline
entity_2: light.desklamp
entity_2_icon: mdi:desk-lamp
entity_3: light.bathroom
entity_3_icon: mdi:shower-head
media_player: media_player.40_tcl_roku_tv
climate: climate.living_room
popup_id: '#remote_bedroom'
climate_popup: '#climate_bedroom'
in the actual button card template:
room_card:
variables:
room_card_name:
room_card_icon:
room_card_temp:
entity_1:
entity_1_icon:
entity_2:
entity_2_icon:
entity_3:
entity_3_icon:
entity_4:
entity_4_icon:
climate:
media_player:
media_player_icon:
popup_id:
triggers_update: all
show_name: false
show_state: false
show_icon: true
icon: '[[[return variables.room_card_icon]]]'
styles:
card:
- background-color: var(--ha-card-background)
- padding: 10px 10px 10px 10px
- width: 92vw
- box-shadow: none
- cursor: none
- --mdc-ripple-press-opacity: 0.5
- border-radius: 20px
- z-index: 1
grid:
- grid-template-areas: '"title title media . side" "title title media . side" ". . media . side" ". . media . side"'
- grid-template-columns: 2fr 1fr 5fr 1fr 2fr
- grid-template-rows: 1fr 1fr 1fr
img_cell:
- justify-content: start
- position: absolute
- width: 80px
- height: 80px
- left: 0
- bottom: 0
- margin: 0 0 -10px -10px
- background: rgba(var(--rgb-primary-text-color), 0.1)
- border-radius: 500px
icon:
- width: 45px
- color: var(--ha-card-background)
- opacity: '0.6'
custom_fields:
side:
- justify-self: end
title:
- align-self: start
custom_fields:
title:
card:
type: custom:button-card
styles:
card:
- background-color: black
- margin: -10px
grid:
- grid-template-areas: '"title title title" "temp icon ."'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr
custom_fields:
title:
- justify-self: start
- align-self: end
temp:
- justify-self: start
- align-self: start
icon:
- justify-self: start
- align-self: start
custom_fields:
title:
card:
type: custom:button-card
name: '[[[return variables.room_card_name]]]'
styles:
name:
- font-size: 13px
card:
- padding: 0px 0px 0px 10px
temp:
card:
type: custom:button-card
name: |
[[[
return states['variables.room_card_temp']
]]]
show_icon: false
styles:
card:
- padding: 0px 0px 0px 10px
name:
- font-size: 11px
icon:
card:
type: custom:button-card
icon: mdi:fan
styles:
card:
- padding: 0px 0px 0px 0px
- margin: -5px 0px 0px 0px
- background: none
icon:
- width: 13px
side:
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: '[[[return variables.entity_4_icon]]]'
entity: '[[[return variables.entity_4]]]'
card_mod:
style: |
ha-card {
box-shadow: {{ '0px 0px 2px 4px rgb(240, 230, 230, 0.7) !important' if is_state(config.entity, 'on') else 'none'}};
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: '[[[return variables.entity_1_icon]]]'
entity: '[[[return variables.entity_1]]]'
card_mod:
style: |
ha-card {
box-shadow: {{ '0px 0px 2px 4px rgb(240, 230, 230, 0.7) !important' if is_state(config.entity, 'on') else 'none'}};
--chip-background: rgba(var(--rgb-primary-text-color), 0.05)
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: '[[[return variables.entity_2_icon]]]'
entity: '[[[return variables.entity_2]]]'
card_mod:
style: |
ha-card {
box-shadow: {{ '0px 0px 2px 4px rgb(240, 230, 230, 0.7) !important' if is_state(config.entity, 'on') else 'none'}};
--chip-background: rgba(var(--rgb-primary-text-color), 0.05)
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: '[[[return variables.entity_3_icon]]]'
entity: '[[[return variables.entity_3]]]'
card_mod:
style: |
ha-card {
box-shadow: {{ '0px 0px 2px 4px rgb(240, 230, 230, 0.7) !important' if is_state(config.entity, 'on') else 'none'}};
--chip-background: rgba(var(--rgb-primary-text-color), 0.05)
}
media:
card:
type: custom:mushroom-media-player-card
entity: '[[[return variables.media_player]]]'
icon: '[[[return variables.media_player_icon]]]'
primary_info: none
#secondary_info: none
media_controls:
- play_pause_stop
- on_off
volume_controls:
- volume_buttons
- volume_set
#collapsible_controls: true
use_media_info: true
tap_action:
action: navigate
navigation_path: '[[[return variables.popup_id]]]'
card_mod:
style: |
ha-card {
background: transparent;
}
card_mod:
style: |
@media (min-width:180px) {
ha-card {
width: calc(100%);
background: var(--ha-card-background);
}
}
@media (min-width:800px) {
ha-card {
width: calc(60%);
left: calc(20%);
}
}
If I use [[[ return variables.entity ]]] straight up it works fine as can be seen in the template. but if I want to use one of the variables to, for example, process them within an ‘if’ condition within the template, I struggle to understand how the sytnax works or if the variable definition is just plain wrong.
In the specific example of my first post I want to basically know how I write [[[ return variables.entity ]]] in a condition to for example change a button color based on the state or attribute of said variable.entity.
I hope I was clear enough, thanks for the help!