Please read the GitHub docs.
Hi,
its very simple. I needed 10 minutes to figure that out:
Here is an example:
custom_header:
chevrons: false
compact_mode: true
hide_header: true
title: Wecker
views:
- badges: []
popup_cards:
group.all_light_groups:
title: Light groups
card:
type: entities
show_header_toggle: false
state_color: true
entities:
- light.wohnzimmer
- light.schlafzimmer
- light.gastezimmer
- light.kuche
- light.office
- light.treppe
- light.fitnessraum
- light.eingang
cards:
- cards:
- cards:
- entity: group.all_light_groups
icon: 'mdi:lightbulb-group'
layout: vertical
show_icon: true
show_label: false
show_name: false
show_state: false
size: 40px
styles:
card:
- width: 50px
- height: 90px
icon:
- color: |
[[[
if (entity.state == 'on') return 'yellow';
else return 'red';
]]]
tap_action:
action: more-info
type: 'custom:button-card'
- entity: sensor.time
layout: vertical
show_icon: false
show_name: false
show_state: true
Beside badges and cards you have an additional element: popup_cards:
You have to link this type of card to the entity, which shall show this alternate, in the given example the group.
As popup you can choose any type of card. In this case I have choosen a simple entities card
Thats it.
Here is an extended version:
background: var(--background-image)
custom_header:
button_text:
options: '{{ time }}'
compact_mode: true
exceptions:
- conditions:
user: Yvonne
config:
hide_tabs: '9'
- conditions:
user: Mobile
config:
hidden_tab_redirect: false
hide_header: true
shadow: false
header_text: Zu Hause
hide_header: true
indicator_top: true
title: Varadero
views:
- badges:
- entity: person.jorg
- entity: person.yvonne
- entity: person.chiara
- entity: person.niklas
- entity: variable.housewife_present
popup_cards:
binary_sensor.washer_state:
title: Waschmaschine
card:
type: entities
show_header_toggle: false
state_color: true
entities:
- entity: binary_sensor.washer_state
secondary_info: last-changed
- entity: sensor.waschmaschine_watts
- entity: timer.timer_waschmaschine
binary_sensor.dryer_state:
title: Trockner
card:
type: entities
show_header_toggle: false
state_color: true
entities:
- sensor.8_hour_rain_forecast_total
- entity: binary_sensor.dryer_state
secondary_info: last-changed
- entity: sensor.trockner_watts
- entity: timer.timer_trockner
switch.zone_1_zone:
title: BewƤsserung
card:
type: entities
show_header_toggle: false
state_color: true
entities:
- entity: sensor.netatmo_imeerbus121_rs_garten_sum_rain_24
name: Regen heute
- entity: sensor.8_hour_rain_forecast_total
- entity: input_boolean.rain_delay
- entity: input_number.time_since_last_irrigation
secondary_info: last-changed
- input_number.irrigation_frequency
- entity: switch.zone_1_zone
cards:
- cards:
- icon: 'mdi:shield'
label: Innen
layout: vertical
show_icon: true
show_label: false
show_state: false
styles:
card:
- height: 30px
icon:
I defined new popup-cards for 3 entities. and you can see, that each popup card can handle all options the card provides.
You can also just call browser_mod.popup if you only want to trigger on one card, with deviceID: this.
@Pirol62 thanks for the informationsā¦ I have not being able to replicate your code. But finally able to make some popup using others videos. However still trying to figure it out if there a possibility to make a button (for example TV button and if that being press then the popup such the remote card witll appear)
making the ATV remote appear as a popup
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:home'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.atv_main
hold_action:
action: call-service
service: remote.send_command
service_data:
command: home_hold
entity_id: remote.living_room
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:sleep'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: suspend
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:menu'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
I tried add this cards but nothing appear
1 Like
This works.
Try to execute the browser_mod.popup in developer screen using this payload:
title: ATV Remote
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:home'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.atv_main
hold_action:
action: call-service
service: remote.send_command
service_data:
command: home_hold
entity_id: remote.living_room
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:sleep'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: suspend
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:menu'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
deviceID:
- this
By the way, would love for you to share the rest of your card. Itās really nice.
Got itā¦ thank you so much.
type: vertical-stack
cards:
- name: Apple TV Bedroom
type: media-control
entity: media_player.atv_main
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:home'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: home
entity_id: remote.atv_main
hold_action:
action: call-service
service: remote.send_command
service_data:
command: home_hold
entity_id: remote.living_room
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:sleep'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: suspend
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:menu'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: menu
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:arrow-up'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: up
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:arrow-left'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: left
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:apple'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: select
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:arrow-right'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: right
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:arrow-down'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: down
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:play-pause'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: play_pause
entity_id: remote.atv_main
hold_action:
action: call-service
service: remote.send_command
service_data:
command: home_hold
entity_id: remote.living_room
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:volume-plus'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: volume_up
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:skip-next'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: next
entity_id: remote.atv_main
hold_action:
action: call-service
service: remote.send_command
service_data:
command: home_hold
entity_id: remote.living_room
- type: 'custom:button-card'
color_type: blank-card
- type: 'custom:button-card'
color_type: card
color: black
icon: 'mdi:volume-minus'
tap_action:
action: call-service
service: remote.send_command
service_data:
command: volume_down
entity_id: remote.atv_main
hold_action:
action: none
- type: 'custom:button-card'
color_type: blank-card
Here is my card combine with button-card for an Apple TV remotes
1 Like
Looks great
Itās been a while since Iāve been around. I just updated to Home Assistant core to the most recent release and supervisor versions.
Now it seems that when I use device_ID: this it displays the popup on all currently running devices. Any ideas?
It should be deviceID: this, not device_ID: this (no underscore).
1 Like
Not sure how to do a new post instead of a replyā¦ this is reposted from issues in case someone else has a solutionā¦
Thanks for a great mod! Really really appreciate it.
I have an issue with a new android tablet running 10 go edition however. Webkit (android not ASOP) is v85 etc. mod_browser is v1.1.6.
I use the blackout feature as a screen saver for a wall mounted tablet - blackout after 60 seconds of inactivity so it doesnt annoy people walking past - not for power saving as I dont care about power used.
Wake on touch works if the screen is touched within a few seconds but if I leave it for say 5 minutes or longer then the screen will not wake.
Tested on fully kiosk AND the HA companion app. Both have the same behavior.
Things I have tried:
- cleared cache
- I have disabled all setting to put the screen to sleep
- disabled lock
- including developer settings - donāt allow screen to sleep
- Tried fully kiosk and HA app - both have the same issue
- Seemed to work fine on an ipad I have
If I repeatedly tap the screen then it might wake up after 5 or so taps OR I get an error - app not responding message.
The funny thing is if I send a no_blackout message then the screen wakes when in this state fine - after a bit of a lag (2 seconds or more).
No errors in the HA logs on the server side.
So, I am thinking that this seems to be a webkit issue maybe? Any ideas? Anything else I can try or test?
Do you think the device actually turned off the screen instead of just making it black, and in that state it doesnāt respond to touches because itās asleep?
Yup that could definitely be the causeā¦ Thank you!
But trawling through the javascript it looks like the screen off function only works if it is fully kiosk browser. It wouldnāt work with the HA app would it?
blackout(e) {
const t = ()=>{
window.fully ? fully.turnScreenOff() : this._blackout.style.visibility = "visible",
this.update()
}
;
e.time ? this._set_screensaver(t, e.time) : t()
}
The screen never goes off just sitting on the home screen or when I dont send a blackout command - so yes - it is something in the code causing itā¦ hmmmm. Iāll give it a try by changing the javascript to not detect fully when I get a chance and report back.
Also thinking that maybe it is just the HA app going to sleep and taking a long time to wake up. Disabling app sleep is looking to be a pain on android 10 - they disabled the priority app feature.
Hi, I had some problems realizing an alarm clock with browser_mod and HA Companion app as well.
I could not activate the app and play a sound at alarm time.
Changed then to wallpaper and everything works fine.
Would anyone know what controls the ability to change font and size in the popup window bar? I have tried many styles changes but I have yet to figure out what updates the popup window bar. I have been able to change many of the styles in the rest of the window but canāt figure out the popup window bar. The text in red is what I would like to update. Hopefully someone has an example they can share.
- service: browser_mod.popup
data:
command: popup
title: System
style: |
:host .content {
width: 50vw;
height: 80vh;
}
:host {
--mdc-theme-surface: rgba(0,0,0,0.5);
--secondary-background-color: rgba(250,0,0,1.0);
--primary-text-color: rgb(255,255,255);
--ha-card-background: rgba(0,0,0,0.9);
}
card:
Iām interested in using this for my alarm panels (fire7) using fully kiosk. Iām having trouble getting any of them to register in HA. My PC browser registers ok but nothing else. Is there some setting in Fully Kiosk that has to be enabled/disabled for the browser to become an entity in HA?
Hi all,
Your command ābrowser_mod.set_themeā works with you?
Thanks
Hi All,
Just for those interested in this problem - it IS an android 10 complexity. Backout causes a screen off not just a screen blank on Android 10. This happens for Fully and the latest HA App.
Workaround is to hack the mod_browser java script to ignore the condition that screen off is supported - not my choice of workarounds as it breaks upgrade. Perhaps a setting could be added to mod_browser?
Android 10 GO edition is so very locked down - cant set a background app. Unfortunately I cannot find a rom for my device for Android 9 or earlier to get around this so I am thinking of just adjusting the screen brightness to minimum and adjusting up on press detection.
Cheers all.
The
media_playerdevice created bybrowser_modonly supports audio playback.
This is not well documented IMO and cost me some wasted time. But, I will likely use this feature once I get the toys, Iām doing some preliminary research ATM.
Hi,
Is there any way to get the path from the browser mod sensor for a specific device as an attribute?
What Iām trying to do is when ever the tab changes from my tab named home on my tablet to any other tab I want browser mod to change it back to home after a set time.
I got an automation with browser_mod.navigate working for the specific tablet and Iāve tried to find a way to use the path as a template from the browser mod sensor states and try to use it in an āif notā to start and stop a timer but I donāt know how to make this specific attribute available. I tried āstate_attrā and āstates.sensorā with no luck.
Iām new to HA and programming and I donāt know what to try next.
Is there a solution to this or am I just searching for a holy grail here?