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

[judasepa]

Hi there! First day with this integration, I’ve read a lot of documentation and I think what I need is not possible, but going to ask just to be sure. I made a script to go to a different tab in my dashboard and then go back to the previous just to reload a WebRTC Card that not always starts as it should (a simple reload of the page or reopen the tab is enough to solve this). I want this script to work in any device (not only in the media_player generated by this integration) so I tried the “frontend via fire-dom-event” but as it is available for use only in cards (not in scripts) I’m not able to work this idea. The script uses the “navigation” command and works great, but only in one device if I don’t define the device id, and I don’t want to define different devices as I have multiple in home and maybe will get some more (laptops, tablets and phones).

Also I tried the command window_reload but it was worst, the cards did not show well after run it and also have to define multiple devices.

Any ideas about this?

Thanks!!

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Hello everyone. Something happened with my configuration that it is not finding in browser_mod.js file. I already put the folder in 20 different places and I can’t. I ask for your help if perhaps you realize the mistake. Thank you so much

this is my configuration

lovelace:
  mode: yaml
  resources:
    [                                     
      { url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
      { url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
      { url: /hacsfiles/button-card/button-card.js, type: module }, 
      { url: /hacsfiles/swipe-card/swipe-card.js, type: module }, 
      { url: /hacsfiles/bar-card/bar-card.js, type: module }, 
      { url: /hacsfiles/apexcharts-card/apexcharts-card.js, type: module }, 
      { url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
      { url: /hacsfiles/lovelace-card-mod/card-mod.js, type: module },
      { url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
      { url: /hacsfiles/lovelace-thermostat-dark-card/thermostat-dark-card.js, type: module }, 
      { url: /hacsfiles/lovelace-mushroom/mushroom.js, type: module },       
      { url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
      { url: /hacsfiles/vertical-stack-in-card/vertical-stack-in-card.js, type: module },
      { url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js, type: module },
      { url: /hacsfiles/lovelace-auto-entities/auto-entities.js, type: module },
      { url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js, type: module },
      { url: "/local/marked.min.js?v=4.0.12", type: module },      
      { url: "/local/calendar-card.js?v=3.109.1", type: module },
      { url: "/local/custom_icons.js?v=28082021", type: module },
      { url: "/local/vanilla-tilt.min.js?v=1.7.2",type: module },
      { url: "/local/my-cards.js", type: module },
      { url: "/browser_mod.js", type: module },      
      { url: "/local/font.css", type: css }
    ]

I didn’t install it from hacs because I couldn’t find it. I had it working but at one point it stopped.
Copy the folder from git hub and paste it in several places because it didn’t work in any of them. In the github integration it says that it only finds where it is located.

this is the last locate

\192.168.1.4\config\www\custom_components\browser_mod

[reste_narquois (Chris Warne)]

Browser mod is an integration.

The setting you’ve shared from your Lovelace resources is to ensure that you can also use it with Home Assistant Cast. Is that the specific issue you are trying to resolve?

Can you share the main configuration for browser mod from your configuration.yaml so we can see if it’s OK?

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

This is the configuration I have in configuration.yaml. It was working perfectly and stopped working. I managed to install browser_mod from hacs. The problem is that it is not loading the browser_mod.js file. When I open the debugger the file is not found (error 404) I had all the popups working on a lot of cards but they no longer work. That’s why searching I found that it is not loading the file. Thanks for answering

browser_mod:
   devices:
     b1870054-18c4f630:
       name: mini_ipad
     c6a7b5aa-e6e00a41:
       name: tab_10_pro
   disable:
     - all

I just tried it on the edge and the file loads it. I guess it’s a cache problem. But it still doesn’t work. Doesn’t open popups

aggregate information
Delete all chrome history and now if you find the file but the popups still don’t open

[reste_narquois (Chris Warne)]

Integration setup looks OK to me, so not sure what to advise.

Two things we could explore - are you seeing anything in the logs?

And second, what is your configuration for your popups?

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

This is an example that has been working. It is the project of @Mattias_Persson A different take on designing a Lovelace UI
Everything worked perfectly, but I don’t know why it stopped working.
In the eno registry I have nothing to do with the integration. In fact I reinstalled it and it started to recognize new devices

action: fire-dom-event
browser_mod:
  command: popup
  title: Pablo
  style:
    hui-vertical-stack-card:
      $: |
        button-card {
          align-self: center;
          padding: .2em 0 2em 0;
        }
        hui-history-graph-card {
          padding: 0 1em 0 1em;
        }
      $hui-entities-card$: |
        #states {
          padding-left: 2em;
          padding-bottom: .9em;
        }
      $hui-glance-card$: |
        .entities {
          padding: 12px 29px 4px 26px !important;
        }
      $hui-map-card:
        $: |
          #root {
            height: 27em;
            padding-bottom: 0 !important;
          }
          ha-icon-button {
            color: var(--primary-color);
            zoom: 112%;
            margin-top: 0.5em;
          }
          ha-card {
            border-top: 2px solid #1a1a1a;
            border-radius: 0;
            transition: none;
          }
        $ha-map$: |
          #map {
            background-color: #191919 !important;
          }
          .leaflet-control-attribution {
            display: none;
          }
          .leaflet-bar a {
            background-color: rgba(115, 123, 124, 0.2) !important;
            color: #9da0a2 !important;
            backdrop-filter: blur(0.25em);
            zoom: 120%;
          }

  card:
    type: grid
    columns: 1
    square: false
    cards:
      - type: entities
        entities:
          - entity: person.pablo_fiscella
            secondary_info: last-changed

      - type: history-graph
        entities:
          - entity: person.pablo_fiscella
        hours_to_show: 24
        refresh_interval: 0

      - type: glance
        show_state: false
        entities:

          - entity: device_tracker.celu_pablo_ping
            name: Router
            icon: mdi:wifi
            style: &style |
              state-badge {
                color: {{ '#3182b7' if is_state(config.entity, 'home') else '#3c3f3f' }};
              }

          - entity: device_tracker.galaxy_s10_de_pablo
            name: Bluetooth
            icon: mdi:bluetooth
            style: *style

          - entity: device_tracker.sm_g973f
            name: Position
            icon: custom:iphone-modern
            style: *style

      - type: custom:button-card
        name: Reproducir audio en Samsung S10
        icon: mdi:volume-high
        tap_action:
          action: call-service
          service: script.pablo_find_my_phone
        template: icon_name

      - type: map
        entities:
          - device_tracker.sm_g973f
        default_zoom: 16
        dark_mode: true

[Fenki]

Ok, I’ve seen tat others have some issues too. I’d like to help - but since my installation doesn’t work either

I don’t know why I didn’t check earlier, but that’s what I found in the console of Firefoxes developer tools:

GEThttps://192.168.1.200:8123/www/community/lovelace-card-mod/card-mod.js
[HTTP/1.1 404 Not Found 0ms]

Loading failed for the module with source “https://192.168.1.200:8123/www/community/lovelace-card-mod/card-mod.js”. environment:1:1
Failed to load ‘https://192.168.1.200:8123/www/community/lovelace-card-mod/card-mod.js’. A ServiceWorker intercepted the request and encountered an unexpected error. service_worker.js:1:19660

Can someone tell me where home assistant has the path /www/community/… from? browser_mod was always installed in custom_components via HACS.
I checked ll the yaml files I found, but there is nothing. But I suspect this to be the root cause for my issue…

Just to mention again: I didn’t change any configuration from 2022.4 to a core update 2022.5 - it just stopped working. There should be a connection I didn’t find yet.

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

From what I understood it no longer goes in the community folder but in custom_components which is where you install browser_mod
But in the documentation it says that you have to make the reference as if it were in the root and even they say that it only takes care of knowing where to look for it.

url: "/browser_mod.js", type: module

At one point chrome couldn’t find the file, but after clearing the cache it found it and loaded it. But in my case the popups do not open

[ThaNerd (Turbo Tronix)]

Is there a way to close the browser window? I have a custom-button in the popup window with a tap_action that calls a script. In that script I added:
- service: browser_mod.close_popup
but it doesn’t close the popup window.

[Fenki]

Yeah, I got the point that it gets to custom_components.
I uninstalled browser_mod and deletes every folder. Also I removed the reference in configuration.yaml and the mentioned url in the dashboard configuration. Then I did two reboots and installed it again.
The browser cache I cleared several times, tried another browser - and another laptop. Still the wrong path shows up…

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

Something just happened to me that baffles me more.
On a tablet that I have on the wall it started to respond but on the phone or computers it does not open the windows. Clearly I didn’t understand something, I changed something

I modify
stop working again
I can for service show it but only that way

[dgarciadonado (dgdonado)]

Hello @Kejszijo , I am experiencing the same issues trying to have swiper-card inside popup cards.
Dig you get to manage it?
Thank you!

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

It’s very weird. Yesterday it worked and then it stopped working. I relate it to the installation of mushroom and minimalistic. may have to do? mushroom I uninstalled it but it didn’t improve. Does anyone have an idea what could be going on? thank you

[Kejszijo (Zoltán Kovács)]

Hi,

Unforutnately no…so, I stopped using the swipe card.

[dgarciadonado (dgdonado)]

Ok, anyway, thank you for the answer!

[Pablo_Gustavo_Fiscel (Pablo Gustavo Fiscella)]

uninstall minimalistic integration and browser_mod started. to work. Something is stepping in the code that did not allow me to have both things working at the same time

[Fenki]

Thanks a lot for the input! I uninstalled the minimal UI as well - and it works for me too!
First I just disabled it: this did not help, so I thought I had some other issue.

[xADDRx (Ben)]

Hi guys

I have the following automation:

  - id: '1642017204324'
    initial_state: true
    alias: System - Dashboard - Display Doorbell Cam
    description: ''
    trigger:
      - platform: event
        event_type: xiaomi_aqara.click
        event_data:
          entity_id: binary_sensor.switch_158d0001644909
          click_type: single
      - platform: event
        event_type: xiaomi_aqara.click
        event_data:
          entity_id: binary_sensor.switch_158d0001644909
          click_type: double
      - platform: event
        event_type: xiaomi_aqara.click
        event_data:
          entity_id: binary_sensor.switch_158d0001644909
          click_type: hold
    condition: []
    action:
    - service: browser_mod.command
      data:
        command: popup
        large: true
        auto_close: true
        time: 20
        title: Türklingel
        style:
          $: ".mdc-dialog__surface {\n  background: transparent !important;\n  border-style:\
            \ none !important;\n  border: 0px !important;\n  box-shadow: none;\n}\n"
        card:
          type: vertical-stack
          cards:
          - type: custom:layout-card
            layout_type: grid
            layout:
              grid-gap: 0.4vw
              grid-template-columns: auto 80% auto
              grid-template-rows: 95%
              grid-template-areas: '".   cam1   ."

                '
              mediaquery:
                '(max-width: 800px)':
                  grid-gap: 1.5vw
                  grid-template-columns: auto
                  grid-template-rows: auto
                  grid-template-areas: '"cam1"

                    '
            cards:
            - type: picture-entity
              entity: camera.mynas_haustur
              state_image: entity.attributes.entity_picture
              show_info: false
              show_state: false
              show_name: false
              camera_view: live
              view_layout:
                grid-area: cam1

As soon as someone rings, a pop-up window opens on the tablet.

I would like the window to close automatically after 20 seconds. Currently the popup window does not close automatically.

Where am I making the mistake? Can somebody help me.

[reste_narquois (Chris Warne)]

The time setting does not do what you think.

Instead you should be issuing a series of commands in succession: popup, delay, then close_popup

Here’s the example from the docs, which hopefully you should be able to adapt for your needs:

service: browser_mod.commands
data:
  commands:
    - command: blackout
    - command: delay
      seconds: 5
    - command: no_blackout

[xADDRx (Ben)]

Hi Chris

Thanks for the reply. I had read this information in the Doc. I just don’t know where to insert them in the automation