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

champ26 · February 10, 2021, 8:57pm

correct, only works with native cards, as it seems most custom cards haven’t implemented handling fire-dom-event as thomasloven mentioned.

I previously used browser_mod for popups in conjuction with the custom button card. I just changed to used the new call-service method thomasloven mentions in his updated readme, but with the native button card, since the custom button card doesn’t yet support the fire-dom-event mentioned.

I just did this today because I heavily use popups for my key-master integration for lock codes, and didn’t want to roll back browser-mod 1.2.3 that will soon break HA. Once, custom:button-card can support the fire-dom-event, ill switch back to have more control over the button card styling, but the native one works just fine in my scenario here.

below is a snippet

- type: button
  name: "Code 1"
  icon_height: 30px
  entity: binary_sensor.active_frontdoor_1
  #template: lock_manager_button
  tap_action:
    action: fire-dom-event
    browser_mod:
      command: call-service
      service: browser_mod.popup
      service_data:
        title: 'Code 1'
        style:
          background: var(--champs-theme-primary)
        card:
          type: entities
          show_header_toggle: false
          entities:
            - type: divider
            - entity: input_text.frontdoor_name_1

Hopefully this will help some of you

@thomasloven I noticed in your call-service section of the readme, that there was an extra colon listed

what you have:

command: call-service:
service: <service>
service_data:
  <service_data>

what I needed:

command: call-service
service: <service>
service_data:
  <service_data>

jazzyisj · February 11, 2021, 3:23am

Well there goes my night!

Edit: Ah! This needs to be in big bold text somewhere!

A good chunk of my browser_mod commands are toast which run on all devices! Whew

skank · February 11, 2021, 7:50am

Anyone issues?
running latest HA and hacs and it stopped working here
Logger: homeassistant.components.websocket_api.http.connection
Source: components/websocket_api/connection.py:84
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 10 februari 2021 20:50:32 (1 occurrences)
Last logged: 10 februari 2021 20:50:32

[547968919776] Received invalid command: browser_mod/connect

spudje · February 11, 2021, 9:08am

I don’t think I fully understand the changes. For instance, how would following code look in 1.3.0?

    tap_action: &media_tap_action
      action: >
        [[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby') {
        return 'none'; } else { return 'call-service'; } ]]]
      service: media_player.media_play_pause
      service_data:
        entity_id: '[[[ return entity.entity_id ]]]'
      haptic: light

Or a simple popup

 tap_action: !include popup/activity.yaml

NdR · February 11, 2021, 9:37am

Same question here. I’m using browser_mod as “more-info” popup in the same way:

popup_cards: !include NdRUI/ndrui_popup.yaml

And ndrui_popup.yaml.

  sensor.group_sensori_porta:
    title: "Sensori Porta / Finestra"
    style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
          box-shadow:none;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);

          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }
    card:
      type: entities
      entities:
        - entity: sensor.scurone_sala
          type: custom:multiple-entity-row
          name: Scurone Sala
          secondary_info: last-changed
          entities:
            - entity: sensor.scurone_sala_battery
              name: Batteria
            - entity: sensor.scurone_sala_linkquality
              name: Segnale
        - type: section
        - entity: sensor.lucernaio_studio
          type: custom:multiple-entity-row
          name: Lucernaio Studio
          secondary_info: last-changed
          entities:
            - entity: sensor.lucernaio_studio_battery
              name: Batteria
            - entity: sensor.scurone_sala_linkquality
              name: Segnale

I’m not sure on how to adapt this code to the new version…

thomasloven · February 11, 2021, 9:38am

Not at all.
That method is still in the readme, so it’s still valid.

skank · February 11, 2021, 9:42am

I turned back version ,have to read first:p how to fix it before upgrading

skank · February 11, 2021, 4:15pm

@thomasloven

My popups dont work on latest version
Old code:

action: call-service
service: browser_mod.popup
service_data:
  title: Information
  hide_header: true
  deviceID: this
  style:
    .: |
      :host .content {
        width: calc(400px);
        align: center;
      }
    $: |
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
      }
  card:
    type: custom:vertical-stack-in-card
    cards:
      - type: markdown
        content: <font color="#1A73E8" size= "5">Batterij niveaus</font>
        style: |
          ha-card {
            background-color: transparent !important;
            box-shadow: none !important;
          }

Do i need to change it to

action: fire-dom-event
browser_mod:
  command: popup
  service_data:
    title: Information
    hide_header: true
    deviceID: this
    style:
      .: |
        :host .content {
          width: calc(400px);
          align: center;
        }
      $: |
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: none !important;
        }
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: markdown
          content: <font color="#1A73E8" size= "5">Batterij niveaus</font>
          style: |
            ha-card {
              background-color: transparent !important;
              box-shadow: none !important;
            }

Mattias_Persson · February 12, 2021, 8:54pm

action: fire-dom-event
browser_mod:
  command: popup
  title: Information
  hide_header: true
  card:
    ...

It’s worth repeating that this doesn’t work with custom cards like custom:button-card yet.

kajmaj · February 13, 2021, 6:41am

Does it have a sense to ask if there is any roadmap or process set to have custom components compatible?

skank · February 13, 2021, 9:15am

Then we can’t update to the latest version

squidy · February 13, 2021, 8:56pm

Hello,

Can anyone explain to me how to set global styles for popups. For instance the color in the header - I see that app-toolbar in ha-dialog is responsible for that. And it has color set to var(--primary-text-color). I thought/read about two possible solutions:

By modifying variables in theme configuration.
Let’s say primary-text-color: green. It works for the cards directly placed in the dashboard, but in the popup the value of primary-text-color is not correct.
By adding css styles to theme configuration (in themes.yaml).

    card-mod-theme: tablet # <<< What this does?
    card-mod-more-info-yaml: | #<<< Is this correct? Why is that "-yaml" conditional according to the card-mod docs?
      $: |
        app-toolbar {
          color: green;
        }

And still… color: green not added to the app-toolbar.

Worth noting that setting styles for specific popup like this works correctly:

action: call-service
      service: browser_mod.popup
      service_data:
        title: '[[[ return entity.attributes.friendly_name ]]]'
        deviceID: this
        card:
          type: entities
          entities:
            - type: custom:light-popup-card
              entity: '[[[ return entity.entity_id ]]]'
              icon: none
              fullscreen: false
              brightnessWidth: 130px
              brightnessHeight: 360px
              borderRadius: 1.7em
              sliderColor: '#c7c7c7'
              sliderTrackColor: rgba(25, 25, 25, 0.9)
              actionSize: 4.5em
              actionsInARow: 2
              style:
                .: |
                  .popup-inner > .icon, .popup-inner > #brightnessValue {
                    display: none;
                  }

But I’d rather not to copy styles for every popup I create. Am I doing something wrong? Thanks in advance.

Alindil · February 14, 2021, 5:33pm

Hi, since the last update in 1.3.0, I can’t open popups anymore using browser_mod.popup

deluxestyle · February 14, 2021, 5:40pm

You need to change the Service call
It was mentioned in the release notes

spudje · February 15, 2021, 8:44am

I understand the changes for the service calls. But I still don’t no how to change an action like this to the new browser_mod.

tap_action: !include popup/activity.yaml

royle · February 15, 2021, 10:57am

Hi
I can’t understand the new option of the fire-dom-event,
- entity: alarm_control_panel.home_alarm
name: alarm
icon: mdi:shield
offStates:
- “disarmed”
offIcon: mdi:shield-off
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
entity: alarm_control_panel.home_alarm
states:
- arm_home
# - arm_away
type: alarm-panel
deviceID:
- this

What It should be now ?
Thanks

VDRainer · February 15, 2021, 11:38am

...
hold_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    card:
      ...

Remove

deviceID:
  - this

This doesn’t work in custom-cards at the moment, but should work with alarm-panel.

juan11perez · February 15, 2021, 12:01pm

thank you, I tried this with custom media-player, but it doesn’t work.

any guidance is appreciated.

VDRainer · February 15, 2021, 12:24pm

github.com/kalkih/mini-media-player

Support action `fire-dom-event`

opened 03:34PM - 14 Feb 21 UTC

closed 06:38PM - 12 Apr 21 UTC

VDRainer

enhancement

**Is your feature request related to a problem? Please describe.** browser_mod …switching to fire-dom-event away from call-service for popups, toasts, etc., see release notes: https://github.com/thomasloven/hass-browser_mod/releases/tag/1.3.0 **Describe the solution you'd like** Implement support for action: fire-dom-event in tap_action and hold_action **Describe alternatives you've considered** As of now browser_mod can still be used with call-service action, but might be phased out soon **Additional context** Thank you :-) Stolen from https://github.com/custom-cards/button-card/issues/429 :smile:

djmalin · February 15, 2021, 4:20pm

Hello i need help with the new update, i can’t cope with the new version, and i don’t know how to get the new popup windows back?

old code :

              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    icon: 'mdi:thermostat-box'
                    show_icon: true
                    show_name: false
                    state:
                      - value: 'on'
                        styles:
                          card:
                            - box-shadow: >
                                [[[ return states['sun.sun'].state ==
                                'below_horizon'
                                  ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                                  : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                                ]]]
                          icon:
                            - color: var(--paper-item-icon-active-color)
                    styles:
                      card:
                        - width: 80px
                        - height: 80px
                        - margin: 10px
                        - border-radius: 15px
                        - box-shadow: >
                            [[[ return states['sun.sun'].state ==
                            'below_horizon'
                              ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                              : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                            ]]]
                        - background-color: var(--primary-background-color)
                      icon:
                        - color: var(--primary-text-color)
                    tap_action:
                      action: call-service
                      service: browser_mod.command
                      service_data:
                        card:
                          type: 'custom:thermostat-card'
                          entity: climate.termostat_salon_danfos_thermostat
                          small_i: true
                          title: Salon
                        command: popup
                        deviceID:
                          - this
                        title: Termostat Salon

new code:

              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    icon: 'mdi:thermostat-box'
                    show_icon: true
                    show_name: false
                    state:
                      - value: 'on'
                        styles:
                          card:
                            - box-shadow: >
                                [[[ return states['sun.sun'].state ==
                                'below_horizon'
                                  ? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
                                  : 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
                                ]]]
                          icon:
                            - color: var(--paper-item-icon-active-color)
                    styles:
                      card:
                        - width: 80px
                        - height: 80px
                        - margin: 10px
                        - border-radius: 15px
                        - box-shadow: >
                            [[[ return states['sun.sun'].state ==
                            'below_horizon'
                              ? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
                              : '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
                            ]]]
                        - background-color: var(--primary-background-color)
                      icon:
                        - color: var(--primary-text-color)
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        command: popup                     
                        card:
                          type: 'custom:thermostat-card'
                          entity: climate.termostat_salon_danfos_thermostat
                          small_i: true
                          title: Salon
                        deviceID: this
                        title: Termostat Salon