I am trying the browser mod and I don’t know why there are auto-generated new entities. Like the one on the screenshot. I only have on simple popup card for list of entities so far. Thanks for clarification
Hi,
Have a very long code for tv remote with vertical and horizontal cards and custom button cards which is working perfect.
Want to use with browser mod but I tryed it a lot and not working at developer tools - call service.
This is the code, where is the problem? Please help. TY.
service: browser_mod.popup
data:
title: Popup example
deviceID:
- nappali_tablet
cards:
- cards:
- color: auto
color_type: card
entity: media_player.samsungtv
icon: mdi:power
name: TV
show_state: false
size: 15%
state:
- color: rgb(255, 0, 0)
styles:
name:
- font-weight: bold
value: 'off'
- color: rgb(189, 255, 5)
styles:
name:
- font-weight: bold
value: 'on'
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.samsungtv
type: custom:button-card
- color: auto
color_type: card
icon: mdi:home
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_HOME
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:shuffle-variant
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_SOURCE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:exit-run
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RETURN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:volume-minus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLDOWN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-mute
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_MUTE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-plus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLUP
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:rewind
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_REWIND
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:play-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PLAY
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:pause-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PAUSE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:fast-forward
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_FF
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-up-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_UP
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- icon: mdi:arrow-left-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_LEFT
media_content_type: send_key
type: custom:button-card
- icon: mdi:check-outline
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_ENTER
media_content_type: send_key
type: custom:button-card
- icon: mdi:arrow-right-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RIGHT
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-down-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_DOWN
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/netflix1.png
icon: mdi:netflix
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Netflix
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/plex.png
icon: mdi:plex
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Plex
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/youtube.png
icon: mdi:youtube
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: YouTube
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/spotify.png
icon: mdi:spotify
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Spotify – Zenék és podcastok
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/redcircle.png
icon: mdi:numeric-1-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RED
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/greencircle.png
icon: mdi:numeric-2-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_GREEN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/yellowcircle.png
icon: mdi:numeric-3-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_YELLOW
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/bluecircle.png
icon: mdi:numeric-4-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_CYAN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: auto
color_type: card
icon: mdi:alpha-z-box
name: Box wake
size: 20%
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgBQAAABKZEVNhQ2FDYVERQRFDYVERQRFTYUERQ2FTUVERQRFTYUNhQSFBEUERURFBEVERQRFBEVNhQ2FDYVNhQ2FDYVNRU2FAAE/wABKUgVAA0FAAAAAAAAAAA=
type: custom:button-card
- color: auto
color_type: card
entity: media_player.zgemmah7s
icon: mdi:power
name: Box
size: 20%
state:
- color: rgb(255, 0, 0)
styles:
name:
- font-weight: bold
value: 'off'
- color: rgb(189, 255, 5)
styles:
name:
- font-weight: bold
value: 'on'
styles:
name:
- state: value
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.zgemmah7s
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: rgb(189, 255, 5)
icon: mdi:weather-windy
label: Wing On
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: rgb(189, 255, 5)
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABYAAkhiAAEnEw8SLw8SDxIRDxIPEw4TDhIOEy8TDhIOEy8TDhMNEzASLw8yDzEULxIPEw4TDhIOEw4TDhMOEg4TDhMOEw4SDxIPDxIOEg8SEg8SDhMOEw4TDhMNEw4TDhIPEg4SDxMOEw4SDxIPDxIPMhIvEjATLhNgZQABJBMvEg4TDhMOEw4SDxEQERAPEQ8zEQ8SDxMvEy4TLxMuEg8SLxMwETAPEg8yDxISLxMvEw4TDRMOEjASLxIwEg4SEBEQEg4PEg8SDzISDxMOEi8TDhMuEjASDxIOEw4TDxIOERAPEg8SDzISMBEwEy4SAA0FAAAAAAAA
type: custom:button-card
- color: red
icon: mdi:weather-windy
label: Wing Off
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: red
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABMAAktjAAElEg8SMBEQDxIPEg8RDxISDxIOEjASDxEPEjAQEREPEjASMBExDzIPMw8REBESDxAQEg8SDxIPEQ8QERAREBERDxIQERAPEQ8SDxIPERAREg8SDxAQEBEQERAREQ8SDxAREBEQEBASERAQMQ8zDzISMA9jYgABJxAyEBEPERAREBEQEBIQDxIPEQ8zDxIPERAwEhEPMhAxEBEQMhAxEDIQMg8yDzMPMhIwEBEPERAREDEQMhAxEBEQEg8RDxIPEg8SDzIQERARDzIQERAxEDIQEBAREg8QEg8RDxIPEg8RDzMPMhAyEDEQAA0FAAAAAAAA
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
type: vertical-stack
I tried something similar before as well. I found out, that only the entities card can be handled as popup with browser_mod. My solution: Create another screen in your dashbord and link to that. For example:
Pushing on this buttom
leads to this screen:
You need a “back” button in order to get back to the origin.
On my mobile and tablet, it fits perfectly to the screen
It is working!! Just now after a lot of modification working good from call service.
Now must make a button for it tap action. Another problem for me, don’t know how to paste this code to button.
Here is the code:
service: browser_mod.popup
data:
title: RemoteControl
deviceID:
- pincepc
card:
cards:
- cards:
- color: auto
color_type: card
entity: media_player.samsungtv
icon: mdi:power
name: TV
show_state: false
size: 15%
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.samsungtv
type: custom:button-card
- color: auto
color_type: card
icon: mdi:home
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_HOME
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:shuffle-variant
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_SOURCE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:exit-run
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RETURN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:volume-minus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLDOWN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-mute
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_MUTE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-plus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLUP
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:rewind
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_REWIND
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:play-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PLAY
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:pause-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PAUSE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:fast-forward
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_FF
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-up-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_UP
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- icon: mdi:arrow-left-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_LEFT
media_content_type: send_key
type: custom:button-card
- icon: mdi:check-outline
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_ENTER
media_content_type: send_key
type: custom:button-card
- icon: mdi:arrow-right-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RIGHT
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-down-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_DOWN
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/netflix1.png
icon: mdi:netflix
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Netflix
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/plex.png
icon: mdi:plex
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Plex
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/youtube.png
icon: mdi:youtube
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: YouTube
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/spotify.png
icon: mdi:spotify
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Spotify – Zenék és podcastok
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/redcircle.png
icon: mdi:numeric-1-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RED
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/greencircle.png
icon: mdi:numeric-2-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_GREEN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/yellowcircle.png
icon: mdi:numeric-3-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_YELLOW
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/bluecircle.png
icon: mdi:numeric-4-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_CYAN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: auto
color_type: card
icon: mdi:alpha-z-box
name: Box wake
size: 20%
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgBQAAABKZEVNhQ2FDYVERQRFDYVERQRFTYUERQ2FTUVERQRFTYUNhQSFBEUERURFBEVERQRFBEVNhQ2FDYVNhQ2FDYVNRU2FAAE/wABKUgVAA0FAAAAAAAAAAA=
type: custom:button-card
- color: auto
color_type: card
entity: media_player.zgemmah7s
icon: mdi:power
name: Box
size: 20%
state:
- color: rgb(255, 0, 0)
styles:
name:
- font-weight: bold
value: 'off'
- color: rgb(189, 255, 5)
styles:
name:
- font-weight: bold
value: 'on'
styles:
name:
- state: value
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.zgemmah7s
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: rgb(189, 255, 5)
icon: mdi:weather-windy
label: Wing On
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: rgb(189, 255, 5)
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABYAAkhiAAEnEw8SLw8SDxIRDxIPEw4TDhIOEy8TDhIOEy8TDhMNEzASLw8yDzEULxIPEw4TDhIOEw4TDhMOEg4TDhMOEw4SDxIPDxIOEg8SEg8SDhMOEw4TDhMNEw4TDhIPEg4SDxMOEw4SDxIPDxIPMhIvEjATLhNgZQABJBMvEg4TDhMOEw4SDxEQERAPEQ8zEQ8SDxMvEy4TLxMuEg8SLxMwETAPEg8yDxISLxMvEw4TDRMOEjASLxIwEg4SEBEQEg4PEg8SDzISDxMOEi8TDhMuEjASDxIOEw4TDxIOERAPEg8SDzISMBEwEy4SAA0FAAAAAAAA
type: custom:button-card
- color: red
icon: mdi:weather-windy
label: Wing Off
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: red
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABMAAktjAAElEg8SMBEQDxIPEg8RDxISDxIOEjASDxEPEjAQEREPEjASMBExDzIPMw8REBESDxAQEg8SDxIPEQ8QERAREBERDxIQERAPEQ8SDxIPERAREg8SDxAQEBEQERAREQ8SDxAREBEQEBASERAQMQ8zDzISMA9jYgABJxAyEBEPERAREBEQEBIQDxIPEQ8zDxIPERAwEhEPMhAxEBEQMhAxEDIQMg8yDzMPMhIwEBEPERAREDEQMhAxEBEQEg8RDxIPEg8SDzIQERARDzIQERAxEDIQEBAREg8QEg8RDxIPEg8RDzMPMhAyEDEQAA0FAAAAAAAA
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
type: vertical-stack
Now everything working, here is the code:
type: custom:button-card
icon: mdi:remote
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
title: Távirányító
deviceID:
- nappali_tablet
card:
cards:
- cards:
- color: auto
color_type: card
entity: media_player.samsungtv
icon: mdi:power
name: TV
show_state: false
size: 15%
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.samsungtv
type: custom:button-card
- color: auto
color_type: card
icon: mdi:home
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_HOME
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:shuffle-variant
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_SOURCE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:exit-run
size: 35%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RETURN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:volume-minus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLDOWN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-mute
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_MUTE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:volume-plus
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_VOLUP
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
icon: mdi:rewind
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_REWIND
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:play-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PLAY
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:pause-circle
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_PAUSE
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
icon: mdi:fast-forward
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_FF
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-up-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_UP
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- icon: mdi:arrow-left-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_LEFT
media_content_type: send_key
type: custom:button-card
- icon: mdi:check-outline
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_ENTER
media_content_type: send_key
type: custom:button-card
- icon: mdi:arrow-right-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RIGHT
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- icon: mdi:arrow-down-bold-circle
size: 30%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_DOWN
media_content_type: send_key
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/netflix1.png
icon: mdi:netflix
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Netflix
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/plex.png
icon: mdi:plex
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Plex
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/youtube.png
icon: mdi:youtube
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: YouTube
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/spotify.png
icon: mdi:spotify
show_entity_picture: true
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.samsungtv
source: Spotify – Zenék és podcastok
type: custom:button-card
type: horizontal-stack
- cards:
- color: auto
color_type: card
entity_picture: /local/redcircle.png
icon: mdi:numeric-1-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_RED
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/greencircle.png
icon: mdi:numeric-2-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_GREEN
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/yellowcircle.png
icon: mdi:numeric-3-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_YELLOW
media_content_type: send_key
type: custom:button-card
- color: auto
color_type: card
entity_picture: /local/bluecircle.png
icon: mdi:numeric-4-circle
show_entity_picture: true
size: 25%
tap_action:
action: call-service
service: media_player.play_media
service_data:
entity_id: media_player.samsungtv
media_content_id: KEY_CYAN
media_content_type: send_key
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: auto
color_type: card
icon: mdi:alpha-z-box
name: Box wake
size: 20%
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgBQAAABKZEVNhQ2FDYVERQRFDYVERQRFTYUERQ2FTUVERQRFTYUNhQSFBEUERURFBEVERQRFBEVNhQ2FDYVNhQ2FDYVNRU2FAAE/wABKUgVAA0FAAAAAAAAAAA=
type: custom:button-card
- color: auto
color_type: card
entity: media_player.zgemmah7s
icon: mdi:power
name: Box
size: 20%
state:
- color: rgb(255, 0, 0)
styles:
name:
- font-weight: bold
value: 'off'
- color: rgb(189, 255, 5)
styles:
name:
- font-weight: bold
value: 'on'
styles:
name:
- state: value
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.zgemmah7s
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
- cards:
- color_type: blank-card
type: custom:button-card
- color: rgb(189, 255, 5)
icon: mdi:weather-windy
label: Wing On
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: rgb(189, 255, 5)
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABYAAkhiAAEnEw8SLw8SDxIRDxIPEw4TDhIOEy8TDhIOEy8TDhMNEzASLw8yDzEULxIPEw4TDhIOEw4TDhMOEg4TDhMOEw4SDxIPDxIOEg8SEg8SDhMOEw4TDhMNEw4TDhIPEg4SDxMOEw4SDxIPDxIPMhIvEjATLhNgZQABJBMvEg4TDhMOEw4SDxEQERAPEQ8zEQ8SDxMvEy4TLxMuEg8SLxMwETAPEg8yDxISLxMvEw4TDRMOEjASLxIwEg4SEBEQEg4PEg8SDzISDxMOEi8TDhMuEjASDxIOEw4TDxIOERAPEg8SDzISMBEwEy4SAA0FAAAAAAAA
type: custom:button-card
- color: red
icon: mdi:weather-windy
label: Wing Off
show_label: true
size: 25%
styles:
card:
- background-color: '#000044'
- border-radius: 50%
- padding: 3%
- color: black
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- '-webkit-box-shadow': 3px 3px 3px 3px rgba(0,0,0,0.45)
- box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.45)
label:
- color: red
- font-weight: bold
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.broadlink
command: >-
b64:JgDyABMAAktjAAElEg8SMBEQDxIPEg8RDxISDxIOEjASDxEPEjAQEREPEjASMBExDzIPMw8REBESDxAQEg8SDxIPEQ8QERAREBERDxIQERAPEQ8SDxIPERAREg8SDxAQEBEQERAREQ8SDxAREBEQEBASERAQMQ8zDzISMA9jYgABJxAyEBEPERAREBEQEBIQDxIPEQ8zDxIPERAwEhEPMhAxEBEQMhAxEDIQMg8yDzMPMhIwEBEPERAREDEQMhAxEBEQEg8RDxIPEg8SDzIQERARDzIQERAxEDIQEBAREg8QEg8RDxIPEg8RDzMPMhAyEDEQAA0FAAAAAAAA
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: horizontal-stack
type: vertical-stack
1 Like
You gave me the right hint as well.
Thank you 
Hi all,
Since yesterday, my popups don’t open. Mobile IOS or even laptop (Chrome).
I found the below error in browser console:
card-mod.js:1 Uncaught (in promise) TypeError: this._requestUpdate is not a function
at HTMLElement.set (card-mod.js:1)
at styles.ts:365
at Array.forEach (<anonymous>)
at HTMLElement.value (styles.ts:365)
at HTMLElement.value (home-assistant.ts:66)
at HTMLElement._$AE (styles.ts:365)
at HTMLElement.performUpdate (styles.ts:365)
at HTMLElement.scheduleUpdate (styles.ts:365)
at HTMLElement._$EC (styles.ts:365)
Is it just me? I’m using all latest versions of addon and Home assistant.
EDIT: Issue is with CARD MOD, will paste in that chat.
I have problem with browser-mod popup
This is screensaver popup, and it wont cover whole screen on tablet
And what did you try until now to make it fullscreen / what is the starting point?
I tried to change some values on json.file, width, height
But nothing
take this
style: |
ha-dialog {
--mdc-dialog-min-width: 750px !important;
--mdc-dialog-max-width: 1080px !important;
}
.content {
width: auto !important;
}
or that
style: |
@media (min-width: 812px) {
:host .content {
width: 90vw;
height: 80vh;
}
}
@media (min-width: 1400px) {
:host .content {
width: 75vw;
height: initial;
}
}
both with card-mod as starting points
Where to change this values, or add
Thx for help
Hm. At the point, where you try to open the popup. E.g. on a button.
type: button
show_name: false
show_icon: true
show_state: false
entity: light.alle_lampen
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Licht
large: false
style: |
@media (min-width: 812px) {
:host .content {
width: 90vw;
height: 80vh;
}
}
@media (min-width: 1400px) {
:host .content {
width: 75vw;
height: initial;
}
}
card:
1 Like
It is automation, every 2 minutes
Sorry. With this level of information or without any state, what you tried where and how, code examples, reading of the browser-mod-documentation, some tries on your own, … I’m not able to help.
i am at home now
command: popup
deviceID:
- 5a17bf1a-e810e244
title: ' '
hide_header: true
large: true
style:
'--primary-text-color': rgba(255,255,255,1)
'--paper-card-background-color': black
'--iron-icon-stroke-color': black
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
justify-content: flex-end;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width: 100%;
box-shadow:none;
}
.mdc-dialog__content {
font-family: Roboto;
font-weight: 100
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,1);
--mdc-dialog-min-height: 0%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
tap_action:
action: call-service
service: screensaver_off
card:
cards:
- elements:
- type: conditional
conditions:
- entity: sensor.razno
state: tomorrow
elements:
- type: state-icon
color: '#ffffff'
entity: sensor.razno
style:
font-size: 20vw
left: 21%
top: 15%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: calendar.obiteljski
state: 'on'
elements:
- type: state-icon
state-color: true color
entity: calendar.obiteljski
style:
font-size: 20vw
left: 11%
top: 15%
'--mdc-icon-size': 32px
- aspect_ratio: 5%
entity: sensor.date
style:
color: '#ffffff'
font-size: 6vw
left: 43%
top: 35%
type: state-label
- entity: sensor.time
style:
color: '#ffffff'
font-size: 10vw
left: 43%
top: 22%
type: state-label
- entity: sensor.temperature_158d00044fff2a
style:
color: '#ffffff'
font-size: 6vw
left: 10%
top: 45%
type: state-label
- entity: sensor.humidity_158d00044fff2a
style:
color: '#ffffff'
font-size: 4vw
left: 10%
top: 55%
type: state-label
- entity: sensor.temperature_158d0005363101
style:
color: '#ffffff'
font-size: 6vw
left: 75%
top: 45%
type: state-label
- entity: sensor.humidity_158d0005363101
style:
color: '#ffffff'
font-size: 4vw
left: 75%
top: 55%
type: state-label
- type: icon
icon: mdi:home-circle-outline
tap_action:
action: toggle
entity: script.1583272218529
style:
color: '#2582cf'
font-size: 20vw
left: 43%
top: 95%
'--mdc-icon-size': 62px
- type: icon
icon: mdi:bed-outline
tap_action:
action: toggle
entity: script.spavanje
style:
color: '#ffffff'
font-size: 20vw
left: 63%
top: 95%
width: 20px
'--mdc-icon-size': 32px
- type: icon
icon: mdi:movie-open-outline
tap_action:
action: toggle
entity: script.movie_night
style:
color: '#ffffff'
font-size: 20vw
left: 53%
top: 95%
'--mdc-icon-size': 32px
- type: icon
icon: mdi:robot-vacuum
tap_action:
action: toggle
entity: script.usisavanje
style:
color: '#ffffff'
font-size: 20vw
left: 73%
top: 95%
'--mdc-icon-size': 32px
- type: icon
icon: mdi:radio
tap_action:
action: toggle
entity: script.radio
style:
color: '#ffffff'
font-size: 20vw
left: 13%
top: 95%
'--mdc-icon-size': 32px
- type: icon
icon: mdi:air-conditioner
tap_action:
action: toggle
entity: script.hladenje
style:
color: '#ffffff'
font-size: 20vw
left: 33%
top: 95%
'--mdc-icon-size': 32px
- type: icon
icon: mdi:chef-hat
tap_action:
action: toggle
entity: switch.chuangmi_plug_hmi206
style:
color: '#ffffff'
font-size: 20vw
left: 23%
top: 95%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: group.sve_klime
state: 'on'
elements:
- type: state-icon
state-color: true color
entity: group.sve_klime
tap_action:
action: toggle
style:
font-size: 20vw
left: 71%
top: 15%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: light.philips_light_hbulb_5
state: 'on'
elements:
- type: state-icon
state-color: true color
entity: light.philips_light_hbulb_5
tap_action:
action: toggle
style:
font-size: 20vw
left: 81%
top: 15%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: group.rasvjeta_vanjska
state: 'on'
elements:
- type: state-icon
state-color: true color
entity: group.rasvjeta_vanjska
tap_action:
action: toggle
style:
font-size: 20vw
left: 61%
top: 15%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: group.senzori_vrata
state: 'on'
elements:
- type: state-icon
state-color: true color
entity: group.senzori_vrata
tap_action:
action: toggle
style:
font-size: 20vw
left: 85%
top: 15%
'--mdc-icon-size': 32px
- type: conditional
conditions:
- entity: alarm_control_panel.xiaomi_gateway_alarm
state: armed_away
elements:
- type: state-icon
entity: alarm_control_panel.xiaomi_gateway_alarm
tap_action:
action: service-button
service: alarm_control_panel.xiaomi_gateway_alarm
service_data:
entity:id: alarm_control_panel.xiaomi_gateway_alarm
style:
color: '#f50f07'
font-size: 20vw
left: 2%
top: 15%
'--mdc-icon-size': 32px
image: https://wallpaperaccess.com/full/38119.jpg
type: picture-elements
type: vertical-stack
styles:
card:
- width: 110%
color: '#ffffff'
font-size: 3vw
right: 20%
bottom: 20%
state:
- color: rgba(255,255,255,1)
- font-weight: 100
- font-size: 170px
This is script that automation turns on every 2 min
I just installed this, but it seems my Android App will not generate a device ID, and so popups won’t work.
I’ve restarted HA, force stopped and deleted cache on the androind app, and refreshed the page. No device ID generated. If I use Chrome on my phone, i get a device ID right away.
Any ideas on what else I can do to force the android app to trigger generation of a device ID?
EDIT: Android Settings → Apps → Home Assistant → Storage → Clear DATA (not cache)
After that, open the app, log in again, and it will generate a new device ID.
@thomasloven, what a GREAT integration! Am working on a nightstand tablet lovelace with an alarm clock, and couldn’t figure how to play alarm sounds through just that tablet; and not utilizing Alexa. Though there might have been another way to do this, I’m just happy to have it working. I think some of the other browser mod options may also come in handy. Also love auto-entities and slider-entity-row.
Is it possible to use browser-mod to expand the collapse attributes on the more-info pop-up, without entirely replacing the standard more-info card? I’m looking for a way to not have to click a second time (on attributes) every time I click for more-info.
1 Like
Edit: I went the route of replacing the sensor with a custom popup as instructed by the readme instead of calling a custom popup on tap action.
Hi! I’ve created a popup that helps read a small chart that’s using ApexCharts card and it’s perfect! Well, almost. Anytime someone taps on the header item that’s supposed to open the popup, it of course opens up on all devices. I tried converting it to fire-dom-event, but it seems that ApexCharts card doesn’t support it. Or am I doing something wrong?
Any thoughts on how to get ApexCharts to support local popups? Or maybe I could have a deviceID set dynamically to the device from which the action originated. Has anyone tried that?
