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

[amstermk]

Hi,

I set up a bubble-button-card with a jpg as background. Working all fine so far. Now I’d like to change the sub-button based on the state of an entity (actually five different states).

Started with the following code:

      ${subButtonIcon[1].setAttribute("icon",
      hass.states['cover.sonnenrollo'].state === 'open' ?  'mdi:window-shutter-open'
      : 'mdi:window-shutter')}

which is working fine in another card.

But as soon as I start fiddling with that in the “custom-styles-section” of my new card all the previous changes are not working anymore, i.e. no jpg as background…

YAML code of the card is below. Thanks for any help in advance!

type: custom:bubble-card
card_type: button
card_layout: large
styles: |-
  .bubble-button-card-container {
    background: rgba(25, 25, 25, 0.4);
    background-image: url("/local/pictures/R2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px !important;
  }

  .large .bubble-button-card-container {
    height: 179px;
  }

  .bubble-sub-button-1 {  
    background: rgba(25, 25, 25, 0.4);    
  }

    
      
name: Choose activity
force_icon: false
show_icon: false
button_action:
  tap_action:
    action: navigate
    navigation_path: '#remote'
button_type: state
entity: media_player.remote_two_player
sub_button:
  - entity: select.remote_two_multimedia
    show_state: true
    show_background: true
    show_icon: false
    show_attribute: false
    show_last_changed: false
    show_name: false
    tap_action:
      action: toggle
show_state: false
rows: auto

[Cloos]

@amstermk Take a look at you browser console, this means that you have some errors in your custom templates.

[Cloos]

Something like this?

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

Hi, I just finish my first bubble-card dashboard Some captures : [Screenshot_20240520_211557_Home Assistant] Home page with some shortcuts and global view 1 page per flour. We can even do 3 rows of sub buttons ! [Screenshot_20240520_211754_Home Assistant] [Screenshot_20240520_211744_Home Assistant] View on the light and shutter views [Screenshot_20240520_212015_Home Assistant] [Screenshot_20240520_211856_Home Assistant] Many thanks ! Evolutions that could be nice : …

[Bandy325]

Yes, that looks very nice. My dashboard currently looks like this… The only thing that would make it “finish” for me personally would be more card space. Maybe a card that is a bit more square.

[edcoppen]

Hi, I have previously mentioned that there is no relevant service call to change thermostat temperature, so I am using custom button cards as they support JS. I’m keeping my fingers crossed for a thermostat bubble card.

Until then, can anyone please tell me how to modify the following code to add °C after the temperature. In other words, I currently get 21 but I would like 21°C.

type: custom:button-card
entity: climate.living_room
state_display: |
  [[[ return entity.attributes.temperature ]]]

Thank you

[Cloos]

You can take a look at this, it’s probably possible to do what you want directly with Bubble Card.

I don’t have any climate entity so I can’t help you more but I hope that this will help.

Raising temperature by one degree - Climate device

You can get the current temperature with the template {{ state_attr('climate.your_thermostat', 'current_temperature') }} You could then use the following in an automation to increase that by one: - service: climate.set_temperature data_template: entity_id: climate.your_thermostat target_temp_low: {{ (state_attr('climate.your_thermostat', 'current_temperature')|round(0)) + 1 }} Here we take the current temperature, round it to the nearest whole number, then add one.

Edit: It’s possible that the template for the service will not work directly in Bubble Card, so if it’s the case just create a script for that.

[Krona]

I have slider buttons for my lights, and when i’m using my thumb to scroll down in the HA companion app the phone vibrates when i touch one of the slider buttons, without activating it. Is there a way to get rid of it? Kinda anoying

[edcoppen]

Thank you. What I have is fully functional. Now I just want to get the styling to match the default theme. Here’s what I’ve managed…

I think it would be better if it was formed from one button card rather than three, so the background was continuous.

It would also be better if the target temp showed °C after itself.

I don’t know CSS and am struggling to achieve this using custom button card. If any custom button card / CSS wizards can help my code at present is below.

Thank you!

type: horizontal-stack
cards:
  - type: custom:button-card
    aspect_ratio: 3/1
    icon: mdi:minus
    size: 25px
    tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
        entity_id: climate.utility_room
        temperature: >
          [[[ var temp =
          ((states['climate.utility_room'].attributes.temperature) - 0.5);
             return temp; ]]]
    styles:
      card:
        - background-color: '#282828'
          border-style: none
          border-radius: 25px
          height: 50px
  - type: custom:button-card
    aspect_ratio: 3/1
    entity: climate.utility_room
    state_display: |
      [[[ return entity.attributes.temperature ]]]
    tap_action: none
    show_name: false
    show_icon: false
    show_state: true
    styles:
      card:
        - background-color: '#282828'
          border-style: none
          border-radius: 25px
          height: 50px
  - type: custom:button-card
    aspect_ratio: 3/1
    icon: mdi:plus
    size: 25px
    tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
        entity_id: climate.utility_room
        temperature: >
          [[[ var temp =
          ((states['climate.utility_room'].attributes.temperature) + 0.5);
             return temp; ]]]
    styles:
      card:
        - background-color: '#282828'
          border-style: none
          border-radius: 25px
          height: 50px

[koleos]

Hello, you could add this in your custom style part :

.bubble-button-card-container {
  border-radius: 10px !important;
}

[amstermk]

Hi,
to begin with I’m not an CSS expert at all… but I played around a bit with the “horizontal row of sub buttons” from Cloos (see the advance sample on his github page).

it gives you at least three buttons within one button card and maybe it helps to develop your own card further. So be aware you have to play around a bit with the margins and heights, widths etc… I’m sure there is a more elegant code… but we all learn by doing and trying

EDIT: depending on resolution of tablet or whatever screen you are using you have to change the margins, heights etc… there must be a more elegant code…

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Up
    icon: mdi:arrow-up-bold
    show_background: true
    tap_action:
      action: toggle
  - name: Stop
    icon: mdi:stop
    show_background: true
    tap_action:
      action: toggle
  - name: Down
    icon: mdi:arrow-down-bold
    show_background: true
    tap_action:
      action: toggle
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: rgba(25, 25, 25, 0.4);  
    width: 100%;
  }

  .large .bubble-button-card-container {
    height: 100px;
  }


  .bubble-sub-button {
    height: 50px !important;
    width: 115px !important;
  }
  .bubble-sub-button-1 {
    background: rgba(25, 25, 25, 0.4);
    }
  .bubble-sub-button-2 {  
    background: rgba(25, 25, 25, 0.4);    
  }

  .bubble-sub-button-3 {  
    background: rgba(25, 25, 25, 0.4);
  }

  .bubble-sub-button-container {
    margin-right: 3%;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: 32px !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
rows: auto

[edcoppen]

Thank you for your inspiration. I have had a go at adapting my code to sub buttons as per below.

While it looks perfect, it breaks the functionality and I get an error saying "Failed to call service climate/set_temperature. expected float for dictionary value @ data[‘temperature’]

    type: custom:bubble-card
    card_type: button
    name: Temperature
    show_icon: false
    show_attribute: false
    show_state: false
    show_name: true
    scrolling_effect: false
    button_type: name
    sub_button:
      - icon: mdi:minus
        show_background: false
        tap_action:
          action: call-service
          service: climate.set_temperature
          service_data:
            entity_id: climate.utility_room
            temperature: >
              [[[ var temp =
              ((states['climate.utility_room'].attributes.temperature) - 0.5);
                return temp; ]]]
      - entity: climate.utility_room
        show_background: false
        show_icon: false
        show_name: false
        show_attribute: true
        attribute: current_temperature
        tap_action:
          action: none
      - icon: mdi:plus
        show_background: false
        tap_action:
          action: call-service
          service: climate.set_temperature
          service_data:
            entity_id: climate.utility_room
            temperature: >
              [[[ var temp =
              ((states['climate.utility_room'].attributes.temperature) + 0.5);
                return temp; ]]]

[Cloos]

You can create scripts then calling these scripts with call-services. This should works.

[DaveP317 (Dave P)]

Hey Cloos, I found a quirk (which may be operating as intended/as required), but not entirely sure:

I have a bubble button that contains 4 sub-buttons. The first sub-button has show_icon set to false.

I want to dynamically change the icon for the second sub-button based on a sensor value. I would expect that I need to use subButtonIcon[1] to change its icon, but I find that I need to use subButtonIcon[0] instead.

I assume that this is because the first sub-button has its icon disabled, there isn’t an instance for it in the array?

The drawback of this is that if I want to change some other property of the sub-button, I need to use index 1 rather than 0. Or if I eventually enable the icon for the first sub-button, I need to remember to change the index from 0 to 1.

Is this expected, and is there a way to change the underlying implementation so that styles can reference the sub-button index consistently?

My full card, just for completeness:

type: custom:bubble-card
card_type: button
button_type: slider
name: 48V SoC
show_state: true
icon: mdi:battery
double_tap_action:
  action: none
hold_action:
  action: none
columns: 4
sub_button:
  - entity: sensor.48v_battery_voltage
    show_icon: false
    show_state: true
  - entity: sensor.battery_power_48v
    show_name: false
    show_state: true
    show_icon: true
  - entity: sensor.total_solar_power
    show_last_changed: false
    show_state: true
    show_attribute: false
    icon: mdi:solar-power-variant
  - show_state: true
    entity: sensor.integrel_oegs_combined_power
    icon: mdi:engine
entity: input_number.48v_battery_soc_input_number
styles: |
  .bubble-state { 
    font-size: 26px !important;
    font-weight: 600 !important;
    opacity: 1 !important; 
    /* justify-content: center !important; */
  }
  .bubble-icon {
    opacity: 1;
    /* color: ${state < 25 ? 'red' : state < 50 ? 'orange' : 'green'} !important; */
    color: white !important; 
  }

  .bubble-range-fill {
    /* background: linear-gradient(to right, red 25%, orange 25% 50%, green 50%) !important; */
    background: ${state < 25 ? 'red' : state < 50 ? 'orange' : 'green'} !important;
  } 

  /* .is-on .bubble-sub-button-1 {
    background-color: gray !important;
  } */

  /*
  .bubble-range-slider {
    background: linear-gradient(to right, red 25%, orange 25% 50%, green 50%) !important;
  } 
  */

  .bubble-sub-button-1 {
    background-color: black !important;
  } 
  .bubble-sub-button-2 {
    background-color: ${hass.states['sensor.battery_power_48v'].state < 0 ? 'red' : 'limegreen' } !important;
  } 
  .bubble-sub-button-3 {
    background-color: ${hass.states['sensor.total_solar_power'].state == 0 ? 'black' : 'limegreen' } !important; 
  }
  .bubble-sub-button-4 {
    background-color: ${hass.states['sensor.integrel_oegs_combined_power'].state == 0 ? 'black' : 'limegreen' } !important; 
  }

  ${icon.setAttribute("icon", 
      state < 10 ? 'mdi:battery-10' :
      state < 20 ? 'mdi:battery-20' :
      state < 30 ? 'mdi:battery-30' :
      state < 40 ? 'mdi:battery-40' :
      state < 50 ? 'mdi:battery-50' :
      state < 60 ? 'mdi:battery-60' :
      state < 70 ? 'mdi:battery-70' :
      state < 80 ? 'mdi:battery-80' :
      state < 90 ? 'mdi:battery-90' :
      'mdi:battery')}

  ${subButtonIcon[0].setAttribute("icon", 
      hass.states['sensor.battery_power_48v'].state < 0 ? 'mdi:battery-arrow-down' :
      'mdi:battery-arrow-up')}
card_layout: large-2-rows

[Cloos]

Interesting, it’s probably possible to change that, I have less time to work on the project at the moment so this is not my priority but I’m adding this at my to-do list.

[frnak (Frank Cassata)]

Just started testing bubble card, getting stumped straight away with the horizontal button stack. The first two buttons overlap on the companion app on iOS.

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Ljós
1_icon: mdi:lamp
1_link: '#lights'
2_name: Ljós
2_icon: mdi:lamp
2_link: '#lights2'
3_name: Ljós
3_icon: mdi:lamp
3_link: '#lights3'

The horizontal stack is the last card and is not inside another card.

[Cloos]

Hi, have you tried with different names and also have you cleared your cache?

[frnak (Frank Cassata)]

Hah that worked, thank you!

While I “have” you, or someone else, is it possible to have a pop-up open by default? I’m trrying to create a very simple dashboard that only consists of 4 pop-ups, with one default one that is open on start, and opens if another one is closed.

[Scoopien]

Hi,
How can we change the border-radius of bubble-button-card-container directly in the theme file? So that it changes all my cards.

[Cloos]

You can open a pop-up by default, here is how:

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

Yes, now in beta 8 you can just add your hash to the url of your view, like this and this pop-up (#kitchen) will always open when you open this view: [image]

[Cloos]

You can’t at the moment, but this is in my to-do list.