clooos / bubble-card Goto Github PK

If in the card settings, the "Top margin on mobile" has the value "0" instead of "0px", the card will always show up like this

The correct display should be like this:

Would be neat if sliders could follow the color of the current state of the RBGW light.

Instructions state:
There is no styling options (for now) but it fully support card-mod.
Here is an example on how you can change the font size:

card_mod:
  style: |
    ha-card { 
      font-size: 12px;
    }

The above code works for changing fonts, but the code below (working on both mushroom and default buttons) does not change the background color based on status.

card_mod:
          style: |
            ha-card { 
              background-color: {{ '#3f9f3a' if is_state('lock.back_door', 'locked') else '#FFAAAA' }};
            }

When using the horizontal-button-stack it will block the last row as you can't scroll past it.

I setup the horizontal button stack today and when I navigate using it, it always hard reloads to the destination page.
My own navigation buttons don't do that. I've attached a screen recording to visualize my issue.

Does anybody else have this issue?

(It's kind of hard to see which buttons I pressed in the video but I always pressed the horizontal-button stack first and then my own colored buttons, hope that helps)

Currently the icon only supports "icons" but it would be nice to be able to use custom pictures similar to the mushroom template card I can specify a picture by providing the file path and it uses that over an icon if it's defined.

Awesome project! I was adding buttons in to trigger scenes and noticed they don't work. The service called for the bubble button "generic toggle" doesn't work for scenes. Its a HA limitation. Could we have a way of selecting the service called by the button or a single action function which allows to send one-shot commands like scenes etc?

when using on a mobile device (iphone14 in this example), the main cards in the dashboard are now sitting in front of the horizontal button stack.
screenshot example attached.
currently running beta 5

great cards though - thank you :D

First of all, great work.

I noticed that in Entity Selection the dropdown doesn't stay filtered and it jumps back and shows all entities.

For example:
When entering "lights....." only the "lights." entities are displayed for a short time (as it should be), then the dropdown list is re-rendered and shows all entities again.

Best Regards

I created a Button Card with Slider type and assigned a cover and it doesn't do anything when I activate the button. I guess you already know that because the tooltip only mentions media players and lights, but it would be nice if it supported covers/blinds too.

Great job on the cards! I really like it!

Minor issue, but I noticed that the pointer cursor is showing when hovering over the header icon in the popup (which doesn't have any click/tap action so is a bit misleading) rather than the close button. It seems the cursor: pointer style is applied to the header-icon class rather than the close-pop-up class.

I would really like the option to show only the icon on the horizontal button stack. It will allow for more icons/rooms on the stack, and if Propper icons are chosen, they can describe the button just as good as the name can. :-)

Hi Cloos,

Love the card - quick question. Are you able to navigate to the popups through popups. for example, doorbell press, then it opens up the camera on the bubble card. Not sure if its possible yet, but would love it to be!

There should be a possibility to close the pop up when sliding it down from the top. So you can navigate even faster than clicking on the cross.

When presented with a popup, I'd like to be able to click anywhere "off" the popup and/or press the escape key, for the popup to be dismissed, not just the "X" in the top corner of the popup.

Hi

I'd love to have the possible to have a back button in popups. I have a popup that has elements, that can call other popups ("nested popups", so to say). I don't want to close the popup, because I need to navigate to the previous popup again.
Therefore, I would like to have back button (enabled via an option), that is beautifully integrated in the popup window.

Currently I have solved this with a mushroom chip card (back button variant), which works. But it looks a little bit odd and it is a little bit to small. See Screenshot..

KR
Nazze

The icons you can set with the cover card don't stay selected. see screenshot below if sequence of events.

I select the mdi icons I want to display. I click save.
They do not show on the card. I them edit card and they are not selected

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.

https://community-assets.home-assistant.io/original/4X/d/f/0/df0ffb47930331c4fc0b21673c0ef78c4af21753.jpeg

It would be nice if the default icon for an entity was shows if you leave the icon box blank.

As seen here, I have a vertical stack card with 12 Bubble-button-slider cards. When on my mobile, and want to scroll down past them, it will activate the sliders I touch while scrolling.
I know it is the main function of a slider, but is there anyway to change this behaving?

If the card could somehow limit the slide direction to only look for right to left movement?

• If I slide from right to left = slide on the card
• If i slide from top to button = scroll on the dashboard

See the video: YouTube

I am seeing some outlines on the corners of the bubble card.

I am using this https://github.com/thomasloven/lovelace-state-switch integration to easily seperate mobile and desktop views using a mediaquery as state switch. But if I use this configuration and use your popup example the popup is always visible. I am using the latest version (beta 7). When I press the button the popup moves only up and down. It works great if I do not use the state-switch card.

panel: true
title: ""
icon: mdi:tablet-dashboard
path: overzicht
cards:
  - type: custom:state-switch
    entity: mediaquery
    states:
      "(max-width: 600px)": !include ./mobile/overzicht.yaml
      "all": !include ./desktop/overzicht.yaml

- type: button
    tap_action:
      action: navigate
      navigation_path: "#kitchen"
    name: Kitchen
    icon: mdi:fridge
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#kitchen"
        name: Kitchen
        icon: mdi:fridge
        margin_top_mobile: 0px
      - !include ../cards/chips/voordeur.yaml
      - !include ../cards/chips/achterdeur.yaml
      - !include ../cards/chips/garagedeur.yaml
      - !include ../cards/chips/schuifpui.yaml

When using certain themes, it means you don't have visibility of the the sliders until they are on. Would it be possible to have a thin outline of the icon area and the slider area? This is different from the card border you recently fixed. Maybe this could be accomplished using card_mod, but I haven't had luck just yet.

Example below:

1. First light group has a lighter background, so you lose slider shape.
2. Second light group...When at the top/bottom of a stacked card, you lose outer edge of slider.
3. Third light group is just a mushroom example for comparison.

Fyi...using waves dark theme.

Thanks.

Hi

Localizations of states not working.
I took screenshots of the weather state. Bubble card simply prints out the state as is. Other cards use the localized version of the entity state.

Bubble very simple example:

Weather-forecast card:

I love bubble-cards! I'd love to see it evolve. :)

KR
Nazze

when I add a button with the visual editor and set up its values, the yaml only shows the 1_icon and 1_entity properties. It doesn't matter how long I let it sit, the name and link don't appear in the yaml and don't save. My instance is fully up to date and I restarted the server after installing bubble-card

Hi after testing this card I think the potential is great. I have however found a bug that I think wouldn't be too hard to address.

Whenever using your horizontal-stack (the one that gets sticky to the bottom) and use another link than a popup (e.g. when trying to navigate to a page like /my-dashboard/living-room) it will open the browser instead (tested on Android) instead of staying in the Home Assistant app.

Btw, thanks for this awesome project!

Hi!

I really love the bubble-card. It is the first time that I am happy with my dashboard - it really looks so clean! Thank you!

With beta5, there seems to be a new issues.
1st for every popup on mobile or desktop, if have to enter a top margin of 20px, otherwise it is cut off at the top. That was not the case with earlier versions.

But a real problem is that on Desktop the bottom of a long popup is cut off, no matter of I have a margin of 20px or not.
See Screenshot, where the last Mushroom-Entity is cut off.

This one is missing:

Loving this card and I have begun implementing into my dashboard to separate rooms. The pop-up bubble card has the ability to toggle entities on and off which is terrific but it would be ideal if we could, change the action to, more-info for example so that it would be able to dim a whole room, or even just adding a hold_action.

Also Wanted to congratulate you on creating one of the best cards in Home Assistant !!

On mobile, when invoking a pop-up card it extends past the top of my view and under the dashboard's nav bar, making it impossible to see the header text or exit with the 'X'. A back gesture on android still is able to close the card.

Thankyou for the awesome cards! Dont know if im just being silly but i cant seem to make a button to navigate to another dashboard page. any help would be much appreciated :)

It would be nice to have the option for more than one row of popup buttons rather than 1 row that you swipe.
I tried creating a vertical stack card and splitting the buttons that way but the formatting does not seem to allow this.

Hey, this is really awesome! 🤩

I'm having a bit of trouble with the mobile top margin however; regardless of what I put into the box, it still hides under the header (it's acting as though it's not got any top margin at all).

However, this isn't a problem in Safari. If I open it there, it works fine. It's purely on the iOS Companion app that I'm seeing the problem which is really odd!

Any ideas?

Can you add the tap action to the button/slider? Instead of pulling up more info for lights, it would be great to assign toggle and then more info can be on double tap or hold...depending on what user wants. Thanks.

I can't even tell you how much I love this card. I wasn't even using all my popups before because browser_mod popups are so slow and unreliable. Now the popups are so much more practical.

I use a lot of mushroom entity cards in the menus. I was thinking it would be great if the menu would close when I press certain items, but not others. Not even sure if this is possible.

Thanks again.

Hello!

Sorry to bring another bug report -- at least it proves I'm using it in anger (and sorry I can't contribute...JS is not my friend 😂) 😄

It seems that if a card tries to extend past the viewport, it's able to. By this I mean I'm using the Mushroom media card for all media players which either truncates or marquees media titles if the card is too narrow to show the full thing. However, when the card is in the Bubble Card pop-up, it extends the canvas(?) within the pop-up to be as wide as it needs. This then means the full canvas for all the cards in the pop-up is also extended past the viewport.

The screenshots below show what I mean better than I can explain it!

Let me know if there's any further info I can provide to help.

Cheers!

Pop-up card in edit mode

Pop-up card in view mode

Hi, I am using UI Lovelace Minimalist for my main Dashboard and i would love to use your popups, but sadly the popups are only showing up after tapping anywhere on an empty spot after tapping the navigation button. Same when I directly enter the URL.
They are working perfectly fine on a Dashboard thats not from UI Lovelace Minimalist.

I hope its something that u can fix and is not up to UI Lovelace Minimalist. :)

I am currently using the newest beta version 5.

On a dashboard with an entities card, containing both type: custom:bar-card and type: custom:multiple-entity-row, the popup pops under the entities card on iOS. On Desktop it's hit and miss if it works or not.

If I add a bubble card to a vertical stack and try and type in a partial name in the Entity field so it will display a filtered list for searching, that list will reset and show all entities if you do nothing for a few seconds and makes it really hard to find an entity when you have hundreds and don't know the exact name.

I have two swipe cards on my home screen and they are organised in a vertical-stack card.

I set up a bubble-card:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#light'
    name: Licht
    icon: mdi:lightbulb-group
    margin_top_desktop: 10px
  - square: true
    type: grid
    cards:
      - type: custom:slider-button-card
        entity: light.zbmini_bad
        slider:
          direction: left-right
          background: gradient
          use_state_color: true
          use_percentage_bg_opacity: false
          show_track: false
          toggle_on_click: false
          force_square: false
          show_attribute: false
        show_name: true
        show_state: true
        compact: false
        icon:
          show: true
          use_state_color: true
          tap_action:
            action: more-info
          icon: mdi:led-strip
        action_button:
          mode: custom
          icon: mdi:power
          show: true
          show_spinner: false
          tap_action:
            action: toggle
        name: Bad
        show_attribute: true

When I trigger the bubble-card it is opened in the background, hidden behind the swipe cards.

Hi

100% width dont work on desktop with no side bar

Its possible to have only the X for close in the pop up?
Thanks

There is no preview when an light is selected or entered into the entity box. It only shows after your save the card.

There is also a weird shadow when you select a button card.

First of all, I'd like to thank the developers of this repository. This card has huge potential and looks really great on mobile. Thank you so much for continuing to improve our experience on Home Assistant!

Feature Request: It would be interesting to show the state of the button for the room entity.

Currently, for example, I've linked my kitchen lights, which are ON, but the "power" button remains grey. This is confusing:

For the light slider: The icon is quite small, and miss-touching slightly outside the area results in both the brightness coming down to about 8, and opening the detail pane.

Really I think the active part of the slider needs to start to the right of the icon in order to prevent this.

It might be worth adding to the documentation that the 'Home Assistant Swipe Navigation' frontend app seems to stop the horizontal button stack from being able to scroll.

I was banging my head against a wall for a few hours until I realised I still had it installed from an old dashboard.

I'm having multiple issues and trying to figure them out...

I use a bottom nav-bar instead of a top nav-bar so it seems like on mobile it is I guess hidden behind it and I can't see the button row

My code:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#basement'
    name: Basement
    icon: hue:downstairs
    entity: light.basement_lights
    state: light.basement_lights
    margin_top_mobile: 60px
    margin_top_desktop: 60px
  - type: custom:bubble-card
    card_type: separator
    name: Lights
    icon: m3s:light-group-outlined-filled
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: light.huego
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.davids_lightstrip
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.davids_lightstrip2
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.davids_lamp
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.davids_lamp
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.davidslamp2
        button_type: switch
      - type: custom:bubble-card
        card_type: button
        entity: light.tv_lightstrip
        button_type: slider
      - type: custom:bubble-card
        card_type: button
        entity: light.basement_smart_plug
        button_type: switch
        name: Display Shelf
    columns: 2
  - type: custom:bubble-card
    card_type: separator
    name: Media Players
    icon: m3s:speaker-group-outlined-filled
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: media_player.david_s_display
        button_type: switch
        icon: phu:nest-hub
      - type: custom:bubble-card
        card_type: button
        entity: media_player.david_s_tv
        button_type: switch
        icon: m3s:tv-gen-outlined
      - type: custom:bubble-card
        card_type: button
        entity: media_player.samsung_tv_control
        button_type: switch
        icon: m3s:tv-gen-outlined
        name: Samsung TV
    columns: 2

Code 2:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Basement
1_link: '#basement'
1_entity: light.basement_lights
1_icon: mdi:home-floor-b
auto_order: false

Any chance of a brief instruction sheet?

The first time the visual editor worked, now it doesn't, so I am not sure what to put in for the config

It would be nice to be able to use occupancy sensors instead of just motion sensors for the auto sort.

This is likely a bit of a niche request, but I use a custom card that supports query args that allow controlling it. I am looking to put this card in a popup, however it seems that the query args throw off the #popup

I don't know why this is happening I've tried clearing my browser cache and still but for some reason the buttons are overlaying each other when I add more than 2 and it looks like this. Please help.

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Davids Room
1_icon: hue:downstairs
1_entity: light.basement_lights
2_name: V/E Room
2_icon: hue:upstairs
2_entity: light.vally_esthers_room
3_name: Media
3_icon: mdi:music-circle
style: |
  ha-card {
    margin-bottom: 62px !important;