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

Has anyone had issues with popups and Android companion app, on the latest versions of android app, hass core, supervisor os, and browser_modā€¦ Iā€™m using homekit-panel-card and things work from chrome browser on the phone and my laptopā€¦

I cleared the cache on the companion app hoping that would fix it because I did need a force refresh in mobile chrome and laptop

For others, you have to not only clear android companion cache, but also dataā€¦ so you have to set things back up, make sure to name your device the same and it should at least create sensors with the same names you had before saving you time

2 Likes

Thank you. I had to do the same.

Hi everyone
How do I find it in HACS? Cannot add https://github.com/thomasloven/hass-browser_mod as a new repository as it says its already there, yet cannot find ā€œbrowser_modā€ =(

Did you try a simple search in integrations? afair no need to add custom repository.

I did. All kinds of variations

Hello Iā€™m using this browser mod to Send some TTS messages to a dashboard.both Mediaplayer are created bit it will never play a sound .I use Mary TTS add-on and it works for other TTS bit not with this browser mod. I access my ha over HTTPS and proxy server . Any idea how to debug this ?also when I log in locally it wonā€™t work and play any sound

Trying to play sound from automation:

action:
  - service: media_player.repeat_set
    data:
      media_content_type: music
      repeat: all
      media_content_id: https://xxx.com/yyy/alarm_sound.wav
    target:
      entity_id: media_player.xxxxxxxx_yyyyyyyy

ā€¦where the entity_id is the media player in current machine & browser created by browser_mod.

When running the automation, it throws the error:

extra keys not allowed @ data['media_content_type']

What gives with the media_content_type? Should it be something else than music? Page Media player - Home Assistant says:

For example, to play music you would set media_content_type to music.

ā€¦but it does not list any other types.

The page also gives a code sample:

service: media_player.play_media
target:
  entity_id: media_player.chromecast
data:
  media_content_type: music
  media_content_id: "https://fake-home-assistant.io.stream/aac"
  extra:
    thumb: "https://brands.home-assistant.io/_/homeassistant/logo.png"
    title: HomeAssistantRadio

ā€¦and to me the media_content_type looks exactly the same.

What to do?

OK, I managed to solve this. I did not notice thtat there are 2 different services, Media Palyer: Play and Media Player: Play Mediaā€¦

Hi,
This is not exactly related, but I think this is the best place to ask.
I was trying to change some style on the button depends on how much the user scroll from the top.
It is working fine, the only problem is that the script in custom button card is not being refreshed constantly, only once in few seconds, so it is not smooth.
Is there anything can be done here, maybe with help of browser-mod?

Here is the code:

      - background: |
          [[[
            var supportPageOffset = window.pageXOffset !== undefined;
            var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
            if ( Math.round(y) > 15 ) {
              return 'var(--header-background-color)';
            } else {
              return 'none';
            }
          ]]]

Okay, I will give it a shot and hope someone can help. This is driving me mad, but I must be doing something wrong here.
Iā€™m trying to set up browser_mod on my HA. Installation through HACS went fine, and after HA reboot I can see the browser_mod integration. Now comes the strange part. Iā€™m trying to get the deviceID with browser_mod.debug, but nothing happens. It does show a popup on my pc, but not on my android device where Iā€™m trying to set things up. So now I have the deviceID for my PC, but not for my android device. When I close down the browser on my PC, and after that open it up again, browser_mod is unavailable, just like on my android device. I can see this quickly because I have added a browser-player card to the dashboard, which gives me the error in the screenshot I added.
For the PC, refreshing the page works and the mod becomes available again. For android, I wouldnā€™t know how to refresh.
But still, the mod should be available, no matter where I fire up HA, right?

There is one more thing I noticed: if I connect to HA on its local LAN address, browser_mod is always available instantly. The problems seem only to occur when Iā€™m connected to HA remotely via domain name, which I usually am.

1 Like

Excuse me to revive a 1.5 year old post but is there any way to get rid of this annoying tooltip (set to the title, which is mandatory)?
Itā€™s everywhere on the screen, even outside the popup.
Using Chromeā€™s Inspector I cannot find any hint on any :hover attribute so Iā€™m unable to kill the tooltip with card_mod.
:exploding_head: Help!

Edit: I saw the FR in the github repository.
@thomasloven: Can you ā€œjustā€ remove the title="whatever" from the <card-tools-popup>? :pray:

Hi, Iā€™ve created a popup card with a custom button-card inside, containing more button cards etc. For example Iā€™ve created a button to toggle lights, the toggle is working, only the card is not updated and not showing the changed styles/icon. The card is working as a normal lovelace card. Any ideas how to fix this? Thanks

styles:
  card:
    - border: |
        [[[    
            if (states['light.woonkamer'].state == "on")
            return "2px solid gold";
            else return "2px solid var(--accent-color)"
        ]]]

Hi,

is it possible to insert a tab navigation in a browser mod popup, like in the Screenshot? Thanks

Hello,

i installed it over HACS and made in the configuration.yaml the entry : browser_mod:

but when i click on my custom card always comes a error that he cant find the service.

here is my code perhaps someone has a hint?

- type: custom:button-card
        icon: mdi:window-open-variant
        name: Fenster
        tap_action:
          action: call-service
          service: browser_mod.popup
          service_data:
            card:
              cards:
                - type: custom:bar-card
                  entity: sensor.tempr_bedroom1
                - type: vertical-stack
                  cards:
                    - type: custom:mini-graph-card
                      entity: sensor.tempr_backyard
                    - type: custom:mini-graph-card
                      entity: sensor.tempbedroom1_humidity
              type: horizontal-stack
            deviceID:
              - this
            large: true
            style:
              background: '#141414'
            title: Temperatures

I got the popup to work and it is showing my live feed when the doorbell is pressed but the popup is very small. Any thoughts on how i can make it fullscreen or at least bigger then the small popup showing up now?

Thanks in advance

What did you try/do?

Perhaps as a starting point

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: ABC
    large: false
    style: |
      @media (min-width: 812px) {
        :host .content {
          width: 90vw;
          height: 80vh;
        }
2 Likes

@pimp1310 Try hide_header: true

Thanks! i didnt know where to begin but maybe this wil helpā€¦

Look at my code there is hide_header: true

What must I add in the configuration.yaml when I installed it over hacs?
until now i only installed it over hacs, not more.

i tried the other method with fire-dom-event because the wiki says that this is better for more than one device.
now i get no error, but no popup.

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: kitchen's light
    card:
      type: button
      entity: light.deckenlampe_2_3

i tried this basic code aswell, but no popup,

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: ABC
    large: false
    style: |
      @media (min-width: 812px) {
        :host .content {
          width: 90vw;
          height: 80vh;
        }