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

Generating a custom popup works as expected in my desktop browser and on my phoneā€™s browser (Android). However, nothing happens when I try to trigger a popup from within the Android Companion App. We have multiple Android devices and none of them will show a custom popup with the app. Calling service: browser_mod.debug does nothing as well.
-Edit: Clearing data for the companion app resolved my issue.

2 Likes

Why do you need the prefix if you are disabling all other devices without an alias? (via the disable -allsetting)

According to the documentation, the prefix is not applied to devices with an alias. Try removing the prefix key to see if it also solves the issue with alias names.

I apologize if Iā€™m asking for help in the wrong place, but is there a way to resolve these warnings?

Thanks

This has been reported on GitHub in duplicated reports, and a couple of duplicate PRs have been submitted as well to fix it.

If youā€™re comfortable editing the javascript files in the custom components folder, itā€™s actually a very easy change to make yourself. Just search for device_state_attributes in the relevant files and replace it with extra_state_attributes. You can see which files to change and where here. (To be sure, do keep backups of the original files).

2 Likes

Hi, I use browser-mod very intensively. Most of the button cards in my dashboard use as tap-action the popup command.
It is not really an issue but very annoying, that I alway have to push F5 before a popup appears after a button click. The normal more info or the popups declared in the lovlace root reacting instantly.

Did I forgot something?
This in an example of my code:

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Wetterstation
    card:
      entities:
        - input_select.weather_mode
        - entities:
            - entity: sensor.daily_min_temperature
              name: Min
            - entity: sensor.daily_max_temperature
              name: Max
          entity: sensor.netatmo_imeerbus121_wohnzimmer_garten_temperature
          name: Temperatur
          secondary_info: last-changed
          type: custom:multiple-entity-row
        - entity: sensor.weekly_avg_temperature
          name: Wochendurchschnitt
        - entity: sensor.max_temperature_forecast
          name: Tagesmaximum Forecast
        - entities:
            - entity: sensor.outside_rain
              name: Lezte Stunde
          entity: sensor.netatmo_imeerbus121_wohnzimmer_rs_garten_rain_today
          name: Regen heute
          type: custom:multiple-entity-row
        - entity: sensor.8_hour_rain_forecast_total
          name: Regen 16 Std
          icon: mdi:weather-rainy
        - entities:
            - entity: sensor.netatmo_imeerbus121_wohnzimmer_wind_garten_gust_strength
              name: Bƶen
            - entity: sensor.netatmo_imeerbus121_wohnzimmer_wind_garten_direction
              name: Richtung
          entity: sensor.netatmo_imeerbus121_wohnzimmer_wind_garten_wind_strength
          name: Wind
          type: custom:multiple-entity-row
        - entity: sensor.outside_pressure
          name: Luftdruck
        - entity: sensor.netatmo_imeerbus121_wohnzimmer_pressure_trend
          name: Luftdruck Trend
        - entity: sensor.outside_humidity
          name: Luftfeuchtigkeit
        - label: Batterien
          type: section
        - entity: sensor.netatmo_imeerbus121_wohnzimmer_garten_battery_percent
          name: AuƟenmodul
        - entity: sensor.netatmo_imeerbus121_wohnzimmer_rs_garten_battery_percent
          name: Regensensor
        - entity: sensor.netatmo_imeerbus121_wohnzimmer_wind_garten_battery_percent
          name: Windmesser
      show_header_toggle: false
      title: ' '
      type: entities

I donā€™t have to press F5. hat do you mean exactly? Press button, then F5 and then the popup appears? Or F5, then the button and only with F5 before the button, the popup apprears?

The only thing I see, that I would define the card as cards are defined, with type.

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Wecker
    large: false
    card:
      type: entities
      show_header_toggle: false
      state_color: true
      entities:

Hi arganto.
I defined them as type: entities as well, but in the last row :wink:

Ok, what I mean is, when I open the dashboard, may I come from another one or may I opend HA in the morning, before browser_mod works, I have obviously always to clear the cache by pressing F5.
From then on everything works fine.
But when I leave the dashboard for a certain time and later come back, I have to press F5 again before the browser_mod commands are working.
Weird.

Yes. I have this every second week or so once. But not as much as you have.

And yes: Didnā€™t see this with the type. Sorry.

@thomasloven

hi,

i use the browser mod on my iphone and my fireos tablet, but now i see thats on my wifes handy a galaxy s21 with the official and latest Home Assistant app, the browser mod and popups dont work.
i tested then the debug method to get a device_ID, but there comes no popup with the device_ID.

when i use the browser on the galaxy s21 it works well, but in the official app it dont work.

have you perhaps a idea?

1 Like

Maybe you have to ask in the companion app forum. Basically both solutions work based on the browsers architecture. When it works using the browser, it should work in the app as well.

Hi guys,

I use the following automation to open a popup window as soon as one rings:

  - id: '1642017204324'
    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.popup
      data:
        large: true
        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.door
              state_image: entity.attributes.entity_picture
              show_info: false
              show_state: false
              show_name: false
              camera_view: live
              view_layout:
                grid-area: cam1

Does anyone have an example using the code how I can automatically close the popup window after xxx seconds

Hello, a great thing and everything worked so far.

But now I want to add a second smaller tablet upstairs to my application - bi door signal we navigate to the camera view on one tablet (mod_tablet_r20) and after a few seconds back to the default view of the respective tablet. And thatā€™s where my problems start , which I canā€™t solve so far with the contributions here.

My code for the first tablet (mod_tablet_r20) looks like this:

alias: View IPCamHTEG bei Klingel EG auf Tablet-R20/R22
description: View [Kameras] bei Klingelsignal Tor Nord oder TOe GT SĆ¼d auf Tablet-R20/R22
trigger:
  - platform: event
    event_type: homematic.keypress
    event_data:
      name: IO712_1.JEQ0149028
      channel: 7
      param: PRESS_SHORT
  - platform: event
    event_type: homematic.keypress
    event_data:
      name: IO712_1.JEQ0149028
      channel: 7
      param: PRESS_LONG
condition: []
action:
  - service: browser_mod.commands
    data:
      commands:
        - command: navigate
          navigation_path: yaml-dashboard-2/Kameras
          deviceID:
            - mod_tablet_r20
            - mod_tablet_r22
        - command: delay
          seconds: 30
        - command: navigate
          navigation_path: /yaml-dashboard-2/0
          deviceID:
            - mod_tablet_r20
            - mod_tablet_r22
mode: single
initial_state: true

And the one for the second tablet (mod_tablet_r30) like this:

alias: View IPCamGarten bei GartentorSued auf Tablet-R30
description: View [Kameras Garten] bei TOe GT SĆ¼d auf Tablet-R30
trigger:
  - platform: event
    event_type: homematic.keypress
    event_data:
      name: IO712_1.JEQ0149028
      channel: 7
      param: PRESS_SHORT
  - platform: event
    event_type: homematic.keypress
    event_data:
      name: IO712_1.JEQ0149028
      channel: 7
      param: PRESS_LONG
condition: []
action:
  - service: browser_mod.commands
    data:
      commands:
        - command: navigate
          navigation_path: /db-tablet-r30/kameras-eg
          deviceID:
            - mod_tablet_r30
        - command: delay
          seconds: 30
        - command: navigate
          navigation_path: /db-tablet-r30/0
          deviceID:
            - mod_tablet_r30
mode: single
initial_state: true

But when the bell signal is triggered, all views - including the one on the PC, which was not included here at all - show a camera image and then all return to the default view of the first tablet (/yaml-dashboard-2/0) instead of their respective default view (/yaml-dashboard-2/0 or the first respective /db-tablet-r30/0 for the second tablet) .
The specifications under ā€œDeviceID:ā€ are apparently ignored.

Does anyone know what I did wrong?

Greetings, Eckart

Apologizes for the repost from Config ā€“ seems like a significant issue if anyone else is experiencing it.

After updating to the newest HA version (running in Oracle Virtualbox) as well as the latest browser mod, my popups function in Safari as they always have, but fail in both Firefox and Chrome.

Weird right?

Double checked it wasnā€™t a pop-up blocker or security feature (I think). They work as they always have on Safari, but on Chrome/Firefox my double-clicks just yieldā€¦ nothing.
Some sample YAML for reference:

Lovelace yaml:

      - type: custom:button-card
        template: newlightbtn
        entity: light.hue_color
        double_tap_action: !include ../popup/table_lamp_popup.yaml
        name: Table lamp
        icon: mdi:lamp
        view_layout:
          grid-area: bt1

Popup:

action: fire-dom-event
browser_mod:
  command: popup
  title: []
  style: 
    light-entity-card$: |
        ha-card {
          background: none;
          box-shadow: none;}
    
  card:
    effects_list: false
    type: custom:light-entity-card
    hide_header: false
    header: Table lamp
    entity: light.hue_color
    color_picker: true
    brightness: true
    smooth_color_wheel: true
    full_width_sliders: true
    child_card: false

This all worked until upgrading to the newest version of HA. I did also reinstall browser_mod, so I donā€™t believe there is a version issue there.

Anyone experiencing this?

I might be way off base here, but from my experience of using !includes, Iā€™m a bit surprised the way you have it set out even worked at all.

My understanding is that the !include has to replicate the yaml structure as if it were actually written out in full in place i.e. the action object should be written on a new line indented by 2 spaces. Might be worth trying this:

      - type: custom:button-card
        template: newlightbtn
        entity: light.hue_color
        double_tap_action: 
          !include ../popup/table_lamp_popup.yaml

(Apologies if this turns out to be a dead end though - you could try to get it working without the include anyway to see if this really the problem)

Chris,

Thank you and Iā€™ll take any ideas yā€™all have! HA can be unforgiving, and it wouldnā€™t be the first time that an indentation has spoiled some HA scripting, right?

Unfortunately, doesnā€™t seem to be the case this time. I both indented as your advised, and also replaced the entire !include call with the appropriate YAML. No go in both cases.

Maybe browser mod isnā€™t properly installed? Since I only use it for popups Iā€™m not even sure how to test. (It is, of course, listed among my integrations, however).

Did you start testing with a standard card, without card_mod, only with tap_action, etc. Just plan as above with entities and one entity.

Sorry that didnā€™t help. The other thing I thought to check was that you didnā€™t have more than one browser tab with Home Assistant open in it - Iā€™ve been caught out before by madly clicking for a popup only for it to have already appeared in another tab.

As for whether itā€™s actually installed, if the files are in the custom components folder, that generally means itā€™s installed. You can double check your logs as there should be entries for it loading at startup - in fact it regularly throws some websocket errors at startup which while not affecting itā€™s functionality, means itā€™s actually being loaded.

You could also check your logs to see if any errors are being thrown on clicking the popup.

I am just starting to try out this thing, basically simply to achieve pop-ups when pressing my button cards.

The following config works within a button card:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Popup example
    card:
      type: entities
      entities:
        - switch.gosund2

But as stated in the documentation, the popup opens on all connected devices. I just want to have it on the one where I pressed the button. If I add the device ID this:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Popup example
    deviceID:
      - this
    card:
      type: entities
      entities:
        - switch.gosund2

simply nothing happens anymore, no popup at all on any device.
What have I missed? All in all so far I do not want to use any device IDs, just limiting to the current device, whatever this is.

Try the examples above. Or read esp. the rest of the documentation.

Hi Chris,
thatā€™s right. But it still doesnā€™t work the way I think it does and the way it says in the documentation.

My configuration.yaml contains:

browser_mod:
  prefix: "mod_"
  devices:
    c2fcdf07_f63f2dfa:  
      name: mod_tablet_r20
    91ee1e92-b21cd603:
      name: mod_tablet_r22
    bcf39857-427cdd5f:
      name: mod_tablet_r30

But the result is that only ā€œmod_tablet_r30ā€ is included in the entities. The other two tablets are still only accessible via their id, an alias is not created. I have checked everything several times: The IDs are entered correctly.

Is there still an error?

Greetings, Eckart