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

thomasloven · January 16, 2020, 10:53am

this only makes sense in the frontend.

When you click a button in your frontend, that usually sends some kind of service request to the backend (which is where node red lives). The backend runs on your server, and neither knows or cares whether you clicked that button on your computer, phone or toaster. All it knows is that you want a light to turn on.

What browser_mod does is change the way those service calls happen - by modifying the frontend across all devices - such that the parameter deviceID: this is replaced with a unique identifier in the service request, so that the backend can actually know which device it came from.

Then it’s up to the backend to react to this information, be it a core script, node red, appdaemon or that C# thing @helto4real is secretly working on. What it will see is a service call, having a parameter named deviceID with a list of deviceIDs as value.

jfrux · January 16, 2020, 4:53pm

I keep seeing this plugin… but even though you list use cases for this… I can’t think of one applicable implementation in my everyday life.

So this means a browser has to be running on the device at all times and pointing to a particular URL that is “listening” for stuff? Every screen in the house? I don’t get that part… how would you control every screen in your house with a browser?

ricreis394 · January 16, 2020, 5:09pm

Any update on this ?

Also, I found another issue. If I use a card which expand when loaded, like calendar card or shopping list card. The popup won’t get centered. Well, when open the popup and it centers, but after some milliseconds the card will refresh and expand it’s size, at this time the popup won’t resize aswell.

Example code:

popup_cards:
    input_boolean.shoppinglist:
      title: Shopping list
      card:
        type: shopping-list

Image:

pollinolas · January 16, 2020, 7:54pm

Hello, I am using broswer_mod popup to call several cards: entity-row, custom button … the problem is that the entities inside the popup cards cannot be clicked, if it is a light, for example, within the pop-up window when the entity is clicked is not open to see the menu for more information. Am I doing something wrong or is it normal?

poudenes · January 16, 2020, 8:34pm

Have this issue also with basic HA popups. Resize browser will correct the popup into the center.

dooz127 · January 17, 2020, 5:38pm

Restarted everything (hass, docker container, server), and refreshed the cache but still seeing browser_mod entities from incognito connections in my states table. How are the browser_mod entities persisted?

thomasloven · January 17, 2020, 7:23pm

They aren’t. That’s the thing. They are created when a browser connects, if they didn’t already exist. But they aren’t saved.

That said, I don’t quite understand persistence of entities fully…

pollinolas · January 18, 2020, 11:45pm

hi,again thanks for your great work
it is posibble to cal a service from a poppup view?
i cant do it work
this my custom button card template

  birthday:
    card: 
      type: custom:button-card
      entity: '[[entity]]'
      size: 100%
      entity_picture: '[[entity-picture]]'
      show_entity_picture: true
      show_label: true
      tap_action:
        action: more-info

this my popup button template:

  popup_birthday:
    card: 
      type: "custom:button-card"
      name: '[[name]]'
      color: auto 
      show_icon: false
      show_label: false
      styles:
        card:
          - background: 'linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3)50%)'
          - border: '3px double rgba(57,128,228)'
          - height: 30px    
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          title: '[[name]]'
          card:
            type: vertical-stack      
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:decluttering-card
                    template: birthday
                    variables:
                      - entity: sensor.jack
                      - entity-picture: /local/images/jack.jpg 
                  - type: custom:decluttering-card
                    template: birthday      
                    variables:
                      - entity: sensor.chris
                      - entity-picture: /local/images/chris.jpg 
          deviceID:
            - this

and this in my lovelace view:

  - type: custom:decluttering-card
    template: popup_birthday
    variables:
      - name: "\U0001F389 BIRTHDAY "

so,i click on my popup_birthday button and i can see all my birthday buttons(jack,chris),but if i click on one of them ,they dont do nothing when in teory should show the more-info of the entity.
i have the same problem with fold-entity.row cards

thomasloven · January 19, 2020, 12:13pm

Unfortunately more-info cannot be opened from more-info, and the popup overrides the more-info dialog.
You can open another popup, though.

pollinolas · January 19, 2020, 11:33pm

Ok, thanks for answer

ASNNetworks · January 21, 2020, 12:15pm

I have created my own remote card using button-card and invoke it with the popup action (global). Everything works fine, however I just can’t seem to center it. On my iPhone it’s fine, but on larger displays it’s all the way to the left/top. I copied the style from light-popup-card (which is centered on larger displays) but that doesn’t seem to work with my own card.

Any advice?

    style:
      align-items: center
      background: 'rgba(5, 29, 55, 0.6)'
      display: block
      flex-direction: column
      height: 100%
      icon: 'mdi:apple'
      justify-content: center
      left: 0
      margin: 0
      position: fixed
      top: 0
      width: 100%
      z-index: 999
    title: AppleTV 4K

DBuit · January 21, 2020, 3:06pm

Hard to say what is wrong but you have display: block and this should be display: flex.

ASNNetworks · January 21, 2020, 4:15pm

Unfortunately that did not help. I removed all style and it did center but was cropped, so I think I have to tinker with the style.

DBuit · January 21, 2020, 4:38pm

Ok that’s to bad. hard to help because it really depends on the style of the elements insider of the display flex item.

atebeta · January 24, 2020, 11:35am

I have a strange problem on iOS where if I call the browser_mod.popup service with a double_tap_action it will instead overwrite the tap_action and the popup will appear on single tap. On my computer if I click the button with my mouse the double tap action works as it should.

type: entity-button
tap_action:
  action: toggle
show_icon: true
show_name: true
entity: light.bedroom_light
hold_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      type: entities
      entities:
        - entity: light.bedroom_light
    deviceID:
      - this
    title: Bedroom Light
double_tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    card:
      type: entities
      entities:
        - entity: light.bedroom_light
    deviceID:
      - this
    title: Bedroom Light

Mariusthvdb · January 25, 2020, 3:14pm

having only recently started using Browser-mod, I had been extremely happy using it to have all my tts intercom announcements played on my iPhone. Ive set that up using the following config:

browser_mod:
  prefix: 'browser_'
  devices:
    7fc21dfb-redacted3:
      name: theboss
    3b69redactedb967:
      name: macbook

and that worked fine until, well, I don’t really know. Had a few other issues, and then suddenly realized I hadn’t heard my messages over the iPhone anymore. searched for the device_id in the states and it was gone. Apparently, somehow my device_id had changed into another, and I was able to find it with the browser debug service .

Why would the device_id have changed? There hasnt been an update to the iPhone app lately, nor has an iOS update taken place.
would appreciate any pointers in this matter.

thomasloven · January 25, 2020, 8:41pm

Could it be that you’re accessing Home Assistant through a new address, e.g. changed IP or different addresses for different networks?

Mariusthvdb · January 25, 2020, 9:56pm

not really no. I think.
My chrome-mac combination has stayed the same, using the exact same address and network. My Rpi’s have a fixed IP address on the router.
btw are you saying that it would make a difference for the browser-mod ID if one connects over another wifi network (I have a few in the house…)?

thomasloven · January 25, 2020, 11:12pm

Not the network, but the URL you’re connecting to. Some people use like hassio.local at home and mydomain.duckdns.org away. That would give two different ids.

In your case, it could just be your browsers cache resetting for some reason. I’d imagine an iphone would do that from time to time…

Mariusthvdb · January 26, 2020, 10:44am

ah ok, thanks, I didn’t realize that.
well, I indeed forced a few ‘Reset Frontend caches’ because I’m debugging error floods between custom header and card-mod… and the browser behaving unexpectedly, see Custom Header

so that might have caused the browser-id to have changed…

now how to solve the bigger issue?