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

[koleos]

Hello, thanks for last beta.
I Still have my issue when editing on mobile once there is the button horizontal-stack.
Regarding the diez of the screen too wide

Nb my code.

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            button_type: slider
            entity: light.salon_lumieres
            name: Salon
            hash: '#salon'
            show_state: true
            show_attribute: false
            force_icon: false
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: person.olivier
          - type: custom:bubble-card
            card_type: media-player
            entity: media_player.piece_a_vivre
          - type: custom:bubble-card
            card_type: button
            button_type: state
            entity: sensor.porte_podposition
            sub_button:
              - icon: ''
                entity: button.porte
            styles: >-
              ha-card > div > div > div.bubble-button-card.switch-button >
              div.bubble-icon-container.icon-container::after {

              #ha-icon {
                  color: {% if is_state('sensor.porte_podposition','LOCK') %} green !important {% endif %} {% if is_state('sensor.porte_podposition','CLOSE') %} white !important {% endif %} {% if is_state('sensor.porte_podposition','OPEN') %} red !important {% endif %};
              }
            show_attribute: false
            attribute: templates
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: 'Porte entrée '
                secondary: |
                  {% if is_state('sensor.porte_podposition','LOCK') %}
                  Verrouillée
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','CLOSE') %}
                  Fermée
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','OPEN') %}
                  Ouverte
                  {% endif %}
                icon: |
                  {% if is_state('sensor.porte_podposition','LOCK') %}
                  kuf:fts_door_locked
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','CLOSE') %}
                  kuf:fts_door
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','OPEN') %}
                  kuf:fts_door_open
                  {% endif %}
                tap_action:
                  action: more-info
                badge_icon: |
                  {% if is_state('sensor.porte_podposition','LOCK') %}
                  mdi:lock
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','CLOSE') %}
                  mdi:lock-off
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','OPEN') %}
                  mdi:lock
                  {% endif %}
                icon_color: |-
                  {% if is_state('sensor.porte_podposition','LOCK') %}
                  green
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','CLOSE') %}
                  white
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','OPEN') %}
                  red
                  {% endif %}
                badge_color: |
                  {% if is_state('sensor.porte_podposition','LOCK') %}
                  green
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','CLOSE') %}
                  green
                  {% endif %}
                  {% if is_state('sensor.porte_podposition','OPEN') %}
                  red
                  {% endif %}
                fill_container: true
                hold_action:
                  action: more-info
                double_tap_action:
                  action: call-service
                  service: button.press
                  target:
                    entity_id: button.porte
                entity: sensor.porte_podposition
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            button_type: state
            name: Météo
            hash: '#meteo'
            show_state: true
            show_attribute: false
            force_icon: false
            entity: weather.pontoise
            show_icon: false
          - type: custom:meteofrance-weather-card
            entity: weather.pontoise
            cloudCoverEntity: sensor.pontoise_cloud_cover
            rainChanceEntity: sensor.pontoise_rain_chance
            freezeChanceEntity: sensor.pontoise_freeze_chance
            snowChanceEntity: sensor.pontoise_snow_chance
            uvEntity: sensor.pontoise_uv
            rainForecastEntity: sensor.pontoise_next_rain
            alertEntity: sensor.95_weather_alert
            number_of_forecasts: '5'
            current: true
            details: false
            one_hour_forecast: true
            alert_forecast: true
            forecast: true
          - type: custom:hourly-weather
            entity: weather.pontoise
            show_wind: speed
            num_segments: '24'
            label_spacing: '4'
            show_date: 'false'
            show_precipitation_amounts: false
            name: ' '
            icons: true
            show_precipitation_probability: false
          - type: custom:weather-chart-card
            entity: weather.pontoise
            show_main: false
            show_temperature: true
            show_current_condition: true
            show_attributes: true
            show_time: false
            show_time_seconds: false
            show_day: false
            show_date: false
            show_humidity: true
            show_pressure: true
            show_wind_direction: true
            show_wind_speed: true
            show_sun: true
            show_feels_like: false
            show_dew_point: false
            show_wind_gust_speed: false
            show_visibility: false
            show_last_changed: false
            use_12hour_format: false
            icons_size: 25
            animated_icons: true
            icon_style: style2
            forecast:
              precipitation_type: rainfall
              show_probability: false
              labels_font_size: '11'
              precip_bar_size: '100'
              style: style2
              show_wind_forecast: true
              condition_icons: true
              round_temp: false
              type: daily
              number_of_forecasts: '0'
              disable_animation: false
            units:
              pressure: ''
              speed: ''
          - type: custom:weather-radar-card
            show_zoom: true
            square_map: false
            show_recenter: false
            show_scale: true
            show_range: false
            extra_labels: false
            static_map: false
            show_marker: true
            zoom_level: 10
            map_style: Voyager
      - type: custom:bubble-card
        card_type: horizontal-buttons-stack
        1_link: '#salon'
        1_icon: mdi:sofa
        2_link: '#meteo'
        2_icon: mdi:weather-partly-cloudy

[eldingo424]

Is there currently anyway to make a button without a state indicator?
Currently buttons change to another color when pressed, but I don’t want that to be the case for something like a wake on lan button, where it isnt on, but rather just a single event.

[Cloos]

You can try with a text or a state button, then add a tap action for your wake on lan.

[gh0st125]

thanks for your reply, however I think the link you mentioned is another issue. My popup Cards render all correctly, I only have the issue of “blank space” where my (invisible) popup cards are located (when they are not shown).

Example:
my grid layout is something like this:

grid-template-columns: 0% 100% 0%
grid-template-rows: auto
grid-template-areas: |
      ". title ."
      ". center1 ."
      ". b1 ." 
      ". b2 ." 
      ". b3 ." 
      ". footer ."

b1, b2 and b3 are my bubble popups (I need to define them in the grid layout because otherwise they will get stacked on top of each other and I can’t edit them anymore via the gui editor).
I have a footer card for navigation purposes at the bottom.

With this configuration, there is a blank space between the center1 card and the footer card.
(see screenshot, blank space in red)

If I remove the bubble popup cards, the space is gone:

If I don’t assign the bubble popup cards to the grid areas (b1, b2, b3), there is also no space but the popup cards get stacked on top of each other and it makes it impossible to edit them in the gui editor:

When I place the popup cards at the top of the configuration of the grid layout as suggested, the blank space moves to the top:

grid-template-columns: 0% 100% 0%
grid-template-rows: auto
grid-template-areas: |
      ". b1 ." 
      ". b2 ." 
      ". b3 ." 
      ". title ."
      ". center1 ."
      ". footer ."

maybe anyone is facing the same issue and has another idea

[ericellb]

Maybe I’m silly but is there no way to get a background sourrounding all of the buttons?

I’d like to build interfaces using the pop-up system, without actually having it as a pop-up. Similar to the screenshot below, but that being directly on my dashboard.

The dividers and everything are just too nice and its a shame to not use.

You cant use existing solutions like vertical-stack-in-card as the buttons overflow the container.

[ericellb]

Just want to say these sub-buttons are amazing.

So far I’m using them in combination of the styles + states to conditionally show a battery icon on sensors if the battery is low.

        type: custom:bubble-card
        card_type: button
        entity: binary_sensor.motion_detector_2_occupancy
        tap_action:
          action: more-info
        double_tap_action:
          action: more-info
        hold_action:
          action: more-info
        styles: |-
          .bubble-sub-button-container {
            display: ${hass.states['binary_sensor.motion_detector_1_battery_low'].state === 'off' ? 'none' : 'initial'} !important;
          }
          .bubble-sub-button {
            color: ${hass.states['binary_sensor.motion_detector_1_battery_low'].state === 'off' ? '#F44336' : 'initial'} !important;
          }
        button_type: state
        sub_button:
          - entity: binary_sensor.motion_detector_2_battery_low
            show_state: true
            show_background: false
            show_icon: true
            scrolling_effect: false

[patchy]

So, I’m still pretty fresh with HA. I’m having some trouble with my bubble popup cards. I’m playing around with the LCARS theme and I’ve figured things out for the most part. Then I discovered bubble pop-ups. I’ve set up my stack of buttons and their appropriate hash/links. I create the vertical stack with the first card being the popup linked to my buttons. I then try to add my lights with my card_mod themes. They work and look great. Then I close the pop-up and next time I open it, the card_mod doesn’t apply and I just have ugly coloured buttons.
I delete and re-apply the card_mod, it works, then next time it isnt applied anymore but still in the YAML.
I have no idea what’s going on but it’s driving me crazy… Any help would be greatly appeciated.
This is what it is supposed to look like

[patchy]

And this is what randomly comes up and I have to re-do the card mods and hope it applies.

[FarleighRed]

Forgive my ignorance but if I wanted to change the icon on the sub button based on the state of the sensor using the custom style template how would I do it?

• Added the possibility to change the icon in a custom style template, you can now do this: ${state === 'on' ? icon.setAttribute("icon", "mdi:lightbulb") : icon.setAttribute("icon", "mdi:lightbulb-off")};

[Cloos]

This is currently not possible, I will have to add this possibility.

[koleos]

Bonjour, very nice. Overview of my light panel.
I have a question related to sub_button. The option to change bagkground depending on state is on but for light i could be nice to have the color of the light. Do you think it is feaseable ?
Exemple i tryy to only have one card for arthur room with two light. You see that the light is blue but yellow on the sub_button

Many thanks

[Cloos]

This is possible to do that with the custom styles but in a very complex way, I will add the possibility to do that easily probably in the next release, nice suggestion!

[Cloos]

I’ve just taken some time to work on my 100% Bubble Card dashboard (and I’ve loved using the v2 for this!), this is still a work in project and I used the new section view with a lot a custom styles, but I will add some template choices in the next release to support the section view by default. It will look like this (this is just one column/section, I’ve splitted it in two for this picture):

[koleos]

Top thanks.
Another idee, i am not fan of the horizontal-stack button to launch pop-up, do you think a new option in the tap action menu could do it? To use any other bubble-card ?

Look very nice your board !

[Cloos]

You can use the navigate action with your pop-up hash as navigation_path in any Bubble Card tap action since the first project release and also from any card that supports tap actions.

The horizontal buttons stack is not mandatory and I don’t use it in my new dashboard, I’m opening the pop-ups with sub-buttons like the ones at the right of the room sliders.

[DerHerzog7]

This is cool. Would love to know how you are implementing this stuff. Like, are the burger menu sub buttons - do they bring up pop ups for each room or something?

[Cloos]

This is exactly that

[DerHerzog7]

Ok I know i’ve asked this before, but any chance you can share your code for this? I would love to set something similar up.

[Cloos]

This time I will share it and I’m also working on a new documentation with very advanced examples, most of them are going to be from my dashboard.

[koleos]

Thank you, even better !