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

projectdimpreza · July 9, 2024, 9:49am

This card is so useful for my dashboard… thanks @Cloos ! Anyway just wondering why my camera popup is not showing in the center? I’m using a android tablet in landscape orientation with fully kiosk… below is my config if this can help debug the issue…

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#pop-up-cam'
    bg_opacity: '0'
    scrolling_effect: false
    show_icon: false
    show_name: false
    trigger_state: 'on'
    trigger_close: false
    card_layout: normal
    margin: 13px
    width_desktop: 800px
    auto_close: '30000'
    trigger_entity: input_boolean.camera_popup_toggle
    margin_top_mobile: 0px
  - type: custom:mushroom-title-card
    title: Motion Detected!
  - type: custom:frigate-card
    cameras:
      - camera_entity: camera.hikvision_ch5
        live_provider: go2rtc
        go2rtc:
          modes:
            - webrtc
    view:
      default: live
    menu:
      buttons:
        frigate:
          enabled: true

Cloos · July 10, 2024, 9:24am

Hi, you can add:

margin_top_desktop: 0px

And in the latest beta you can also add:

show_header: false

I hope this help.

PiercingGoblin · July 10, 2024, 1:11pm

Apologies if this has been asked before – I tried doing some searching through this topic and couldn’t quite find anyone asking the same thing!

Is there any way to easily style all cards? I can apply styles to each card with

styles: |
   ...

but can’t seem to easily apply any kind of global styling to every card. For example, I want to globally modify .bubble-button-card-container to have a different border-radius property without having to do it in each card, or in each section/grid/dashboard.

Apologies if this is a question better suited for something like HA Frontend Themes, but I just couldn’t quite figure it out

Thanks!

Cloos · July 10, 2024, 5:43pm

Hi, you are not the first to ask for that but there is still no way to do that globally, but I will add that possibility soon!

hazio · July 11, 2024, 12:57pm

Are there any way to change the redirection of the Popup card when you click the ‘X’ button? I want to place the popup card on another dashboard page instead of cluttering the main page.

And, maybe popup within a popup?

PiercingGoblin · July 11, 2024, 1:05pm

Thanks @Cloos! Really appreciate all the dedication, hard work, and documentation you’ve put into this project!

I’d love to take a look at helping with a PR on that front if you are looking for contributors/reviewers/testers! (or if that feature ends up in a beta!)

Cloos · July 11, 2024, 1:40pm

Since v2.1.0-beta.2 you can change the action when the pop-up is closing, so you can navigate to wherever you want.

Cloos · July 11, 2024, 1:45pm

Your help would be really appreciated! My time to work on this project is limited so any contribution is more than welcome!

For this PR I would recommend adding CSS variables like var(--bubble-border-radius, 32px) with clear names. I really should have done that since the beginning.

Thank you so much in advance!

Cloos · July 11, 2024, 6:36pm

Bubble Card 2

v2.1.0-beta.3

Hi everyone!

The issues with the new features have been quite challenging, especially the issues related to the select features. It took more time than I initially anticipated. However, I’m glad to announce that this new version should address all the issues concerning these new features And more!

Bug fixes and optimizations

Fixed some issues with the media player volume slider (fix for #586?)
Select Cards are now refreshing the list when input_select is updated elsewhere #631
@brunosabot fixed an issue introduced in his previous PR, now unavailable attributes are correctly hidden (PR #639)
Fixed select dropdown that was hidden by underneath cards #624
Fixed an issue with the pop-up close/open action that was not always triggered #636
Fixed the scrollbars that were appearing on some browsers after the v2.1.0-beta.2 update #644
You can now pick a select entity in the select card editor
Climate states are now correctly changing button colors
Custom templates are now throwing errors in the card for better visibility/understanding
Made some changes in the editor for the new features
Select sub-buttons should now be correctly shown in all card types

Thank you again for your feedback and support!

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

iona · July 11, 2024, 11:26pm

How do I go abouts separating the bubble-icon-container background colour from accent-color in themes.yaml? thanks

PiercingGoblin · July 12, 2024, 1:54pm

That’s actually what I was looking at doing – I started researching HA themes and realized that there’s only variables on certain things – I’d be happy to take a crack at it

Though, I wonder if there’s any kind of solution that could be added to allow additional styling, rather than just modification of existing styling

(For example, if I wanted to add a new CSS property that isn’t already used in the theme, a variable wouldn’t necessarily fix that, but is still a plus to have IMO!)

Cloos · July 12, 2024, 2:23pm

Thank you so much in advance!

I guess that the solution for additional styling would be to add some kind of global templates directly in the dashboard YAML, like how button-card is doing it, but I’ve never checked how it is doable.

Hobbybob · July 12, 2024, 6:08pm

Hi Cloos, I just discovered Bubble Cards, and I love them! I do have one issue though. I am using a slider for my thermostat. It works exactly as it should, but when I load the dashboard, I was expecting the background to be partially filled according to the set temperature. This is not the case though. Below an image where in the top you see what am getting when I load the dashboard, and below that what I was expecting (I used the slider to set it. If I refresh the dashboard (F5), it goes back to the top one.

Bubble slider

I have built this up through the visual editor, but the YAML-code it generated is this:

type: custom:bubble-card
card_type: button
button_type: slider
entity: climate.thermostaat
show_attribute: true
attribute: temperature
icon: mdi:home-thermometer-outline
sub_button:
  - entity: climate.thermostaat
    show_attribute: true
    attribute: current_temperature
    show_icon: true
    icon: mdi:home-outline
  - entity: weather.forecast_thuis
    show_attribute: true
    attribute: temperature
show_state: false

I’m using version 2.0.4 by the way (installed through HACS)

large.mitch · July 12, 2024, 7:22pm

Would it be possible/ is it possible to have the card in a vertical mode eg: sub button all stacked vertically and the icon on top or bellow the labels to give more of a square layout of the card??

I duno if this is already possible or not with card mod
And could it be an additional layout to select??

Sorry if it’s a silly question

iWarren · July 12, 2024, 11:58pm

I was just looking for something exactly like this but for showing remaining battery. (I’m currently using a custom:bar-card to show the state but, as bubble-cards are so brilliant, I’m trying to convert everything over.)

For me the slider is not going to work (yet!) as it only supports ‘the brightness of a light, the volume of a media player, the position of a cover, and […] input numbers’.

I wonder if you can use the support for input numbers to trigger a script to set the temperature? Assuming slider works with values between 0 and 100, your script would need to convert the input_number to an actual temperature in your preferred range and vice versa. ((max_temp - min_temp) * (input_number /100)) + min_temp.

This would mean that for the slider to natively support this, be it for temperature setting or battery levels, it would need a minimum and maximum value to scale properly, (e.g. 15-30C, 0-100%).

Hmm, I think I’ve just given myself an answer too!
Yup. I just created an Input_Number helper to hold the battery sensor value and used that to show the battery level. Now to add some styling!

frnak · July 13, 2024, 1:13am

I’m trying to hide horizontal-button-stack buttons based on user. Does anyone know how to use the JS templating feature to get the current front end user? Just starting to dive into this, is there a way to “browse” the hass.states in the browser console somehow?

frnak · July 13, 2024, 1:58am

I found the way to do a conditional based on the current user, but I’m still having trouble hiding horizontal-button-stack buttons because their position is set in a pretty absolute way. Is there a way to display them dynamically?

Here’s the JS for the original question:

display: ${hass.user.name === 'NAME' ? '' : 'none'} !important;

Hobbybob · July 13, 2024, 6:01am

Hi Warren, the slider is also for thermostat according to the pop-up in the visual editor, and it works perfectly. If I slide the value, the temperature on the thermostat is changed.

It’s just the partial background that is not set when the dashboard is loaded. So I don’t think for my application I would need a custom script.

Domotech · July 13, 2024, 10:01am

Hello friends,

Thanks for this awesome theme.

Just want to know if we can choose a background-color conditionnaly with a value and not a state.

I would like to change the icon background if i produce more than I consume.

Thanks in advance

Cloos · July 13, 2024, 10:20am

Bubble Card 2

v2.1.0-beta.4

Hi everyone!

For this new beta release, I’ve primarily focused my work on the select card/sub-button and the new v2.1.0 features should be fully working now I’m aware that there are other older issues that remain to be fixed and I will concentrate on these once the v2.1.0 is out of the beta phase.

Thank you for your understanding and I apologize for the wait!

Bug fixes and optimizations

Fixed (again) select dropdown that was hidden by underneath cards #624
You can now have a select sub-button with just the dropdown arrow.
Fixed an issue with the media player volume slider that was not hiding correctly the texts behind it

Thank you again for your feedback and support!

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