Functionality changed/deprecated?

[MadOtis]

Hello all! I've been using the button-card for a while and have done some pretty interesting things with it, and it's been a staple of my completely custom home-theater mode, thus far. It's been working flawlessly up until the latest update of the button card and I'm curious if the functionality underlying has changed and I need to adapt my dashboards to it, or if this could be a bug:

I have several buttons defined similarly to this example:

type: custom:button-card
name: Watch TV
icon: mdi:television
show_name: true
show_icon: true
tap_action:
  action: custom
  custom: |
    [[[

     hass.callService(
       "script",
       "watch_tv",
       {}
     )
     
     window.history.pushState(null,"","/tablet-main/remote-view");
     window.dispatchEvent(new CustomEvent("location-changed"));
     ]]] 

and, as mentioned, has been working perfectly for several months. The script has NOT changed and runs successfully if I launch it via the "scripts" view, nor has the view/button definition; with nothing erroneous being sent to the logs. However, since the last update of the button-card via HACS, every button using the button-card has stopped working.

Any idea how to fix this? Or, more importantly, could this be a bug in the latest push?

[dcapslock]

Yes, as per release notes, these action hacks are no longer supported, but a new javascript action is now supported.

So your config should be:

type: custom:button-card
name: Watch TV
icon: mdi:television
show_name: true
show_icon: true
tap_action:
  action: javascript
  javascript: |
    [[[

     hass.callService(
       "script",
       "watch_tv",
       {}
     )
     
     window.history.pushState(null,"","/tablet-main/remote-view");
     window.dispatchEvent(new CustomEvent("location-changed"));
     ]]] 

[MadOtis]

Thank you, and yeah... I completely missed that in the release notes. My bad.

[Mariusthvdb]

just getting into these javascript commands since now officially supported..
could you please explain what this does? and why calling a regular script action is different? seems script.watch_tv is executed

tha final 2 window lines are a mystery to me yet, so need to learn more about those too...

I suppose it next navigates to /remote-view? not sure about the last line, or is that just to signal the frontend the location was changed?

edit
yes, thats what it does ;-) ive just tested that in my config, and its really nice! feel a whole lot of new buttons coming up.

need to find one that can play a local sound blib upon clicking....a bit like haptic, but then make a sound

btw, we can now do this all in regular config lingo:

type: custom:button-card
name: Play and navigate
icon: mdi:television
show_name: true
show_icon: true
tap_action:
  action: multi-actions
  actions:
    - action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.play_sound_bite
    - action: navigate
      navigation_path: /ui-sub-views/xbox
    - action: javascript
      javascript: |
        [[[
          this._sendToastMessage(`Play and navigate away...`);
        ]]] 

[MadOtis]

That does appear to be a lot cleaner than trying to jam it all into a script, I might have to go back and revisit my buttons again!

Oh, and your comment about "not sure about that last line": That basically just fires an HA event that updates the tracking within HA to indicate a view change has occurred. But, with your AHA moment about being able to chain together multiple actions, it may no longer be needed!

Edit: Hmmm... that didn't work for me, multi-actions are a current dev release; I had to revert back to the javascript method until those new changes are rolled in.

[Mariusthvdb]

o yes, that is true , I am using the latest dev.
btw that action I posted there, I prefer writing them in the also supported syntax core Home Assistant Frontend cards use (even thought is a bit cumbersome). Just to keep things as core as possible.

    - action: perform-action
      perform_action: script.play_sound_bite # direct calling

or

    - action: perform-action
      perform_action: script.turn_on
      target:
        entity_id: script.play_sound_bite 

full tap_action with a beep

tap_action:
  sound: /local/sounds/beep.mp3
  action: multi-actions
  actions:
    - action: perform-action
      perform_action: script.play_sound_bite
    - action: navigate
      navigation_path: /ui-sub-views/xbox
    - action: javascript
      javascript: |
        [[[
          this._sendToastMessage(`Play and navigate away...`);
        ]]] 

the beep however plays later than the tap is released, or the navigate has changed views for that matter.

[MadOtis]

Yep, IMHO, it's much cleaner and easier to understand what's happening and in what sequence. Once that dev release hits GA, I'll definitely be switching to it!

Could you move your "beep" higher in the actions list? Does the multi-actions play in sequence from top to bottom?

[Mariusthvdb]

the beep played with the sound option is the first in the list before the action:

tap_action:
  sound: /local/sounds/beep.mp3

maybe you're confused because I also use script.play_sound_bite.... that is a completely other sound file, not the beep ;-)
should have thought about that.. sorry

[MadOtis]

Yes, I did miss that. I was focusing mostly on the tap_action section.

[Mariusthvdb]

thinking of this, @dcapslock @RomRider , wouldnt it be cool if button-card got a toast option built-in to do

    - action: javascript
      javascript: |
        [[[
          this._sendToastMessage(`Play and navigate away...`);
        ]]] 

toast:
  message: 'Play and navigate away...'

of course with template support (eg to catch frontend interaction...)

[RomRider]

Yes, I'll work on that:

action: toast
message: xxxx