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

1.1.2 solved it for me

Hi,

i’m running the latest version of of browser_mod.
for quite some time i have the following logs errors:
"
Home assistant core - 0.112.4
browser_mod - 1.1.2
Home assistant core running on Ubuntu server :
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py”, line 95, in async_handle
handler(self.hass, self, schema(msg))
File “/config/custom_components/browser_mod/connection.py”, line 36, in handle_update
devices[deviceID].update(msg.get(“data”, None))
File “/config/custom_components/browser_mod/connection.py”, line 72, in update
self.sensor = self.sensor or create_entity(
File “/config/custom_components/browser_mod/helpers.py”, line 30, in create_entity
adder = hass.data[DOMAIN][DATA_ADDERS][platform]
KeyError: ‘sensor’
2020-07-25 13:40:59 WARNING (MainThread) [homeassistant.setup] Setup of browser_mod is taking over 10 seconds.
2020-07-25 13:41:11 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140418631584160] Error handling message: Unknown error
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py”, line 95, in async_handle
handler(self.hass, self, schema(msg))
File “/config/custom_components/browser_mod/connection.py”, line 36, in handle_update
devices[deviceID].update(msg.get(“data”, None))
File “/config/custom_components/browser_mod/connection.py”, line 72, in update
self.sensor = self.sensor or create_entity(
File “/config/custom_components/browser_mod/helpers.py”, line 30, in create_entity
adder = hass.data[DOMAIN][DATA_ADDERS][platform]
KeyError: ‘sensor’
2020-07-25 13:41:11 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140418631584160] Error handling message: Unknown error
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py”, line 95, in async_handle
handler(self.hass, self, schema(msg))
File “/config/custom_components/browser_mod/connection.py”, line 36, in handle_update
devices[deviceID].update(msg.get(“data”, None))
File “/config/custom_components/browser_mod/connection.py”, line 72, in update
self.sensor = self.sensor or create_entity(
File “/config/custom_components/browser_mod/helpers.py”, line 30, in create_entity
adder = hass.data[DOMAIN][DATA_ADDERS][platform]
KeyError: ‘sensor’
2020-07-25 13:41:15 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140418631584160] Error handling message: Unknown error
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py”, line 95, in async_handle
handler(self.hass, self, schema(msg))
File “/config/custom_components/browser_mod/connection.py”, line 36, in handle_update
devices[deviceID].update(msg.get(“data”, None))
File “/config/custom_components/browser_mod/connection.py”, line 72, in update
self.sensor = self.sensor or create_entity(
File “/config/custom_components/browser_mod/helpers.py”, line 30, in create_entity
adder = hass.data[DOMAIN][DATA_ADDERS][platform]
KeyError: ‘sensor’
2020-07-25 13:41:15 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140418631584160] Error handling message: Unknown error
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/components/websocket_api/connection.py”, line 95, in async_handle
handler(self.hass, self, schema(msg))
File “/config/custom_components/browser_mod/connection.py”, line 36, in handle_update
devices[deviceID].update(msg.get(“data”, None))
File “/config/custom_components/browser_mod/connection.py”, line 72, in update
self.sensor = self.sensor or create_entity(
File “/config/custom_components/browser_mod/helpers.py”, line 30, in create_entity
adder = hass.data[DOMAIN][DATA_ADDERS][platform]
KeyError: ‘sensor’
"

can some one help ?

What I’ve gathered so far is that macos chrome and android chrome works, other browsers spotty. Popups open faster if you’ve got a lot of content in the popup.

Since hide_header now is an option, requiring title doesn’t make sense to me. Also this produces a tooltip with the title wherever you place the cursor on the screen.

  service: browser_mod.popup
  service_data:
    title: popup
    hide_header: true
    ...

popup-backdrop-filter doesn’t work anymore, but card-mod 2.0 can replace it anyway.

# popup style set globally in themes
frontend:
  themes:
    tablet:
      primary-color: '#434b4d'
      ...
      card-mod-theme: tablet
      card-mod-more-info-yaml: |
        $: |
          .mdc-dialog {
            backdrop-filter: blur(10px);
            background: rgba(0,0,0,0.5);
          }
          .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
            background: none;
            box-shadow: none;
            border-radius: 1em;
          }

and

# set width per popup
  ...
  deviceID: this
  style:
    .: |
      :host .content {
        width: 60em;
      }

Otherwise style is not even needed for every popup anymore.

Great work Thomas!

4 Likes

Strange, are you using HA app or Android? I only tested the android app

im with HA app

hi @thomasloven

None of my cards load when i upgrade to latest release 1.1.2 , previous releases are working fine
i tried also incognito, cleared cache
its definety related to 1.1.2

if i also disable the custom component, it loads fine

what can be the issue?

screenshot : https://www.dropbox.com/s/vom10mo1doyl6te/custom1.PNG?dl=0

Same problem
Downgrade to 1.1.1 is working

1.1.3 should work with browsers with incomplete regex support, like safari.

In Hass 0.112 or earlier, the popups will probably show up, but be in the wrong location and cannot be closed with the close button. Closing them with the back button (new feature) should work, though.

3 Likes

Congratulations and thanks for your great dedication, I think there are private companies that do not have such good support

1 Like

Is it no longer possible to style the individual cards within the pop-up?

For example if I have a pop-up with a markdown and an entities card in a vertical-stack is it possible to change the font size in, say, just the markdown.

image

I used to be able to style each card within the popup independently and apply a global style to the whole popup. (Which in this case had the added benefit of being able to use the Java scripting abilities of the button-card and set the font dynamically.)

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: User Interface Font
    hide_header: true
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: Leave blank to use the font from the current theme.
          style: >
            ha-card {
              box-shadow: none;
              padding: 0em 0em 0em 1em;
              background: var(--paper-dialog-background-color);
              margin: 0em;
            }
            p {
              font-size: 18px;
            }
        - type: entities
          entities:
            - entity: input_text.irrigation_ui_font_family
              name: Font Name
          style: >
            ha-card {
              box-shadow: none;
              border-radius: 0em 0em 1em 1em;
              background: var(--paper-dialog-background-color);
            }
    deviceID:
      - this

    style:
      font-family: >
        [[[
          return states['input_text.irrigation_ui_font_family'].state
        ]]]
      box-shadow: 0em 0em 0.5em
      border-radius: 1em
      overflow: hidden
      opacity: 0.9

But now I seem to have to move all the styles to apply globally to the popup itself

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: User Interface Font
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: Leave blank to use the font from the current theme.

        - type: entities
          entities:
            - entity: input_text.irrigation_ui_font_family
              name: Font Name
    deviceID:
      - this
    style:
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          border-radius: 1em;
          box-shadow: 0em 0em 0.5em;
        }
      .: |
        :host {
          --mdc-theme-surface: var(--paper-dialog-background-color);
          --ha-card-background: var(--paper-dialog-background-color);
          --secondary-background-color: var(--paper-dialog-background-color);
          opacity: 0.9;
        }

And styles applied to each card within the popup seem to be ignored.

yes, I am seeing the same, though not consistently, after having updated the last couple version, up to 1.1.3 now. Every reload or so (sorry not being able to be more precise) only red cards are shown for the custom cards.

must clear cache then and do yet another reload to get the cards back

only remotely related error in the inspector (Safari) is

(yes, I know that is for card-mod, simply trying to report what’s happening…)

of course, forgot to mention, this is after updating to HA 113.x

2 Likes

Yes, already created issue on GitHub for this…

So it’s not just me. I thought i broke something after some template testing. :sweat_smile:

I have no idea what you have tried.

But now I seem to have to move all the styles to apply globally to the popup itself

What makes you think that?

And styles applied to each card within the popup seem to be ignored.

There’s no styles applied to the card in your example.

Ok, sorry.
A simplified question.

How do I style individual cards within the pop-up?

Before v0.113 and the browser_mod upgrade I used this:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: User Interface Font
    hide_header: true
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: Leave blank to use the font from the current theme.
          style: >
            ha-card {
              box-shadow: none;
              padding: 0em 0em 0em 1em;
              background: var(--paper-dialog-background-color);
              margin: 0em;
            }
            p {
              font-size: 18px;
            }
        - type: entities
          entities:
            - entity: input_text.irrigation_ui_font_family
              name: Font Name
          style: >
            ha-card {
              box-shadow: none;
              border-radius: 0em 0em 1em 1em;
              background: var(--paper-dialog-background-color);
            }
    deviceID:
      - this
    style:
      font-family: >
        [[[
          return states['input_text.irrigation_ui_font_family'].state
        ]]]
      box-shadow: 0em 0em 0.5em
      border-radius: 1em
      overflow: hidden
      opacity: 0.9

but now that returns this.

image

It seems to be ignoring all the styling


My new config gives me this (picture2):

image

which is pretty close to what I had previously but I can’t change the font-family or size on each card separately.

This is the new config:

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: User Interface Font
    hide_header: true
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: Leave blank to use the font from the current theme.
        - type: entities
          entities:
            - entity: input_text.irrigation_ui_font_family
              name: Font Name
    deviceID:
      - this
    style:
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          border-radius: 1em;
          box-shadow: 0em 0em 0.5em;
        }
      .: |
        :host {
          --mdc-theme-surface: var(--paper-dialog-background-color);
          --ha-card-background: var(--paper-dialog-background-color);
          --secondary-background-color: var(--paper-dialog-background-color);
          opacity: 0.9;
        }

I’m experimenting with the features of version 2…

image

I want to create a popup that only appears on the device where I tried to open it. However, no mater what I do, the pop up seems to appear on all of my devices.

Here is a portion of the card containing the relevant sections, if you need more let me know:

type: entities
entities:
  - entity: media_player.viziocastdisplay2916_2
    name: Second Bedroom Remote
    tap_action:
      action: call-service
      service: browser_mod.command
      data_tamplate:
        command: popup
        deviceID: this
        title: Second Bedroom Remote
        card:
          cards:
            - cards:
                - entity: script.1586558814969
                  hold_action:
                    action: more-info
                  icon: 'mdi:backburger'
                  name: Back
                  show_icon: true
                  show_name: true
                  tap_action:
                    action: toggle
                  type: button

I will also add the sections from another attempt:

                      icon: 'mdi:lightbulb-on'
                      name: Dimmer
                      show_icon: true
                      show_name: true
                      tap_action:
                        action: toggle
                      type: button
                  type: horizontal-stack
              type: 'custom:vertical-stack-in-card'
          type: vertical-stack
          deviceID:
            - this

In your first example, you can clearly see that the bottom left and right corners have a radius, so the styles are definitely applied to the cards.
However, the entire dialog has been vastly redesigned in 0.113, and thus some more work is required to get e.g. the background correct.

Also; in 0.112, the markdown card underwent a major redesign, so the style of the p element can’t be applied like that anymore. You’ll need to use the advanced method and go through ha-markdown or whetever it’s called IIRC.

Sorry if this has been asked before, but I’m running into this error:

chunk.8b29f0c82629b54e915d.js:25233 Uncaught (in promise) TypeError: Cannot read property 'connection' of undefined
    at HTMLElement.value (chunk.8b29f0c82629b54e915d.js:25233)
    at l (browser_mod.js:1)
chunk.8b29f0c82629b54e915d.js:25233 Uncaught (in promise) TypeError: Cannot read property 'connection' of undefined
    at HTMLElement.value (chunk.8b29f0c82629b54e915d.js:25233)
    at l (browser_mod.js:1)
    at async v._load_lovelace (browser_mod.js:149)

It stops all other scripts from loading. How do I fix that?

Asked before and under investigation :wink: , for now, downgrade back to 1.1.1

Change this to the deviceID you want it to show up on. Check out the docs to find out your deviceID.

Miss read your post. Change the data_template line to service_data!

      action: call-service
      service: browser_mod.command
      service_data:
        command: popup
        deviceID: this
1 Like