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

peterson1190 · August 3, 2020, 3:29pm

Thanks Thomas.
The styling part is working fine now, the backdrop-filter part is what I do not get mainly, I do not know where and how to apply that, could you please show me an example?

auto_close: true
card:
  cards:
    - entity: sensor.time
      scale: 150px
      type: 'custom:bignumber-card'
    - details: true
      entity: weather.otthon
      type: 'custom:weather-card'
  column_num: 3
  column_width:
    - 1000
    - 1000
    - 1000
  type: 'custom:layout-card'
deviceID:
  - browser_ipad
hide_header: true
large: true
style: |
  :host {
    --mdc-theme-surface: rgba(0,0,0,0.8);
    --secondary-background-color: rgba(0,0,0,0.8);
    --ha-card-background: rgba(0,0,0,0.8);
    --backdrop-filter: blur(10px);

This is the modified config, but the backdrop part does not seem to do anything

thomasloven · August 3, 2020, 3:43pm

That’s probably not one of the predefined variables used by that element, you’ll have to use the object inspector to find out.

Maybe this helps? 🔹 Card-mod - Super-charge your themes!

ASNNetworks · August 3, 2020, 4:36pm

@peterson1190 most likely it is bugged on iOS like I mentioned there. Backdrop works fine on Android and desktop browsers, but iPadOS and iOS doesn’t show it.

peterson1190 · August 3, 2020, 4:56pm

Understood, I think I’m missing more pieces from the puzzle.
I mean the whole theming story.
I only use “standard” hacs themes, with this code:

frontend:
  themes: !include_dir_merge_named themes

This is what the output looks like from the above code on PC with Chrome.

I will redo the theme part of my HA I think.

thomasloven · August 3, 2020, 6:44pm

Nah, the style parameter of the popup command is pretty much exactly the same as specifying a popup style in a theme.
You won’t need the theme to make a blurred background.

ASNNetworks · August 3, 2020, 9:49pm

Thanks to Thomas I now have backdrop filter working with iPadOS/iOS. Below code is for popup cards with a blurred backdrop. You can use that and change it how you see fit. Just paste below code in your active theme yaml file and reload themes. This is if you want to apply it to all popups. If you only want it for a specific popup, then just use it as styling parameters for that one popup.

  card-mod-theme: name-of-your-theme
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
        background: rgba(0,0,0,0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }
    ha-header-bar:
      $: |
        .mdc-top-app-bar {
          background: none !important;
        }

The -webkit-backdrop-filter: blur(17px); is for iPadOS/iOS. I have that one and the one without prefix -webkit- so it works on all devices.

peterson1190 · August 4, 2020, 2:05am

Holy Moly and it is working yesss!!
Thank you guys, you are awesome!

FYI for noobs like me:
You need to copy this code to the end of your actual theme.yaml file.

thomasloven · August 4, 2020, 6:53am

But, again, the same styles can just as well be placed in the service call itself if you don’t want to change the style of all dialogs.

style:
  $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
        background: rgba(0,0,0,0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }
    ha-header-bar:
      $: |
        .mdc-top-app-bar {
          background: none !important;
        }

Kejszijo · August 4, 2020, 9:19pm

Hi,

I have a problem some popup cards. It’s not show up.

HA112.4, Browser_mod 29:

HA113.2, Browser_mod 1.1.5:
legtisztito_page1_113.2 legtisztito_page2_113.2
ventilátorok_113.2

My purifier popup config:

                      tap_action:
                        action: call-service
                        service: browser_mod.popup
                        service_data:
                          card:
                            card_width: 90%
                            cards:
                              - card:
                                  cards:
                                    - elements:
                                        - entity: >-
                                            input_number.xiaomi_airpurifier_favorite_level
                                          hide_state: false
                                          style:
                                            left: 50%
                                            top: 96%
                                          type: 'custom:slider-entity-row'
                                        - entity: sensor.purifier_filter_hours_used
                                          prefix: 'Used: '
                                          style:
                                            background-color: 'rgba(0, 0, 0,.0)'
                                            border-color: 'rgb(34, 154, 210,.0)'
                                            border-left-style: solid
                                            color: dodgerblue
                                            font-size: 100%
                                            font-weight: bold
                                            left: 1.5%
                                            opacity: 1
                                            pointer-events: none
                                            top: 5%
                                            transform: 'translate(0%,-50%)'
                                          type: state-label
                                        - icon: 'mdi:water-percent'
                                          style:
                                            '--iron-icon-height': 20px
                                            '--iron-icon-width': 20px
                                            color: dodgerblue
                                            left: 8%
                                            position: absolute
                                            top: 12%
                                          tap_action: none
                                          type: icon
                                        - entity: sensor.purifier_humidity
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 100
                                          min: 0
                                          show_card: null
                                          stroke_width: 10
                                          style:
                                            height: 17%
                                            left: 15%
                                            top: 20%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: '%'
                                        - icon: 'mdi:thermometer'
                                          style:
                                            '--iron-icon-height': 20px
                                            '--iron-icon-width': 20px
                                            color: dodgerblue
                                            left: 7.5%
                                            position: absolute
                                            top: 27%
                                          tap_action: none
                                          type: icon
                                        - entity: sensor.purifier_temperature
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 50
                                          min: 0
                                          show_card: false
                                          stroke_width: 10
                                          style:
                                            height: 17%
                                            left: 15%
                                            top: 35%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: °C
                                        - icon: 'mdi:air-filter'
                                          style:
                                            '--iron-icon-height': 17px
                                            '--iron-icon-width': 17px
                                            color: dodgerblue
                                            left: 8%
                                            top: 42%
                                          tap_action: none
                                          type: icon
                                        - entity: sensor.purifier_filter_life_remaining
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 100
                                          min: 0
                                          show_card: false
                                          stroke_width: 10
                                          style:
                                            height: 17%
                                            left: 15%
                                            top: 50%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: ''
                                        - entity: sensor.purifier_aqi
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 600
                                          min: 0
                                          show_card: false
                                          stroke_width: 10
                                          style:
                                            height: 13%
                                            left: 50%
                                            top: 18.5%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: p
                                        - icon: 'mdi:speedometer'
                                          style:
                                            '--iron-icon-height': 17px
                                            '--iron-icon-width': 17px
                                            color: dodgerblue
                                            left: 8%
                                            top: 58%
                                          tap_action: none
                                          type: icon
                                        - entity: sensor.purifier_fan_speed
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 3000
                                          min: 0
                                          show_card: false
                                          stroke_width: 10
                                          style:
                                            height: 17%
                                            left: 15%
                                            top: 65%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: ''
                                        - icon: 'mdi:speedometer-medium'
                                          style:
                                            '--iron-icon-height': 17px
                                            '--iron-icon-width': 17px
                                            color: dodgerblue
                                            left: 8%
                                            top: 73%
                                          tap_action: none
                                          type: icon
                                        - entity: sensor.purifier_fan2_speed
                                          fill: 'rgba(0,0,0,0.3)'
                                          font_style:
                                            color: white
                                          gradient: true
                                          max: 3000
                                          min: 0
                                          show_card: false
                                          stroke_width: 10
                                          style:
                                            height: 17%
                                            left: 15%
                                            top: 80%
                                            width: 13%
                                          type: 'custom:circle-sensor-card'
                                          units: ''
                                        - entity: sensor.purifier_fan_mode
                                          max: 2000
                                          min: 0
                                          prefix: 'Mode: '
                                          style:
                                            background-color: 'rgba(0, 0, 0,.0)'
                                            border-color: 'rgb(34, 154, 210,.0)'
                                            border-left-style: solid
                                            color: dodgerblue
                                            font-size: 100%
                                            font-weight: bold
                                            opacity: 1
                                            pointer-events: none
                                            right: 1%
                                            top: 1%
                                            transform: none
                                          type: state-label
                                        - entity: fan.xiaomi_miio_device
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            margin-right: '-10%'
                                            right: 19%
                                            top: 17%
                                          tap_action:
                                            action: call-service
                                            service: fan.toggle
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: state-icon
                                        - icon: 'mdi:brightness-auto'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            right: 4%
                                            top: 17%
                                          tap_action:
                                            action: call-service
                                            service: fan.set_speed
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                              speed: Auto
                                          type: icon
                                        - icon: 'mdi:power-sleep'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            margin-right: '-10%'
                                            right: 22%
                                            top: 34%
                                          tap_action:
                                            action: call-service
                                            service: fan.set_speed
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                              speed: Silent
                                          type: icon
                                        - icon: 'mdi:account-heart'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            right: 4%
                                            top: 34%
                                          tap_action:
                                            action: call-service
                                            service: fan.set_speed
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                              speed: Favorite
                                          type: icon
                                        - icon: 'mdi:monitor'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            margin-right: '-10%'
                                            right: 22%
                                            top: 51%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_led_on
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: icon
                                        - icon: 'mdi:monitor-off'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            right: 3%
                                            top: 51%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_led_off
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: icon
                                        - icon: 'mdi:bell'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            margin-right: '-10%'
                                            right: 22%
                                            top: 68%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_buzzer_on
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: icon
                                        - icon: 'mdi:lock-alert'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            margin-right: '-10%'
                                            right: 22%
                                            top: 87%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_child_lock_on
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: icon
                                        - icon: 'mdi:bell-off-outline'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            right: 3%
                                            top: 68%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_buzzer_off
                                            service_data:
                                              entity_id: fan.kxiaomi_miio_device
                                          type: icon
                                        - icon: 'mdi:lock-open-outline'
                                          style:
                                            '--iron-icon-height': 22px
                                            '--iron-icon-width': 22px
                                            right: 3%
                                            top: 87%
                                          tap_action:
                                            action: call-service
                                            service: xiaomi_miio.fan_set_child_lock_off
                                            service_data:
                                              entity_id: fan.xiaomi_miio_device
                                          type: icon
                                      image: /local/house/purifier7.png
                                      type: picture-elements
                                  type: 'custom:vertical-stack-in-card'
                                style: |
                                  ha-card {
                                    border: 1px solid rgba(57,128,228);
                                    --ha-card-background: rgba(0,0,20,0.6);
                                    border-radius: 15px
                                  }    
                                type: 'custom:mod-card'
                              - entities:
                                  - cards:
                                      - entities:
                                          - entity: >-
                                              automation.legtisztito_bekapcsolasa_hazaerkezeskor
                                          - >-
                                            automation.legtisztito_kikapcsolasa_tavozaskor
                                          - type: divider
                                          - >-
                                            automation.legtisztito_bekapcsolasa_ebredeskor
                                          - >-
                                            automation.legtisztito_kikapcsolasa_alvaskor
                                          - type: divider
                                          - >-
                                            automation.legtisztito_bekapcsolasa_aqi_alapjan
                                          - entity: input_number.purifier_aqi_treshold
                                            hide_state: false
                                            type: 'custom:slider-entity-row'
                                          - type: divider
                                          - >-
                                            automation.legtisztito_kikapcsolasa_aqi_alatt_1_oran_at
                                          - entity: input_number.purifier_aqi_treshold_off
                                            hide_state: false
                                            type: 'custom:slider-entity-row'
                                        style: >
                                          ha-card {
                                            border: 1px solid rgba(57,128,228);
                                            --ha-card-background: rgba(0,0,20,0.6);
                                            border-radius: 15px
                                          }                                                  
                                        type: entities
                                    popup: timeout
                                    type: 'custom:love-lock-card'
                                show_header_toggle: false
                                style: |
                                  ha-card {
                                    border: 1px solid rgba(57,128,228);
                                    --ha-card-background: rgba(0,0,20,0.6);
                                    border-radius: 15px
                                  }                                      
                                title: Légtisztító beállítások
                                type: entities
                            parameters:
                              allowTouchMove: false
                              centeredSlides: false
                              keyboard:
                                enabled: true
                                onlyInViewport: true
                              navigation: null
                              pagination:
                                type: progressbar
                              slidesPerView: auto
                              spaceBetween: 40
                            type: 'custom:swipe-card'
                          deviceID:
                            - this
                            - dashboard
                          large: false
                          style:
                            background-color: 'rgba(0,0,20,0.6)'
                            background-repeat: no-repeat
                            background-size: 100% 100%
                            border-radius: 15px
                            top: 0
                            width: 40%
                          title: Légtisztító

What is wrong in my code?

Thanks for help!

VDRainer · August 5, 2020, 12:22pm

Should this also work for the replaced more-info dialogs and the (command) popups?
For me the style is only applied to the normal more-info popups.

tismondo · August 6, 2020, 3:29pm

Background: I’m experiencing a problem when using popups on android. The problem is consistent on Android using both a 10 inch tablet and pixel 3. I’ve tested both devices using the official android app, mobile chrome, and mobile firefox. The problem doesn’t occur on desktop chrome (I didn’t test other desktop browsers)

I use popups to display multiple cards at once (combined with vertical/horizontal stacks). They’re composed of some button-cards, some mini-graph-cards, and both mini-thermostat and simple-thermostat cards.

The problem: The thermostat cards (both simple-thermostat and mini-thermostat) don’t function on mobile devices when embedded in popups. I can toggle more-info, but can’t control the functions (changing hvac_mode or raising/lowering temperature).

Both thermostat cards work fine when used in regular lovelace (i.e. not popups). The cards also both work fine using desktop chrome in my popup. The problem is only when using either of those two cards (though potentially more), in popups, on a mobile device.

I’m having trouble pinpointing the problem and would greatly appreciate any help in isolating it!

benm7 · August 7, 2020, 1:07am

Basic question incoming! Am on 0.113.3, have upgraded Browser mod to 1.1.5 and card-mod to 2.0.0, and now my basic ‘more-info’ popups have lost their styling. The rounded edges and transparency are gone. I am sure there is a simple code to fix this, but would appreciate some help to get it working.

Popup Before:
Capture

Popup After:
Capture

Any help to update my styles code would be appreciated

Button code to trigger popup:

          - type: custom:decluttering-card
            template: climate_button_card
            variables:
              - entity:  climate.air_conditioner
              - name: Main AC
              - icon: circle
              - tap_action: 
                  action: more-info
                  haptic: light

‘more-info’ Popup code (example, not the exact popup shown in picture):

  sensor.dark_sky_summary:
    title: Weather
    style:
      border-radius: 12px
      background: var(--homekit-transparent)
    card:
      type: vertical-stack
      style: |
        ha-card {
          border-radius: 12px;
          background: var(--homekit-transparent);
        }
      cards:
        - type: horizontal-stack
          cards:
            - type: 'custom:button-card'
              color_type: blank-card
              styles:
                card:
                  - width: 10px
            - type: weather-forecast
              style: |
                ha-card {
                  border-radius: 12px;
                  overflow: hidden;
                  box-shadow: none;
                  background-image: none;
                  background-color: transparent;
                }
              entity: weather.dark_sky
            - type: 'custom:button-card'
              color_type: blank-card
              styles:
                card:
                  - width: 10px
        - type: iframe
          style: |
            ha-card {
              border-bottom-left-radius: 12px;
              border-bottom-right-radius: 12px;
              overflow: hidden;
              box-shadow: none;
            }
          aspect_ratio: 60%
          url: https://embed.windy.com/?900h,rain,-33.941,150.974,8

thomasloven · August 7, 2020, 2:14pm

thomasloven · August 7, 2020, 2:14pm

Just released Browser_mod 1.1.6 allows you to set your deviceID manually!

photo64 · August 7, 2020, 7:38pm

I have a lovelace view that calls a popup window via the reuseable browser_mod popup card that in turn also calls a browser_mod popup card via a script. This was working correctly in the prior version of browser_mod and HA 0.112 however in the latest version of 0.113 and browser_mod 1.1.6 I can’t get the popup window to show via the script. The initial reusable popup window appears but trying to trigger the popup window via the script is not doing anything. When looking at the cookbook examples it seems the config may have slightly changed but even with making this change to my config the popup window via the script isn’t working. Here is what my config looks like.

Config to trigger reusable popup card <- this is working

tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    deviceID: this
    <<: *monitoredplug_card

Config to trigger popup via script (this is based on the cookbook example) This is called from the reusable popup card. <- this is not working

tap_action:
  action: call-service
  service: script.sonoffwasher_popup
  service_data:
    deviceID:
      - this

This was my prior config to call a popup via a script that worked in 0.112 but is not working in 0.113 (again this is what I was using in the reusable popup card to call another popup card via a script.

tap_action:
  action: call-service
  service: script.turn_on
  service_data:
    entity_id: script.sonoffwasher_popup

Is the ability to call a popup via a script from within a reusable popup card no longer doable or is my config incorrect now with the version 1.1.6?

daneboom · August 9, 2020, 6:50pm

Just wondering - auto-closing (after a delay) of a more-info box isn’t working for me, should it ?

      - service: browser_mod.command
        data:
          command: more-info
          entity_id: camera.caller
          large: true
          deviceID:
            - 7d823333-a8333fe5
      - delay: '00:01:00'            
      - service: browser_mod.close_popup

Olle · August 9, 2020, 11:39pm

At the moment browser_mod.popup is displaying correctly in Safari on MacOS (ie. center of browser window) like this:

When loaded through the mobile app on iOS, the popup shows as below

Anyone know how to fix this?

rationi_meae · August 10, 2020, 12:30am

How do I remove the state text? It is of “type: custom:mini-media-player” that I have in a browser_mod.popup.

state_text

KTibow · August 10, 2020, 1:35am

If it’s mini-media-player, it’s its problem, not browser mod.

thomasloven · August 10, 2020, 7:46am

On mobile, all popups are displayed in full screen. You’d need to center the buttons in the popup window somehow - it’s clear they are not exactly centered in the computer screenshot either.