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

Hi friends, is it possible to close a popup after a certain action been taken?
Example, itā€™s a pop that shows lights. IF all lights are off, can it just autoclose?

The card Iā€™m working with is:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: light.lights_all
        state: 'on'
    chip:
      type: template
      icon: mdi:lightbulb
      content: >-
        {{ expand(states.light.lights_all) | selectattr( 'state', 'eq', 'on') |
        list | count }}
      entity: light.lights_all
      icon_color: |-
        {% if states('light.lights_all') == 'on' %}
        amber
        {% else %}
        disabled
        {% endif %}
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Lights On
            autoclose: true
            content:
              type: custom:auto-entities
              filter:
                include:
                  - group: light.lights_all
                    state: 'on'
                    options:
                      type: custom:mushroom-light-card
                      show_brightness_control: true
                      layout: horizontal
                      tap_action:
                        action: toggle
                      use_light_color: true
                      card_mod:
                        style: |
                          ha-card {
                            padding: 4px 12px !important;
                          }
                  - entity_id: light.lights_all
                    state: 'on'
                    options:
                      type: custom:mushroom-light-card
                      layout: horizontal
                      secondary_info: none
                      tap_action:
                        action: toggle
                      card_mod:
                        style: |
                          ha-card {
                            background: rgba(var(--rgb-state-light), 0.1);
                          }
                exclude: []
              card:
                type: custom:layout-card
                cards: []
                layout_type: masonry
              sort:
                method: friendly_name
      card_mod:
        style: |
          :host {
            --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
          }
              ha-card {
                --chip-icon-size: 22px;
                --chip-background: none;                     
                --chip-spacing: 0px;
                --chip-box-shadow: none;
                margin-top: 0px; 
                padding-right: 10px;
                padding-top: 5px;
                padding-left: 10px;
                padding-bottom: 5px; 
              }   

How in the world can I change the background color of a full screen popup?! I I have the following code in my automation but it doesnā€™t seem to have any impact. Any help is GREATLY appreciated!

service: browser_mod.popup
metadata: {}
data:
  dismissable: true
  autoclose: false
  title: Front Door Camera
  size: fullscreen
  timeout: 60000
  deviceID:
    - browser_bedroom
    - browser_sittingroom
    - browser_bedroom
  card_mod:
    style: |
      :host {
        --ha-card-background: rgba(0,0,0,1) !important;
      }
  content:
    camera_view: live
    type: picture-glance
    entities: []
    camera_image: camera.bridgecrossing_doorbell

Hi,

Is it possible to make a browser mod popup with the following card? I cant seem to find it outā€¦

type: custom:simple-weather-card
entity: weather.buienradar
secondary_info: false
primary_info: false

Super late, but can you share your code for this?

@thomasloven Is it possible to get a camera fullscreen popup in 16:9 not 4:3? I have left and right a big space on my tablet on the wall.

Hi all,

First of all, Bear with me, I am fairly new to HA, so I might miss some simple but essential concepts :frowning:
I am trying to get a streaming radio card working on my dashboard in the browser, where the audio is output through the current browser.
I am using the mini media player and browser_mod functionality,
Screenshot from 2024-02-13 09-04-17

Iā€™m trying now to get the browserID of the current browser into the card, so I can dynamically adjust the entity_id.

But I am failing inhow to dynamically assign the media player to the current browser.
I read on What is the browserID of my current device? Ā· Issue #631 Ā· thomasloven/hass-browser_mod Ā· GitHub
that the following code should do this,

- service: media_player.play_media
  data:
    entity_id: |
      [[[
        return 'media_player.' + (window.browser_mod.browserID).replaceAll('-','_');
      ]]]
    media_content_id: https://stream.qmusic.nl/qmusic/aachigh
    media_content_type: url

but it neither works in a script nor in a lovelace card for me. window.browser.browserID doesnt get a value here.

In a second attempt, on GitHub - thomasloven/hass-browser_mod: šŸ”¹ A Home Assistant integration to turn your browser into a controllable entity and media player
I read about THIS:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: script.print_clicking_browser
    data:
      browser_id: THIS

with the script:

script:
  print_clicking_browser:
    sequence:
      - service: system_log.write
        data:
          message: "Button was clicked in {{browser_id}}"

Should print `ā€œButton was clicked in 79be65e8-f06c78fā€ to the Home Assistant log.
But in my case I only see ā€œButton was clicked inā€ā€¦

Iā€™m at a loss on how to get the browser_id into a script or to a media_player. Can anyone enlighten me or put me on the right track? A working example would be appreciated.

Bert

I know itā€™s off topic, but can you share the yaml for your dashboard/ room cards please?

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

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

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.

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.

Hello,

Thanks for the hint.
Its working.

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

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

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.

image

Hope this helps.

Thanks for the hint.

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

Something missing?

Please show the exact code so we can check.

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:

1 Like

Thats it.

Thanks for the hint

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.

image

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!