search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.44k stars 39 forks source link

Can't get pop up in picture elements #594

Open Krzychurychu3 opened 1 week ago

Krzychurychu3 commented 1 week ago

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:

https://github.com/Clooos/Bubble-Card/assets/164264394/6f6e1ab4-b5b7-489b-9fc0-14ee5d1b78cf

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! 🍻

Clooos commented 2 days ago

Hi, I've never tried that use case, have you tried to put that pop-up at the very last position of your dashboard?