🔹 Browser_mod - turn your browser into a controllable device, and a media_player

Is is possible to use auto-entities-card within a pop up? Could someone point me in the right direction please? thanks

It would be great if anyone could provide help on how to create a popup on this device if it’s unregistered. I haven’t succeeded (please see my code in previous posts).

Could it be impossible to open a popup via include when the path is a javascript template from button-card-template?

ui-lovelace.yaml

          entity_5:
            nav: "!include popup/wifi.yaml"

template

card_se7enair_welcome_pill_nav:
  tap_action: "[[[ return !variables.entity?.nav; ]]]"

this does not work. If I replace "[[[ return !variables.entity?.nav; ]]]" with include popup/wifi.yaml everything works.

Does the popup service has a problem with javascript templates from button-card?

I try to use a browser_id

type: button
tap_action:
  action: call-service
  service: browser_mod.popup
  data:
    title: Button {{browser_id}}
    browser_ID: THIS
    content:
      type: alarm-panel
      states:
        - arm_away
      entity: alarm_control_panel.real_alarm
  target: {}
entity: binary_sensor.stato_bnt

but the popup show in all browser :upside_down_face:

This is a great contribution! Congratulations for the enormous amount of effort and time!

I have two wall tablets (amazon) with FKB. I am using a lot the camera feed as I watch my kids when I am not home. Is there a way to be able to use also the microphone of the tablet to listen them ??

Currently I am using this but can’t hear audio.

show_state: true
show_name: true
camera_view: live
type: picture-entity
entity: camera.e573a061_4437bb43
camera_image: camera.e573a061_4437bb43

Did some research around and found this @ stackoverflow

There is a fairly compete recording demo available at http://webaudiodemos.appspot.com/AudioRecorder/index.html

Was wondering if it can implemented some how ???

1 Like

Hoping to get some help with the following which was working before the latest major update. I have tried to update this but only see the pop up with the title showing.

                - type: entity
                  icon: mdi:home-thermometer
                  entity: sensor.home_current_temp
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        title: Thermostat
                        content:
                          - type: thermostat
                            entity: climate.home
                            name: Lennox iComfort
                  hold_action:
                    action: more-info
                    show_temperature: true  

Hi all!

I have a problem with styling a popup in frontend… This is my frontend card:

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
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 %}

I just want to blur the background overlay when the popup open, I don’t know where to add the backdrop filter, what code to use, nothing. I tried everything what I seen on this thread, but no luck…

I appreciate the help. Thank you in advance

hello, I updated browser-mod to the latest version, and I encountered problems, in the various platforms via the web from the PC, from the tablet and even from the smartphone home assistant does not appear immediately, I mean you only see the upper side bar and screen empty and after several refreshes and emptying of the cache I can see the panel, someone has happened, how can I solve?

Try this:

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 %}

Not working :frowning:
Thanks for trying to help me.

This works for me. Do you have card_mod installed?

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.