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

joaopequeno · February 21, 2024, 10:58pm

Hello all,

I’m trying to setup a button that will open a new window.
But its not working.

What i’m doing wrong?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:blinds-horizontal
    content: Persianas
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
      data:
        title: PERSIANAS
        style: |
          --popup-min-width: 800px;
          --popup-border-radius: 28px;
        target:
          entity_id:
            - cover.persiana_quarto_camila
            - cover.persiana_quarto_j_s
            - cover.persiana_quarto_matilde
            - cover.persiana_quarto_sonia
            - cover.persiana_sala_eside
            - cover.persiana_sala_lside
            - cover.persiana_cozinha
            - cover.persiana_escritorio
        content:
          type: grid
          cards:
            - type: custom:shutter-card
              title: null
              entities:
                - entity: cover.persiana_quarto_camila
                  name: Camila
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_quarto_matilde
                  name: Matilde
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_quarto_j_s
                  name: Quarto J&S
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_quarto_sonia
                  name: Quarto Sónia
                  buttons_position: left
                  title_position: bottom
            - type: custom:shutter-card
              title: null
              entities:
                - entity: cover.persiana_escritorio
                  name: Escritório
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_cozinha
                  name: Cozinha
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_sala_eside
                  name: Sala (PSide)
                  buttons_position: left
                  title_position: bottom
                - entity: cover.persiana_sala_lside
                  name: Sala (LSide)
                  buttons_position: left
                  title_position: bottom
      columns: 2

I get when clicking it, nothing open inside the window:
imagem

I also want to use an image instead of the icon.
How can i do it?

Thanks

mattius · February 22, 2024, 11:24pm

I have a browser_mod popup on a dashboard

  - type: image
    image: /local/house/BlueHex5.png
    entity: camera.drive_entrance_drive_entrance
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          dismissable: true
          autoclose: false
          title: Test
          content:
            type: entities
            entities:
              - light.sitting_room

It works on all devices except when the dashboard is casted to a Google Nest hub.

On the casted dashboard the button press does nothing

Is there anything specific you need to do for casted devices? I can see the device registered with browser mod

treinenwimke · February 26, 2024, 1:11pm

Have a look at the indentation: from ‘data’ all the way down it has to shift 2 spaces to the right, then it works (at my laptop, that is).

You can change the icon into a picture like this:

          - type: custom:mushroom-template-card
            icon: ''
            icon_color: ''
            picture: /local/icons/shutter_icons/SHUPBlu.png

Can be a picture from your local system (as in my example) but also from a website.

treinenwimke · February 26, 2024, 2:53pm

I’m having trouble getting the friendly_name attribute as the title of a browser_mod.popup service call.
The code I’m using is very simple, just a button wit a tap_action in a lovelace view:

      - type: button
        show_name: true
        show_icon: true
        entity: number.kxx_testen_commando
        tap_action:
          action: call-service
          service: browser_mod.popup
          data:
            content:
              type: entities
              entities:
                - number.kxx_testen_commando
            title: this title should display the friendly name
            dismissable: true
            timeout: 15000
          target: {}
        show_state: true

Screenshot 2024-02-26 144935
The problem lies in the title, the orange marked line, where I would like to have the friendly_name as in the yellow lines.
Tried several variations of code, found on the forum and other places, like:

title: '[[[ return entity.attributes.friendly_name ]]]'
title: "{{ state_attr(entity_id, 'friendly_name') }}"

The one that’s working in the developer tools template editor is:

It’s giving me the string with the friendly_name, as desired.

Maybe what I want isn’t possible at all, maybe it is.
Some help will be appreciated.

joaopequeno · February 26, 2024, 4:47pm

Hello,

Thanks for the hint.
Its working.

How can i increase the image size?
Its too small:
imagem

treinenwimke · February 26, 2024, 6:33pm

Have a look here. Might give you the solution and if not, it’s interesting.

treinenwimke · February 27, 2024, 10:34am

A very simple way to do this is to replace the line where it says ‘columns: 2’ with:

                columns: 2
        card_mod:
          style: |
            :host {
              --chip-background: rgb(127, 255, 127) !important;
              --mush-chip-height: 72px;
              }

The first line (–chip-background:) is changing the color into something greenish, the second line (–mush-chip-height:) is changing the height (and width) of the ‘chip’. The chip has the icon or the picture in it. I just made it twice as big.

Hope this helps.

joaopequeno · February 28, 2024, 12:52am

Thanks for the hint.

Mine does not resize with your code, always the same:
imagem

Something missing?

treinenwimke · February 28, 2024, 10:10am

Please show the exact code so we can check.

LiQuid_cOOled · February 28, 2024, 10:18am

This will do it

card_mod:
   style: |
      ha-card {
           --chip-background: rgb(127, 255, 127) !important;
           --chip-height: 40px !important;
               }

--chip-height: vs --mush-chip-height:

joaopequeno · March 1, 2024, 12:18am

Thats it.

Thanks for the hint

automateitall · March 12, 2024, 2:26pm

I’m getting the following error when trying to install. Home Assistant is up to date. Any ideas?

My HA instance is running on Proxmox if that matters. I tried both the Nabu Casa url and the local url and neither worked.

skavan · March 19, 2024, 12:27am

Banging my head against a wall on this one.

Background:
I have a Smart TV, in my porch, and have bult a remote control/media player for it (see below).
Sometimes, I switch the TV to its HDMI input which is fed from a Fire TV Cube (located in my family room) so that I can watch the same thing as my wife.

The app menu, highlights the currently selected source. When one changes the source, the relevant source button goes yellow.

It works.

The Porch Remote:

So, when I am an HDMI mode, I want a popup that lets me control the Fire TV Cube. See below.
Forget some of the ugly formatting, need to fix that. That also works and I can select sources, pause play etc… on the fire tv cube.

BUT - the popup doesn’t update itself when the source changes. The relevant entity (media_player.fire_tv_192_168_1_91) changes its attribute “app_id”. But the popup doesn’t update.

Reminder, everything works, when its not wrapped in a popup.

The popup for the fire cube:

Popup code at the bottom of this post.
Can someone kick me in the right direction?
If this is a limitation of Browser_mod, perhaps clever people can suggest a work-around?
i.e.

a 15 second timer that refreshes the popup (don;t know how to do that)
a timer that triggers on a button press and refreshes the popup (don;t know how to do that).
some other wrapper that will handle the refresh (don;t know how to do that!).
a refresh button that will refresh the popup (least favorite).

All the buttons are custom:button-cards.

Thanks so much in advance!

The popup code:

- type: custom:button-card
    icon: mdi:circle-outline
    name: Poupup Launcher
    styles:
      card:
        - height: 80px
        - width: 180px
        - margin-left: 102px
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          dismissable: true
          autoclose: false
          title: Test
          #browser_id: THIS
          content:
            type: custom:stack-in-card
            name: test
            card_mod:
              style: |
                ha-card {
                  max-width: 388px;
                }
            cards:
            - !include
              - includes/components/mini-media-player.yaml
              - mp_name: {{ popup_mp_name }}
                mp_entity: {{ popup_mp_entity}} 
            - !include
              - includes/components/services_menu.yaml
              - menu_bg: {{ dpad_menu_bg }}
                btn_bg: "white"
                btn_data: {{ btn_data }}
                shortcut_data: {{popup_shortcut_data}}
                menu_service: {{ popup_menu_service }}
                menu_entity: {{ popup_menu_entity }}
                adb: "WTF"
                source_attribute: {{popup_menu_source_attribute}}
            - !include 
              - includes/components/dpad/dpad2.yaml
              - dpad_bg: {{ dpad_bg }}
                menu_bg: {{ dpad_menu_bg }}
                entity: {{ entity }}
                menu_icon_color: {{dpad_menu_icon_color}}
                dpad_icon_color: {{dpad_icon_color}}
                btn_data: {{ popup_btn_data }}
                dpad_service: {{ popup_dpad_service }}
                dpad_entity: {{ popup_dpad_entity }}
                popup_icon: si:appletv
                source_attribute: {{popup_menu_source_attribute}}

H-E-L-P!

pcwii · March 19, 2024, 1:51am

I don’t have an answer, but I do have a theory as well as a possible idea. The theory is that the popup is “modal” in programming speak this means that all other “background” processing is paused as long as this popup is displayed. This is something I have seen many times before on other systems but I can’t be certain if that is what is happening. I would need to do some tests to see if that’s what’s happening. My idea is, could you create a dashboard page that gets loaded instead of the popup providing the functionality you need?

skavan · March 19, 2024, 2:35am

Thanks for the thoughtful reply.
I’ve considered abandoning browser_mod and using a subview.
It would work.
But visually it would be suboptimal. I’m certain it would work - but a popup would be preferred.

s.

LiQuid_cOOled · March 19, 2024, 3:06am

Off topic, but the card is looking good!

xbmcnut · March 19, 2024, 4:06am

I’m trying to take this and turn it into a kind of one script template for all of my cameras but the code below does not work. Can anyone see what I’m doing wrong?

script.test_popup.yaml

alias: 'test popup tap action'
sequence:
  - service: browser_mod.popup
    data_template:
      deviceID: "{{ deviceID }}"
      title: []
    content:
      type: picture-entity
      entity: "{{ entityID }}"
      camera_view: live
    autoclose: true
    timeout: 7000
    #left_button: Left
    #right_button: Right
    size: wide #fullscreen, normal
    dismissable: true

Button card code:

tap_action:
  action: fire-dom-event
  browser_mod:
    command: call-service
    service: script.test_popup
    service_data:
      deviceID:
        - this
      entityID:
        - camera.entry_frigate

image969 · April 2, 2024, 3:30pm

Does anyone know if overflow: visible works inside a popup card.

i have a drop down menu, and I dont want to change the height of the pop card if I dont need to

image969 · April 5, 2024, 12:40pm

Hello,

I know this post is old, but did you ever figure out a work around for this? Is there any other drop down card that have come out that will work in a POP up card?

reste_narquois · April 5, 2024, 12:53pm

No, never did find a solution, beyond making pop-ups full screen, or putting any dropdowns nearer the top.

Judging from the comment by Thomas (the browser-mod developer) in the now closed GitHub issue I linked to, overflowing dropdowns on a popup is something that just can’t be done.