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

[adissimo]

Sure. Here is the code of my first pop-up:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#Erdgeschoss"
    name: Erdgeschoss
    icon: mdi:home-floor-0
    is_sidebar_hidden: true
    entity: light.erdgeschoss
    state: sensor.lumi_lumi_weather_temperature_2
    auto_close: "30000"
    bg_opacity: "90"
    bg_blur: "0"
    shadow_opacity: "100"
    sub_button:
      - entity: sensor.lumi_lumi_weather_temperature_2
        show_background: false
        show_state: true
        show_attribute: false
        show_last_changed: false
    card_layout: normal
    styles: |2-

        * { 
          font-size: 16px !important;
        }
        .bubble-button-card-container {
          background: rgba(60,60,60,0.3) !important;
        }
    margin_top_mobile: "-10px"
    hide_backdrop: false
    backdrop_blur: "3"
    bg_color: ""
  - type: custom:bubble-card
    card_type: separator
    name: Licht
    icon: mdi:ceiling-light-multiple
    styles: |-
      .bubble-line {
          background: var(--primary-text-color);
          opacity: 0.1;
        }
        * { 
          font-size: 20px !important;
        }
        
      .bubble-name {
          height: 24px
        }
      .bubble-icon {
          --mdc-icon-size: 24px !important;
        }
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    entity: light.wohnzimmer
    name: Wohnbereich
    sub_button:
      - name: Szenen
        show_name: false
        show_state: true
        show_last_changed: false
        state_background: true
        show_background: true
        show_attribute: false
        attribute: hue_scenes
        entity: input_select.wohnzimmer_licht_szenen
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.tv_bereich
        icon: mdi:lightbulb-spot
        name: TV
      - type: custom:bubble-card
        card_type: button
        entity: light.couch_licht
        name: Couch
        icon: mdi:lightbulb-spot
        button_type: slider
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.eg_kuche_arbeitslicht_licht
        icon: mdi:lightbulb-spot
        name: Küche Arbeitslicht
        scrolling_effect: false
      - type: custom:bubble-card
        card_type: button
        entity: light.eg_kuche_ambient_licht
        icon: mdi:globe-light
        name: Küche Hängeleuchten
        scrolling_effect: false
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.treppenwand
        name: Wand
        icon: mdi:lightbulb-spot
      - type: custom:bubble-card
        card_type: button
        entity: light.eg_essbereich_hangeleuchte_light_2
        name: Tisch
        icon: mdi:globe-light
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: switch.eg_garten_terassenbeleuchtung
        name: Terrasse
        icon: mdi:lightbulb-spot
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: light.sonoff_01minizb_light
        tap_action:
          action: toggle
        name: Garderobe
        icon: mdi:wardrobe
  - type: custom:bubble-card
    card_type: separator
    name: Rollos
    icon: mdi:window-shutter
    styles: |-
      .bubble-line {
          background: var(--primary-text-color);
          opacity: 0.1;
        }
        * { 
          font-size: 20px !important;
        }
        
      .bubble-name {
          height: 24px
        }
      .bubble-icon {
          --mdc-icon-size: 24px !important;
        }
  - type: custom:mod-card
    card_mod:
      style: |
        swipe-card$: |
          .swiper-wrapper {
            padding-bottom: 2vw !important;
          }
    card:
      type: custom:swipe-card
      parameters:
        grabCursor: true
        centeredSlides: false
        spaceBetween: 12
        followFinger: true
        pagination:
          type: bullets
          color: white
      cards:
        - type: vertical-stack
          cards:
            - type: custom:bubble-card
              card_type: cover
              entity: cover.eg_rollos
              name: Alle
              show_state: true
        - type: custom:bubble-card
          card_type: cover
          entity: cover.eg_wz_rolladenaktor1
          name: Terrassenfenster
          show_state: true
        - type: custom:bubble-card
          card_type: cover
          entity: cover.eg_wz_rolladenaktor2
          name: Terrassentür
          show_state: true
        - type: custom:bubble-card
          card_type: cover
          entity: cover.eg_wz_rolladenaktor3
          name: Küchenfenster
          show_state: true
  - type: custom:bubble-card
    card_type: separator
    name: Klima
    icon: mdi:home-thermometer
    styles: |-
      .bubble-line {
          background: var(--primary-text-color);
          opacity: 0.1;
        }
        * { 
          font-size: 20px !important;
        }
        
      .bubble-name {
          height: 24px
        }
      .bubble-icon {
          --mdc-icon-size: 24px !important;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - align_state: center
        type: custom:mini-graph-card
        name: " "
        icon: fa
        update_interval: 5
        group_by: hour
        hour24: true
        entities:
          - color: "#ff803b"
            entity: sensor.lumi_lumi_weather_temperature_2
            icon: false
            name: Temperatur
            index: 0
          - color: "#A7C7E7"
            entity: sensor.lumi_lumi_weather_humidity_2
            name: Feuchtigkeit
            y_axis: secondary
            show_state: true
            index: 1

[Vinney]

@benm7 try:

type: picture-elements
card_mod:
  style: |
    ha-card {
      border-radius: 36px;
    }
image: /local/Rumpus.png
aspect_ratio: "16:9"
elements:
  - type: custom:mod-card
    style:
      top: 13%
      left: 91%
      width: 10%
    card_mod:
      style: |
        ha-card {
          -webkit-backdrop-filter: blur(4px) !important;
          backdrop-filter: blur(4px) !important;
        }
    card:
      type: custom:button-card
      icon: mdi:arrow-top-right
      color: rgba(0,0,0,0.8)
      color_type: card
      tap_action:
        action: navigate
        navigation_path: "#rumpus"
      styles:
        card:
          - height: 45px
          - width: 45px
          - border-radius: 80px
  - type: custom:mod-card
    style:
      top: 85%
      left: 50%
      width: 96%
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
          -webkit-backdrop-filter: blur(4px) !important;
          backdrop-filter: blur(4px) !important;
        }
    card:
      type: custom:bubble-card
      card_type: button
      button_type: state
      entity: sensor.rumpus_sensor_temperature
      name: Rumpus
      icon: mdi:desk
      show_state: true
      tap_action:
        action: navigate
        navigation_path: "#rumpus"
      button_action:
        tap_action:
          action: navigate
          navigation_path: "#rumpus"
      styles: |-
        .bubble-button-card {
          opacity: 1.0;
          background: rgba(0,0,0,0.1) !important;
          -webkit-backdrop-filter: blur(2px) !important;
          backdrop-filter: blur(2px) !important;
        }
        .bubble-icon {
          color: var(--google-teal) !important;
          opacity: 1.0 !important;
        }
      sub_button:
        - type: custom:button-card
          entity: light.front_spot
          icon: mdi:floor-lamp
          tap_action:
            action: toggle
          styles:
            card:
              - background-color: >
                  {% if is_state('light.front_spot', 'on') %}
                  var(--google-yellow) {% else %} rgba(0, 0, 0, 0.1) {% endif %}

[marcusn (Marcus)]

Let’s say you want to query the dynamic node you just appended. Is it possible?
querySelector won’t find it AFAIK.

[benm7 (Ben M)]

Thanks for the reply, ended up moving to a button card to get what I needed

[benm7 (Ben M)]

Am getting close to finishing my dashboard, will send a walkthrough video when I get the chance but here are some screenshots

[MrBearPresident]

In the code I already using card.querySelector .
Because If it does not find it will append it.

[iona]

Are there no way of showing icon colour based on state globally, for all cards not just lights, without having to manually configure yaml for each card?

[ZynanBob (Marcel)]

Hey @benm7. Would you mind sharing your horizontal button stack on the bottom? It’s looking fantastic and I can’t wait for your walkthrough.

[Surmi2]

First of all, I would like to thank you for this wonderful card system. All the best to Clooos!
I am a big fan of minimalist systems, where only the information that is necessary is displayed. I can’t figure out how to put the data needed to set the temperature on the climate card into a pop-up window. Is this possible?
(The setting is rarely changed, so it is unnecessary to display it constantly, it just takes up space, and this is especially inconvenient on a phone - due to the smaller screen.)
Thanks for the help!

[Calzor_Suzay]

How do you get the multiple line info like in this example (That I copied from above)
For example network in out and cpu above memory etc

Can it be done via the gui editor or do I need to hack my way through YAML code

[Calzor_Suzay]

Just discovered this “Large with 2 sub-buttons rows (Optimized for sections)”
This might be what I’m after

[MrNorth45]

What an awesome plugin! This is now my standard tool for displaying slide ins and popups. I have two small questions that I have not yet found the answer for:

1. How can I disable ALL animations? I dont like that the content of the popup card has a slight animation when the popup is loaded. I have tried:

rise_animation: false
scrolling_effect: false

but no luck

2. How do I make the backdrop darker? There is a setting for blur of the background, but no opacity to make it darker. Strange…

Thanks for a lovely HAC!

[jeroenvdd89 (Jeroen)]

Hi,
I’ve been using bubble card for a while, but only started using the vertical bottom menu today.

My dashboard contains 3 camera views at the bottom and is bigger that the height of my display.

When the menu ‘hovers’ over the camera views the menu doesn’t function, when I try to click a button it opens the stream of the image behind it.

Is there an easy way to resolve this or is it a known bug?

[DerHerzog7]

This is amazing! Would love to replicate something similar!

[flobidan]

You have to do three mouse clicks:

[cloudbr34k (Apples)]

love it! great job, great colours! do you mind sharing how you did the room selector??

[cloudbr34k (Apples)]

this is nuts! great work!

[cloudbr34k (Apples)]

im looking into Bubble card, would people mind sharing their edit dashboard page, im just tryng to get a sense of how it all looks in edit mode as judging by some of the examples with all the popups, i can imagine it would look hectice?

[benm7 (Ben M)]

I created an input_select helper with three options, and then use a state switch card to display the different room views based on the input select state. Haven’t done the large one yet, that will be a full tile card with more buttons and information I think.

Will share code shortly

[Quokka1979 (Timmy)]

I’m having trouble colouring the border, depending on the state.
The goal is to only light up the border and icon, the icon works like a charm

Icon:

  .bubble-icon-container {
    background-color: ${hass.states['sensor.warning_level'].attributes.warning_1_color || 'rgba(80,80,80,0)'} !important;
    opacity: 0.8 !important;
  }

The border:

.bubble-card {
  border: 2px solid ${hass.states['sensor._warning_level'].attributes.warning_1_color || 'rgba(80,80,80,0)'} !important;
  border-radius: 12px; 
  box-sizing: border-box; 
}

cheers