We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Describe the bug I'm try to make pop up with spotcast card and media player. I have the same code in "test" dashboard and I works but when I put it in picture element it looks like this: https://github.com/Clooos/Bubble-Card/assets/164264394/43734b03-b46d-4117-8e5c-558ca3f35efa
In test dashboard it looks like this:
Code:
type: picture-elements elements: - type: image action: none entity: sun.sun state_image: above_horizon: local/Dom/Parter/Dom-dzien-v20.png below_horizon: local/Dom/Parter/Dom-dzien-v20.png style: height: 100% left: 50% top: 50% width: 100% - type: image entity: switch.sterownik_salon_led_zyrandol_3 style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/Dom/Parter/Dom-noc-salon-LED.png 'off': local/UI/Transparentne-v2.png - type: image entity: switch.sterownik_salon_led_zyrandol_2_2 style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/Dom/Parter/Dom-noc-salon-zyrandol.png 'off': local/UI/Transparentne-v2.png - type: image entity: light.przelacznik_kanapa_tv_swiatlo style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/Dom/Parter/Dom-noc-salon-kanapa.png 'off': local/UI/Transparentne-v2.png - type: image entity: light.przelacznik_kanapa_tv_swiatlo_2 style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/Dom/Parter/Dom-noc-salon-TV.png 'off': local/UI/Transparentne-v2.png - type: image entity: switch.led_blat style: top: 50% left: 50% width: 100% mix-blend-mode: lighten state_image: 'on': local/Dom/Parter/Dom-noc-kuchnia-LED.png 'off': local/UI/Transparentne-v2.png - type: custom:mushroom-light-card entity: switch.sterownik_salon_led_zyrandol_3 icon_type: entity-picture icon: mdi:led-strip-variant secondary_info: none primary_info: none tap_action: action: toggle hold_action: action: none double_tap_action: action: none layout: vertical style: left: 70% top: 55% scale: 150% card_mod: style: | ha-card { border-radius: 8px; background-color: transparent !important; } - type: custom:mushroom-light-card entity: switch.sterownik_salon_led_zyrandol_2_2 icon_type: entity-picture icon: mdi:chandelier secondary_info: none primary_info: none tap_action: action: toggle hold_action: action: none double_tap_action: action: none layout: vertical style: left: 70% top: 35% scale: 150% card_mod: style: | ha-card { border-radius: 8px; background-color: transparent !important; } - type: custom:mushroom-light-card entity: switch.led_blat icon_type: entity-picture icon: mdi:led-strip-variant secondary_info: none primary_info: none tap_action: action: toggle hold_action: action: none double_tap_action: action: none layout: vertical style: left: 65% top: 82% scale: 150% card_mod: style: | ha-card { border-radius: 8px; background-color: transparent !important; } - type: custom:mushroom-light-card entity: switch.double_switch_2_2 icon_type: entity-picture icon: mdi:light-recessed secondary_info: none primary_info: none tap_action: action: toggle hold_action: action: none double_tap_action: action: none layout: vertical style: left: 26.5% top: 62% scale: 150% card_mod: style: | ha-card { border-radius: 8px; background-color: transparent !important; } - type: custom:mushroom-template-card primary: Garaż secondary: '🌡️{{states(''sensor.czujnik_temperatury_garaz_air_temperature'')}}°C ' layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.garaz tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 17% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: Wiatrołap secondary: >- 🌡️{{states('sensor.czujnik_temperatury_wiatrolap_air_temperature_2')}}°C layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.wejscie tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 25% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: WC secondary: '🌡️{{states(''sensor.czujnik_temperatury_wc_air_temperature_3'')}}°C ' layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.wc tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 33% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: Kuchnia secondary: >- 🌡️{{states('sensor.czujnik_temperatury_kuchnia_air_temperature_4')}}°C layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.kuchnia tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 41% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: Jadalnia secondary: '🌡️{{states(''sensor.termostat_jadalnia_air_temperature'')}}°C ' layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.termostat_jadalnia tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 49% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: Salon secondary: '🌡️{{states(''sensor.termostat_salon_air_temperature'')}}°C ' layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: climate.termostat_salon tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 57% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-template-card primary: Odkurzacz secondary: '{{states(''vacuum.viomi_v18_7846_robot_cleaner'')}}' layout: vertical fill_container: true multiline_secondary: true icon_color: orange badge_color: red entity: vacuum.viomi_v18_7846_robot_cleaner tap_action: action: more-info hold_action: action: none double_tap_action: action: none style: left: 91% top: 67% scale: 101% card_mod: style: mushroom-state-info$: | .container { --card-primary-color: black; --card-secondary-color: black; --card-primary-font-size: 20px; --card-secondary-font-size: 17px; height: 38px !important; width: 100px !important; } style: | ha-card { background-color: white; border-radius: 8px; --primary-text-color: black; --secondary-text-color: } ha-state-icon { color: black !important; } - type: custom:mushroom-chips-card style: left: 9% top: 100% scale: 100% chips: - type: entity entity: sensor.symo_3_7_3_m_1_energia_z_dnia icon_color: accent card_mod: style: | ha-card { --chip-background: white; --text-color: black; height: 38px !important; width: 130px !important; --chip-font-size: 15px; } - type: entity entity: sensor.vscotho1_200_11_dhw_gas_consumption_today icon: mdi:fire icon_color: red card_mod: style: | ha-card { --chip-background: white; --text-color: black; height: 38px !important; width: 130px !important; --chip-font-size: 15px; } - type: custom:bubble-card card_type: button button_type: name name: Spotify icon: mdi:spotify style: left: 9% top: 17% width: 10% scale: 90% tap_action: action: navigate navigation_path: '#spotify1' button_action: tap_action: action: navigate navigation_path: '#spotify1' card_layout: normal styles: |2- .bubble-button-card-container { background: rgba(255,255,255,255.255) !important; } * { --primary-text-color: black; .bubble-icon { color: white !important; } - type: custom:hui-element card_type: vertical-stack cards: - type: custom:bubble-card card_type: pop-up hash: '#spotify1' button_type: name name: Spotify icon: mdi:spotify margin: 7px width_desktop: 1000px show_icon: true - type: custom:spotify-card known_connect_devices: - id: e7d30216a50aacd45250d63d252aaeb587ae4b16 name: Salon entity_id: media_player.salon default_device: Salon hide_chromecast_devices: true hide_header: true hide_playback_controls: true - type: custom:bubble-card card_type: media-player force_icon: false show_state: false entity: media_player.salon show_last_changed: false show_attribute: false show_icon: true hide: volume_button: false card_layout: large scrolling_effect: false style: top: 50% left: 30% - type: custom:stack-in-card mode: horizontal style: left: 37% top: 3% width: 40% scale: 100% card_mod: style: | ha-card { border-radius: 8px; background-color: white; --primary-text-color: black; --card-mod-icon-color: black; } cards: - type: custom:mushroom-template-card primary: Parter secondary: '' icon: '' fill_container: true layout: vertical tap_action: action: navigate navigation_path: /dashboard-nowy/parter - type: custom:mushroom-template-card primary: Piętro secondary: '' icon: '' layout: vertical fill_container: true tap_action: action: navigate navigation_path: /dashboard-nowy/pietro - type: custom:mushroom-template-card primary: Taras secondary: '' icon: '' layout: vertical fill_container: true tap_action: action: navigate navigation_path: /dashboard-nowy/taras image: local/UI/Transparentne-v2.png
Test dash version:
- type: custom:bubble-card card_type: button button_type: name name: Spotify icon: mdi:spotify tap_action: action: navigate navigation_path: '#spotify' button_action: tap_action: action: navigate navigation_path: '#spotify' card_layout: normal styles: |2- .bubble-button-card-container { background: rgba(255,255,255,255.255) !important; } * { --primary-text-color: black; .bubble-icon { color: white !important; } - type: vertical-stack cards: - type: custom:bubble-card card_type: pop-up hash: '#spotify' button_type: name name: Spotify icon: mdi:spotify margin: 7px width_desktop: 1000px show_icon: true - type: custom:spotify-card known_connect_devices: - id: e7d30216a50aacd45250d63d252aaeb587ae4b16 name: Salon entity_id: media_player.salon default_device: Salon hide_chromecast_devices: true hide_header: true hide_playback_controls: true - type: custom:bubble-card card_type: media-player force_icon: false show_state: false entity: media_player.salon show_last_changed: false show_attribute: false show_icon: true hide: volume_button: false card_layout: large scrolling_effect: false
Expected behavior I want to picture elements version works like this one in my test dashboard
Informations (please complete the following information):
Thank you! 🍻
The text was updated successfully, but these errors were encountered:
Hi, I've never tried that use case, have you tried to put that pop-up at the very last position of your dashboard?
Sorry, something went wrong.
No branches or pull requests
Describe the bug
I'm try to make pop up with spotcast card and media player. I have the same code in "test" dashboard and I works but when I put it in picture element it looks like this:
https://github.com/Clooos/Bubble-Card/assets/164264394/43734b03-b46d-4117-8e5c-558ca3f35efa
In test dashboard it looks like this:
test.dash.mp4
Code:
Test dash version:
Expected behavior
I want to picture elements version works like this one in my test dashboard
Informations (please complete the following information):
Thank you! 🍻
The text was updated successfully, but these errors were encountered: