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

ausfas · September 23, 2024, 7:23am

using now()…
spent a lot of time with ChatGPT to make it work last evening

${(() => {
          const timerState = hass.states['timer.washing_machine'];
          const finishTime = new Date(timerState.attributes.finishes_at);
          const now = new Date();

          // Sub-button 3 for formatted finish time
          card.querySelector('.bubble-sub-button-3').innerText = 
              timerState.attributes.finishes_at ? 
              "Finishes at: " + 
              finishTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 
              "";

          // Sub-button 2 for remaining time
          const remainingTime = finishTime - now;
          const subButton = card.querySelector('.bubble-sub-button-4');

          if (remainingTime > 0) {
              const remainingMinutes = Math.round(remainingTime / (1000 * 60));
              const hours = Math.floor(remainingMinutes / 60);
              const minutes = remainingMinutes % 60;
              subButton.innerText = `Remaining: ${hours}h ${minutes}m`;
          } else {
              subButton.innerText = "Completed";
          }
      })()}

ausfas · September 23, 2024, 7:41am

I however, want to apply the style at the theme level instead of applying for every button manually.

   styles: |-
          .bubble-button-background {
            opacity: 1 !important;
            background-color: ${state === 'on' ? 'rgba(222,176,107,1)' : ''} !important;
          }
          .bubble-sub-button-1  {
            background-color: ${hass.states['switch.laundry_socket_3'].state === 'on' ? 'rgba(57, 54, 70, 1)' : 'rgba(57, 54, 70, 1)'} !important;
          }

I have tried this in the theme but its not working

  card-mod-root-yaml: |
    .: |
      bubble-card {
        :host {
          --bubble-button-background-color: rgba(222, 176, 107, 1) !important;  # Main button background
          --bubble-sub-button-background-color: rgba(57, 54, 70, 1) !important;  # Sub-button background
        }
      }

while this applies at ha-card level

  card-mod-card: |
    ha-card {
      transition: none !important;
      border-style: none !important;
      --bubble-button-background-color: rgba(222, 176, 107, 1) !important;  # Main button background
      --bubble-sub-button-background-color: rgba(57, 54, 70, 1) !important;  # Sub-button background

   
    }

I need to apply to this

<div class="bubble-button-card switch-button">

within ha-card… not sure … how to yet.

RKCKBN · September 23, 2024, 9:49am

Thanks a lot, modified your code and got now that I want:

    styles: >
      ${(() => {

      const now = new Date(); 
      const startTime = new Date(hass.states['input_boolean.onoffsleeptimertv'].last_changed); 
      const runningTime = now - startTime;

      card.querySelector('.bubble-state').innerText = hass.states['input_boolean.onoffsleeptimertv'].state === 'on' ? "On since " + new Date(runningTime).toLocaleTimeString([], {minute:'2-digit'}) + " Minutes" : "Off"

      })()}

Sorry that I cannot help you with your style issue in return…

Natilus · September 24, 2024, 7:36pm

hey would you like to share the codes for this card? it`s just what I am looking for, but my coding skills are not that good (yet)

edcoppen · September 25, 2024, 7:16am

I am hoping someone can help overcome the dashboard slowing down. If I have a few stock cards everything is instant. After building out a full dashboard with bubble cards everything is so slow it is unusable.

I am running full HA as a VM on a Synology DS923+. The resource monitor on the NAS and also within HA show that the resources are not the limit.

This leads me to suspect that something within this raw dashboard code may be the problem. It is almost entirely bubble cards.

Any suggestions would be most appreciated. Thank you

firstchair · September 25, 2024, 11:18am

Try disabling the blur, it has a big impact on performance of the device (not the server)

Abunafha · September 25, 2024, 12:52pm

Hi

Is there a way to change color of close button of the popup? What is the related styling ?

Borat · September 25, 2024, 5:45pm

Hi all… I am building a dashboard based on this awesome card and getting better at styling, but I am struggling with one thing i want to do that I am sure must be possible. I want to create a button to increment an input number based on clicking the icon on left or right. I want the current value of the number to show in the center of the button… similar to a mushroom climate card. I can get the left and right parts ok with an icon and sub button, but cant work out how to get an entity value to show in the middle. Any suggestions or similar examples out there pls?

Thanks

Zenia · September 30, 2024, 11:16am

Good day , everyone. I am playing with bubble cards for couple days now and want to ask experts, is it possible to have 2 raw of the horizontal buttons cards?
Something like that:

I use vertical stack card for this , but it’s shows like that only when dashboard in edit mode, than first card cover the second one.
Like that

My idea is to have this 2 cards show only in mobile view, because in tablet and PC view I use a sidebar for floors.
TY

DBunevich · September 30, 2024, 2:05pm

Dear all,
In case anyone needs:

Conditional battery state card change, here is the code (don’t forget to change sensors):

styles: |2-
    .bubble-sub-button**-1** > ha-icon {
      color: ${hass.states['sensor.lywsd02_temperature'].state < 15 ? 'blue' : (hass.states['sensor.lywsd02_temperature'].state >= 25 ? 'red' : 'yellow')} !important;
    }
    }
      ${subButtonIcon[0].setAttribute("icon", 
      hass.states['sensor.living_room_remote_battery'].state >= 90 ? 'mdi:battery' : 
      (hass.states['sensor.living_room_remote_battery'].state >= 80 ? 'mdi:battery-80' :
      (hass.states['sensor.living_room_remote_battery'].state >= 70 ? 'mdi:battery-70' :
      (hass.states['sensor.living_room_remote_battery'].state >= 60 ? 'mdi:battery-60' :
      (hass.states['sensor.living_room_remote_battery'].state >= 50 ? 'mdi:battery-50' :
      (hass.states['sensor.living_room_remote_battery'].state >= 40 ? 'mdi:battery-40' :
      (hass.states['sensor.living_room_remote_battery'].state >= 30 ? 'mdi:battery-30' :
      (hass.states['sensor.living_room_remote_battery'].state >= 20 ? 'mdi:battery-20' :
      (hass.states['sensor.living_room_remote_battery'].state >= 10 ? 'mdi:battery-10' : 'mdi:battery-alert')))))))))} !important;
    }

Change of the card background opacity:

styles: |2-
    * { 
      background-opacity: 0.5 !important;
  .bubble-button-card-container {
    background: rgba(0,0,0,0.3) !important;
  }
    }

Change of the card border radius:

30px - Bubble card style
20px - Mushroom card style

styles: |2-
    * { 
      border-radius: 30px !important;
 }

seeharrison · October 1, 2024, 5:56pm

I have a theme applied to this dashboard and that is where the blue color is coming from for my ceiling fan switch. The switch colors are taking the color from the theme, but the sliders are still using the translucent orange. How can I have the sliders uses the same color and opacity as the switches?

Cheers!

slider_color

ausfas · October 2, 2024, 10:53am

In the same boat… waiting for theme level changes for each entity.

Captainhum · October 2, 2024, 3:29pm

Hello, I feel like a real beginner for this kind of questions, but how do you add a module like time or temperature, because I try to enter integers in name but nothing happens

Thank you very much

DBunevich · October 2, 2024, 4:15pm

Guys, does anyone know how to change background of the “Select” card.

Standard code doesn’t work:

type: grid
cards:
  - type: custom:bubble-card
    card_type: select
    styles: |2-
        * { 
          background-opacity: 0.5 !important;
      .bubble-button-card-container {
        background: rgba(0,0,0,0.3) !important;
      }
        }
    entity: input_select.small_bedroom_scenes
    card_layout: large
    force_icon: false
    show_state: true
    show_last_changed: true
    show_attribute: false

Hallo · October 3, 2024, 5:49pm

Your Trend-Card is amazing? Can you pls share your code?

crawmartino · October 3, 2024, 6:43pm

If you want an entity state in the name itself you need to template it.

In the UI you can find this in Styling Options > Custom Styles / Templates

Inside that, paste in this code (make sure to replace the entity with the one you want)

${card.querySelector('.bubble-name').innerText = hass.states['sensor.your_entity_here'].state};

stefan1982 · October 4, 2024, 4:10am

Is it possible to set an active state for. a sub-button, based on the position-attribute of a cover/blind entity?

I have configured my cover card to have 4 positions. 0%, 10%, 75% 100%. The current state is in the last 3 positions “open”, which lead me to setting the active status of the sub-button to set according the position it currently has.

Does someone have a solution for this?
Now the sub-buttons are always set as “active” once the cover/blinds > 1% open, and otherwise they are all inactive. What I want is to set the active state as on, only where the state attribute of the cover is equal to the preferred position of the sub-buttons position of the blind/cover.

I tried the following, which doesn’t seem to work:

type: custom:bubble-card
card_type: button
button_type: state
card_layout: large
tap_action:
  action: toggle
show_attribute: true
show_last_changed: false
show_state: true
layout_options:
  grid_columns: full
  grid_rows: 1
sub_button:
  - show_state: false
    show_icon: true
    show_icon: true
    {% if state_attr("cover.rollerblind_0001", "current_position") == 0 %}
    show_background: true
    {% else %}
    show_background: false
    {% endif %}
    name: Dicht
    show_name: false
    tap_action:
      action: call-service
      service: cover.set_cover_position
      target:
        entity_id: cover.rollerblind_0001
      data:
        position: 0
    hold_action:
      action: more-info
    icon: mdi:window-shutter
  - show_icon: true
    show_name: false
    name: Ventileer
    tap_action:
      action: call-service
      service: cover.set_cover_position
      target:
        entity_id: cover.rollerblind_0001
      data:
        position: 10
    hold_action:
      action: more-info
    icon: mdi:window-shutter-settings
    {% if state_attr("cover.rollerblind_0001", "current_position") == 10 %}
    show_background: true
    {% else %}
    show_background: false
    {% endif %}
  - show_icon: true
    show_name: false
    name: Opstaan
    tap_action:
      action: call-service
      service: cover.set_cover_position
      target:
        entity_id: cover.rollerblind_0001
      data:
        position: 100
    hold_action:
      action: more-info
    icon: mdi:window-shutter-open
    {% if state_attr("cover.rollerblind_0001", "current_position") == 100 %}
    show_background: true
    {% else %}
    show_background: false
    {% endif %}
  - show_icon: true
    show_name: false
    name: Open
    tap_action:
      action: call-service
      service: cover.set_cover_position
      target:
        entity_id: cover.rollerblind_0001
      data:
        position: 30
    hold_action:
      action: more-info
    icon: mdi:window-shutter-cog
    {% if state_attr("cover.rollerblind_0001", "current_position") == 30 %}
    show_background: true
    {% else %}
    show_background: false
    {% endif %}
name: Deuren achterzijde
icon: ""
scrolling_effect: false
show_name: false
show_icon: true
force_icon: false
entity: cover.rollerblind_0001
double_tap_action:
  action: more-info
attribute: current_position
styles: |-
  * {
    font-size: 13px !important;
    color: #333;
    font-weight: normal !important;
    letter-spacing: normal !important;
  }

edcoppen · October 4, 2024, 8:17am

Can anyone please help me change the text colour of a sub button?

The current temperature text is an attribute of the climate entity.

Thank you in advance

nightfever · October 4, 2024, 8:28am

Change it to .bubble-select-card-container

flybyclock · October 4, 2024, 2:06pm

Im also having this problem. Dit you find out how to solve this?