On my side i don’t do it on title. But i use a template to have the dynamic part and i use the state attribute to show it
Makes sense. It’s definitely an option, just trying to keep things as simple as possible since all I need is the button text to be different.
.bubble-sub-button-4 {
background: ${'rgba(' + (hass.states['light.salon_lumieres_hautes']?.attributes?.rgb_color || []).join(', ') + ', 0.5)'} !important;
}
.bubble-sub-button-5 {
background: ${'rgba(' + (hass.states['light.salon_lumieres_basses']?.attributes?.rgb_color || []).join(', ') + ', 0.5)'} !important;
}
.bubble-sub-button-6 {
background: ${'rgba(' + (hass.states['light.salon_lumieres']?.attributes?.rgb_color || []).join(', ') + ', 0.5)'} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['binary_sensor.fenetres_salon'].state === 'on' ? 'red' : 'green'} !important;
}
${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.fenetres_salon'].state === 'on' ? 'phu:sliding-window-door-open' : 'phu:double-window-closed')}
If I put the last part before the part related to the backgroup update, background update don’t work for one or two button depending on where it is positionned. At the end no issues.
So it is working fine now 
2 Likes
I’ve been thinking through this a bit more and i’m a little stumped as to how this would work as I need this to be a button that turns on and off a switch. But template switches and input_booleans don’t have custom attributes that you can set. If I set the entity to be a sensor that has the custom attributes (or a binary_sensor) you can’t toggle a switch any longer with the button click. How did you accomplish this?
By calling a service :
- type: custom:bubble-card
card_type: button
entity: sensor.porte_entree
name: 'Porte entrée '
show_state: true
show_last_changed: true
styles: >
.bubble-button-card-container {
border-radius: 10px !important;
}
.bubble-icon-container {
opacity: 0.8;
background-color: ${state === 'Verrouillée' ? 'green' : state === 'Fermée' ? 'none' : 'red'} !important;
}
.bubble-icon {
opacity: 1;
color: white !important;
}
${state === 'Verrouillée' ? icon.setAttribute("icon",
"mdi:door-closed-lock") : state === 'Fermée' ? icon.setAttribute("icon",
"mdi:door-closed") : icon.setAttribute("icon", "mdi:door-open")};
icon: ''
tap_action:
action: none
double_tap_action:
action: call-service
service: button.press
target:
entity_id: button.porte
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: call-service
service: button.press
target:
entity_id: button.porte
hold_action:
action: none
Exemple here.
I have a sensor that get raw value of my three state door (not managed by ha) .
Then i have a button to open the door.
I call this button by a service when i double tap the icon or text
I also change the icon depending on value
1 Like
Hey Cloos. I am on beta 12 and still have an issue with pop-up centering and them not showing cards. The device is a pixel tablet, here’s how it appears on portrait (as expected) and landscape (problematic). This is with default pop-up styling settings. Let me know if I can provide any further info to help.
Edit: I got it showing the cards correctly by adjusting the top margin on desktop view. Just the centering issue remains.
1 Like
Good morning,
I would like to open my shutters however I would like to do it with a script, let me explain when clicking on open/stop/close, I would like to trigger the execution of a script with the appropriate parameter.
Here’s what I tried but it didn’t work:
type: custom:bubble-card
card_type: cover
show_state: true
entity: cover.volet_de_la_cuisine
open_service:
- service: script.turn_on
target:
entity_id: script.commande_volets_de_la_piece_de_vie
data:
variables:
action: Ouvrir
stop_service: script.commande_volets_de_la_piece_de_vie
Can you help me ?
here is my script:
alias: COMMANDE - Volets de la pièce de vie
sequence:
- alias: Ouvrir les volets de la pièce de vie
if:
- condition: template
value_template: |-
condition: template
value_template: "{{'Ouvrir' in action }}"
then:
- service: cover.open_cover
metadata: {}
data: {}
target:
device_id:
- f5c8912744da7f4f
- 34263ce385906
- 763b4c6729c42315d8
- ea691904a00c
- alias: Stop les volets de la pièce de vie
if:
- condition: template
value_template: |-
condition: template
value_template: "{{'Stop' in action }}"
then:
- service: cover.stop_cover
metadata: {}
data: {}
target:
device_id:
- f5c8912744da7f4
- 34263ce3859068e0a
- 763b4c6729c42315d
- ea691904a00c5b8b42
- alias: Fermer les volets de la pièce de vie
if:
- condition: template
value_template: |-
condition: template
value_template: "{{'Fermer' in action }}"
then:
- service: cover.close_cover
metadata: {}
data: {}
target:
device_id:
- f5c8912744da7f4f7a
- 34263ce3859068e0a
- 763b4c6729c42315d83
- ea691904a00c5
mode: single
icon: mdi:window-shutter-cog
fields:
action:
selector:
select:
options:
- Ouvrir
- Stop
- Fermer
name: action
required: true
Thank you very much for this great development.
Ah. Good call. Thanks!
Hi, have you tried to create a new pop-up? I’m unable to reproduce this issue.
Can you also share your YAML?
Can you share your yaml configuration for temperature card and header ? Thanks
Hi Everyone,
I need an advice. So i did a popup for my living room and tied it to room card. This works great, I have all my appliences from living room in there. I also have a custome remote card nested into the same popup. I don’t have autoclose nor close on click, to close I use x button (desired behavior), otherwise popup stays open and i can turn on and off appliences. But when I click on whatever button on the remote it closes popup after one click, how to prevent that?
Cloos - Not sure if this is possible but I am currently building my mobile dashboard based upon presence detection. So the screen on my mobile shows the buttons devices for that room only and I can get it sub buttons on the separator to show an icon for each person in the room but I would love it to show the entity picture for the person.
Would this even be possible?
Yeah issue is there with a new pop-up. Only in landscape on my Google Pixel Tablet (2560 x 1,600 resolution).
I cant post all the YAML as it is above the character limit, here’s the first half though.
title: Home
kiosk_mode:
non_admin_settings:
kiosk: true
views:
- path: home
icon: mdi:home
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-lights'
name: Lights
icon: mdi:lightbulb
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
margin: 7px
- type: custom:auto-entities
card:
type: entities
show_empty: false
filter:
include:
- domain: light
exclude:
- state: 'off'
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-shopping'
name: Shopping
icon: mdi:cart
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
margin: 7px
- type: todo-list
entity: todo.shopping_list
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-security'
name: Security
icon: mdi:lock
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
margin: 7px
- type: custom:mushroom-template-card
primary: '{{ states(''alarm_control_panel.house'') | capitalize}}'
secondary: ''
icon: mdi:shield-lock
entity: alarm_control_panel.house
tap_action:
action: more-info
icon_color: |-
{% if is_state('alarm_control_panel.house', 'disarmed') %}
green
{% elif is_state('alarm_control_panel.house', 'arming') %}
amber
{% elif is_state('alarm_control_panel.house', 'armed_away') %}
amber
{% elif is_state('alarm_control_panel.house', 'armed_home') %}
amber
{% elif is_state('alarm_control_panel.house', 'pending') %}
amber
{% elif is_state('alarm_control_panel.house', 'triggered') %}
red
{% endif %}
layout: vertical
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.front_door
camera_image: camera.doorbell
- type: custom:mushroom-select-card
primary_info: none
secondary_info: none
icon_type: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
entity: select.front_door_play_quick_reply_message
- type: custom:auto-entities
card:
show_header_toggle: false
title: null
type: entities
state_color: true
filter:
include:
- attributes:
device_class: door
state: 'on'
- attributes:
device_class: window
state: 'on'
show_empty: false
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-power'
name: Power
icon: mdi:lightning-bolt
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
margin: 7px
- type: gauge
needle: true
min: 0
entity: sensor.electricity_in_current_demand
unit: w
max: 9000
segments:
- from: 0
color: '#43a047'
- from: 2000
color: '#ffa600'
- from: 5000
color: '#db4437'
- chart_type: bar
period: hour
type: statistics-graph
entities:
- sensor.electricity_in_current_demand
stat_types:
- mean
hide_legend: true
days_to_show: 1
- type: energy-usage-graph
- type: energy-date-selection
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.electricity_in_previous_accumulative_cost
hide_legend: true
stat_types:
- change
days_to_show: 21
logarithmic_scale: false
- chart_type: bar
period: month
type: statistics-graph
entities:
- sensor.electricity_in_previous_accumulative_cost
hide_legend: true
stat_types:
- change
logarithmic_scale: false
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-weather'
name: Weather
icon: mdi:weather-pouring
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
margin: 7px
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Now
alignment: center
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.met_office_chichester_daily
forecast_type: hourly
secondary_info_attribute: wind_speed
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Today
alignment: center
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.met_office_chichester_daily
forecast_type: hourly
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: This week
alignment: center
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.met_office_chichester_daily
forecast_type: daily
- type: custom:mushroom-title-card
title: ''
title_tap_action:
action: none
subtitle_tap_action:
action: none
subtitle: Chance of rain
alignment: center
- type: entities
entities:
- entity: >-
sensor.met_office_chichester_probability_of_precipitation_3_hourly
- entity: >-
sensor.met_office_midhurst_probability_of_precipitation_daily
show_header_toggle: false
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-kitchen'
name: Kitchen
icon: mdi:pot-steam
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
tap_action:
action: none
- type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:ceiling-light-multiple
sub_button:
- entity: input_boolean.living_room_presence_detection_toggle
tap_action:
action: toggle
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: light.kitchen_cabinet_leds
button_type: slider
name: Kitchen Uplight
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
- type: custom:bubble-card
card_type: separator
name: Temperature
icon: ''
sub_button:
- entity: climate.living_room
show_state: false
show_icon: false
show_background: false
show_attribute: true
attribute: current_temperature
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:minus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.living_room
temperature: >
[[[ var temp =
((states['climate.living_room'].attributes.temperature) -
0.5);
return temp; ]]]
- type: custom:button-card
aspect_ratio: 3/1
entity: climate.living_room
state_display: |
[[[ return entity.attributes.temperature ]]]
tap_action: none
show_name: false
show_icon: false
show_state: true
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:plus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.living_room
temperature: >
[[[ var temp =
((states['climate.living_room'].attributes.temperature) +
0.5);
return temp; ]]]
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: media_player.kitchen_speakers
state: playing
- condition: state
entity: media_player.kitchen_speakers
state: paused
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
button_type: name
name: Media
- type: custom:bubble-card
card_type: media-player
entity: media_player.living_room_speakers
scrolling_effect: true
show_icon: true
show_state: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-living-room'
name: Living Room
icon: mdi:sofa
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
tap_action:
action: none
- type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:ceiling-light-multiple
sub_button:
- entity: input_boolean.living_room_presence_detection_toggle
tap_action:
action: toggle
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: light.tv_leds
button_type: slider
name: TV Light
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: custom:bubble-card
card_type: button
entity: light.skylight
button_type: slider
name: Skyight
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
icon: mdi:artboard
columns: 2
- type: custom:bubble-card
card_type: separator
name: Temperature
icon: ''
sub_button:
- entity: climate.living_room
show_state: false
show_icon: false
show_background: false
show_attribute: true
attribute: current_temperature
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:minus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.living_room
temperature: >
[[[ var temp =
((states['climate.living_room'].attributes.temperature) -
0.5);
return temp; ]]]
- type: custom:button-card
aspect_ratio: 3/1
entity: climate.living_room
state_display: |
[[[ return entity.attributes.temperature ]]]
tap_action: none
show_name: false
show_icon: false
show_state: true
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:plus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.living_room
temperature: >
[[[ var temp =
((states['climate.living_room'].attributes.temperature) +
0.5);
return temp; ]]]
- type: custom:bubble-card
card_type: separator
name: TV
icon: ''
- type: media-control
entity: media_player.tv
- type: conditional
conditions:
- condition: state
entity: remote.tv
state: 'on'
card:
square: false
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: VolumeDown
hold_action:
action: none
icon: mdi:volume-medium
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Up
hold_action:
action: none
icon: mdi:menu-up
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: VolumeUp
hold_action:
action: none
icon: mdi:volume-high
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Left
hold_action:
action: none
icon: mdi:menu-left
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Confirm
hold_action:
action: none
icon: mdi:circle-medium
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Right
hold_action:
action: none
icon: mdi:menu-right
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Exit
hold_action:
action: none
icon: mdi:arrow-u-left-bottom
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Down
hold_action:
action: none
icon: mdi:menu-down
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.tv
data:
num_repeats: 1
delay_secs: 0.4
hold_secs: 0
command: Home
hold_action:
action: none
icon: mdi:home
columns: 3
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: media_player.living_room_speakers
state: playing
- condition: state
entity: media_player.living_room_speakers
state: paused
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
button_type: name
name: Media
- type: custom:bubble-card
card_type: media-player
entity: media_player.living_room_speakers
scrolling_effect: true
show_icon: true
show_state: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-study'
name: Study
icon: mdi:monitor
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
- type: custom:bubble-card
card_type: separator
name: Lights
icon: ''
sub_button:
- entity: input_boolean.study_presence_detection
tap_action:
action: toggle
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: light.study_ceiling
- type: custom:bubble-card
card_type: button
entity: light.study_wall
- type: custom:bubble-card
card_type: button
entity: light.study_leds
button_type: switch
tap_action:
action: none
hold_action:
action: more-info
- type: custom:bubble-card
card_type: button
entity: light.study_lamp
columns: 2
- type: custom:bubble-card
card_type: separator
name: Temperature
icon: ''
sub_button:
- entity: climate.study
show_state: false
show_icon: false
show_background: false
show_attribute: true
attribute: current_temperature
- type: horizontal-stack
cards:
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:minus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.study
temperature: >
[[[ var temp =
((states['climate.study'].attributes.temperature) - 0.5);
return temp; ]]]
- type: custom:button-card
aspect_ratio: 3/1
entity: climate.study
state_display: |
[[[ return entity.attributes.temperature ]]]
tap_action: none
show_name: false
show_icon: false
show_state: true
- type: custom:button-card
aspect_ratio: 3/1
icon: mdi:plus
size: 25px
tap_action:
action: call-service
service: climate.set_temperature
service_data:
entity_id: climate.study
temperature: >
[[[ var temp =
((states['climate.study'].attributes.temperature) + 0.5);
return temp; ]]]
- type: vertical-stack
cards:
- type: custom:bubble-card
hash: '#pop-up-master'
name: Master Bedroom
icon: mdi:bed-king
margin_top_desktop: 0px
width_desktop: 50%
card_layout: normal
card_type: pop-up
- type: custom:bubble-card
card_type: separator
name: Lights
icon: ''
sub_button: []
- type: conditional
conditions:
- condition: state
entity: media_player.bedroom_speaker
state: playing
- condition: state
entity: media_player.bedroom_speaker
state: paused
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Music
icon: ''
sub_button: []
- type: custom:bubble-card
card_type: media-player
entity: media_player.bedroom_speaker
hide:
power_button: true
name: ''
show_name: false
show_state: true
Hey Cloos,
unfortunately I have found another bug.
When I try to change a dropdown entry on the mushroom selection cards that are placed in a pop-up, the entire screen goes black in the latest beta (see screenshots below).
I’ve fixed this issue, I will release a new version today! Thanks for the feedback!
1 Like
This issue is already fixed in the v2 beta 
1 Like
I’ve found the best way to fix that and this will be the official fix for the kiosk mode users (I will add this in the documentation).
First for your kiosk mode config, remove hide_sidebard: true or kiosk: true and just keep that under kiosk_mode:
kiosk_mode:
hide_header: true
Then go to your HA profile configuration then toggle this:
This will now works as expected and you can remove the custom style I’ve sent previously.
Hi, have you tried the v2 beta? This issue should be fixed with it