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

Share your Projects! Dashboards & Frontend
,
1725

I checked the second to latest beta update and this error did not occur.

I reinstalled the latest beta and checked the browser as the issue still happens…

So apparently issue happened between the latest two beta releases.

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
h http://192.168.3.65:8123/hacsfiles/Bubble-Card/bubble-card.js?hacstag=6801129192304:1

and this… (assuming the one below is not related to this current issue)

TypeError: state_attr(…) is undefined
anonymous custom-sidebar-yaml.js:3
renderTemplate custom-sidebar-yaml.js:1
trackTemplate custom-sidebar-yaml.js:1
_executeRenderingFunctions custom-sidebar-yaml.js:1
_executeRenderingFunctions custom-sidebar-yaml.js:1
_executeRenderingFunctions custom-sidebar-yaml.js:1
_panelUrlWatchCallback custom-sidebar-yaml.js:1
_watchForPanelUrlChange custom-sidebar-yaml.js:1
d bubble-card.js:1
setTimeout handler*d bubble-card.js:1
c bubble-card.js:1
g bubble-card.js:1
t bubble-card.js:1
t bubble-card.js:1
n fire_event.ts:76
s navigate.ts:46
h handle-action.ts:116
_handleAction action-mixin.ts:26
firstUpdated action-mixin.ts:19
Lt mushroom.js:59
Ke mushroom.js:64
_handleAction mushroom.js:2344
handleEvent mushroom.js:17
n fire_event.ts:76
end action-handler-directive.ts:182

1 Like
1726

You are The Best. Thanks for all :ok_hand:

1727

Sure, it’s my personal theme.

1728

THX… your build the theme or you find this on web?

1729

I wonder, is there any way to color this gradient conditionally based on state? I can color the button background conditionally, and/or the icon, but not the bar:

image

type: custom:stack-in-card
title: ""
mode: vertical
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: state
    entity: sensor.master_bathroom_sensor_humidity
    styles: |
      .bubble-button-card-container {
          background: linear-gradient(
        to right, 
        #1E90FF 0%, 
        #1E90FF ${Math.round(state)}%, 
        #2F4F4F ${Math.round(state)}%,
        #2F4F4F 100%
      ) !important; }
      ha-icon {
        color: ${ state <50 ? 'green':
            state <65 ? 'yellow' : state <80 ? 'orange' : 'red'} 
            !important; }
    icon: ""
    name: Master Bathroom
    sub_button: []
    layout_options:
      grid_columns: 2
      grid_rows: 1

I’m looking to put a condition-dependent color code in place of #1E90FF.

1730

Hello @Cloos , thanks for the great bubble card… I like the functionality and flexibility a lot. Great… I am not very deep into css but I understood the possible adaptations you described on your readme-page. I have one question: As my family members are using different themes the bubble cards look is different to the original cards (dark, light, iOS_light_dark_blue). How can I get to the same look and feel(and behaviour) as the original cards without having to change every style of the bubble card?
Thanks for your help. Br Tom

1731

Hi! I will release a video about custom stylings and templates soon, what you want is possible. But I’m also planning to add the possibility to switch to the default HA look (I just don’t know when I will do that, my to-do list is gigantic :melting_face:).

1732

thanks a lot!! Looking forward to the video and the update…Great…

I like your theme in the video… Is this theme available? (asking shy :wink: )

1733

This is my own theme, here it is:

1 Like
1734

Thank for all of the work you’ve put into this! I’m wondering what I am missing, I am just using the bubble button card to call a service and active a scene or script. However, the color shows grayed out for the ones tied to a script.


type: horizontal-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    name: TV
    tap_action:
      action: call-service
      service: scene.turn_on
      target:
        entity_id: scene.tv
    button_action:
      tap_action:
        action: call-service
        service: scene.turn_on
        target:
          entity_id: scene.tv
    entity: scene.tv
    card_layout: large
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    name: Bed Time
    icon: mdi:bed
    tap_action:
      action: call-service
      service: script.bedtime
      target: {}
    button_action:
      tap_action:
        action: call-service
        service: script.bedtime
        target: {}
    entity: script.bedtime
    card_layout: large

Screenshot 2024-11-09 145508

1735

Hi! I probably haven’t covered that case yet, but you can use a “Name/Text” button, then change the Button action to script.turn_on and add you entity there.

There is an example here:

1 Like
1736

In a media-player card… is it impossible to show the media player name regardless of player state?

type: custom:stack-in-card
title: ""
mode: vertical
cards:
  - type: custom:bubble-card
    card_type: media-player
    name: Sonos Family Room
    show_name: true
    show_state: true
    scrolling_effect: true
    hide:
      volume_button: true
      power_button: true
    styles: |-
      .bubble-media-player-container {
        color: white !important;
        background: rgba(7, 103, 215, 0.24) !important;
        border-radius: 10px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(7, 103, 215, 0.5) !important;
      }
      .bubble-icon {
        color: rgba(7, 103, 215, .8) !important;
      }
      .bubble-sub-button {
        color: white !important;
        background-color: rgba(7, 103, 215, 0.24) !important;
        border-radius: 12px;
      }
      .bubble-icon-container {
        background-color: rgba(7, 103, 215, 0.1);
        border-radius: 20px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(7, 103, 215, 0.5) !important;

      }

      .bubble-play-pause-button {
        background-color: rgba(7, 103, 215, 0.24) !important;
        color: White !important;
        border-radius: 12px;
       }

      .bubble-previous-button {
        background-color: rgba(7, 103, 215, 0.24) !important;
        color: White !important;
        border-radius: 12px;
       } 

      .bubble-next-button {
        background-color: rgba(7, 103, 215, 0.24) !important;
        color: White !important;
        border-radius: 12px;
       } 

      .bubble-volume-button {
        background-color: rgba(7, 103, 215, 0.24) !important;
        color: White !important;
        border-radius: 12px;
       } 
    entity: media_player.sonos_family_room
    show_last_changed: true
    hold_action:
      action: none
    double_tap_action:
      action: none
    tap_action:
      action: more-info
    sub_button:
      - entity: media_player.sonos_family_room
        icon: mdi:volume-high
        name: Volume level
        tap_action:
          action: more-info
        show_name: false
        show_state: false
        show_last_updated: false
        show_attribute: true
        show_background: false
        attribute: volume_level
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(7, 103, 215, 0.24);
    }

image

1737

Hi, it’s not possible at the moment, there is not enough space for that when a media is playing. My advice is to add a separator below it with the name/location of that media-player.

1738

Got it! Thanks I’m updating an old media player view and this should be a big improvement… especially when I start playing with pop-ups.

1739

I also stumbled across this a few days ago.

Maybe an option to have the player name where currently the artist is written in combination with “this is a title - and this the artist” scrolling string above as an option would be cool?

On pages / sections that are dedicated to a room, the current setup is perfect.
But I also have a dedicated media page, where I would love to have such an option. :slight_smile:

1740

I use the Icon to indicate which player is playing… I dont need the pictures of the sound that is playing…

Bildschirmfoto 2024-11-11 um 09.52.41
Bildschirmfoto 2024-11-11 um 09.52.41844×380 30.3 KB

1 Like
1741

One question about your example with the rounded rect cards using a different corner radius (which looks very cool btw. :blush:):

You are already chaining Variables from more specific to more general, so it’s easy to overwrite single elements like e.g.:

var(--bubble-media-player-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%)))

What I’m missing is a border radius for cards and one for content elements in this chain.
Like 50% → General Theme Radius → Card-Radius or Content Radius → Specific-Element-Radius → …

The reason is the “fat corners” effect that you get when you add the same corner radius to nested elements (as long as we don’t talk about 50% / full circles).

Normally you have to decrease the inner radius by the distance to the outer one.
For bubble cards, this would be 6px. Which means for cards with a radius of 12px an inner elements radius of 6px would be perfect.

Fat corners:

2
2708×146 26.3 KB

Fixed corners:

3
3712×142 26.2 KB

More details:

Currently you have to use the general theme border radius to set the card corners and then dig through all stylesheets and set all other variables to the smaller radius (which are already a lot and might get more with more card types :wink: )

4 Likes
1742

Really like the bubble cards. A joy to play around with it and to redesign my dashboard.

I wonder if it is possible to have the sub buttons also like a badge around the entity icon itself? For example I want to show around the icon of my entity light the power used for that light, instead of showing it as a button on the card. So basically same badges as what Mushroom cards are using.

Is there any one who can support in yaml coding?

Cheers

1743

I have something similar.

on 2 Devices my Popups are shown unclear.

Screenshot 2024-11-11 115324
Screenshot 2024-11-11 115324506×1075 60.2 KB

Have some errors in the console but i cannot handle it.
On My iOS Devices iPad & iPhone with App an MSEdge everything is shown correct.
On My Ubuntu with MS Edge and 3200x2000 Resolution i have this Problem.
And on my Windows 11 with Edge, Firefox, Chrome with 2560x1140 Resolution i have this Problem.

Second screen in second Post

1744

Screenshot 2024-11-11 115410
Screenshot 2024-11-11 115410416×925 74.8 KB

Tried to Emulate other Resolutions / Devices on windows with Edge but same Problem.