⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Hello, can i use bubble card to create a card as this?:
google lights

With this awesome bubble cards almost nothing is impossible.

For this you would need a Boolean helper and a light-group.

Screen Recording 2024-11-29 001159

In the gif the percentage is not shown, but this is simply done.
image

type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.help_house_lightgroup
    sub_button:
      - entity: input_boolean.help_house_testboolean
        icon: mdi:chevron-down
        tap_action:
          action: toggle
    tap_action:
      action: toggle
    card_layout: large
    show_state: true
    show_attribute: true
    attribute: brightness
    styles: >-
      ${subButtonIcon[0].setAttribute("icon",
      hass.states['input_boolean.help_house_testboolean'].state === 'on' ?
      'mdi:chevron-up' : 'mdi:chevron-down')}
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.dev_ff_hw_lamp
        button_type: slider
        tap_action:
          action: toggle
      - type: custom:bubble-card
        card_type: button
        entity: light.dev_gf_lr_cornerlamp
        button_type: slider
        tap_action:
          action: toggle
    visibility:
      - condition: state
        entity: input_boolean.help_house_testboolean
        state: "on"
10 Likes

Hello,

I added a bubble card button on my dashboard, but i have white text color, is it possible to change this to another color?

Needed to update the first pop up card again, and then it worked. Was on 10 already so just opened the first one and saved it again and then it worked. Thanks again!

1 Like

second most elegant solution is to add follow code to the style part of the bubble card.

:host{
  --primary-text-color: #ff5555;
}

Most elegant solution would be to add this to your theme:

Hello, I would like to change the icon of the Button Card and use an image, but unfortunately, it’s not working for me. Could someone please help me, or is it perhaps not possible at all?

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.bioabfall
show_attribute: false
force_icon: false
show_name: true
show_state: true
show_icon: none
card_mod:
  style: |
    .bubble-button-card {
        background-color: 
        {% if states('sensor.biotonne_collection') | float(999) < 1 %}
          var(--error-color);
        {% elif states('sensor.biotonne_collection') | float(999) < 2 %}
          var(--warning-color);
        {% endif %};
    }
    .bubble-button-card {
        background-image: url("local/muell/Gruene_Tonne_frei.png");
        background-size: cover;
    }

Use this:

.bubble-entity-picture{
  background-image: url("https://community.home-assistant.io/user_avatar/community.home-assistant.io/mrbearpresident/48/585054_2.png") !important;
  display: block !important;          
  }

image

1 Like

Thank you. How i create a boolean helper? I have a light group.

1 Like

ok, thank you

Thx for the help very appreciated

hi at all!
please, someone could point me to the right direction on how to change the border radius of my input_select option?

Is it possible to have the width of the options list box 100%? (the same width of the select with the dropdown)

Thanks a lot

Hi,

Is it possible to disable buttons changing to the accent color when the state is on/locked?

Thanks

If you’re talking about normal buttons, then you can either switch their type to “State” or in the styling options, change the background to the color you like:

.bubble-button-background {
  background-color: #1A1A1A;
}
:host{
  --bubble-select-list-border-radius: 100px;
}

The width of the dropdown is more difficult.

Is there a way to align subbuttons in a bubble card? I want to put playlists for my Sonos speakers on the bubble card. I can get around 8 subbuttons in the bubble, but I would have to align them a bit.

Can you clearify? Send your Yaml/and picture and maybe annotate what you want?

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#Mediaplayer"
    name: Sonos
    background_update: true
    margin_top_desktop: 0px
    width_desktop: 540px
    margin: 7px
    margin_top_mobile: 100px
    icon: mdi:speaker-wireless
    sub_button:
      - icon: mdi:skip-previous
      - icon: mdi:skip-next
      - icon: mdi:volume-high
      - icon: mdi:play
  - type: custom:mini-media-player
    entity: media_player.unnamed_room
    artwork: full-cover
    hide:
      volume: true
      source: true
      power_state: true
      power: true
      controls: true
      icon: true
      progress: false
      name: true
      info: false
      runtime: false
    style:
      left: 50.1%
      top: 40.3%
      width: 24%
      height: 300px
      background-size: cover
    speaker_group:
      platform: sonos
      show_group_count: true
      entities:
        - entity_id: media_player.sonos_office
          name: Sonos Office
        - entity_id: media_player.sonos_livingroom
          name: Sonos Livingroom
        - entity_id: media_player.sonos_kitchen
          name: Sonos Kitchen
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.kinderzimmer_pepe
    cover_background: true
    hide:
      power_button: true
      previous_button: false
      next_button: false
    card_layout: large-2-rows
    show_icon: true
    scrolling_effect: true
    show_state: true
    show_name: true
    show_last_changed: true
    name: sonos
    force_icon: true
    show_attribute: false
  - type: custom:bubble-card
    card_type: separator
    name: Playlisten
    icon: mdi:playlist-music
  - type: custom:bubble-card
    card_type: button
    sub_button:
      - {}
      - {}
      - {}
      - {}
      - {}
      - {}
      - {}
      - {}
      - {}
    name: test
    scrolling_effect: false
    show_icon: false
    show_name: false
    card_layout: normal
    rows: 4
    columns: 4
    styles: ""
    button_type: name

I’m still in the process of creating the perfect media player popup for me.

At the top, perhaps in the header, the controls for the player, ideally with the same function as with the bubble card media player, where the player switches to volume when the volume is up.

And then under the media cover, the playlists are visually appealing in the subbuttons in the bubble card.

I can group the Sonos within the mini media player.

Perhaps you have other visual improvements for such a popup.

1 Like

Hi! You can take a look at this example from the GitHub documentation, that’s the last one in the Styling section, hope this helps :slightly_smiling_face:

1 Like

thank you very much for your answer and for the work you put into this dashboard.

1 Like