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

Share your Projects! Custom Integrations
1558

Sorry if it was already asked.
I successfully managed to change the simple popup with new version.
However, was not able to change the simple close of current popup.
How do I change this:

  tap_action:
    action: "fire-dom-event"
    browser_mod:
      command: "close_popup"
1559

Another question.
Is there and option to hide the popup header, like it was before?

1560

The command is deprecated. There is a new service for close popup. Everything is clearly documented.

1561

Hi,
Yes, I tried of course to change to the below:

  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.close_popup
      data:
        browser_id: THIS

It is not working for me.
What am I missing?

1562

Thank you for a great update. Indeed, it breaks all. Main inconvenience was changed IDs, but new features and improved performance make worth fixing. Finally, popups work properly on hi-res screens. Thanks a lot.

1 Like
1563

Finally adapted to new changesā€¦even tho it broke most of my scripts and frontend dashboard. thanks to everyone who made this new changes and alredy loving it .
As per wiki more blur have been added but I donā€™t see much blur effects (looks the same for me tho)ā€¦ also I have no idea how to use tts funtion for all browser media? I know we can play sounds from local folder and it works but not sure how to make use of ttsā€¦if anyone could vouch me on blur and tts funtions it would be helpful
tried something like this but doesnā€™t say anything

service: tts.google_say
data:
  entity_id: media_player.xiaomi_pad_5
  message: text
1564

Yeah itā€™s because cloudflare store caches unless the machine reboots or server restart

1565

Thank you for the big update.
Everything is back working well on my setup, but I would prefer the transparency of the old popup card.

Itā€™s possible to set the popup card to less transparency?

Thank you for your work,best regards.

1566

Long time ago, i did some lovelace config , need some help here ; after updating to 2.x, the more info popup card doesnt work anymore, did an update, readded integration
I use template/declutter cardā€¦ not sure how i need to enable it again?

browser_mod:  
  disable:
    - all

example button card:

          - type: custom:decluttering-card
            template: button
            variables:
              - entity: light.dimmer1
              - name: Eetkamer
              - label: "[[[ var bri = Math.round(entity.attributes.brightness / 2.55); return (bri ? bri : '0') + '%'; ]]]" 
              - icon: spotlight
              - show_state: false
              - margin-right: 40px

pointed to:

  light.dimmer1:
    title: Eetkamer
    style:
      border-radius: var(--border-radius)
      background: grey
    card:
      type: custom:decluttering-card
      template: light-popup
      variables:
        - entity: light.dimmer1

and this is template:

default:
  - entity: light.yourentity
card:
  type: 'custom:light-entity-card'
  style: |
    ha-card {
      background: var(--homekit-card-off);
      opacity: 0.7;
      border-radius: var(--border-radius);
      color: var(--name-color-off);
    }
  entity: '[[entity]]'
  group: false
  persist_features: true
  header: ' '
1567

Try this:

          tap_action:
            action: fire-dom-event
            browser_mod:
              service: browser_mod.close_popup
              data: {}
2 Likes
1568

Now you can use Style variables when calling pop-ups:

      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            style: '--popup-background-color: transparent;'
            content:
              type: <some-card>
1569

Rewriting my 7000+ lines lovelace, and I stuck with new popups logic.
Now content: type: cards appears in center of the screen even in mobile view.
How can I stylize popup if I want ā€˜startā€™ alignment in mobile view, but I need to keep ā€˜centerā€™ alignment in desktop view? Like in Browser Mod 1.

style: '--vertial-align-dialog: start' changes align for both view modes.
Thanks.

1570

Thank you is exactly what I was looking for

1 Like
1571

That did the trick.
Thanks!

1 Like
1572

Is there anyway to change the padding of the popup?
Before I was using Card Mod from theme, this way:

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__content {
          padding-top: 0px !important;
      }
1573

I am just a cut and paste monkey and donā€™t get exactly the styling stuff but found something that worked in 1.0 but canā€™t figure out in 2.0.

The effect I am seeking is to blur the screen behind the popup. I have seen the instruction about using strings to affect the popup and played around with these successfully but donā€™t get how to replicate my current 1.0 configuration.

If anyone has any suggestions, I would be grateful. Thomas thanks for your continued contribution to Home Assistant!

Working 1.0 code; example in the style section:

action: fire-dom-event
browser_mod:
  command: popup
  deviceID: this
  title: Vaccum
  style:
    .: |
      app-toolbar {
        color: white !important;
        background-color: #03a4f4 !important;
      }
    $: |                                             #  << THIS BIT HERE! :-)
      .mdc-dialog {
        backdrop-filter: blur(5px) grayscale(50%) !important;
        background: rgba(0,0,0,0.5);
      }
  card:
    type: custom:vertical-stack-in-card
    cards: ......
1574

any toughts why this wont work

          style:
             '--popup-background-color: transparent;'
             '--popup-border-color: transparent;'
1575

How do we handle backdrop-filter now?

1576

Can somone help me on this ?
How to add blur on popup background ?
And tts funtion on browser media isnā€™t working too

1 Like
1577

Typo in the documentation. It should be

style: |
  --popup-background-color: transparent;
  --popup-border-color: transparent;
4 Likes