This worked!!! yay! Thank you! Thank you! Thank you!
Hey Thomas! awesome component! 
Is there any way, perhaps using browser-mod.command, to pass JSON to my iOS Kiosk App (Kiosker.app)?
I am trying to control some of the functions through (Screensaver) automations within HA.
This is the documentation they provide: https://docs.kiosker.io/#/javascript
Hi Thomas! Thank you so much for creating this awesome component. Itās changed my life!
Iām trying to get the auto close piece to work but for some reason, the video stays on the screen unless I touch it.
Here is the snippet from my Lovelace
- type: state-icon
icon: 'mdi:doorbell-video'
entity: camera.ring_livestream
entities:
- binary_sensor.front_door_motion
- binary_sensor.front_door_ding
style:
'--iron-icon-height': 1.7vw
'--iron-icon-width': 1.7vw
'--paper-item-icon-active-color': '#FFC30B'
'--paper-item-icon-color': darkgrey
align-items: center
background-color: '#FFFFFF'
border-radius: 100%
box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
display: flex
height: 3vw
justify-content: center
left: 48%
margin-left: '-1.5vw'
margin-top: '-1.5vw'
top: 8%
transform: scale(0.8)
width: 3vw
tap_action:
action: call-service
service: script.1614885540783
service_data:
deviceID:
- this
Here is the script:
alias: Pop-Up Front Door Camera
sequence:
- service: browser_mod.command
data:
command: popup
large: true
auto_close: true
card:
type: 'custom:more-info-card'
entity: camera.ring_livestream
deviceID:
- c786f126-fa551f33
mode: single
Here are my automations:
- id: '1614884315846'
alias: Popup Camera When Human Detected
trigger:
- platform: state
entity_id: binary_sensor.front_door_motion
to: 'on'
action:
- service: browser_mod.command
data:
command: more-info
entity_id: camera.ring_livestream
deviceID:
- c786f126-fa551f33
hide_entity: true
initial_state: 'true'
- id: '1614884405860'
alias: Popup Camera When Door Bell Pushed
trigger:
- platform: state
entity_id: binary_sensor.front_door_ding
to: 'on'
action:
- service: browser_mod.command
data:
command: more-info
entity_id: camera.ring_livestream
deviceID:
- c786f126-fa551f33
hide_entity: true
initial_state: 'true'
Is there a line of code somewhere that I am missing?
Thank you so much!
1 Like
From the documentation
The optional parameter auto_close: true will make the popup close automatically when the mouse is moved or a key is pressed on the keyboard. This also removes the header bar.
The optional parameter time: (only useable if auto_close: true is also set) will turn the popup into a "screensaver".
You have auto close so it will only close on mouse movement/touch
you need to set a time for how long before it closes.
HI. Is it possible to position the popup card at a specific location instead of opening up center on the screen?
A quick questionā¦
I need to use the deviceID in some javascript code. I.e., the deviceID of the browser that is executing the javascript (i.e, in lovelace). Is there an exposed function in browser_mod.js that I can call to get the deviceID? If not, what is the best way to get it?
browser_mod is the most awesome custom component of them all! Thanksā¦
1 Like
Hello guys, I need your help.
Iām trying to hide the header of this popup.
Iām using the code with āmore-infoā, so I cannot use the hide_header: true setting.
This is the style Iām applying to this card:
climate.daikin_camera:
large: true
title: Clima
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;
}
.mdc-top-app-bar {
background: none !important;
}
card:
type: 'custom:layout-card-griddier'
How dan I remove the Header?
EDIT:
I found out that if I uncheck the background-color: var(--secondary-background-color); the header background disappear. But I donāt know how to set this up on my code.
Hi,
I am using light-popup-card together with button-card. There I have an popup-up which has to be made through a service call. Looks something like this.
Does anyone have any ideas how I can make this work with 1.3.o update?
actions:
- service: light.turn_on
service_data:
*********
- service: light.turn_on
service_data:
**********
- service: browser_mod.popup
service_data:
deviceID: this
card:
******
Finally decided to upgrade browser_mod. But after going through the recent posts and documentaion I still donāt understand how to trigger a popup opening up a separate file in the popup.
I had:
- type: icon
icon: mdi:lan
title: Unifi
style:
top: 89%
left: 19%
color: rgba(255, 255, 255, 0.10)
padding: 0.8vw
--mdc-icon-size: 4vw
tap_action: !include popup/network.yaml
According to the documentation here, it should loook like this:
- type: icon
icon: mdi:lan
title: Unifi
style:
top: 89%
left: 19%
color: rgba(255, 255, 255, 0.10)
padding: 0.8vw
--mdc-icon-size: 4vw
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
service_data:
auto_close: true
<define the whole popup contents>
I donāt want to define the pop-up content inline, I still want to simply link to the separate file to load in the popup: !include popup/network.yaml How do I do that?
Oh well, I managed to fix this myself. I guess itās more a yaml thing than a browser_mod thing.
In the main file I have:
tap_action:
action: fire-dom-event
browser_mod: !include <path/filename>
In the separate file I have
command: popup
deviceID: this
service_data:
auto_close: true
<define the whole popup contents>
Hi @spudje,
I try put your code, but my popup not work.
My Card
type: 'custom:button-card'
entity: light.yeelight_ceiling1_0x0000000012c36329
tap_action:
action: fire-dom-event
browser_mod: '!include popup/test.yaml'
My file test.yaml
command: popup
service_data:
auto_close: false
card:
type: entities
entities:
- light.yeelight_ceiling1_0x0000000012c36329
deviceID:
- this
- desktop_pc
When I click on my button, nothing happens, no popup appears and I have no error displayed in the logs
Remove the quotes around ā!include popup/test.yamlā
And make sure the identation in the external file starts at the same level as the ābrowser_mod: !include popup/test.yamā line.
hi there
I need help with pop-up
Where it says Radio - it turns on script for radio station (double click), i would like to when hold to open card
on card entities
change radio station, change player, change volume, those are entities that i have
Help ?
When i try remove the quotes i have an error (unknown tag !<!include> at line 6, column 40:) and i canāt save modification.
I need include one file in the configuration.yaml for noting have this error ?
ok for indentation in the exeternal file, i make right indentation.
Thanks
Thank you to this community for such great content, and a GIANT thank you to @thomasloven for some fantastic developments that so many people are using!
Iām new to this community and also to Browser_mod. Iām trying to use a script that makes the browser on the userās workstation switch to a specific tab. Iāve spent a few days reviewing the documentation, changelog, and searching this community. But it seems most people are using this as a tap_action, where I only need it as part of a script. I know that ādeviceid: thisā and ā- thisā have been replaced by the use of fire.dom.event, but am not familiar with using this directly with HA rather than with a lovelace plugin. (Is that possible?)
My goal is that tap_action on a custom:button-card will do two things: Turn on the family room TV, and make the userās browser switch to the familyroom tab. To do that, Iāve created a script called activate_familyroom_tv, and use tap_action to call that script. But I want it actionable on any userās workstation, and thus want to avoid specifying a specific deviceID.
Here is a photo of my home dashboard that is calling the script:
Here is the relevant YAML code from the Family Room portion of my dashboard:
type: horizontal-stack
cards:
- type: 'custom:button-card'
name: FAMILY
color_type: label-card
color: 'rgb(0, 0, 0)'
icon: 'mdi:sofa'
size: 90%
styles:
card:
- height: 48px
- font-size: 1.5em
- font-weight: bold
grid:
- position: relative
- grid-template-areas: '"n"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content
show_icon: false
show_name: trie
hold_action:
action: none
tap_action:
action: navigation_path familyroom
- type: 'custom:button-card'
entity: remote.harmony_hub
hold_action:
action: none
icon: 'mdi:power'
name: Pwr
size: 90%
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
show_icon: true
show_name: true
state:
- color: 'rgb(0, 128, 0)'
value: 'off'
- color: 'rgb(255, 0, 0)'
value: 'on'
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.harmony_hub
activity: PowerOff
- type: 'custom:button-card'
entity: switch.harmony_hub_family_rm_tv
name: TV
color_type: card
color: auto
icon: 'mdi:television'
size: 90%
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
show_icon: true
show_name: true
state:
- color: 'rgb(0, 128, 0)'
value: 'on'
hold_action:
action: more-info
tap_action:
action: call-service
service: script.activate_familyroom_tv # Call script to turn on TV and switch to the familyroom tab.
- type: 'custom:button-card'
entity: switch.harmony_hub_family_rm_roku
name: Roku
color_type: card
color: auto
icon: 'mdi:youtube'
size: 90%
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
show_icon: true
show_name: true
state:
- color: 'rgb(0, 128, 0)'
value: 'on'
hold_action:
action: more-info
tap_action:
action: toggle
- type: 'custom:button-card'
entity: switch.harmony_hub_family_rm_alexa
name: Alexa
color_type: card
color: auto
icon: 'mdi:speaker'
size: 90%
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
show_icon: true
show_name: true
state:
- color: 'rgb(0, 128, 0)'
value: 'on'
hold_action:
action: more-info
tap_action:
action: toggle
square: false
columns: 5
And here is the script that Iām attempting to call, but I clearly donāt know how to do this properly.
activate_familyroom_tv:
alias: activate_familyroom_tv
sequence:
- type: turn_on
device_id: # DEVICE ID FOR FAMILY_RM_TV
entity_id: switch.harmony_hub_family_rm_tv
domain: switch
- action: fire.dom.event
browser_mod:
command: navigate:
navigation_path: /test-2021/familyroom
mode: single
For reference, here was the āoldā script before I learned that āthisā and ā- thisā were replaced.
activate_familyroom_tv:
alias: activate_familyroom_tv
sequence:
- type: turn_on
device_id: # DEVICE ID FOR FAMILY_RM_TV
entity_id: switch.harmony_hub_family_rm_tv
domain: switch
- service: browser_mod.navigate
data:
navigation_path: /test-2021/familyroom
- this
mode: single
Thanks in advance for your help. This is on Home Assistant core-2021.3.1 running in a VirtualBox running Home Assistant OS. (VirtualBox is itself running on Windows 10 on an Intel NUC.)
any way to make browser_mode blackout to make my tablet screen shows clock when there is no movement,
and help- cant change deviceID , to give them aliases
browser_mod:
devices:
bc2dfce6-615eaf9e:
name: desktop
doesnt work
I guess it only works when running Lovelace in full yaml mode?
!include only works in YAML mode. Either write down the complete entry what you have in popup/test.yaml or switch to YAML mode. Be advised: you canāt use the GUI mode if you use YAML mode. So then you have to write your Lovelace in YAML (which has many benefits, like !include).
Also, this error itself has nothing to do with configuration.yaml. So not sure what your doing or trying to do, but that wonāt solve anything.
Hi, I have problems to understand what changed with the updated and what I have to change, so hope you can help.
This is on my Lovelace dashboard as item
type: 'custom:button-card'
entity: group.all_light
icon: 'mdi:lightbulb-group-outline'
show_name: false
size: 60%
tap_action:
action: call-service
service: script.popup_all_light
service_data:
deviceID:
- this
and this is the script it should call to open a popup
service: browser_mod.popup
data:
deviceID: '{{ deviceID }}'
title: Licht
card:
type: grid
columns: 1
cards:
- type: grid
columns: 3
so this is not the full script but doesnāt matter. I also tried the sample from the readme for popup but could not get it to show up. Not local or on any device. This service call and script did work fine until the latest update.