Lovelace: Button card

Removing the inner brackets i get this error:

Service [[[ this.dispatchevent(new event('hass-toggle-menu', { bubbles1: true, composed: true})) return none; called service [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles1: true, composed: true})) return none; which was not found.

I’m trying with this code, but if there’s another way to toggle the menu button with button-card, let me know.

It appears the button card does not like to execute the services when nested. I wanted to test how it was grouping the buttons and didn’t expect positive results without renaming bubbles1 back to bubbles.

I have zero experience with using a button in a button, or with the service at hand. However, could it have to do with the ‘path’ to the actionable item?

As if somehow the nested button doesnt get out of the main button to the menu item, and has no item to perform the action on, hence ending up logging none?

I suppose this would be an issue to post on the Button-card repo, as it is not yet provided for, and it would seem a nice addition to the power of button-card

For the time being, I’d suggest to use any of the other available options, and redesign your card to the options that do work… :wink:

I think I finally managed to do it. I had to use helpers and automations to achieve it.

image

HELPERS

input_boolean.button_menu
input_boolean.button_back
input_boolean.button_forward

AUTOMATION

alias: Buttons State OFF
trigger:
  - platform: state
    entity_id:
      - input_boolean.button_menu
    to: "on"
    for:
      seconds: 1
  - platform: state
    entity_id:
      - input_boolean.button_back
    to: "on"
    for:
      seconds: 1
  - platform: state
    entity_id:
      - input_boolean.button_forward
    to: "on"
    for:
      seconds: 1
action:
  - service: input_boolean.turn_off
    target:
      entity_id: input_boolean.button_menu
    data: {}
  - service: input_boolean.turn_off
    target:
      entity_id: input_boolean.button_back
    data: {}
  - service: input_boolean.turn_off
    target:
      entity_id: input_boolean.button_forward
    data: {}
mode: single

CHIP BUTTONS

type: custom:button-card
styles:
  card:
    - padding: 0px 0px 0px 0px
    - box-shadow: none
    - background: none
    - border: 0
  grid:
    - grid-template-columns: auto
    - grid-template-areas: |
        "bnt_1 bnt_2 bnt_3"
  custom_fields:
    bnt_1:
      - justify-self: center
    bnt_2:
      - justify-self: center
    bnt_3:
      - justify-self: center
custom_fields:
  bnt_1:
    card:
      type: custom:button-card
      entity: input_boolean.button_menu
      icon: mdi:menu
      show_name: false
      tap_action:
        action: toggle
      variables:
        menu: |-
          [[[
           if (states['input_boolean.button_menu'].state === 'on') {
             this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true }));
           }
          ]]]
      styles:
        icon:
          - width: 20px
          - color: white
        card:
          - border-radius: 100px
          - width: 39px
          - height: 39px
          - background: rgb(39,39,39)
          - box-shadow: none
  bnt_2:
    card:
      type: custom:button-card
      entity: input_boolean.button_back
      icon: mdi:arrow-left
      show_name: false
      tap_action:
        action: toggle
      variables:
        back: |-
          [[[
           if (states['input_boolean.button_back'].state === 'on') {
             history.back();
           }
          ]]]
      styles:
        icon:
          - width: 20px
          - color: white
        card:
          - border-radius: 100px
          - width: 39px
          - height: 39px
          - background: rgb(39,39,39)
          - box-shadow: none
  bnt_3:
    card:
      type: custom:button-card
      entity: input_boolean.button_forward
      icon: mdi:arrow-right
      show_name: false
      tap_action:
        action: toggle
      variables:
        forward: |-
          [[[
           if (states['input_boolean.button_forward'].state === 'on') {
             history.forward();
           }
          ]]]
      styles:
        icon:
          - width: 20px
          - color: white
        card:
          - border-radius: 100px
          - width: 39px
          - height: 39px
          - background: rgb(39,39,39)
          - box-shadow: none
1 Like

let me see if my former forward and back buttons did something alike:

     - type: custom:button-card
       template: button_shortcut_menu
       tooltip: Back
       icon: mdi:arrow-left
       show_name: false
       tap_action:
         action: toggle
       entity: input_boolean.back_button
       variables:
         back: |
           [[[
            if (entity.state == 'on') {history.back() ;}
           ]]]


     - type: custom:button-card
       template: button_shortcut_menu
       tooltip: Forward
       icon: mdi:arrow-right
       show_name: false
       tap_action:
         action: toggle
       entity: input_boolean.forward_button
       variables:
         next: |
           [[[
            if (entity.state == 'on') {history.forward() ;}
           ]]]

and I used these automations there:

automation:

# needed for Javascript in buttons shortcut menu
  - alias: Back button
    id: back_button
    mode: single
    trigger:
      platform: state
      entity_id: input_boolean.back_button
      to: 'on'
    action:
      service: input_boolean.turn_off
      target:
        entity_id: input_boolean.back_button

  - alias: Forward button
    id: forward_button
    mode: single
    trigger:
      platform: state
      entity_id: input_boolean.forward_button
      to: 'on'
    action:
      service: input_boolean.turn_off
      target:
        entity_id: input_boolean.forward_button

somehow that seems much simpler, but I need to check if the results is the same… :wink:

seems awfully indentical if you ask me… I do remember though it wasnt reliable, and in the end did away with them. I just had to find them in my 2022 backups .
Admit I didnt have the menu item button, and that service is new to me.

Do you have some documentation where you got that from?

I have experienced this in the past (here) when using a button is inside a button. Using another type of card inside the button card worked for me in the past, but I like your resolution. Nice workaround!

The solution of the helper buttons with automations was something you had shared in the past, and I took the menu code from here:

https://gist.github.com/vlaraort/b74d6c3113f1a031245d27329e1f22f7

1 Like

Right now I’m facing another difficulty, perhaps simpler than the previous one, but I’m having trouble solving it…

I want to have two font sizes and have them centered in the middle of the card.

imageimage

type: custom:button-card
icon: mdi:home-thermometer
entity: sensor.temperatura_media_casa
show_entity_picture: true
show_name: false
show_state: true
tap_action:
  action: more-info
styles:
  icon:
    - width: 22px
    - color: |-
        [[[
          var state = states['sensor.temperatura_media_casa'].state;
          if (state <= 18) {
            return 'rgb(100,149,237)'; //blue
          } else if (state <= 24) {
            return 'rgb(244,208,63)'; //yellow
          } else {
            return 'rgb(231,76,60)'; //red
          }
        ]]]
  img_cell:
    - background: |-
        [[[
          var state = states['sensor.temperatura_media_casa'].state;
          if (state <= 18) {
            return 'rgba(100,149,237,0.2)'; //blue_t
          } else if (state <= 24) {
            return 'rgba(244,208,63,0.2)'; //yellow_t
          } else {
            return 'rgba(231,76,60,0.2)'; //red_t
          }
        ]]]
    - border-radius: 100%
    - width: 30px
    - height: 30px
  state:
    - font-size: 14px
    - font-weight: 500
  card:
    - border-radius: 100px
    - width: 100%
    - height: 39px
    - background: rgb(39,39,39)
    - box-shadow: none
    - padding: 0px 10px 0px 5px
  grid:
    - grid-template-columns: min-content 1fr
    - grid-template-areas: |
        "i s"
    - gap: 0px 10px;

That is a tough one. They are grouped together.

image

i have tested using label and name with template but not figure out how to center the data

You can use the custom field option. Referencing the state then splitting the UoM from that state was what I was specifically referencing.

For example this is 4 separate buttons inside a main button card.

image

You can do the same with the state.

2 Likes

Hello guys:
I am starting to create my dashboard and here you are my first problem.

I would like that the icon is BLUE when ON, and ORANGE when off…

this is my code… the color is showed good only when ON:

  - type: custom:button-card
        entity: light.colector_alex_hab_valeria
        color_type: icon
        color: rgb(70, 116, 156)
        color_off: rgb(253, 192, 47)

Thank you

Hi, try this:

  - type: custom:button-card
    entity: light.colector_alex_hab_valeria
    state:
      - value: 'on'
        color: 'rgb(70, 116, 156)'
      - value: 'off'
        color: 'rgb(253, 192, 47)'

Hello. that WORKED…
thanks a lot for your fast help

1 Like

Hi, I have a custom button card with a entity picture ( the currently playing cover). It is possible to fade in the image every time that change? Now load without any transition.

Thanks in advance

Potentially stupid question here (I am NOT experienced with CSS). I’m trying to use the custom button card to change icon colours based on entity state. I have a theme installed (Caule). Only the theme colours show - is there a way to override the theme within the custom button card?

They say there’s no stupid question, only stupid answers… :star_struck:
Back to topic: i use this system for such cases:

styles:
  icon:
    - color: |
        [[[
        if (states['sensor.whatever'].state =='on')
          return "red"
        else
          return "lime"
        ]]]
1 Like

Hi, thanks for this. And that does indeed override the theme colours. I can use this to do exactly what I wanted. Kudos to you, very grateful. Although being me I want to know why, but that is for another day.

Because button-card supports JavaScript’s - they are one of most powerful functions of button card. You can do pretty much anything with it, for example:

name: | #or label, or any custom field...
   [[[
   if(states['sensor.temperature.out'].state > '25')
      return "it's hot outside"
   else if (states['sensor.temperature.out'].state > '15')
      return "it's ok outside"
   else 
      return "it's cold outside"
   ]]]

you can also define state to show another thing and not real state of sensor, but in this case it’s like this:

show_state: true
state_display: |
   [[[
   if(states['sensor.status.ups'].state =='online')
      return "UPS works on power"
   else 
      return "UPS runs on batteries"
   ]]]

etc…
check button-card’s github page, there are many examples there.
I think that 50-70% of my cards are made with this button card. I’m dead if this card stops working…

1 Like

Thanks for these example, gives me food for thought. I have solved my original issue, which is really embarrassing. I was using an input_boolean as the entity to test as I didn’t want to keep messing with the state of my aircon. Of course the boolean can only have two states, but I was trying to set it to e.g. heat, cool, etc and this of course messed up the cards actions and defaulted to the theme colours. Once I relpaced it with a dropdown helper with multiple states it all worked as expected. Here is my working code:

type: custom:button-card
entity: input_select.dummy_a_c
name: Bedroom
show_state: true
state:
  - value: heat
    color: red
    icon: mdi:fire
  - value: cool
    color: blue
    icon: mdi:snowflake
  - value: 'off'
    color: grey
    icon: mdi:fan-off