šŸ”¹ Browser_mod - turn your browser into a controllable device, and a media_player

Did you figure this out?

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.sequence
    data:
      sequence:
        - service: input_number.set_value
          data:
            value: 3
            entity_id: input_number.testnumber
        - service: browser_mod.navigate
          data:
            path: /lovelace-testscreen/test

I modified my code to match yours. Whatā€™s weird is it navigates but doesnā€™t close the pop-up.

Donā€™t mind the spacing itā€™s apart of a nested horizontal stack.

              - type: custom:mushroom-template-card
                primary: Media
                icon: mdi:cog
                picture: local/icons/custom_icons/sonos.png
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.sequence
                    data:
                      sequence:
                        - service: browser_mod.navigate
                          data:
                            path: /lovelace/sonos
                        - service: browser_mod.close_popup

I think this is because you have left the page where the command originated so it can no longer continue sending the service commands.

Try this:

type: custom:mushroom-template-card
primary: Media
icon: mdi:cog
picture: local/icons/custom_icons/sonos.png
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.sequence
    data:
      sequence:
        - service: browser_mod.close_popup
          data:
            browser_id: THIS
        - service: browser_mod.delay
          data:
            time: 1
        - service: browser_mod.navigate
          data:
            path: /lovelace/sonos

It only works if navigate as the first command but it wonā€™t close the pop-up no matter how itā€™s setup including with your method.

In browser mod 1 I used this to do the same thing.

- type: custom:mushroom-template-card
  primary: Media
  icon: mdi:cog
  picture: local/icons/custom_icons/sonos.png
  tap_action:
    action: fire-dom-event
    browser_mod:
    command: commands
    commands:
       - command: navigate
          navigation_path: /lovelace/sonos
        - command: close_popup

Strange - the code I posted above is working correctly.

ezgif.com-gif-maker (3)

I would guess the issue is I didnā€™t use device ID this. The reasoning is because I would be concerned that it wouldnā€™t close when the device id switches (for a mobile device) although I could make it static for mobile devices with the new panel.

Still weird that it doesnā€™t work the way it used to before.

Edit: Must be a quirk with mobile devices as this actually didnā€™t work

type: custom:mushroom-template-card
primary: Media
icon: mdi:cog
picture: local/icons/custom_icons/sonos.png
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.sequence
    data:
      sequence:
        - service: browser_mod.close_popup
          data:
            browser_id: THIS
        - service: browser_mod.delay
          data:
            time: 1
        - service: browser_mod.navigate
          data:
            path: /lovelace/sonos

Whatā€™s the best way to make pop ups on mobile match those of the default more info dialogue (full screen). I donā€™t want full screen on desktop or tablet though.

Yes I just tried and it doesnā€™t work on mobile for me either. Best to raise an issue on the Github repo and see if it can be sorted.

Raised an issue

1 Like

I see :frowning: I donā€™t know why it is not working for meā€¦ I have card_mod installedā€¦

Strangeā€¦ two things to try:

  • clear cache & restart browser
  • create a new empty view, paste in the yaml below into a ā€˜manual cardā€™ via the UI and see if it works in a single view with no other cards.

beyond that you could try a different device/pc and if itā€™s still not working then itā€™s a problem with your card_mod install.

type: custom:button-card
entity: media_player.bedroom_tv
icon: mdi:remote
color: auto
size: 20%
name: Room TV
tap_action:
  action: call-service
  service: media_player.turn_off
  service_data:
    entity_id: media_player.bedroom_tv
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --ha-dialog-border-radius: 0px;
        --popup-border-width: 20px;
        --popup-border-color: #1c1c1c;
      content:
        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Volume UP
                icon: mdi:arrow-up-bold
                show_name: false
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Channel UP
                icon: mdi:arrow-up-bold
                show_name: false
          - type: horizontal-stack
            cards:
              - type: custom:text-divider-row
                text: VOLUME
              - type: custom:text-divider-row
                text: CHANNEL
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Volume DOWN
                icon: mdi:arrow-down-bold
                show_name: false
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Channel DOWN
                icon: mdi:arrow-down-bold
                show_name: false
          - type: horizontal-stack
            cards:
              - type: custom:text-divider-row
                text: '|'
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Mute/UnMute
                icon: mdi:volume-mute
                show_name: false
              - type: custom:button-card
                entity: media_player.bedroom_tv
                name: Source
                icon: mdi:cached
                show_name: false
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(15px) !important;
              -webkit-backdrop-filter: blur(15px) !important;
            }
style: |
  ha-card{padding-top:20px !important}
  #name{font-size:12px !important;padding:10px}
  {% if states('media_player.bedroom_tv') == "off" %}
  :host {display:none !important} {% endif %}
1 Like

I think I made it working, but only adding the extra_module_url: And now it is working on Chrome, but still not on Firefox :smiley: Maybe the cache thing, I will try it. Thank you!

1 Like

I am not able to open the configuration panel of Browser_mod in my mobile app. I always get a blank screen, so i am not able to register the browser on my mobile.
Any hints?

I saw somebody describe the removal of the image if that is all that your after on the github issue 400.
I think for me and others though the touching of the screen is not a viable option for alot of use cases wherein people want to play warnings or use it as a media player. So hoping somebody has a work around or hack

is there a way to change the background color of the pop-up? it uses the same color as the cards that iĀ“m using so i donĀ“t see them

I had Fully Kiosk working with the Browser_mod and could see my tablets camera feed and also click it to get a pop up from other browsers (not on the tablet itself). Now since the update to version 2 I lost that and I cant get the right card config to get the pop up to work again. I managed to figure out the fire-dom-event settings for my other more info cards and gauges today.

Now when I click the Picture Glance Card I get a pop up header but nothing elseā€¦and the binary_sensor.browser_mod__d68c6acb_3261e7b4 was the old id on the previous 1.xx.xx integrationā€¦I assume that changes now in the ne integrations? But I done see the new ones in HA for the moment.

camera_view: auto
type: picture-glance
title: Control Panel
entities: []
aspect_ratio: 60%
camera_image: camera.browser_mod_d68c6acb_3261e7b4
image: /config/www/cam_snaps/

Do I have to make any changes to the Fully Kiosk set-up on the tablet? It was a year ago when I initially set up the tablet and HA now I cant remember what i actually did to get it all workingā€¦

This camera doesnt show up anymore in my system, does the new integration still support ā€œcamera.browserā€?

camera.browser_mod_d68c6acb_3261e7b4

Thanx for any assistance possible.

good evening, I do not know what am I doing wrong for weeks, since I updated to the latest version of the browser-mod in all platforms (tablet, smartphone, PC) I have display problems, when I open HA I only see the bar in high and the background image and empty the center, after having done numerous refreshes and updates the page I can view regularly. I followed several suggestions removed the old version, cleared the cache etc. but without results what can I solve?

Blur doesnot work on android appā€¦does it work for you?..and even in pc animation is kind of buggy (looks like 10fps motion) with blurā€¦without blur its cool

I donā€™t have any Android devices to test with but it should work as expected. Animations look good on my devices.