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

Thanks, Cloos. I’m having a lot of fun with the cards for now. I’m literally redoing my entire mobile layout based on the bubbles.

I have some ideas that could be beneficial for the project in the future, as I have a lot of experience in HA to contribute. I would love to contribute in terms of programming, but my JavaScript knowledge is terrible! :grinning_face_with_smiling_eyes:

I’m consolidating my thoughts into an earlier post. I hope you’ll read it in the future. :blush: Although I know you’re currently very busy, so take your time, and please don’t abandon it because it has a lot of potential. =)

2 Likes

The card is only visible in the dashboard editing mode. How do I debug? Front-end cache is reset. Nothing in HA log.

edit: I am SOMETIMES able to see it in the non-edit default mode, but then I’m probably missing something. The entire thing is visible, the close button does nothing.

And at different times still, it falls apart like this (this is the Bubble card and only the Bubble card):

Thanks for a wonderful thing.

Is there a possibility that you will add security cameras in the future? And in addition, is it possible to align the text to the right in the card_type: separator

Thanks

Is it possible to get your yaml of this here?

3 Likes

You have to do the pop card inside the vertical-stack, follow the example

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.kitchen
    state: sensor.kitchen_temperature
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px

It is in a vertical stack, and it is the topmost card, as per instructions.

i assume you mean " This vertical-stack must be after all your other cards".
So the last one if i understand this correctly.

But i have the same issue tbh… :slight_smile: , only visible in edit mode.

Created a new dashboard, added 1 vertical card.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:fridge
    entity: light.lichtpunt_slaapkamer_2
    state: null
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px

Created another dashboard and added 1 button:

show_name: true
show_icon: true
type: button
tap_action:
  action: navigate
  navigation_path: '#kitchen'
name: Kitchen
icon: mdi:fridge

it would be my understanding that i would get a popup when clicking the kitchen buttton?
What am i doing wrong pretty please? :slight_smile:

The popup will only pop it up on “View” mode, not “Edit” mode.

Editing the dashboard is meant to you edit the popup, not use it.
To test you should leave edit mode.

@Cloos

Is there a way to edit via card-mod the state of the button so we can use it as a “entity” button instead?

ie: I want to show the state of a sensor and its name on the button card :smiley:

both cards need to be on the same dashboard,my bad.
is working now.

BETA 6 is here! With a lot of fixes and some new features!

:heavy_check_mark: Fixes :

:bulb: New features :

And more to come!

2 Likes

Hey,
Thanks for the wonderful job you do.
There’s some bug - it’s not clear to me why it doesn’t work - or I do something wrong.

In the attached image (even from the cellphone it is the same), you can see the bottom I can’t go to what I built.

Plus - the names like Active and more. Like your pictures?

Here’s a picture

With beta 6, card still only visible in EDIT mode. Cache is reset, card is in a vertical stack which is the bottom-most card.

This looks promising, I am testing it now and works quite well. I did find that scrolling the horizontal button cards do not work on my browser. It works great on my phone though.

1 Like

beta 6 broked most of my rooms cards :thinking:

and my HA is soooo lag after updating bub card :confused:

I cant even edit the cards :confused: already cleaned cache

Can you tell me what browser you are using? And are you sure that you are not using any custom card that may conflict with it?

This is really weird, can you tell me exactly what is still working and what is not? And are you sure that the last version is correctly installed, have you tried reinstalling it?

Sorry if the question is stupid, can you put one or more horizontal stacks inside a vertical stuck pop up?
What i am trying to do is to have only buttons in the dashboard and each button will call a pop up. In the pop up, i want to have all the lights and switches etc.

Somehow, i cannot find it because the pop up editor gives place for only one entity and optionally a sensor.

Thank you

BETA 7 is in the place! And with the most requested features!

Tap, double tap and hold actions

A fast recap, as you asked me a lot I finally added the possibility to use the HA default tap actions, double tap actions and hold actions on the icons of every cards. This now allows you to display the “more info” window by holding the icon and to turn on/off the lamp of a slider by a single tap for example, everything is possible now and I hope everything works as expected! This is only available in YAML for now.

Here is an example:

tap_action: 
  action: toggle 
double_tap_action: 
  action: call-service 
  service: script.dark_scene 
hold_action: 
  action: more-info

A new custom button type

There is also a new button_type: custom (only in YAML for now) that allows you to use all actions directly on the whole button allowing you to use it for almost everything. Here is an example of a button that toggle all the lights of a room and if you double tap or hold it, it will open a pop-up with all your other lights:

type: custom:bubble-card
card_type: button
button_type: custom
entity: light.kitchen
name: Kitchen
icon: mdi:fridge
tap_action:
  action: toggle
double_tap_action:
  action: navigate
  navigation_path: '#kitchen'
hold_action:
  action: navigate
  navigation_path: '#kitchen'

Styles

But I also added another very requested feature, you can now use directly styles: | without card-mod which finally allows you to modify the style of the pop-ups, here is how to change its opacity for example:

styles: | 
  #root { 
    opacity: 0.95; 
  }

To change the background color of a button:

styles: | 
  ha-card > div > div > div { 
    background: blue !important; 
  }

Or the color of a slider:

styles: |
  ha-card > div > div > div > div.range-fill { 
    background: blue !important; 
  }

All these features are still experimental but according to my tests they all works great! :grin:

The new documentation is coming soon.

:heavy_check_mark: Fixes :

:bulb: New features :

And more to come!

4 Likes

I really dont know, I didnt change anything, but some of my popups just bugged when I updated to beta 6, I tried to rollback to 5 and still no success…

later I will try to recreate them to see if remain bugged.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#psala'
    name: Sala
    icon: mdi:television
    entity: group.sala_geral
    state: sensor.temperatura_e_humidade_sala
    state_unit: °C
    width_desktop: 600px
    margin_top_mobile: 18px
    margin_top_desktop: 74px
    is_sidebar_hidden: false
  - square: false
    type: grid
    columns: 3
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: binary_sensor.sala_porta_contact
        name: Porta
        icon: mdi:door
        card_mod:
          style: |
            .switch-button { 
                {% if is_state(config.entity, 'on') %}
                  background-color: #990000 !important
                {% else %}
                  background-color: green !important
                {% endif %}
            }
  - type: custom:bubble-card
    card_type: separator
    name: Luzes
    icon: mdi:lightbulb-group
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.luz_sala_meio
        name: Meio
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.luz_sala_spots
        icon: mdi:spotlight
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.ambilight_sala
        icon: mdi:led-strip-variant
        name: Ambilight
  - type: custom:bubble-card
    card_type: separator
    name: Mídia
    icon: mdi:play
  - square: false
    type: grid
    columns: 2
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: media_player.2_cast_sala
        icon: mdi:google-chrome
        name: Chromecast

some console erros:

Yay Styles <3

Pls add entity button next release :smiley: if possible to do entity with template also