Support for custom popup actions using browser mod integration

[AmoebeLabs]

Description

By supporting the 'fire-dom-event' with ll-custom type, browser_mod is supported which allows several extensions like notifications, popups, etc.

Related Issue

Motivation and Context

How Has This Been Tested?

Tested with sak_layout_fce_light_with_slider2.yaml test card:

            user_actions:
              tap_action:
                haptic: light
                actions:
                  - action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data: 
                        title: "My test popup"
                        content:
                          type: entities 
                          entities:
                            - entity: light.1st_floor_hall_light
                            - entity: light.livingroom_light_duo_right_light

Screenshots (if appropriate):

[stinobook]

Hello,

This doesn't work for me. does it work on your non-dev version ? i tried: my own popup (browser mod popup of course) on a usersvg and on a rectex. so its not a tool issue. copy/pasted your code from the (updated) docs and tried using this (with correct entities of course) and still doesn't popup.

Calling popup via service instead of fire-dom works (but on all browsers instead of the one clicking, as expected with serverwide popup service event) so the popups do work.

how im calling it right now: (also tested without the style part)

                          user_actions:
                            tap_action:
                              haptic: light
                              actions:
                                - action: call-service
                                  service: script.mapmaddie

alias: map.maddie
sequence:
  - service: browser_mod.popup
    data:
      style: |2-
         --dialog-backdrop-filter: blur(2em) brightness(0.5);
         --popup-border-color: none;
         --popup-background-color: none;
      content:
        type: map
        entities:
          - entity: person.maddie
        aspect_ratio: "16:16"
        hours_to_show: 6
        default_zoom: 13
mode: single
icon: mdi:map

[AmoebeLabs]

Yes, it does work here on all my devices, even on the mobile companion.

I assume you:

• installed browser_mod using HACS frontend
• enabled the browser_mod integration by adding it as an integration
• enabled your browser (or all browsers automatically) in the browser_mod window settings

If browser_mod is not active somehow, firing the fire-dom-event to browser_mod doesn't do anything. No console errors/warnings, simply nothing. That is what I know from testing: the event is simply not received.

On the other hand, the service call worked at that moment, ie browser_mod was installed as a known service, but was unable to receive events!

Does browser_mod display an icon in the lower right corner of the screen after ctrl-F5?

[stinobook]

yes, enabled, auto-reg enabled, yellow hand shows up on fresh load yes. fire-dom-event works on different card (my camera cards) see below

im just not able to get it to work on SAK card. i indeed get absolutely nothing.

              - entity: camera.voorplaats_snapshots
                show_name: false
                camera_view: auto
                type: picture-entity
                show_state: false
                style:
                  hui-image$: |
                    div {
                      display: flex;
                      justify-content: center;
                    }
                    #image { 
                      width: 133%
                      }
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      size: fullscreen
                      content:
                        type: custom:webrtc-camera
                        shortcuts:
                          - name: close
                            icon: mdi:close
                            service: browser_mod.close_popup
...

[AmoebeLabs]

Did you test an empty card with a circle/rectex and the browser_mod popup?

I know from testing that browser_mod is a bit finicky on which HTML/SVG Element the event is fired. If fired on the "wrong" element (whatever that is), no popup is displayed, and nothing is output to the browser console.

I tested with 5 cards and tools. Testing all variations with SAK is a bit difficult.

[stinobook]

just tested this and does not work either:

              - type: 'custom:swiss-army-knife-card'
                aspectratio: 1/1
                entities:
                  - entity: input_select.person_status_stino
                  - entity: input_text.person_status_stino
                layout:
                  styles:
                  toolsets:
                    - toolset: card
                      position:
                       cx: 50
                       cy: 50
                      tools:
                        - type: circle
                          position:
                            cx: 50
                            cy: 50
                            radius: 30
                          entity_index: 0
                          user_actions:
                            tap_action:
                              haptic: light
                              actions:
                                - action: fire-dom-event
                                  browser_mod:
                                    service: browser_mod.popup
                                    data: 
                                      title: "My test popup"
                                      content:
                                        type: entities 
                                        entities:
                                          - entity: light.bedled

[AmoebeLabs]

After a restart I got this error in the browser console: "Service parameter not specified in service call":

Did not change a single thing of course. Will check the sources of browser_mod to see what this is about...

The data part is empty. That is very weird of course if the view/card is not changed...

And some more debugging:

Cleared the browser cache, and now everything works again 😯

NTS: Clone the action/event config before firing the event. It might be a race condition where data disappears. The browser_mod code does an Object.assign() to clone the event before calling the service.

A direct service call from within SAK does the same using the spread operator. But did not clone the action config for the fire-dom-event action. So maybe that is causing erratic behavior.

Change will be a direct commit and part of v2.4.4

[stinobook]

If you can tell me how i can check my console/logs im happy to check what it says over here, or is that no longer necessary seeing your edit about 2.4.4.

[AmoebeLabs]

I will release v2.4.4 with the change in how the eventdata is passed. You could wait for that.

But checking the console output of Chrome is very easy:

• if you have Home Assistant in your browser opened
• right click mouse, and select "inspect" (in most cases the bottom menu item in the popup list)

You should see the console:

If the console is not enabled, I thought that the Esc key should enable the console.

As you see, most cards display a startup message with their version. In the same console logging, you will find crashes and more...

[stinobook]

When clicking the circle from before, nothing gets added to the log.

i did notice this. version mismatch though..:

[AmoebeLabs]

That explains why popup's are not working for you!

That might be the browser cache. You can disable that. Next to the console window you see 'network' in the tab. In that window you can enable 'disable cache'.

[stinobook]

Yep,

That did the trick!

I even always refresh with CTRL+R which used to be a hard refresh which i thought also cleared the cache.. apparantly not then..

[AmoebeLabs]

Yep,

That did the trick!

Great!

I even always refresh with CTRL+R which used to be a hard refresh which i thought also cleared the cache.. apparantly not then..

Yep, that sometimes works, and in many cases, it doesn't. So I always have that cache disabled if I'm developing. You can get fairly crazy if you think you fixed something, and it doesn't work due to the cache not being cleared.

Grrrrrr...

Have fun with the pop-ups 😄

[stinobook]

Cleared front-end cache on app and also fixed for mobile app!

[stinobook]

Have fun with the pop-ups 😄

Thanks! now i dont have server-wide popups anymore on my SAK cards :D

[AmoebeLabs]

Great!

I will put that in the release notes: Don't forget to clear the caches!