Hey, your first post was missing the attribute, I added it in my quote. What error message are you getting? Iām not familiar with HACS as I install everything locally myself. But I could understand that in your first code example the hide_header attribute was missing because no title was set.
Did you try to add browser_mod without HACS?
okay without hacs it works.
i had another problem, i can paste by style what i want but nothing changes in the popup
tap_action:
action: call-service
service: browser_mod.popup
service_data:
style:
align-items: center
background-color: rgba(190, 190, 190, 0.2)
opacity: 0.2
padding-bottom: 50px
border-radius: 60px
'--ha-card-border-radius': 15px
'--ha-card-background': '#fff5bc'
hide_header: false
card:
cards:
Thanks, made my day as well.
okay, now i figured it out, the popup now works well.
i played a little bit with the css style functions.
in my firefox it works well. than i went to my tablet with fully kiosk browser, there works the css not, and then i checked my iphone with the official home assistant app, and there is NO css.
thats really weired,
can i do there something?
style: |
@media (min-width: 812px) {
:host .content {
width: 40vw;
overflow: hidden;
height: 28vh;
padding-top: 10px;
align-items: center;
background: center / cover no-repeat url("/local/profilbilder/background.jpg")
}
I do not use IPhones neither use fully kiosk.
I have an android tablet with wallpanel in full screen mode.
That works perfectly.
Maybe reduce some customizings and start simply with height and width.
My stomach feeling is, that the background item line causes problems on your other devices.
Is there a min-width fitting to the,edia query? This was only an example.
@arganto
yeah you are right, the
@media (min-width: 812px) {
caused the problem. i removed it and now it works on both devices.
the background image works fine. but thank you both
another question,
is it possible to save the code in a extra file? and include it in the lovelance ?
this would save much space.
i tried it so
tap_action: '!include /config/popup/fenster.yaml'
and the file
action: fire-dom-event
browser_mod:
deviceID:
- laptop_julia
- firehd_tablet
command: popup
auto_close: false
title: Fenster Sensoren
theme: Custom Background Theme
large: false
style: |
:host .content {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_badezimmer
name: Bade Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_toilette
name: Toilette
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_kinderzimmer
name: Kinder Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: horizontal-stack
cards:
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_schlafzimmer
name: Schlaf Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: custom:button-card
size: 40px
entity: binary_sensor.fenstersensor_wohnzimmer
name: Wohn Zimmer
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: 10px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: center
- padding-left: 0px
- font-weight: light
- font-size: 12px
state:
- value: 'on'
styles:
icon:
- color: red
- type: horizontal-stack
cards:
- type: custom:button-card
name: Mehr Informationen
color_type: icon
tap_action:
action: navigate
navigation_path: /lovelace/fenster
color: rgb(3,169,244)
icon: mdi:weather-night
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- height: 50px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- padding-left: 0px
- font-weight: bold
- font-size: 13px
- text-transform: uppercase
state:
- justify-self: start
- padding-left: 10px
i get this error in the logs
http://192.168.0.73:8123/hacsfiles/button-card/button-card.js?hacstag=146194325342:547:3849 TypeError: 0 is read-only
I just started trying browser_mod. So far I just use it to replace a few more-info dialogs, but itās fascinating seeing all the creativity it brings.
I have two questions:
Can I template somehow to inherit the entity so I dont have to specify each sensor again - like in template-entity-row? I tried a few combinations, but havenāt succeeded so far. See mockup below.
When I use another card for more-info, the close X isnāt centered and the dividing row is missing(?). Expected behavior, a bug or something I can do? https://imgur.com/a/kOctecU
My config:
popup_cards:
sensor.floor_1_temperature_tmpl:
title: EntrƩplan
card:
type: custom:mini-graph-card
entities:
- [config.entity]
show:
icon: false
name: false
How I can popup this window directly from input_datetime.mami_google_calendar_date
I try like this:
service: browser_mod.more_info
data:
entity_id: input_datetime.mami_google_calendar_date
but I get this:
and then I must click on date to get what I wanna heave.
browser_mod.more_info does nothing else like:
tap_action:
action: more-info
you should use the command popup like in many examples above
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Calendar
card:
type: calendar
entities:
- calendar.gmail_1
- calendar.gmail_2
initial_view: dayGridMonth
I need popup for input_datetime.mami_google_calendar_date to set date, not calendar.
this card:
Then define it in the raw config editor like this
views:
- popup_cards:
input_datetime.mami_google_calendar_date:
card:
If this is not what youāre looking for then Iām outā¦
Thx for trying to help, but I need card that popup after click on calendar icon.
Hi everyone, do you know if this integration works with the new HA Browser RADIO feature?
I tried with an automation but it says itās not compatible.
Yes, If you declare the view in the raw editor, you must no declare anything further in a card or button-card.
The klick on the item replaces the default and shoud provide what you configured
I declared this:
views:
- popup_cards:
sensor.current_motion_location:
card:
entities:
- entity: binary_sensor.schlafzimmer
secondary_info: last-changed
- entity: binary_sensor.schlafzimmer2
secondary_info: last-changed
- entity: binary_sensor.fitnessroom
secondary_info: last-changed
- entity: binary_sensor.fitnessroom2
secondary_info: last-changed
- entity: binary_sensor.treppe_oben
secondary_info: last-changed
- entity: binary_sensor.treppe_unten
secondary_info: last-changed
- entity: binary_sensor.guestroom
secondary_info: last-changed
- entity: binary_sensor.guestroom2
secondary_info: last-changed
- entity: binary_sensor.office
secondary_info: last-changed
- entity: binary_sensor.office2
secondary_info: last-changed
- entity: binary_sensor.wohnzimmer
secondary_info: last-changed
- entity: binary_sensor.wohnzimmer_2
secondary_info: last-changed
- entity: binary_sensor.wohnzimmer3
secondary_info: last-changed
- entity: binary_sensor.terrasse
secondary_info: last-changed
show_header_toggle: false
state_color: true
type: entities
title: Motions
and the click on the button looks like this:
entity: sensor.current_motion_location
template: standard_button
label: Presence
icon: mdi:motion-sensor
size: 20px
show_state: true
custom_fields:
add_info: |
[[[
return states['sensor.last_detected_motion'].state;
]]]
styles:
icon:
- color: |
[[[
if ( states['group.all_motion_sensors'].state == 'off') return 'var(--state-icon-color)';
else return 'var(--state-icon-active-color)';
]]]
tap_action:
action: more-info
type: custom:button-card
I donāt wanna to replace default I just wanna call popup that directly shows card for set date.
If I call it like I say:
I get this:
I am lookig a way to popup directly this:
Hello,
I have trouble installing browser mod.
In configuraiton.yaml I have made these lines:
browser_mod:
prefix: "browsermod_"
devices:
ccccdf07-f63f2dfa:
name: browsermod_tablet_r20
disable:
- media_player
91ef1e92-b21cd603:
name: browsermod_tablet_r22
0b7799d7-96154a1c:
name: browsermod_k68w12
disable:
- light
- media_player
3d37dd68-f758c6b0:
name: browsermod_iPad_es
disable:
- light
- media_player
8aa176f9-b887d4c9:
name: browsermod_iPhone_es
disable:
- light
- media_player
disable:
- all
But: The prefix and all the alias-names are ignored.
Any idea?
Regards, Eckart
Generating a custom popup works as expected in my desktop browser and on my phoneās browser (Android). However, nothing happens when I try to trigger a popup from within the Android Companion App. We have multiple Android devices and none of them will show a custom popup with the app. Calling service: browser_mod.debug does nothing as well.
-Edit: Clearing data for the companion app resolved my issue.
Why do you need the prefix if you are disabling all other devices without an alias? (via the disable -allsetting)
According to the documentation, the prefix is not applied to devices with an alias. Try removing the prefix key to see if it also solves the issue with alias names.