Lovelace : do one regular action and navigate action in same card?

MichaelJ2600 · October 1, 2019, 6:19pm

Hello all

I posted this in another thread, and have deleted it, as it drowned.

Thank you @Kuuji for the custom:button-card - awesome card, that I use a lot.

Does anyone know, if it possible to perform two tap_action’s within a card ?

I have a included top menu that consists of button-card’s. What I would like to achieve is:

tap_action:

Call a script, that sets a variable, so it knows what button is pressed and highlight that button. This works by now.(thanks to Petro)

After that : navigate to a certain lovelace view (dependent on the button pressed)

I cannot do this in the called script, as far as I know, as there isn’t a lovelace “Navigate” function in HA scripts.So I guess I would have to do a second action already during the “tap_action” action in the button-card if in any way possible.

Other ideas for solutions are also welcome. I’ll post two code snippets and a small screenshot, so you get the idea.

lovelace card:

 - type: "custom:button-card"
    icon: mdi:food-variant
    show_label: false
    size: 50%
    color: auto
    tap_action:
      action: call-service
      service: script.menu_skift
      service_data:
        valgtmenu: 'kokken'

    styles:
      card:
        - height: 100px
        - width: 100px
        - background-color: rgba(0, 0, 0, 0.5)
      icon:
        - color: >
            [[[
              if (states['variable.menu_click'].state =='kokken')
                return "#5294E2";
              return "gray";
            ]]]

script:

  menu_skift:
    alias: "menu skift"
    sequence:
      - service: variable.set_variable
        data_template:
          variable: menu_click
          value: "{{ valgtmenu }}"

Below is a screenshot with the menu bar at the top. Clicking should, further than highligt the button (works) navigate to that view.

6dc1ca6c389858b2b3e7814106adeb33fa7c0940_2_690x411

Thanks for any help

Michael

Emphyrio · October 1, 2019, 8:22pm

Interesting. Perhaps this:

I believe it might allow you to trigger a specific tab from a script.

Also there is the Fully Kiosk REST api. Might be worth taking a look.

Edit: there is a loadURL command in the REST api, check under basic functions:

https://www.ozerov.de/fully-kiosk-browser/

MichaelJ2600 · October 19, 2019, 6:51pm

Hello Emphyrio

Thanks for the tips. I couldn’t figure out to use the hass-browser_mod for this challenge, but you are right - the Load URL in Fully Kiosk browser indeed takes me some of the way.

In theory (not having found the solution with hass-browser_mod) they however will suffer from the same issue : The complete brower window will refresh and “compile”, which is not my goal. The goal is only to refresh the internal objects on the current page, so no “compiling” and delay is going on.

As by now, I can make the color of the menu item change, or as seen below, change the view by clicking the menu item, but not both actions at the same time.

Frustrating.

I have absolutely no idea, why the animated Gif comes up in such a bad resolution, but I hope you can imagine me moving the mouse between the menu items at the top, and instantly refreshing the view when clicking.

two_actions

MichaelJ2600 · December 6, 2019, 6:17pm

I’m trying to wake this up again, as I hope there might be someone out there with a solution.

Thanks and regards, Michael

TheStigh · January 25, 2020, 4:43pm

@MichaelJ2600

Use a script for both actions (at least that is what I do - single ‘tap’ performs two actions)

MichaelJ2600 · January 25, 2020, 7:14pm

Hello The Stigh

Thank you for your reply. It might solve it, but I am unsure how to toggle at Lovelace navigate action from a script ?. Can it be done ?

Michael

BrianHanifin · January 25, 2020, 7:27pm

Have you tried using browser_mod.navigate? As a test I called this from the /developer-tools/service page and it flipped me over real fast.

service: browser_mod.navigate
service_data:
  navigation_path: /lovelace/1
  deviceID:
    - this

MichaelJ2600 · January 25, 2020, 7:58pm

Hello Brian

No, but I could. Does this require ThomasLovin’s broser mod ? Or Fully Kiosk browser (or both) ?

I’m not using any of these, but I could. I’m using wallpanel browser on my browsers.

Michael

jimz011 · January 25, 2020, 8:04pm

You would need the browser-mod for it yes. Works like a charm and many different possibilities.

Edit: and btw, the current button-card is actually created by @RomRider.

daneboom · January 28, 2020, 3:30pm

Ah and you could then make the automation the tap_action for the card, stack other action service calls underneath the browser_mod.navigate one to (for example) manually update a rest entity, send an MQTT message AND then finally change the lovelace navigation path?

BrianHanifin · January 28, 2020, 4:58pm

You’ve got it figured correctly.

MichaelJ2600 · January 28, 2020, 7:50pm

Thanks @BrianHanifin . This works flawlessly !

Took me a little time to get it right, but works.

Only comment for others, when calling from a script with a variable you need to replace ‘service_data’ with ‘data_template’. Its in the documentation, If I had just taken the time to read the last part of it…

The working code, after that looks like this

lovelace_header.yaml

- type: "custom:button-card"

   icon: mdi:server-network

   show_label: false

   size: 50%

   color: auto

   tap_action:

     action: call-service

     service: script.menu_skift

     service_data:

       valgtmenu: '/lovelace/unifi'

   styles:

     card:

       - height: 100px

       - width: 100px

       - background-color: rgba(0, 0, 0, 0.5)

     icon:

       - color: >

           [[[

             if (states['variable.menu_click'].state =='/lovelace/unifi')

               return "#5294E2";

             return "gray";

           ]]]

and the called scripts.yaml

menu_skift:

    alias: "menu skift"

    sequence:

      - service: variable.set_variable

        data_template:

          variable: menu_click

          value: "{{ valgtmenu }}"

      - service: browser_mod.navigate

        data_template:

          navigation_path: "{{ valgtmenu }}"

          deviceID:

            -  kokken_browser

Thanks for everyones help here !

Michael

daneboom · January 28, 2020, 10:13pm

Is it normal when using browser mod, that if you call a service (e.g. blackout) from the Home Assistant services tool, the (eg) blackout applies to not only the device you’ve selected but your desktop screen as well? I’m finding despite specifying quite clearly the fully kiosk entity, all the commands are happening on my Mac, too! Might just be a quirk of issuing the command from the services tool?

BrianHanifin · January 28, 2020, 10:29pm

That’s what the deviceID parameter is for. browser_mod creates an ID for every device that connects to the web UI.

  deviceID:
    - this

Reference: https://github.com/thomasloven/hass-browser_mod#devices

daneboom · January 28, 2020, 10:47pm

But I DO specify the deviceID and I still get it applying to both desktop and tablet.

BrianHanifin · January 29, 2020, 2:15am

OK, I see that you did. Go into /developer-tools/state and filter the Attributes field for browser_mod (see the screenshot below). Does light.kokken_browser exist? If so, from that browser can you click it and turn the light switch to OFF. Did the website go blank? If you can’t get this to work then your deviceID may not be setup correctly.

jussbba · February 25, 2020, 10:58am

Hello,

How do you get it to update when you reload your dashboard?

Thanks!

MichaelJ2600 · February 26, 2020, 7:04pm

      - service: browser_mod.navigate

        data_template:

          navigation_path: "{{ valgtmenu }}"

          deviceID:

            -  kokken_browser

Hello Jussbba

Its basically the above part of the script that reloads the browser. “valgtmenu” is a variable that stores the desired navigation path.

Michael

daneboom · May 22, 2020, 7:39pm

Sorry, got a question about this! Just getting around to possibly implementing it…

So I’ve got my script (not automation) as follows. The MQTT request is made, but the browser_mod isn’t, and there’s an error in my logs that it doesn’t like the service_data:
Invalid config for [script]: [service_data] is an invalid option for [script]
Is there any way around this? Thanks

radio_navigate:
  alias: 'radio navigation'
  sequence:
  - service: mqtt.publish
    data_template:
      topic: "bbcrequest"
      retain: false
      payload: ''
  - service: browser_mod.navigate
    service_data:
      navigation_path: /lovelace/radio
      deviceID:
        - this

daneboom · May 29, 2020, 6:42am

Can anyone tell me what I’m doing wrong? I’m trying to send the deviceID to the script using jinja but just getting no reaction from the front end when I tap the button. I was previously hardcoding the deviceID and this was working fine (without a data_template, just using data). It’s now I’m trying to do the templating of which deviceID it’s still working. Nothing in logs, either. Thank you all!

scripts

radio_navigate:
  alias: 'radio navigation'
  sequence:
  - service: mqtt.publish
    data_template:
      topic: "bbcrequest"
      retain: false
      payload: ''
  - service: browser_mod.navigate
    data_template:
      navigation_path: /lovelace/radio
      deviceID: "{{ deviceID }}"

and

ui-lovelace

            tap_action:
              action: call-service
              service: script.radio_navigate
              service_data:
                deviceID:
                  - this