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

Protoncek · January 4, 2023, 6:19pm

I installed 2.2.0 update (on Home assistant version: 2022.12.9) and after clearing cache my popups appear on top of the screen, not on the middle anymore (center of display), like they use to. Also, blur effect is not working anymore. My card:

type: custom:button-card
entity: script.onkyo_set_radio
name: Radio
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      card_mod:
        style:
          ha-dialog$: |
            div {
              backdrop-filter: blur(5px);
            }
      style: |
        --popup-border-color: lime;
        --popup-border-width: 5px;
        text-align: center;
      autoclose: true
      title: Ali vklopim internet RADIO?
      content:
        type: horizontal-stack
        cards:
          - type: custom:button-card
            styles:
              card:
                - width: 10px
          - type: custom:button-card
            name: NE!
            styles:
              card:
                - font-size: 70px
                - font-weight: bold
                - color: black
                - background: cyan
                - height: 100px
                - border-radius: 30px
          - type: custom:button-card
            styles:
              card:
                - width: 10px
          - type: custom:button-card
            name: DA!
            tap_action:
              action: call-service
              service: script.onkyo_set_radio
            show_icon: false
            styles:
              card:
                - font-size: 70px
                - font-weight: bold
                - background: red
                - height: 100px
                - border-radius: 30px
          - type: custom:button-card
            styles:
              card:
                - width: 10px
show_name: true
icon: mdi:radio
show_state: false
styles:
  card:
    - background: cyan
    - color: black
    - font-size: 30px
    - font-weight: bold
    - padding: 0px
    - height: 75px
    - box-shadow: inset 0 0 30px 10px  blue
  icon:
    - color: red

Above “blur” command under “card_mod” should blur background, it used to in 2.1.3. Not anymore in 2.2.0.
Also, i guess i’ll need another command to center this popup…? Thomas did state that popup is “better looking” in this update, but it was pretty scarse with info what is actually changed, also his github page doesn’t say anything about new features…
so, i would really need some help here, please…

Valdorama · January 5, 2023, 12:13am

Tried searching for an answer to this but can’t seem to find it. Is there a way to get the device ID (in the Lovelace UI) of the device/browser currently accessing HA? Some context:

I have a dashboard page where I’m displaying an embedded web page using the web page card. I’m using card_mod to scale it so the page contents fit nicely in the card. But the level of scale to apply depends on the size of the screen. What looks fine on desktop doesn’t look quite right on mobile.

Browser mod creates sensors for the width and height for each device. What I’m trying to do to is access that e.g.:

if sensor.{client's device ID}_browser_width == xxx then ....<set scale accordingly>

cristidobrescu · January 5, 2023, 1:19pm

I also use the “blur” but it`s working fine. This is my code:

                  card_mod:
                    style:
                      ha-dialog$: |
                        div.mdc-dialog__scrim {
                          backdrop-filter: blur(4px) !important;
                          -webkit-backdrop-filter: blur(10px) !important;
                          background-color: rgba(0,0,0,0.1) !important;
                        }

Protoncek · January 5, 2023, 1:41pm

Interesting… what i found out that blur works this way:

    data:
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(4px) !important;
              -webkit-backdrop-filter: blur(10px) !important;
              background-color: rgba(0,0,0,0.1) !important;
            }
      style: |
        --popup-border-color: lime;
        --popup-border-width: 5px;

BUT… popup (from v2.2.0) appears at TOP middle of screen. Since i’d like it to appear in the middle (total center of screen), i added some lines under “style” - that way popup appears centered (or whenever i want it),BUT they cause blur to stop working:

    data:
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              backdrop-filter: blur(4px) !important;
              -webkit-backdrop-filter: blur(10px) !important;
              background-color: rgba(0,0,0,0.1) !important;
            }
      style: |
        position: absolute;
        transform: translate(50%, 50%);
        left: 50%;
        top: 50%;
        width: 100px; 
        height: 300px;
        --popup-border-color: lime;
        --popup-border-width: 5px;

fisch55 · January 6, 2023, 7:23am

Hey - after update the modbrowser my popups looks like this . It’s too big. Can anyone

That was the code I Used before… and it was the correct size of the popup…

card_mod:
              style: |

                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0.2);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.05);
                  --mush-icon-size: 50px;
                  height: 66px;
                  margin-left: -8px !important;
                }

fisch55 · January 6, 2023, 9:17am

And restore to 2.1.3 does not work ……

curtis-r · January 7, 2023, 7:06pm

I have 5 devices registered in BM but when I try to add them to a BM service, only 1 is available. If I manually (YAML) enter one of the others, Navigate does not work. This is not the first time BM devices don’t seem to exist, yet they show on the BM settings page list. BTW, they also show in the HA Devices page.

jonaseymour · January 10, 2023, 12:36am

Hey. I just found the register CAST browser option in browser_mod settings, which is great, as I can no send popup notifications to my dashboards on google nest hubs. However, one question:

Is it possible to register multiple CAST browsers individually? I have 2 hubs showing dashboards, but they appear to share the same device_id. If I choose ‘CAST’ as the target, it sends the same popup to both browsers.
Both popups can be dismissed individually, and ‘fire-dom-events’ work fine individually when launched from tap-actions, but can’t send individual browser_mod.popup services.

ASNNetworks · January 15, 2023, 2:32pm

This should give you a blur and also set the popup card centered correctly without messing with the position variables:

  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);
      }

Goes in your theme.yaml under card-mod-theme: yourthemename if you want it to work for all popups, default Home Assistant more-info dialogs included. This is how my popups look (I use different blur and background values)

Protoncek · January 15, 2023, 4:16pm

Uau! Many thanks! Centering works, but interesting… with your solution blurring of browser-mod popups doesn’t work (browser_mod.popup, fire-dom-event), only “standard” HA popup windows blur.

Browser mod popups (and all other popups, too) do blur however if i add “dialog-backdrop-filter: blur(5px)” directly to theme (not under card-mod), so at the end it’s all i wanted.

I’ve had to do a bit of searching and learning, but i managed to make it work. Thomasloven wrote understandable guides for it.

PickOne · January 15, 2023, 4:20pm

Hi!

I added this to my themes.yaml and the popup it is still in the top of my screen, not centered…
Any other idea?

ios-dark-mode:

  card-mod-theme: ios-dark-mode
  card-mod-more-info-yaml: |
    .: |
      ha-dialog {
        --vertical-align-dialog: center !important;
      }

ASNNetworks · January 15, 2023, 4:22pm

Did you also reload the theme through services and the refresh Lovelace?

PickOne · January 15, 2023, 4:22pm

I just restarted HA. Now I called the Reload themes, but no effect

ASNNetworks · January 15, 2023, 4:26pm

Make sure you have selected that theme as active via your profile or as service call.
Add the lines to theme.yaml
Use the service call to reload the themes
Refresh Lovelace page (or restart app if on mobile)

Nothing much I can add to this, this is the code everyone uses and works (with both 1.5 and 2.x browser_mod).

PickOne · January 15, 2023, 4:28pm

I’ve restarted HA from SSH and now it is working I don’t understand why, but anyway, now it is working good. Thank you!

PickOne · January 15, 2023, 4:32pm

BTW, what means these signs from the code?
.: |
and
$

I don’t understand these signs and how to use them, any docs for this? Thank you again

ASNNetworks · January 15, 2023, 4:59pm

These are DOM’s in the CSS code, the theme modding is code from ‘card mod’ which you have installed through HACS (otherwise the code I posted wouldn’t have worked on your system)…

thomasloven/lovelace-card-mod: Add CSS styles to (almost) any lovelace card (github.com)

It’s very advanced stuff. I’m not an expert myself and still learning CSS. But those signs are basically navigation points inside the CSS code. I linked the Github of card-mod above. You should also visit the card-mod threads for card mods and themes if you want to explore more.

Modding cards Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

Modding themes Card-mod - Super-charge your themes! - Share your Projects! / Themes - Home Assistant Community (home-assistant.io)

Deckoz2302 · January 15, 2023, 5:20pm

I also have this problem. Can’t figure out why the pop ups are way oversized after this update.

ASNNetworks · January 15, 2023, 8:27pm

tagging you here as well @Deckoz2302

Browser_mod 2.x has new styling options, it’s documented at the Github repo: hass-browser_mod/popups.md at c46fcf222bb9b8a893af9d5f0612576359e24f10 · thomasloven/hass-browser_mod · GitHub

You can use them either in the popup-card, in your theme.yaml or style it using card_mod. If you want the popups to look like the old Browser_mod (and like the default more-info dialogs) just change the minimum and maximum width. I upgraded today to V2 finally and fixed it easily for all popups using this in my theme.yaml:

  popup-min-width: 400px
  popup-max-width: 400px

This gives all popups a fixed width of 400px. Change to what you see fit. In the link from Github you can find some other styling options like border-radius, background color etc.

Deckoz2302 · January 15, 2023, 8:48pm

Interesting, so before, pop ups just auto conformed to the screen size. Now we have to set a width?

Thanks for the tip to fix. But auto conform was a whole lot better