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

Share your Projects! Dashboards & Frontend
,
2051

Bubble Card 2

v2.3.1

Hi everyone!

This update brings several enhancements, bug fixes, and even some new features that I couldn’t wait to implement! Special thanks to @MrBearPresident for his valuable first contributions to this release! As always, let me know if you encounter any issues or have feedback. Your input helps make these updates even better!

P.S.: I really need to update the documentation with all the changes from v2.3.0 and v2.3.1, I will do that soon!

Here’s what’s new:

:bulb: New features

  • Conditional sub-button visibility:
    Sub-buttons now support conditional visibility based on Home Assistant’s conditional system, allowing more dynamic setups without the need to add templates. #787 - PR #995 by @MrBearPresident.

    In YAML:

       visibility:
     # Show this sub-button only when motion is detected at the front door.
     - condition: state
        entity: binary_sensor.front_door_motion
        state: "on"

    image
    image1098×726 41.5 KB

  • New pop-up trigger system:
    Introduced a new trigger system in the pop-up editor, to allow more complex triggers. This new feature is based on the conditional system from @MrBearPresident, so thanks again to him for this great new possibility! #332

    This is not a breaking change, existing triggers from previous versions will still work but can only be edited in YAML mode. If you switch to the new system, it will override previously added triggers.

    In YAML:

       trigger:
     # Open this pop-up when motion is detected at the front door.
     - condition: state
        entity: binary_sensor.front_door_motion
        state: "on"

  • Box shadow variable:
    You can now adjust the box shadow for your Bubble Cards, this can be done with the --bubble-box-shadow variable. PR #1009 by @flobiwankenobi.

  • Safety binary sensor icon:
    Added a dedicated icon for safety binary sensors. PR #967 by @nexeck.

:heavy_check_mark: Bug fixes and optimizations

  • Improved light color handling (again):
    Lights without RGB support now use the accent color, mirroring Home Assistant’s default behavior. #692.

  • Fan modes issue:
    I should have resolved an error when HVAC are in dry mode. #987.

  • Media player custom style issue:
    Resolved an issue where modifying the background color in .bubble-media-player caused rounded corners to disappear. PR #1015 by @MrBearPresident.

  • Instant .bubble-name templating:
    Optimized for faster rendering when using templated names. #975.

  • Entity picture issue:
    Fixed an issue where some entity_picture URLs were not displayed.

  • Volume slider issue:
    Closing the volume slider in a media player card now behaves as expected. #994 - PR #1001 by @MrBearPresident.

:information_source: Bubble Card news

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

YouTube

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

image
image1070×184 53.1 KB

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Patreon Clooos

Thank you so much for being part of this amazing community, your support will always makes a huge difference! :heart:

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

Community creations

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Reddit Page

:beers:

9 Likes
2052

Try something like this:

background-size: 75% !important;
background-repeat: no-repeat;
1 Like
2053

Appreciate the shorter release-cycles. :slight_smile:
If anyone had written in this thread that the box shadows thing is being centrally implemented (⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch - #1917 by flobidan), I could have saved myself the effort of finding a solution via custom css styles… :smiling_face_with_tear:

2054

Bubble Card 2

v2.3.2 - Hotfix Release!

This urgent hotfix resolves key issues introduced in v2.3.1. Please update to this version promptly.

  • Sub-button issue:
    Fixed an issue where sub-buttons would disappear inside the editor. #1031 - PR #1032 by @MrBearPresident.

  • Media player Issue:
    Addressed a problem affecting media player functionality. #1030 - PR #1032 by @MrBearPresident.

  • Accent color for lights (Optional):
    The accent color for lights is now optional to prevent a too significant breaking changes. To enable it, go to the editor or add use_accent_color: true in YAML.

    Pasted Graphic 1
    Pasted Graphic 11734×282 33.6 KB

2 Likes
2055

This was not you?

2056

Like this? (on the left)
image

Just remove a sub-button and the last line in the code

${subButtonIcon[3].setAttribute("icon", hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? 'mdi:robot-vacuum' : 'mdi:robot-vacuum-off')}
1 Like
2057

If I’m correct you have the vertical stack in the same section as the room-cards.
Even more they are in front/above of the room cards.

I think it is a good practice to have all the pop-ups at the end of your sections-view in a separate section.

Can you confirm this?

2058

Hi, is there a variable I can use that returns the current logged-in user’s name? I’m making a button card that welcomes the user: “Welcome, Johny!”

${card.querySelector('.bubble-name').innerText = "Welcome, " + <variable>}

Also, am I able to write proper JS code? This doesn’t seem to work.

${const getGreeting = () => {
  const currentHour = new Date().getHours();
  if (currentHour >= 5 && currentHour < 12) {
      return "Good morning, ";
  } else if (currentHour >= 12 && currentHour < 17) {
      return "Good afternoon, ";
  } else if (currentHour >= 17 && currentHour < 21) {
      return "Good evening, ";
  } else {
      return "Hello, ";
  }
};
const greeting = getGreeting();
card.querySelector('.bubble-name').innerText = greeting;}
2059

Hi guys, I’m totally hyped to build my first bubble card dashboard!
One thing I can’t figure out is how I can control the tilt angle of my Venetian Blinds I have… Is there any way?

2060

Hi,
can I remove the background of this mini-graph.card?

image
image1082×1007 27.6 KB

I would like to embed it between other cards…

type: custom:button-card
aspect_ratio: 10/3
custom_fields:
  value:
    card:
      type: custom:button-card
      entity: sensor.buro_klima_temperature
      show_icon: false
      show_state: true
      show_name: true
      name: "Indoor Temperature :"
      styles:
        name:
          - padding-left: 70px
          - justify-self: start
          - font-size: 0.9em
          - font-weight: bold
        state:
          - padding-left: 100px
          - justify-self: start
          - font-size: 0.7em
        card:
          - background-color: transparent
          - width: 500px
          - border-radius: 0%
          - z-index: 1
      tap_action:
        action: none
      hold_action:
        action: none
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.buro_klima_temperature
      color_thresholds:
        - value: -20
          color: "#0000FF"
        - value: -10
          color: "#00BFFF"
        - value: 0
          color: "#ADD8E6"
        - value: 10
          color: "#00FF00"
        - value: 20
          color: "#80FF00"
        - value: 25
          color: "#FF8000"
        - value: 30
          color: "#FF0000"
      hours_to_show: 24
      hour24: true
      points_per_hour: 2
      animate: true
      update_interval: 30
      aggregate_func: avg
      line_width: 2
      bar_spacing: 5
      height: 100
      group: true
      show:
        labels: false
        fill: fade
        state: false
        name: false
        icon: false
styles:
  card:
    - background-color: var(--button-card-background-color)
  custom_fields:
    graph:
      - position: absolute
      - bottom: 0px
      - left: 0px
      - width: 100%
      - height: 70%
      - padding-bottom: 0
tap_action:
  action: none
hold_action:
  action: none
2061

Hi, I am new to HA and the bubble cards. I love the flexibilty and the design but 2 things are driving me crazy…

  1. I mostly use the bubble cards on my smartphone and I have popup-cards full of sliders. It is nearly impossible to scroll on the page without accidently move a slider because they react on a singe touch within the slider field.

  2. I dont like the “slider live update” but without it I cant see the target value while sliding.

Are there any ways to get along with that or any workarounds? Is it maybe possible to (easy) get “- and +” Buttons instead of a slider (like on the climate bubble card)?7

thanks!

2062

Is the card not updating or is it something else?

I’ve gone to HACS > Bubble Card (kabob menu) Redownload. It says v2.3.2 will be downloaded. Download. Restart HASS.

Then add a bubble card via the UI and the Bubble Card configuration page says:
The Bubble Card v2.3.0 changelog is available here.

And the bottom of the page shows a bubble that says Bubble Card v2.3.0

I would assume this is just lagging documentation, but I’m also not seeing the Visibility options for sub buttons.

2063

No, but I was also quite surprised about the similarities in our user names, what a coincidence :smiley:

2064

I guess you need to do a hard refresh of your browser. I see the correct version number and the sub-button visibility options.
The Companion app I also had to terminate and start again to have it refreshed.

2065

  1. There is an open issue on github.
    Swiping from left edge to open sidebar activates sliders on mobile · Issue #1014 · Clooos/Bubble-Card · GitHub
    Also have a look at [Example] Progressbar, % bar · Clooos/Bubble-Card · Discussion #928 · GitHub
    If you add your own sub-buttons with + and -, to the sub-buttons link a script to in-/decrease 5%.

  2. Search through the feature request on github, if not there you can submit yours.
    Clooos/Bubble-Card Feature Requests · Discussions · GitHub

2066

Use hass.user.name

1 Like
2067

I don’t think it is possible to affect other cards…

2068

Bubble Card 2

v2.3.3 - Hotfix Release (again)!

Here’s a new version that fix some new issues introduced in v2.3.1/v2.3.2. Thank you again for your feedback!

  • Media player border radius:
    Corrected the border radius for the media player card in the normal layout. #1034

  • Box shadow variable for cover buttons:
    Fixed an issue where the box shadow variable was affecting the cover buttons instead of the card in the large layout. #1039

  • Undefined message in console logs:
    Resolved an issue causing the browser console to be spammed with undefined messages.

2069

Hello, thank you very much for your great work!

Since the update 2.3.0 and following, my dashboard, which consists exclusively of a Bubble card objects, is very very slow. Sometimes keystrokes take several seconds until the pop-up opens.

Does anyone else have such a problem? Before the update, it went wonderfully.

2070