Lovelace: Button card

browser mod call service and “deviceID” must be removed … this config is working now and will be removed.

browser mode upgrade instructions are clear

    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: 'whatever'
        deviceID: this

must be changed to-

  tap_action:
    action: fire-dom-event
    browser_mod:
      command: popup
      title: 'whatever'

Thanks both, I’ve just tested both format and they both work. This is the one recommended going forward (to have the popup only pop up locally):

*_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: 'something'
    card:
      ...

For that to work, you need:

  • browser-mod: >= 1.3.0
  • button-card: >= 3.4.2

Make sure you clear your cache and validate you are running the latest version from the browser javascript console. If it’s running fine on one device, it doesn’t mean it’s going to be running on another device if the cache hasn’t been cleared on the other device too.
image image

5 Likes

Thanks!
That seems to be working now, although I did everything you wrote last time as well, and checked the console, and of course used the same structure, but clearly missed something.
Now it is working.

Another question…
Is there a way to change the size of the “lock” icon?

No that’s not an option today. But you can open a feature request :slight_smile:

1 Like

I love the button card and I’m busy changing every lovelace tab into button card views.
I have a card to control my Logitech Z906 amplifier and need some help.
To control this dumb amplifier, I use a broalink RM mini 3.
I created automations for every input like this;

hk_amp_in_01:
  sequence:
  - service: switch.turn_on
    data:
      entity_id:
        - switch.hk_verst_in_1
      
  - service: switch.turn_off
    data:
      entity_id:
#        - switch.hk_verst_in_1
        - switch.hk_verst_in_2
        - switch.hk_verst_in_3
        - switch.hk_verst_in_4
        - switch.hk_verst_in_5
        - switch.hk_verst_in_6

.
Every input is a switch and when I select an input all others will be turned off by the automations
This is working and displays as so in my normal lovelace view:

z906

In my button card view the state is not updated.
When I click on another input, the input changes, but the buttons not:

z906_button

My code:

button_card_templates:
  jja_standaard:
    hold_action:
      action: more-info
    aspect_ratio: 1/1
    size: 80%
    label: >
      [[[ var bri = Math.round(entity.attributes.brightness / 2.55);  if
      (entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
    show_label: true
    show_name: true
    state: null
    styles:
      card:
        - border-radius: 15px
        - margin: 5px 5px 5x 5x
        - padding: 0px 0px
        - '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
        - '--mdc-ripple-color': green
        - '--mdc-ripple-press-opacity': 0.5
      name:
        - font-size: 10px
        - white-space: normal
      state:
        - font-size: 10px
        - white-space: normal
      label:
        - font-size: 10px
        - white-space: normal
  jja_gloed_geel:
    template: jja_standaard
    state:
      - styles:
          card:
            - box-shadow: '0px 0px 10px 3px #F9C536'
          icon:
            - color: '#F9C536'
          name:
            - color: '#F9C536'
            - font-size: 11px
        value: 'on'

Custom button card

type: 'custom:button-card'
template: container
color: '#04064a'
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: switch.hk_verst_in_3
          name: INGANG
          template: jja_gloed_geel
          type: 'custom:button-card'
        - entity: switch.hk_verst_in_4
          name: INGANG
          template: jja_gloed_geel
          type: 'custom:button-card'
        - entity: switch.hk_verst_in_5
          name: INGANG
          template: jja_gloed_geel
          type: 'custom:button-card'
        - entity: switch.hk_verst_in_6
          name: INGANG
          template: jja_gloed_geel
          type: 'custom:button-card'

The idea is that when I click on input 3, all other icons display ‘off’
When I click on input 4, all othe icons display ‘off’ (now button 3 stays on, but it should be ‘off’ and so on

Seems like this is not automation but scripts? Shouldn’t you call the script when you tap each button instead?
Also, this would be easier to achieve with an input select than with so many switches, but it’s another subject :slight_smile:

You’re right, I wrote it wrong.
They are scripts, not automations.
I don’t know how to achieve the same with ‘input select’
Would the buttons work the way I want if I use ‘input select’?

Then you have to add the tap_action which calls the script on each of your button-card, else it’s just a switch toggle which happens.
For the input_select, it’s an entirely other discussion unrelated to button-card.

1 Like

Thank you!
This is what I’m looking for.

        - entity: switch.hk_verst_in_5
          name: INGANG
          template: jja_gloed_geel
          tap_action:
            action: call-service
            service: script.hk_amp_in_05
          type: 'custom:button-card'

I read carefully all change logs… update custom:button-card to 3.4.2, update browser_mod to 1.3.0, update HA to 2021.2.3 and its related HA OS update…but I’m still not able to recover my buttons working correctly… Popups does not appears anywhere (Firefox, Chrome, Android App).

Please find below my code (lines commented are my old working version before update to 1.3.0) :

tap_action:
  # action: call-service
  # service: browser_mod.command
  # service_data:
  #   command: popup
  #   title: Paramètres
  #   deviceID:
  #     - this
  #     - dashboard
  #   card: !include popups/popup_parameters.yaml
  action: fire-dom-event
  browser_mod:
    command: popup
    title: 'Paramètres'
    card: !include popups/popup_parameters.yaml

Any help would be appreciated.

clear your cache and read this

Yes i did it…I cleared the cache on ALL my borwsers, Uninstall/Reinstall ALL Mobile Apps and I followed all instruction mentioned in this thread and the link you mentioned me above…
I even reinstall browser_mod / custom:button-card on my HA

Restarted completely my HA (incl. the host running HA)

But it is still not working… tap_action does not open anything with the code I pasted above.

Is it showing image
in the javascript console? any errors?

Yes it is showing what you mentioned :
image

image

And no error

Can I see the full config of your card please?

Nothing special in the card configuration…

- type: "custom:button-card"
  icon: "mdi:cog"
  template: param_button
  show_name: true
  name: Paramètres
  size: 48px
  tap_action:
    action: fire-dom-event
    browser_mod:
      command: popup
      title: "Paramètres"
      card: !include popups/popup_parameters.yaml
      
######Template YAML######## 
param_button:     
 styles:
  card:
    - text-transform: capitalize
    - --paper-card-background-color: rgba(0, 0, 0, 0.0)
    - box-shadow: "none"
    - background-color: transparent
  icon:
    - width: 32px
  name:
    - justify-self: centre
    - font-size: 14px
    - padding: 7.5% 0% 0% 0%
    - color: var(--secondary-text-color)

Seems alright. Does it work with a standard button? If it doesn’t, I’d suggest you move over to the browser_mod thread

Thanks for your reactivity and to had a look on this :wink:

My next step will be to reinstall everything from scratch… It will be the occasion to prepare a staging HA instance for futures update in order to avoid to broke my production system on each update :frowning: