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

Share your Projects! Custom Integrations
2310

Hello everyone, I have installed the mobile fix of browser mod and all is well expecet for one strange behaiour i have noticed. When i am on my iphone and on my local wifi, when i click my cctv button for example, the pop up displays to the size of my cctv windows perefectly.

However when i do the same on my celluar network, outside my home zone. The pop displays, but takes up the whole screen with my cameras displaying as they should but a lot of white space below.

Wifi

IMG_7743
IMG_77431179Ɨ2556 511 KB

Cellular

IMG_7744
IMG_77441179Ɨ2556 296 KB

Browsers are registered. Any ideas?

2311

Hi,
Thanks for that integration!
I managed to make it work, but I noticed that the statuses on the popups didnā€™t refresh. I need to close the popups and open again to see the entities changes.
Am I missing some point ?

2312

I found the problem : if I put the colors in the card, in the status (on/off) part, it does not work.
If I use the theme to change the colors, it is ok.

But I still have the problem with my battery eufy cameras.
When I open the popup, the video card does not find the stream, as it is not active. I have a button to activate it, but the video card does not load the stream.
Anybody experienced that ?

2313

Did you find a fix?

2314

Hello! Iā€™m new to HA so I appreciate any insight. Im trying to create a timer that reverts to a particular dashboard no matter what dashboard you are on after a certain time. Specifically the Calendar and to do lists. Iā€™ve created the below but I cant get it to actually work automatically. Only when i press run. Any help is appreciated.

alias: Revert to home screen
description: ""
trigger:
  - platform: device
    device_id: e3d3e8b6749ef1f6c027211af646a01c
    domain: media_player
    entity_id: 92e2b4616732b8ca3353ddbdd0928a11
    type: idle
    for:
      hours: 0
      minutes: 0
      seconds: 10
condition: []
action:
  - service: browser_mod.navigate
    metadata: {}
    data:
      path: http://10.14.3.123:8123/dashboard-home
mode: single

Any help is appreciated!

2315

Hi Seth, have you looked at the traces?
Also, have look at: Why and how to avoid device_ids in automations and scripts

2316

Nick, Thanks for the help. You set me off on the right path to learn what I needed.

alias: Revert to home screen
description: ""
trigger:
  - platform: state
    entity_id:
      - binary_sensor.home
    from: "on"
    to: null
    for:
      hours: 0
      minutes: 5
      seconds: 0
condition: []
action:
  - service: browser_mod.navigate
    metadata: {}
    data:
      path: http://10.14.3.123:8123/dashboard-home
mode: single

Thank you!

2318 
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-template-card
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                  - type: custom:mushroom-entity-card
        card_mod:
          style:
            card-mod-more-info-yaml: |
                .: |
                  ha-dialog {
                    --vertical-align-dialog: center !important;
                  }      
                $: |
                  .mdc-dialog {
                    backdrop-filter: blur(4px) !important;
                    -webkit-backdrop-filter: blur(4px) !important;
                    background: rgba(0,0,0,0.1);
                  }

My card isnt moving at all and is not transparantā€¦ where did i go wrong ?

edit: probably the card-mod-more-info-yaml: but what is the right ?

2319

Nopeā€¦
No ideasā€¦

2320

did you manage to resize the popup on mobile ?

2321

I tested @media extensively last night, hope you find a resolution. I am curious if itā€™s possible via card_mod

2322

Iā€™t like I am asking something exotic :slight_smile:

I just want a popup on a mobile. I may be thinking that I am not the first looking for that hahah. strange :slight_smile:

2323

Test

     card_mod:
        style:
          ha-dialog$: |
            @media (min-width: 100px) {
              div.mdc-dialog div.mdc-dialog__container {
                --mdc-dialog-min-width: 100px;
                height: 130px;
                   }
              div.mdc-dialog div.mdc-dialog__scrim {
               background: rgba(0, 100, 100, 0.4);
                   }

1000014326
10000143261440Ɨ2808 192 KB

Worked on my phone

2324 
      card_mod:
        style: |
          ha-dialog {
            --mdc-dialog-min-width: 180px !important;
            --mdc-dialog-max-width: 180px !important;
          }

that is what I had foundā€¦

Iā€™ve got it centered and smaller, the height is still not ok

your code is not working for meā€¦

2325

The code I posted worked on my pc and phone. The pic is directly from my phone.

type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      size: fullscreen
      card_mod:
        style:
          ha-dialog$: |
            @media (min-width: 100px) {
              div.mdc-dialog div.mdc-dialog__container {
                --mdc-dialog-min-width: 100px;
                height: 130px;
                   }
            div.mdc-dialog div.mdc-dialog__scrim {
             background: rgba(0, 100, 100, 0.4);
              }            
      content:
        type: vertical-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Weet je het zeker ?
            icon: mdi:help
            card_mod:
              style: |
                ha-card {
                  pointer-events: none;
                    }
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: Ja
                tap_action:
                  action: call-service
                  service: script.verlichting_allesuit
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .container {
                        margin: -10px;
                        }  
                      .primary {
                        padding: 0px 0px 0px 40px;
                                  }
                    .: |
                      ha-card {
                          background-color: rgb({{ states("input_text.kleur_iconen")}})
                                }                       
              - type: custom:mushroom-template-card
                primary: Neen
                tap_action:
                  action: call-service
                  service: script.verlichting_allesuit
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .container {
                        margin: -10px;
                        }  
                      .primary {
                        padding: 0px 0px 0px 40px;
                                  }
                    .: |
                      ha-card {
                          background-color: rgb({{ states("input_text.kleur_iconen")}})
                                }

My PC

image
image1920Ɨ1160 66.4 KB

1 Like
2326

Screenshot_2024-06-06-09-22-10-245_io.homeassistant.companion.android
Screenshot_2024-06-06-09-22-10-245_io.homeassistant.companion.android1080Ɨ2400 147 KB

Now, thatā€™s fine !

The only thing thatā€™s bothering me is that my squares are square and not rounded like my card buttonsā€¦

2327

add --ha-dialog-border-radius: 10px;

card_mod:
        style:
          ha-dialog$: |
            @media (min-width: 100px) {
              div.mdc-dialog div.mdc-dialog__container {
                --mdc-dialog-min-width: 100px;
                --ha-dialog-border-radius: 10px;
                height: 130px;
                   }
            div.mdc-dialog div.mdc-dialog__scrim {
             background: rgba(0, 1, 100, 0.4);
              }
1 Like
2329

Iā€™m finding that changing the theme from Light to Dark and from Dark to Light does not work reliably at all. Iā€™ve followed the instruction to change the setting to NOT kill the server connection but it didnā€™t make any difference.
I think somehow when the phone hasnā€™t been active for a while, it ignores updates.
E.g. I have an automation to set the theme on all devices to Dark at night and to Light at 5:30am and in many cases the change to Light does not register.
Has anyone else noticed this? Does anyone have any solution? Thanks.

2330

Have a look at this thread: Fully Kiosk and Samsung Galaxy Tab A8 theme issue

It has some tips for switching light and dark mode in browser mod

2331

Thanks, the way I solved it is to stop using the browser mod as it cannot guarantee the device will be available at all times.
I just created a dedicated dark theme and just set to that theme to simulate picking ā€˜darkā€™. It works extremely reliably using the frontend set theme API (provided you enable 'Use Default" for each device that you want to create.