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

Share your Projects! Dashboards & Frontend
,
83

It seems that the code background is not working. what am I missing?

  - type: custom:mushroom-media-player-card
    entity: media_player.salon_lg_webos
    volume_controls:
      - volume_mute
      - volume_set
      - volume_buttons
    media_controls:
      - on_off
      - shuffle
      - play_pause_stop
      - next
    name: LG TV
    icon_type: entity-picture
    secondary_info: last-changed
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-card { 
          background: var(--card-background-color,var(--ha-card-background)) !important; 
        }
2 Likes
85

Share this main cards man please :slight_smile: really nice hahhaa

energy, player and weather o/

86
1 Like
87

Thanks :slight_smile: didnt see that

88

Im redoing my mobile based on Bubble, and I wanted to do some shortcuts on screen, but I am not happy with the color of the buttons, maybe someone can give me an idea/hint =) of whats could I do witih those buttons hahah

image
image543×1031 81.9 KB

89

Just came across Bubble Card - some amazing work here and lots of use cases. Will have a play. Thanks Cloos!!

EDIT:

First question :grinning_face_with_smiling_eyes: - Can we add backdrop-filter blur to the popup so that all elements behind it are blurred? I’ve tried adding it but no success so far.

90

Hey, this looks really promising. Been looking for something to take care of popups for a while.

One question, I’m using a popup card that’s triggered from a script, so when I press a button on my dashboard, it starts playing a radio station on my Sonos and then opens a popup with larger controls and access to other favourites.

Is there a way of dimissing the popup via an automation? So when the media player state changes, the popup closes automatically?

91

How are you currently getting the popup to display via script?

You could have an automation that handles the popup whenever the media_player is either playing or paused?

Something like this using browser_mod should work:

alias: testpopupformediaplayer
trigger:
  - platform: state
    entity_id:
      - media_player.kitchen
    to: playing
    id: kitchenplaying
  - platform: state
    entity_id:
      - media_player.kitchen
    to: paused
    id: kitchenpaused
condition: []
action:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - kitchenplaying
        sequence:
          - service: browser_mod.navigate
            data:
              path: "#mediacontrols"
            target:
              device_id: [your-device-id]
      - conditions:
          - condition: trigger
            id:
              - kitchenpaused
        sequence:
          - service: browser_mod.navigate
            data:
              path: "#"
            target:
              device_id: [your-device-id]
mode: single
1 Like
92

Ah nice one. I’m currently using browser_mod’s navigate service open the popup.

Didn’t realise I could just set the navigate to # to clear it, so that’s simple enough for me update

Thank you!

1 Like
93

Another way (which I forgot about) is to use browser_mod.javascript instead of .navigate.

This below will remove the hash completely and close the popup:

service: browser_mod.javascript
data:
  code: history.pushState("", document.title, window.location.pathname);
target:
  device_id:
    - [your-device-id]
1 Like
94

As a note, history.pushState will create an entry in your history. So pressing back and forward buttons in your browser will open/close the popup.

If you don’t want this to happen, use history.replaceState This will not add any entries to your browser history.

Open popup:

service: browser_mod.javascript
data:
  code: history.replaceState(null, null, "#your-hash");
target:
  device_id:
    - [your-device-id]

Close popup:

service: browser_mod.javascript
data:
  code: history.replaceState(null, null, " ");
target:
  device_id:
    - [your-device-id]
95

When im close Edit Mode i dont see Pop-up Card, where is problem? thx

image
image1205×701 40.2 KB

96

Because it’s a popup, you have to create a button to navigate to it :grimacing: :sweat_smile:

2 Likes
97

Small question I’ve made a stack into a pop up,
it doesn’t show ‘visually’ but it does add a column to my lovelace?

98

Hello! First off, I love this whole effort!! Thank you so much. Here is where I’m stuck. I’m not new, but I’m not a pro.

I’m trying to show one of three different icon/color combos for a button type card. I have tried templates, conditionals etc. I have a sensor setup that I could just simply test one entity for [open, locked, closed], but I’m not trying it in this sample code because it wan’t working either so I wanted to take out layers of complexity to at least get closer to working. Also, I am only working on the icon here to keep things simple.

- type: custom:room-card
  title:
  entity: light.main_floor_lights
  icon: mdi:sofa-outline
  show_icon: false
  hide_title: true
  tap_action:
    action: navigate
    navigation_path: "#garage"
  entities:
    - type: custom:bubble-card
      card_type: button
      entity: lock.front_door_lock
      name: Front Door
      show_icon: true
      tap_action:
        action: toggle
      hold_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
            {% if states('binary_sensor.front_door_lock_open')  == 'on' %}
              --card-mod-icon:mdi:door-open
            {% else %}
              {% if states('lock.front_door_lock')  == 'locked' %}
              --card-mod-icon: mdi:door-closed-lock
              {% else %}
              --card-mod-icon:mdi:door-closed
              {% endif %}
            {% endif %}

hacs bubble screenshot
hacs bubble screenshot2166×1188 277 KB

if you are curious, the bottom 6 buttons all open the pop-up. here is a sample screenshot. I will submit my suggestions another time :slight_smile:

bubble pop up sample
bubble pop up sample2148×1300 176 KB

1 Like
99

I’m in love with the pop-up card. It’s so clean and nice! Only thing I’d like to see added is the background theme of the pop-up to be changed from within the card. I’m using mushroom cards and they don’t display that well

101

I tried with card-mod. But as far as I see, it is not working with vertical-stack.

Did not found a solution yet…
The workaround with entities-card is not working for me, because I want more ways to build the popup.

€: It seems to be impossible for the moment Feature request: darken background when popup is open · Issue #59 · Clooos/Bubble-Card · GitHub

102

I like it a lot though the theme is hard-coded, would it be possible to make things like a customizable background-color and most importantly, border-radius?

For my personal project it looks weird as my cards and such only have a small border radius, whereas the popup and bubble cards have a pretty large radius.

1 Like
103

If anyone is interested in a styled mini-media-player card:

image

Add this at the end of the theme file and reload it via service call.

  card-mod-card: |
    ha-card {
      transition: none;
      border-style: none !important;
      --ha-card-background: var(--background-color-2);
    }
    ha-card.mm-player{
      padding: 0 !important;
    }
    .mmp-player{
      padding: 6px !important;
    }
    .entity__icon {
      background-color: var(--card-background-color);
    }
    .entity__info {
      margin-left: 4px !important;
    }
    .entity__info__name {
      font-weight: bold !important;
    }
    .attr__app_name {
      font-size: 12px;
      font-weight: bold !important;
    }

Then specifiy a media player card in the ui:

- type: custom:mini-media-player
  entity: media_player.your_media_player
  hide:
    volume: true
    source: true
    power_state: false
4 Likes
104

Bubble Card is out of beta!

Thanks a lot for all your feedbacks! Almost 70 issues closed since the first beta!

:bulb: New features :

:heavy_check_mark: Fixes

  • Fixed the pop-ups trigger
  • The editor is now displayed correctly on mobile
  • Some GUI editor improvement
  • Some other improvements
  • Fixed a last minute issue introduced in v1.0.0

All new options will soon be available in the documentation.

Please report any issues you may encounter, this release is a big one and I hope that everything is working!

7 Likes