Pass variable into condition

Configuration Frontend
1

Hi All,

first post. Been reading into the jinja/CSS templating extensively since I started HA 4 weeks ago.

I have gotten pretty good results for my dashboard, but I can’t seem to figure out how I read that state of a variable that I pass into a button card template. It works just fine (obviously) if I type the entity name directly.

Would anyone be able to lead me in the right direction on the below?

          custom_fields:
            title:
              card:
                type: custom:stack-in-card
                cards: 
                  - type: custom:mushroom-template-card
                    primary: '[[[return variables.room_card_name]]]'
                    secondary: >-
                      {{ states('{{variables.room_card_temp}}') | round(0)
                      }}°C
                    layout: horizontal
                    hold_action:
                      action: toggle
                    badge_icon: >
                      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
                      'heating') %}
                        mdi:radiator
                      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
                      'cooling') %}
                        mdi:snowflake
                      {% else %}  {% endif %}
                    badge_color: >
                      {% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
                      'heating') %}
                        red
                      {% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
                      'cooling') %}
                        #03A9F4
                      {% else %} {% endif %}
2

Would someone be able to help me out on the syntax? I have a lot of button card templates but didn’t know what I got myself into trying to use the defined variables in conditions or simply just to create a string (such as the secondary info/name).

3

something smells kinda off here. not sure what you mean with passing in variables into buttons. could you post your card overall and include how those variables are being defined or passed in?

also clarify what you’re trying to do with them? why are you taking this approach?

4

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!