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

Cloos · September 2, 2023, 7:20am

readme-images-bubble-card

Bubble Card is a minimalist and customizable card collection for Home Assistant with a nice pop-up touch.

Installation

Home Assistant lowest supported version: 2023.9.0

Without HACS

Download these files: bubble-card.js and bubble-pop-up-fix.js
Add these files to your <config>/www folder
On your dashboard click on the icon at the right top corner then on Edit dashboard
Click again on that icon and then click on Manage resources
Click on Add resource
Copy and paste this: /local/bubble-card.js?v=1
Click on JavaScript Module then Create
Go back and refresh your page
You can now click on Add card in the bottom right corner and search for Bubble Card
After any update of the file you will have to edit /local/bubble-card.js?v=1 and change the version to any higher number

If it’s not working, just try to clear your browser cache.`

With HACS (Recommended)

This method allows you to get updates directly on the HACS main page

If HACS is not installed yet, download it following the instructions on https://hacs.xyz/docs/setup/download
Proceed to the HACS initial configuration following the instructions on https://hacs.xyz/docs/configuration/basic
On your sidebar go to HACS > Frontend
Click on the + button at the bottom right corner
Now search for Bubble Card and then click on the button at the bottom right corner to download it
Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard
You can now click on Add card in the bottom right corner and search for Bubble Card

If it’s not working, try to clear your browser cache.

Videos

There is also a detailed setup video from BeardedTinker, thank you so much to you!
YouTube - Pop-up cards with Bubble Card in Home Assistant

And also a video for the German users from smart-live.net, thanks a lot to you too!
YouTube - Home Assistant Dashboard Bubble Card - Eine der Besten Karten 2023?

Configuration

All options can be configured in the Home Assistant editor. But you can find a lot more details, examples and the YAML in the documentation on GitHub.

Pop-up

This card allows you to convert any vertical stack into a pop-up. Each pop-up is hidden by default and can be opened by targeting its link (e.g. '#pop-up-name'), with any card that supports the navigate action, or with the horizontal buttons stack that is included.

Horizontal buttons stack

This card is a good companion to the pop-up card, allowing you to open the corresponding pop-ups. It also allows you to open any page of your dashboard. In addition, you can add your motion/occupancy sensors so that the order of the buttons adapts according to the room you just entered. This card is scrollable, remains visible, and acts as a footer.

Button

This card allows you to control your entities and can be customized in many ways. To access color / control of an entity, simply tap on the icon.

Media player

This card allows you to control a media player. You can tap on the icon to get more control.

Cover

This card allows you to control your covers.

Separator

This card is a simple separator for dividing your pop-up into categories / sections. e.g. Lights, Devices, Covers, Settings, Automations…

Empty column

This card is here to fill an empty column. This is useful if you have an horizontal-stack in your pop-up with only one card. Take a look at the bottom right corner of this screenshot to (not) see it.

Sub-buttons

In every cards that supports that option you can add sub-buttons to customize your cards even more. You can for exemple create a button that can control a vacuum, a weather card or almost anything that you can come up with. These sub-buttons supports the tap actions and most of the button options.

Card layouts

Bubble Card fully supports the Home Assistant section view, you can change the card layout to make the card bigger and also change the number of columns or rows the card should occupy in your section view (only on the cards that support that option). These layouts are also supported in all other view types.

Tap, double tap and hold actions

You can also use Home Assistant default tap actions, double tap actions and hold actions on the cards that supports this option. For example, this allows you to display the “more info” window by holding a button icon or running a service when a sub-button is pressed.

Styling

You can add custom styles in the editor or by adding styles: | in YAML without using card-mod which allows you to modify the CSS style of all the cards.

Templates

Advanced users can add templates in JS directly in their custom styles (Bubble Card doesn’t support Jinja templates). For example, this allows you to dynamically change an icon, the name or the color of an element, to show or hide an element conditionnaly (like a sub-button), or almost anything based on a state, an attribute and more.

Help

Feel free to open an issue if something is not working as expected.

Got questions or thoughts about Bubble Card? Want to share your dashboards or discoveries? You can do that here on the Home Assistant forum, on the Bubble Card subreddit or on the GitHub Discussions section.

Donate

I dedicate most of my spare time to making this project the best it can be. So if you appreciate my work, any donation would be a great way to show your support

Thank you everyone for your support, you all are my greatest motivation!

woodmj74 · September 2, 2023, 9:21pm

Looking interesting - I could be rebuilding my mobile views soon!!

Any plans to add an entity type bubble card?

pyrodex · September 2, 2023, 9:26pm

Can’t add it on HACS, getting error about the repository is already there in the store?

Cloos · September 3, 2023, 3:08am

Hi, have you fixed your issue?

pyrodex · September 3, 2023, 1:16pm

Yup, just tried this morning and while HACS says it loaded the custom repo nothing shows up and then later if I go back into Custom Repos it throws an error about it already being added.

Cloos · September 3, 2023, 1:22pm

And if you search for it directly in HACS, is it not there? If not I really have no idea to be honest, you seems to be the first one with this issue.

pyrodex · September 3, 2023, 1:26pm

Yup! No entry to install shows up. Its even weirder when I go back into HACS and click the custom repo setting and only still see my two without yours.

Cloos · September 3, 2023, 2:10pm

Is HACS up to date? Have you tried rebooting your system? If yes I’m clueless.

pyrodex · September 3, 2023, 2:30pm

HACS and everything is the latest version. I am running HA in a container and even restarted the container.

d_sellers1 · September 4, 2023, 1:00am

Love all of the cards, but I’m going to have to say the claim to fame is going to be the pop-up. Lots of potential there. I’ve already started playing with card mod to see what can be done with it. So far, I’ve turned the pop-up card into more of a header by hiding some of the stuff.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#lights'
    name: "\_"
    icon: mdi:chart-bubble
    width_desktop: 500px
    margin_top_mobile: 18px
    margin_top_desktop: 50%
    card_mod:
      style: |
        :host {
          background-color: transparent;
        }
        ha-card { 
          color: red;
        }
        #header-container {
          background-color: transparent;
          div {
            background-color: transparent;
          }
        }
        h2 {
          font-family: Arial;
          font-size: 28px !important;
          color: white;
          background-color: transparent;
        }
        .header-icon {
          color: orange;
          background-color: blue;
          display: none;
        }
        .close-pop-up {
          background-color: light-gray;
          --card-mod-icon-color: white;
          width: 50px;
          height: 50px;
        }
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        name: Kitchen
        icon: mdi:lightbulb
        entity: light.kitchen_lights
        card_mod:
          style: |
            .nameContainer {
              font-family: Arial;
              font-size: 22px !important;
              color: white;
              background-color: transparent;
            }
            .icon-container {
              color: white;
              background-color: transparent;
              display: true;
            }
      - type: custom:big-slider-card
        entity: light.kitchen_lights
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        name: Living Room
        icon: mdi:lightbulb
        entity: light.living_room_lights
        card_mod:
          style: |
            .nameContainer {
              font-family: Arial;
              font-size: 22px !important;
              color: white;
              background-color: transparent;
            }
            .icon-container {
              color: white;
              background-color: transparent;
              display: true;
            }
      - type: custom:big-slider-card
        entity: light.living_room_lights
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        name: Office
        icon: mdi:lightbulb
        entity: light.office_lights
        card_mod:
          style: |
            .nameContainer {
              font-family: Arial;
              font-size: 22px !important;
              color: white;
              background-color: transparent;
            }
            .icon-container {
              color: white;
              background-color: transparent;
              display: true;
            }
      - type: custom:big-slider-card
        entity: light.office_lights

Note: there is some extra card mod entries that I left for reference, such as the h2 which is the name. In my case, I hid the name but left the entries for everyone else.

Firstorlast · September 4, 2023, 7:02pm

I had same issue and found fix. Check your configuration settings for HACS under the integrations page. Make sure country filter is set to ALL. I also configured ‘enable experimental features’

pyrodex · September 6, 2023, 2:34pm

The Country filter was it for me also…

Manen123 · September 7, 2023, 9:31am

@ Cloos I have instaled the bubble-card via hacs and i found the card in the frontend,
but now i`ve get an error message:
Custom element doesn’t exist: bubble-card.
What did I do wrong?

mag2000 · September 7, 2023, 1:58pm

try to clear the browser cache or maybe the browser is too old

alexandrechoske · September 7, 2023, 2:52pm

Congratulations mate, this one has a lot of future!

I will enjoy the holiday to play with it and do some considerations.

Suggestions:

1 - The popup could be called from another screen, so with this we can make a “popup” dev screen and group them all on and call on the main screen with the button, this would be nice to organize things better.

2 - I Missed an simple Entity bubble card to show some entites infos ie: doors, windows contact sensor. ( im using the button and it works well but maybe a dedicated would be better )

3 - An option to set the horizontal bubble card to became header or footer then we can use it on the top of the layout as well

4 - Cover Button: I missed some info if the cover is opened or closed, maybe a % on the right of the name would be great

5 - when addind groups on the horizontal buttons, entities are blank.

6 - scroll of horizontal buttons not working on desktop

Cloos · September 7, 2023, 3:32pm

Thanks! It would be great indeed, but I really don’t know if it’s even possible to do with the default vertical-stacks. My main use case of Bubble Card is to have everything on only one page and I really love it this way. But if someone want to contribute to this project to add a feature like that, he’s really welcome!

alexandrechoske · September 7, 2023, 8:12pm

@Cloos

this section is the HA native header bar or you did it?

shpongledsummer · September 7, 2023, 8:15pm

Really like the bubble card, thanks a lot for all the work you put into this!

Just one thing I haven’t managed to figure out after many hours of trying: the pop up adds a big bottom padding. I want to have a sticky footer within the pop up which sticks to the bottom, but haven’t found a way to edit the pop up css bottom padding with card mod. How can I edit the styles of the actual Popup with card mod?

Manen123 · September 8, 2023, 7:20am

I have clear the browser cache, I use the edge browser, but still the same problem?!?

Cloos · September 8, 2023, 6:50pm

@alexandrechoske It’s made with custom:paper-buttons-row but I’m planning to add this ability to the horizontal buttons stack.

@shpongledsummer Indeed it would be more convenient to have it to the sticky position when the page is longer than the screen, and that is often the case I guess. Like I said in my previous answer, I will add more control on the horizontal buttons stack and the ability to choose it’s positioning makes total sense.

@Manen123 Have you tried with an other browser? Clearing the cache should work, or is it possible that you have missed something while installing it? Without more information it’s hard to say what can cause this.