Fun with custom:button-card

:slight_smile:

Thanks for the help, but this is just another card, with it’s own templates which I currently use.

I’m trying to reduce the HA code by sharing the templates with the rest of the dashboards. To do that, I only know the yaml way. However, with the new HA improvements, maybe there are some other ways to do that in storage mode. It will be a lot easier to edit the dashboards!

Hello all,

a question to which I currently have not found an answer.
I use a custom button card with 3 custom fields.
I want to use the TAP_ACTION only on the entities of the 3 custom fields, but not on the entity of the main card.

However, when I insert the appropriate coding at the top level, the TAP_ACTION is also disabled for the custom fields.

Is there a trick here how I could achieve this?
“Main-Button-Card” no TAP_ACTION, but Custom Fields with TAP_ACTION?

I think that the only way you can achieve that is by embedding a card into another card as custom fields. Then each card has individual control over the tap action.

like so:

 custom_fields:
  top:
    card:
      type: 'custom:button-card'
      entity: null
      icon: 'mdi:arrow-up-circle-outline'
      template: cover_inside_button
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: '[[[ return entity.entity_id ]]]'
  bottom:
    card:
      type: 'custom:button-card'
      entity: null
      icon: 'mdi:arrow-down-circle-outline'
      template: cover_inside_button
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: '[[[ return entity.entity_id ]]]'
  stop:
    card:
      type: 'custom:button-card'
      entity: null
      icon: 'mdi:stop-circle-outline'
      template: cover_inside_button
      tap_action:
        action: call-service
        service: cover.stop_cover
        service_data:
          entity_id: '[[[ return entity.entity_id ]]]'

Please post you code properly as NO one can evaluate what you wrote without proper indentation. To us your code looks like this which is totally wrong:

custom_fields:
top:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:arrow-up-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
bottom:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:arrow-down-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’
stop:
card:
type: ‘custom:button-card’
entity: null
icon: ‘mdi:stop-circle-outline’
template: cover_inside_button
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: ‘[[[ return entity.entity_id ]]]’

The code was incomplete and provided as an example (not to be used as is, since there is clearly missing template code) and it was pasted with the appropriate indentations. It did reformat when posted…

@Tamsy, thanks for the formatting tip!

It is now posted as requested. Sorry for any inconvenience!

First of all sorry from my side
I had actually thought yesterday that I had still attached the example with my question. But there I have messed up

So in the following my example, where the tap_action works for both date and time.

  - type: custom:button-card
    entity: sensor.date
    styles:
      grid:
        - grid-template-areas: '"time1" "time2"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 1fr          
    custom_fields:
      time1:
        card:
          type: custom:button-card
          name: time1
          entity: sensor.time
          view_layout:
            grid-area: "time1"          
          tap_action: 
            action: more-info       
      time2:
        card:
          type: custom:button-card
          name: time2
          entity: sensor.time
          view_layout:
            grid-area: "time2"          
          tap_action: 
            action: more-info      

But if I now deactivate the TAP_ACTION for the date entity, no TAP_ACTION works for the custom fields anymore.

  - type: custom:button-card
    entity: sensor.date
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-areas: '"time1" "time2"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr 1fr          
    custom_fields:
      time1:
        card:
          type: custom:button-card
          name: time1
          entity: sensor.time
          view_layout:
            grid-area: "time1"          
          tap_action: 
            action: more-info       
      time2:
        card:
          type: custom:button-card
          name: time2
          entity: sensor.time
          view_layout:
            grid-area: "time2"          
          tap_action: 
            action: more-info          

Is there any way to reach my goal? Or is that not feasible at all?

Are you using an updated button-card?

As mentioned above by @kbrown01, maybe this is not the right forum to help you with the card problem.

Here is a link to the embedded cards tap_action issues:

(Embedded cards tap_action · Issue #410 · custom-cards/button-card · GitHub)

Try post the issue there.

If it does not work, maybe use the hold_action instead.

Hopefully this helps!

Hey, I’m trying to adjust “show_state” depending on the state of the entity. If I write true or false directly it works, but with this template, it only seems to display as true. Any help? The code works in other places, so what is wrong here?

    show_state: >
      [[[
        if(entity.state == 'active'){
          return 'true';
        } else {
          return 'false';
        }
      ]]]

Screenshot 2023-07-17 at 17.10.33
*screenshot of the card with the state showing as the timer is active. When paused/idle, the numbers should be hidden.

1 Like

Would you be able to try something like this?

show_state: |
  [[[
    if (states['domain.entity'].state == 'active') {
      return 'true';
    } else {
      return 'false';
    }
  ]]]

or maybe

show_state: |
  [[[
    if (states['domain.entity'].state == 'active') {
      return `
        true
      `
    } else {
      return `
        false
      `
    }
  ]]]

thanks for your reply but it did not work. Attaching some more screenshots below:

Screenshot 2023-07-18 at 00.24.34
*When timer is active, state is shown (the numbers)

Screenshot 2023-07-18 at 00.24.16
*when timer is paused, “5:58(paused)” should be hidden. Aka “show_state: false”. Ignore the big “Paused” for now, that’s a separate issue :slight_smile:


*This is the entity


*This is the card yaml. The same functionality is used on line 384 and there is performs as it should.

Sorry, I should have said, that you will need to change the text ‘domain.entity’ to the entity_id you are referencing:

show_state: |
  [[[
    return states['trigger.irrigation_1'].state !== 'paused';
  ]]]

Hopefully, this should return a positive (true) if the entity is not showing the state ‘paused’.

Hi, I did actually try that too but it made no difference. Would you mind trying it out yourself? All you need to do is create a timer helper. I’ve scaled the card down a bit and pasted the code here: Irrigation Card - Pastebin.com

Much appreciated!

I think I have it.

I think that the “state” value was being thrown as you can use it with operators (like code snippet below), so I don’t think it could handle the query correctly:

state:
  - value: on
    name: On
  - value: off
    name: Off

So instead I used the custom_field option and came up with this:

type: custom:button-card
entity: timer.irrigation_1
name: Irrigation
label: Greenhouse
show_name: true
show_icon: false
show_label: true
custom_fields:
  timer: |
    [[[
      if (states['timer.irrigation_1'].state !== 'paused') return states['timer.irrigation_1'].attributes.remaining ;
    ]]]
styles:
  grid:
    - grid-template-areas: |
        [[[
          if (states['timer.irrigation_1'].state !== 'paused')
            return '"n n" "l l"';
          else 
            return '"n n" "l timer"';
        ]]]
    - grid-template-rows: 1.5fr 1fr
    - grid-template-columns: 1fr 1fr
    - row-gap: 8px
  card:
    - height: 100%
    - border-radius: var(--border-radius)
    - box-shadow: var(--box-shadow)
    - padding: 1rem
    - overflow: visible
    - aspect-ratio: 3/2
  name:
    - text-align: left
    - font-size: var(--fs-600)
    - font-family: Montserrat
    - font-weight: 600
    - justify-self: start
    - align-self: end
    - color: var(--contrast-100)
    - overflow: visible
  label:
    - text-align: left
    - font-size: var(--fs-400)
    - font-family: Montserrat
    - font-weight: 500
    - justify-self: start
    - align-self: center
    - color: var(--contrast-100)
    - overflow: visible
  custom_fields:
    timer:
      - text-align: right
      - font-size: var(--fs-400)
      - font-family: Montserrat
      - font-weight: 500
      - justify-self: end
      - align-self: center
      - color: var(--contrast-100)

This appears to work how I think you want it working, but feel free to come back to me if not!

Thanks for putting your time into this. I had two problems with it though:

  1. The card content jump up/down based on what is shown.
  2. The counter does not cound down. It stays static.

I managed to solve issue 1 by adjusting some stuff. Not sure exactly HOW. To me, the code has the same states and conditions, just written differently. Oh well, at least it works :slight_smile: I will share it later.

As for issue 2, this seems to be a noted, but not fixed, flaw in HA. See this thread: 'remaining' Attribute of timer helper Entity stays static instead of counting down · Issue #12676 · home-assistant/frontend · GitHub

I will have to try to suggested fix in the thread or find another way…

Hello
Who can help me?
With the button I want to switch “entity: input_button.homemode_home_marco”.

But the color from the icon should come from the dropdown helper “input_select.marco_homemode” with the value “Home”.

I get the following error message:

ButtonCardJSTemplateError: SyntaxError: Unexpected token '==' in 'if ('input_select.anke_homemode') == 'Home' return 'red'; else return 'black';'

cards:
  - type: custom:button-card
    entity: input_button.homemode_home_marco
    icon: mdi:home
    color_type: icon
    size: 36px
    name: Home
    tap_action:
      action: toggle
    styles:
      card:
       - font-size: 16px
       - font-weight: normal
      icon:
        - color: |
           [[[
           if ('input_select.marco_homemode') == 'Home' return 'red'; 
           else return 'black';
           ]]]
          

Thanks

Right now you’re just naming the input_select, but you don’t say, what you want from that entity. In your case you’d presumably want the state of the input_select.

           [[[
             if (is_state('input_select.marco_homemode', 'Home')) {
               return 'red'; }
             else {
               return 'black'; }
           ]]]
1 Like

Thank you :slight_smile:
Yes i want the state of the input.

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: input_button.homemode_home_marco
    icon: mdi:home
    color_type: icon
    size: 36px
    name: Home
    tap_action:
      action: toggle
    styles:
      icon:
        - color: |
          [[[
             if (is_state('input_select.marco_homemode', 'Home')) {
               return 'red'; }
             else {
               return 'black'; }
           ]]]

Sorry, my javascript is not the best
I get the following message back:

missed comma between flow collection entries (15:64)

** 12 | … **
** 13 | … **
** 14 | … **
** 15 | … select.marco_homemode’, ‘Home’)) {**
-----------------------------------------^
** 16 | … **
** 17 | …**

The custom button card is amazing - so many opportunities! Can anybody assist?

I want to have the buttons highlighted below centred horizontally in the card. I’ve tried card mod but that does not seem to apply to custom button card (somethign about no ha-card or summin’)

I’ve tried various CSS attempts, played with padding etc. etc. but just cannot nail it down?

How could I achieve this? TIA

image

YAML below for that strip of icons (buttons)

type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            name: Front door
            show_name: false
            entity: binary_sensor.front_door_gate_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:bell-circle
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:bell-circle
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
          - type: custom:button-card
            name: Lounge gate
            img_cell:
              - align-self: center
              - text-align: center
            show_name: false
            entity: binary_sensor.lounge_gate_contact
            color_type: card
            color: rgb(66, 134, 244)
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:sofa
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:sofa
          - type: custom:button-card
            name: Kitchen
            show_name: false
            entity: binary_sensor.drive_gate_monitor_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:silverware-variant
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:silverware-variant
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
          - type: custom:button-card
            name: Family room
            show_name: false
            entity: binary_sensor.family_room_gate_monitor_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:table-tennis
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:table-tennis
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
          - type: custom:button-card
            name: Laundry gate
            img_cell:
              - align-self: center
              - text-align: center
            show_name: false
            entity: binary_sensor.laundry_gate_contact
            color_type: card
            color: rgb(66, 134, 244)
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:washing-machine
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:washing-machine
          - type: custom:button-card
            name: Drive
            show_name: false
            entity: binary_sensor.drive_gate_monitor_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:car-hatchback
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:car-hatchback
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
          - type: custom:button-card
            name: Garage
            show_name: false
            entity: binary_sensor.garage_door_monitor_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:garage
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:garage
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px
          - type: custom:button-card
            name: Workshop
            show_name: false
            entity: binary_sensor.workshop_door_contact
            color_type: card
            state:
              - value: 'on'
                color: rgb(191,33,47)
                icon: mdi:hammer-screwdriver
              - value: 'off'
                color: rgb(0,111,60)
                icon: mdi:hammer-screwdriver
            size: 100%
            styles:
              card:
                - width: 35px
                - height: 35px