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

Share your Projects! Custom Integrations
1369

Thanks. It does work with the fire-dom-event, without deviceID.
However when I just install the latest version of this addon, I would have expected that it is not necessary to still read one year old breaking changes release notes, but just the documentation.
If the deviceID this is now complete obsolete or not is still not really clear to me, according to the cookbook (Cookbook Ā· thomasloven/hass-browser_mod Wiki Ā· GitHub) I would have expected another syntax.

Anyways, I now have a working syntax that I can use as a copy & paste reference for the next steps:

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Popup example
    card:
      type: entities
      entities:
        - switch.gosund2
1370

Just to close up the thread:

I am genuinely baffled, but everything is back working now. Perfectly normal response on Firefox (as was the case before). Maybe a weird versioning issue with the browser? At any rate, thanks for all your help!

-J

1371

I might be barking up the wrong tree here, but can someone give me a solution to open an internet webpage on my Samsung tablet running Fully Kiosk Browser.

The website is https and Fully Kiosk is running my HA dashboard, so ideally I would just put a button on my dashboard to open the website. Iā€™ve tried using an iframe card, but that fails due to opening an https site from an http page.

I donā€™t mind if the website opens in a new tab or a popup, but I need to display it quite large.

1372

When using an input number with a drop-down selection in a browser mod popup, on a computer this is hardly usable, as the popup is too small:
grafik

The large option just makes it wider horizontally.

On the mobile app it is no issue, as there the popup is displayed with full screen size.
Is there currently any way to fix this, or at least planned to correct in a next version?

1373

Why not just opening a little bit bigger? You will find example in this thread. E.g. Here

1374

Why not (yet)? Because I do not know the solution, that is why I ask.

Just adding

    style: |
      @media (min-width: 812px) {
        :host .content {
          width: 90vw;
          height: 80vh;
        }

does not change anything and I also do not understand that code. Does that require additional custom components? What is @media supposed to say?

1375

For me it is important to have a least some own initiative, that means, reading the docs and in this case this thread, or use a search platform to close some gaps if not every given example is clear.

E.g. in this way.

And if you read above, directly on of the next posts were related to the media query. This was only an example. And e.g. you can remove the media query and test further.

Only to ask for a perfect and bite-sized solution, will not help you in the furutre and for the next question, which will come.

1376

And for me it is important to get clear anwers.
Saying ā€œthis is not possible with browser_mod, you need to install card_mod as well and can then do it with CSS, you find example code here in the threadā€ would have been a much shorter answer and more helpful.
The author saying ā€œThis is a known flaw, I have that on my to-do list/will not get fixedā€ would be also helpful.

Just pointing to code that does not work without other prerequisites is simply not helpful but costs both sides time and leads to more discussions, as seen here.

Bite-sized solution is not expected, but at least helpful information, otherwise there is no use in replying at all. The aim of home assistant is not to be a software that one has to acquire by compiling informational puzzle pieces.

1377

My example was 99% complete. And it was already in this thread. Therefore the rest of your rant is not relevant.

Use HA in standard (the popup is not standard) and you will not have any questions like this.

Then good luck with answers from others.

1 Like
1378

Exactly :+1:

1379

Hey

Is it possible to style the header part of the popup?

I tried different things but no luck

1380

@thomasloven First of all, thank you for this great programme. But at one point it exceeds my abilities.

I have set up two automations: When it rings, the first on the 10" tablet navigates to a camera page and the second on the 7" tablet navigates to another camera page. After 30 seconds, the 10" tablet should show its start page again and the 7" tablet should show another one.
But even after studying these pages for a long time, I canā€™t manage that.

The bell switches on a camera page on both tabs (and, btw, unintentionally also on other computers with open Lovelace pages), but afterwards both tablets return to the same status page of the 7" tablet. Thatā€™s not the way it was meant to be.

Apparently, specifying a device ID does not work selectively as I had imagined. But then how do I get the navigate command to only take one tablet to a specific page and back, and not all the others?

Here is my code from the action part of the two automations:

commands:
  - command: navigate
    navigation_path: /db-tablet-r30/kameras-garten
    deviceID:
      - bcf39857-427cdd5f
  - command: delay
    seconds: 30
  - command: navigate
    navigation_path: /db-tablet-r30/0
    deviceID:
      - bcf39857-427cdd5f

commands:
  - command: navigate
    navigation_path: /yaml-dashboard-2/Kameras
    deviceID:
      - c2fcdf07-f63f2dfa
  - command: delay
    seconds: 30
  - command: navigate
    navigation_path: /yaml-dashboard-2/0
    deviceID:
      - c2fcdf07-f63f2dfa

Greetings, Eckart

1381

@pimp1310 Not sure if itā€™s what you want, but did you find the mushroom card from HACS?

1382

No I mean in the browser mod popup, how to style there the title of the popup with css.

But thanks

1383

It is directly selectable (as described in the docs and usual, card_mod has to be installed as well).

tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Heizung
    large: false
    style: |
      app-toolbar {
        color:red !important;
        background-color: blue !important;
      }
    card:
1384

Iā€™ve noticed that a dismissed popup (displayed using fire-dom-event to display it on the current device, not sure if the same applies when calling via the service) will re-appear if I navigate from the current page and then use the browser back button to go back to that page.
It make no difference whether I dimissed it by clicking on another part of the page or using the close button on the popup.

Is there any way to prevent this from happening, other than not using the browser back button?

1385

Thx but where in the docs are the available css classes definied that browser mod has ?

When they are definied it would help really.

1386

Most probably nowhere. You just have to look in the dom and css of the developer tools.

1387

gives a way to combine it with my existing code?

           style:
              $: |
                .mdc-dialog {
                  backdrop-filter: blur(1px) grayscale(50%);
                  background: rgba(0,0,0,0.5);
                }

i tried ::

style:
              $: |
                .mdc-dialog {
                  backdrop-filter: blur(1px) grayscale(50%);
                  background: rgba(0,0,0,0.5);
                }
                .app-toolbar {
                  color:red !important;
                  background-color: blue !important;
                }

but then it doesnt work

1388

Why did you add a . In front of app-toolbar if you only want to combine? :wink:

Not meant in a bad way, but real advice: You should look for a css beginners guide. Here a class (with.) if something different than the other one. You will see the difference as well, if you look at the dom in developer tools.