is there any solution for this?
blur behind a popup and also transparency, is such nice effect that sould be incorporated in browse mod
something like
popup_blur: true
popup_transparency: true
2 Likes
I use the HomeKit Pannel Card with various popup cards like light-popup-card and layout-card. How do I call these popups now in version 2?
An example from my config that worked in the previous 1.5 version:
- entity: light.local_tuya_living_room_lamp
name: Lamp
icon: mdi:lamp
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
color: '#13485f'
Just updated to Browser Mod 2.1 and my pop up isnāt working after updating the code.
Old PopUp Code (v1.5):
- cards:
- aspect_ratio: 50%
entity: camera.radar
show_name: false
show_state: false
style: 'ha-card { height: 180px; }'
type: picture-entity
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
deviceID: this
auto_close: true
content:
card:
image: /local/images/Sat_Rad.JPG
type: picture
style:
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0.5);
--ha-card-background: rgba(0,0,0,0.5);
}
:host .content {
width: 80vw;
height: 70vh;
}
type: horizontal-stack
New Popup Code:
- cards:
- aspect_ratio: 50%
entity: camera.radar
show_name: false
show_state: false
style: 'ha-card { height: 180px; }'
type: picture-entity
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
image: /local/images/Sat_Rad.JPG
type: picture
type: horizontal-stack
What am I doing wrong?
nothing wrong with code seems to work ok
did you register browsers
Thanks for the suggestion, when I went to check the integration page, it showed Browser_Mod failed to loadā¦A reboot cured it.
ādialog-backdrop-filter: blur(2em) brightness(0.75);
you can start from this ā¦
1 Like
Iām having trouble specifying an action from the additional right and left buttons. I canāt call the navigate service.
right_button_action:
action: navigate
navigation_path: /lovelace-tablet/server_ha
right_button_action:
service: browser_mod.navigate
data:
path: /lovelace-tablet/server_ha
Resolved!
with version 2.1.1 its working the blur
data:
card_mod:
style:
ha-dialog$: |
div {
backdrop-filter: blur(3px) !important;
background-color: transparent !important
}
.mdc-dialog .mdc-dialog__surface {
box-shadow: none;
}
3 Likes
Having trouble porting over from 1.x. Iām calling browser_mod from my frontend like this:
tap_action:
action: fire-dom-event
browser_mod:
service: script.mudroom_lights_menu_test
data:
browser_id: THIS
groupID: group.mudroom_lights
And invoking the pop-up from a script like this:
mudroom_lights_menu_test:
sequence:
- service: browser_mod.popup
data:
title: TITLE
content:
type: entities
entities:
- entity: sensor.motion_count
- entity: sensor.door_count
- service: system_log.write
data:
message: "Popup was clicked in {{browser_id}}"
Nothing ever pops up, however the log entry is written correctly, so I know the script is getting called.
If I embed the pop content directly on the client, the popup works just fine. What am I doing wrong? This is the same pattern I used in 1.x. Iāve tried various of combinations, but havenāt been able to figure this one out.
Thank you!
@kbed what is your expected outcome? Is it something like this?
Lights button to control multiple lights -
when pressed it calls more info and a pop up appears
clicking one light turns on All Lights
Hi,
Since last update things are working great. Thanks!
One small issue I am still having.
I am using the below card mod configuration in theme to remove the top padding inside popup.
It works fine on all the browsers, PC and Android tablets, however on iOS an iPadOS it behaves strange, it works the first time I open the popup, but next time the padding is back. If I just refresh the page it work again, and then next time padding is back again. As if I did not clean the cache, but I did of course.
ha-dialog$: |
.mdc-dialog .mdc-dialog__content {
padding-top: 0px !important;
-webkit-padding-before: 0px !important;
}
I think there is some inconsistency here only on iOS/iPadOS.
Yes. I have a button that represents every room in the house, when clicked it brings up the popup similar to your second screenshot where I can control on/off the individual light in the room. Works perfectly with the old browser_mod.
Have you tried a pop-up card?
type: custom:popup-card
entity: light.all_lights
title: All Lights
dismissable: true
card:
type: entities
entities:
- light.all_lights
- light.adelynns_closet_light
- light.adelynns_room_light
- light.backyard_security_light
- light.basement_light
- light.cafe_lights
- light.chandelier_light
So I use 2 cards
type: custom:mushroom-template-card
icon: mdi:lightbulb-group
primary: Lights
icon_color: |-
{% if is_state('light.all_lights', 'on') %}
orange
{% endif %}
layout: vertical
multiline_secondary: false
tap_action:
action: more-info
double_tap_action:
action: more-info
entity: light.all_lights
secondary: ''
and
type: custom:popup-card
entity: light.all_lights
title: All Lights
dismissable: true
card:
type: entities
entities:
- light.all_lights
- light.adelynns_closet_light
- light.adelynns_room_light
- light.backyard_security_light
- light.basement_light
- light.cafe_lights
- light.chandelier_light
- light.dinning_room_light
- light.entryway_light
- light.family_room_light
- light.front_yard_lights
- light.garage_light
- light.guest_bathroom_light
- light.guest_bedroom_closet_light
- light.guest_bedroom_light
- light.kids_bathroom_light
- light.kitchen_island_light
- light.kitchen_main_light
- light.kitchen_sink_light
- light.laundry_room_light
- light.living_room_light
- light.master_bathroom_main_light
- light.master_bathroom_shower_light
- light.master_bathroom_water_closet_light
- light.master_bedroom_light
- light.mudroom_light
- light.office_of_mike_light
- light.pantry_light
- light.stairs_to_upper_level_light
- light.upstairs_hallway_light
This makes it fire the popup
The second way is as a browser call. This is when the service is called from a dashboard
fire-dom-eventaction, as a part of abrowser_mod.sequencecall or as abrowser_mod.popup_action
Whats nice is 90% is through the gui now
Thanks. I was hoping I could use my existing setup with minimal tweaks. I make use of scripts and anchors and call the scripts with a parameter so to generalize the code. Would love to keep it this way as it is super clean, and would be a couple of hours of work to try and change it, to something like you mention above.
If Iām reading the documentation correct, it should be possible to call from server side and automations. If for some reasons I canāt do that in 2.x, I might just revert back until this can be done.
After updating to the newest browser mod the other day my popup is no longer workingā¦ anyone run into this?
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
title: John's Location
icon: mdi:car
card:
type: map
default_zoom: 15
entities:
- device_tracker.sm_f926u1
#- device_tracker.john_wade
aspect_ratio: 16:9
hours_to_show: 4
deviceID:
- this
- dashboard
Hi,
Iām stuck, please help. Want to insert a background imge in this popup card:
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
data:
title: DOOR
dismissable: false
timeout: 3000
style: |-
--popup-min-width: 500px; --popup-max-width: 670px;
--popup-border-radius: 10px;
--popup-background: url("/local/door.jpg");
--popup-border-width: var(--ha-card-border-width, 10px);
right_button: NO
right_button_action:
service: browser_mod.close_popup
data:
browser_id: tablet_nappali
left_button: Door Open/Close!
left_button_action:
service: switch.toggle
service_data:
entity_id: switch.electrodragon_rele1
This one is not working: --popup-background: url("/local/door.jpg");
So how to do that?
Thank You.
1 Like
Since the upgrade I am geeting this in the log
Logger: homeassistant.config_entries
Source: config_entries.py:349
First occurred: 09:47:51 (1 occurrences)
Last logged: 09:47:51
Migration handler not found for entry Browser Mod for browser_mod
Any ideas
Hi some yaml items are renamed. You should change this:
to
content:
type: map
1 Like