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

Cloos · September 2, 2023, 7:20am

Bubble Card

Hi everyone! Here is my first custom card for Home Assistant (I finally did it!). And it’s available on HACS, more informations on how to install and configure it below.

If you find a bug please open an issue on:

Screenshots and features

Installation

Without HACS

Download these files: bubble-card.js and bubble-pop-up.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

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 or Bubble Pop-up

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

Configuration

Most options can be configured in the GUI editor.

The full configuration documentation can be found here:

Donate

If you like my project and want to support me, please consider making a donation. Any amount is welcome and very much appreciated!

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.