Hi again
Got this error today? Should I worry about it?
No, Home Assistant takes care of this stuff. It should work just fine, but please make an issue on GitHub or comment on an existing one.
Iāve got a recent issue under BM 1.1.5 and HA 0.113.3. If I add the following script to my doorbell actions automation, the rest of the automation does not fire until the BM script has finished. The other scripts do not do that. Is that normal? My Xiaomi gateway used to ring when the doorbell is pushed but now it does it 30s after the doorbell was pushed (when the BM script navigates my tablet back to the default tab).
P.S Love this Integration!
alias: 'Switch Kitchen Tablet to Camera TAB for 30s'
sequence:
- service: browser_mod.navigate
data:
navigation_path: /lovelace-tablets/camera
deviceID:
- samsung10_fkb
- delay: 00:00:30
- service: browser_mod.navigate
data:
navigation_path: /lovelace-tablets/tablets
deviceID:
- samsung10_fkb
trigger:
- platform: event
event_type: deconz_event
event_data:
id: doorbell_button
event: 1000
action:
- service: camera.snapshot
data:
entity_id: camera.proxy_entry_720_2fps
filename: '/config/www/images/doorbell_event.jpg'
- service: rest_command.fully_kiosk_kitchen_playsound
data:
sound: 'doorbell_classic.mp3'
- service: script.control_kitchen_tablet
- service: xiaomi_aqara.play_ringtone
data:
gw_mac: !secret xiaomi_mac
ringtone_id: 10
ringtone_vol: 30
Seems the issue is not related to the BM script, sorry about that. Any script with a delay causes the same problem.
Hello,
Is it possible to blur the background when I pop up a card?
You could use card-mod themes to apply styling to all more-info dialogs, not sure if that would apply to browser-mod dialogsā¦
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
This is what my code looks like right now, Iām trying to make a screensaver, a black background or a blurred background would be perfectly fine.
I will checkout card-mod themes.
Hereās a bit of a start.
Youāll need to have card-mod installed and find the right place to apply a backdrop-filter.
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
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!
1 Like
@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.
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.
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.
1 Like
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.
2 Likes
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.
1 Like
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;
}
2 Likes
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:
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!
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.
1 Like
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!
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:
Popup After:
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