Multiple entities on a Custom button card

Configuration Frontend
1

Hello, I am trying to make a simple Custom button card, but showing multiple entities:

Beze jména

It should work as follow:

  • read temperatures from a thermostat
  • a grey colored one is a target temperature
  • a black colored one is a real temperature - but if heating on changed to green
  • default background, but if the doors sensor indicates “doors open” status, changed to white

Anybody having an idea how to get two temperature figures to the Custom button card?

I was searching through many samples, but either they were not covering my need, or were too difficult for me to understand…

2

The vertical stack in card from HACS may help. It works like the normal vertical stack card, but hides the borders making the whole stack look like one card.

image

3

Thank you @Stiltjack, I played with the Vertical stack in card you suggested and this might be the solution. I just do not know how to remove the gap between the inserted values:

Beze jména 2

the current code is as following (still a lot of work to get it formatted according to state of sensors):

type: custom:vertical-stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.teplomer_bazen_1
    show_state: true
    show_icon: false
    name: Venku
    styles:
      card:
        - color: yellow
        - font-size: 15px
  - type: custom:button-card
    entity: sensor.teplomer_bazen_2
    show_state: true
    show_name: false
    show_icon: false
    name: Bazen ≈
    styles:
      card:
        - color: yellow
        - font-size: 15px
4

@dolezel.david,
I do not know if you ever found a solution (I was searching for one too). Let me share what I came up with to have multiple entity states in a single custom button card:

cards:
  - type: custom:button-card
    entity: sensor.teplomer_bazen_1
    show_state: true
    show_icon: false
    name: Venku
    show_state: true
    state_display: |
      [[[ 
      return 'teplomer_bazen_1: '+(states['sensor.teplomer_bazen_1'].state)+'°C'
      ]]]
    show_label: true
    label: |
      [[[ return 'teplomer_bazen_2: '+(states['sensor.teplomer_bazen_2'].state)+'°C']]]
    styles:
      card:
        - color: yellow
        - font-size: 15px

Note: You can also apply another state in the name field too.

    name: |
      [[[ 
      return 'teplomer_bazen_3: '+(states['sensor.teplomer_bazen_3'].state)+'°C'
      ]]]

And of course you can still have an icon if you wish. Full disclosure: I am not certain of the language in the post; however, anyone looking to have more than one entity state in a custom button card can use and modify any of the above reply.

5

@007DJ Sorry, I missed your answer - did not get any notification :frowning:

I resolved this using a similar solution:

type: custom:button-card
entity: sensor.teplota_loznice_patro
show_state: true
show_icon: false
show_label: true
name: Ložnice  ↑
label: |
  [[[
    return  states['sensor.teplota_loznice_patro_target'].state + " °C"
  ]]]
styles:
  card:
    - height: 60px
    - color: yellow
    - font-size: 15px
    - font-weight: bold
  label:
    - color: '#D0CECE'
    - font-size: 14px
  name:
    - color: yellow
    - font-size: 15px
    - font-weight: bold
  background:
    - color: red
card_mod:
  style: |
    ha-card {
      
      background-color: {% if is_state('switch.senz_okna_patro_lozn_468', 'on') %} #FF99FF {% elif is_state('sensor.status_termostat_loznice_patro', 'heating') %} green {% else %}  {% endif %} };

    }
1 Like