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

Denman2103 · November 17, 2020, 4:05pm

Hello,

I had a card for spotify with a pop up card and in the popup card i had a ‘custom:stack-in-card’ with a entity card and a conditional card.
I did not use the card for a while an now i mention only the conditional part is working but not the enity part.
Her is my code:

type: 'custom:button-card'
aspect_ratio: 2/1
entity: media_player.spotify_dennis_bos
name: Spotify
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      type: 'custom:stack-in-card'
      cards:
        - type: entities
          entities:
            - entity: input_select.spotify_playlist
            - entity: input_select.spotify_speakers
          title: Spotify Test Card
        - type: 'custom:button-card'
          aspect_ratio: 4/1
          entity: script.spotify
          icon: 'mdi:spotify'
          tap_action:
            action: call-service
            service: script.spotify
        - card:
            artwork: full-cover
            entity: media_player.spotify_dennis_bos
            hide:
              controls: false
              power: false
              progress: false
              source: true
              volume: false
            info: scroll
            style: ''
            tap_action:
              action: more-info
            type: 'custom:mini-media-player'
          conditions:
            - entity: media_player.spotify_dennis_bos
              state_not: idle
          type: conditional
    deviceID:
      - this
      - dashboard
    title: Spotify

when i put he stack-in-card part in a normal stack-in-card (no pop-up) everything works fine.
Her is the code of the normal card which i want in a pop-up card:

type: 'custom:stack-in-card'
title: spotify
cards:
  - type: entities
    entities:
      - entity: input_select.spotify_playlist
      - entity: input_select.spotify_speakers
  - type: 'custom:button-card'
    aspect_ratio: 4/1
    entity: script.spotify
    icon: 'mdi:spotify'
    tap_action:
      action: call-service
      service: script.spotify
  - type: conditional
    conditions:
      - entity: media_player.spotify_dennis_bos
        state_not: idle
    card:
      type: 'custom:mini-media-player'
      artwork: full-cover
      entity: media_player.spotify_dennis_bos
      hide:
        controls: false
        power: true
        progress: false
        source: true
        volume: false
      info: scroll
      style: ''
      tap_action:
        action: more-info

What is wrong on the first code why i get a empty pop-up?

martheijnen · November 20, 2020, 7:53am

Hey all, no one knows if we can use tap_action to call specific mediabrowser “card”?

skank · November 20, 2020, 7:46pm

i got brower_mod working for a long time…
However, since yesterday it stopped working.
I didnt change much… any idea how i can troubleshoot why the mod isnt working anymore?

i see this in the log

Logger: homeassistant.setup
Source: /usr/local/lib/python3.8/asyncio/events.py:81
First occurred: 19:27:55 (1 occurrences)
Last logged: 19:27:55

Setup of browser_mod is taking over 10 seconds.

MrJelly17 · November 21, 2020, 4:08am

Little help needed, how to check why my popup not working at all?

chpego · November 21, 2020, 3:42pm

Hi @thomasloven thank’s for your work and this components !

I’m using FullyKioskBrowser, and i’ve a stupid question, why are you included in the binary_sensor entity, the battery_level, battery_charging, battery, charging, ip information ? Why not included in an other sensor entity with other information ?

I will be happy to contribute if a new entity is created.

Anthony

ASNNetworks · November 21, 2020, 4:17pm

You can, but it’s a workaround and doesn’t seem to work on iOS. I have this myself, see > Show off your picture-elements uses

The card on the left is the media browser (which is inside a vertical stack and a input select + script button below). I put the media browser url inside an iframe and played around with aspect ratio and card-mod. Also added a home-button to back to the main tab. This is all inside a picture-elements card, together with all the other cards you see.

This works on Android (Fully Kiosk) and Chrome/Edge. On iOS it keeps reloading and fails. You can also put that iframe card inside a browser.mod popup which I also did successfully.

I have recently started using Logitech Media Server instead of Chromecast and Spotify Connect, so I don’t use this setup anymore and don’t have the code anymore either. It was meant as an experiment and temporary solution till LMS. I was happy with the results though.

martheijnen · November 21, 2020, 6:43pm

This looks great. You don’t have any code left on how you managed to get the media browser url or something from here? Just the part where you embed the media browser past in would help so much

ASNNetworks · November 21, 2020, 7:26pm

It’s just iframe card, it only needs the media browser url. Just open the media browser dashboard from your sidebar en copy the url you see from your browser and use that in iframe card ;). That is your-HA-instance/media-browser

martheijnen · November 21, 2020, 7:31pm

But not with the spotify media items right?

ASNNetworks · November 21, 2020, 7:39pm

Yes, you need to select media player and then select spotify media player. So you need Spotify integration as well: https://www.home-assistant.io/integrations/spotify/

The screenshot you is Spotify media.

martheijnen · November 21, 2020, 7:40pm

And the media browser card will update if media player Spotify is selected?

ASNNetworks · November 21, 2020, 7:52pm

What do you mean? It’s the media browser exactly like in the sidebar, but now in Lovelace through iframe. Nothing more, nothing less :).

byxil · November 21, 2020, 11:08pm

does anyone know how to retrieve the page number on which the browser is positioned?
example: / lovelace / 1 rather than / lovelace / 2 where 1 or 2 is the page number.
I need to create a template to give the command to go to the next page, like if I in page 1:

service: browser_mod.navigate
service_data:
   navigation_path: / lovelace / 2

kajmaj · November 22, 2020, 7:28am

@byxil WallPanel app has such a feature, it provides info where the browser is positioned via mqtt.
I use it to return browser to the default page and no problem at all.

martheijnen · November 22, 2020, 7:32am

Tks,

They are trying to get it avaialble but i think it has been declined:
It would be great if we can launch the mediabrowser card from a popup more easilly. Is there any way we can “mod” this as a plugin/integration? Maybe this can be done with browser mod @thomasloven ?

pppaulie_s · November 22, 2020, 11:33pm

Firstly, this is a terrific custom component!
Well done @thomasloven!

Is there a way of using browser_mod.window_reload and specify which device it will reload?
I’ve tried the following but it still forces reloading of all computer’s browsers.

service: browser_mod.window_reload
service_data:
  deviceID: Bathroom-Tablet

I’ve created a picture_elements card and managed to find a way to add a video stream, however, when the video is displayed it is not the correct size and requires a browser window reload to correct it.

marcodb82 · November 25, 2020, 11:11am

hy,
im new in HA and in Browser_mod.
I install with HACS breowser_mod and add this line in configuration.yaml

browser_mod:
  prefix: "browser_mod_"

After that, i add this to dashborad but when i click to the entities nothing appen.
I would like to appear a pop-up when click in the entities in the dashboard.
Can you help me please?
thk

type: entities
title: test
entities:
  - entity: sensor.media_temperature_interne_climatizzatori
    icon: 'mdi:home-thermometer'
    name: Temperatura Media Climatizzatori
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: Popup example
        card:
          type: entities
          entities:
            - sensor.climatizzatore_ufficio_inside_temperature
        deviceID:
          - this
          - dashboard

photo64 · November 25, 2020, 3:32pm

I am getting thousands of these errors -> " ERROR (MainThread) [frontend.js.latest.202010214] http://192.168.1.8:8123/browser_mod.js:149:7364 Uncaught TypeError: window.queueMicrotask is not a function"

Would anyone know what is causing this?

brantje · November 26, 2020, 9:50am

Thanks for this awesome integration, i love it!
I’m using it to popup a card with vacuum info (from a button):

How can i avoid the scrollbars? In general it’s a bit too big.

Here is my config:

type: button
name: Schoonmaak
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Schoonmaak
    large: true
    deviceID:
      - this
    card:
      type: horizontal-stack
      cards:
        - type: 'custom:xiaomi-vacuum-map-card'
          entity: vacuum.xiaomi_cloud_map_extractor
          camera_refresh_interval: 2
          map_camera: camera.vacuum_map
          calibration_points:
            - vacuum:
                x: 25500
                'y': 25500
              map:
                x: 316
                'y': 448
            - vacuum:
                x: 26500
                'y': 25500
              map:
                x: 316
                'y': 408
            - vacuum:
                x: 26500
                'y': 26500
              map:
                x: 276
                'y': 408
        - type: entities
          entities:
            - entity: automation.dagelijks_stofzuigen
            - entity: input_datetime.start_cleaning_at
            - entity: input_boolean.clean_living_room
            - entity: input_boolean.clean_pc
            - entity: input_boolean.clean_bedroom
            - entity: input_boolean.clean_hall
            - entity: input_boolean.clean_kitchen
            - entity: script.vacuum_clean_zones
              icon: 'mdi:play'
              secondary_info: last-changed
              action_name: Start
icon: 'mdi:broom'

Mariusthvdb · November 26, 2020, 11:31am

previously, we had to edit the configuration.yaml and enter the correct device-id, if for some reason the device_id got changed. Required a restart to correct it.
Didn’t happen every day, but too often to neglect.

Some short time ago, Browser-mod was updated to be able to edit the device-id in the Frontend, (entityID on the browser-player card) which is a great development. click the device_id, enter the old (the one set in configuration.yaml) and we’re set again. No more restart necessary.

I was wondering if we could somehow automate the process. Or at least half way.
1- notice the device_id got changed
2- click a script button, to reset that (maybe reading the correct device_id recorded in the secrets file using an input_text in mode: password )

of course, this would have to be device dependent, and I am not sure we can template that in a regular jinja template?

we would need the availability of the browser_mod command Set deviceID in the first place. Thomas, is this available, or do you need a FR for that? Couldn’t find it in the list of services, or the documentation on the Repo.

thanks for having a look and your thoughts on the matter!