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

derekmarch · May 10, 2024, 4:08pm

I’m getting this error like 50 times per second when I have my dashboard up. I can see them in the log but they don’t seem to be affecting usage. Has anyone found a solution for this?

Thanks

event_type: call_service
data:
  domain: system_log
  service: write
  service_data:
    logger: frontend.js.latest.202405011
    message: |-
      Uncaught error from Chrome WebView 124.0.6367.123 on Android 14
      TypeError: Cannot read properties of null (reading 'classList')
      /hacsfiles/Bubble-Card/bubble-card.js:520:1627
    level: error
origin: LOCAL
time_fired: "2024-05-10T15:34:58.747403+00:00"
context:
  id: 01HXHJ9AXVCW14SJRMYHAYKHWQ
  parent_id: null
  user_id: e1ebadd5e7e847679149b513286d185d

Cloos · May 10, 2024, 9:09pm

Hi, have you tried the v2.0.0-beta.6 that is available on HACS, this issue should be fixed on that version.

derekmarch · May 10, 2024, 9:11pm

Thank you, I will try it out. Great work on this card collection, it is by far my favorite!

Cloos · May 11, 2024, 7:43am

Hi! The next Bubble Card v2 is on its way, but I really wanted to work on the section view full support. And I can now say that this is my recommended way to start with Bubble Card, I just love it!

Also, take a look at the “Styling options” in this screenshot.

I can’t wait to release it!

bacco007 · May 11, 2024, 8:34am

This might be what tips me into going Bubble Card only

MonsDK · May 11, 2024, 11:06am

Been looking into remaking my mobile dashboard with your bubblecards. They look amazing!

However, I’ve run into the issue that the pop-up won’t show when I push my button on my mobile, with the popup linked to. It just fades the background. Also it doesn’t show on my desktop. The subpage doesn’t show the content of the pop-up, unless I’m entering editmode on the subpage.

This is my code for loading the popup.

type: custom:button-card
name: Kitchen
icon: mdi:silverware-fork-knife
entity: light.kokken_alrum
custom_fields:
  arrow: |
    [[[
      return `<ha-icon
        icon="mdi:chevron-right"
        style="width:16px; height: 16px;">
        </ha-icon>`
    ]]]
  secondary_info: |
    [[[
      return states['climate.alrum_thermostat_thermostat'].attributes['current_temperature'] + '°C';
    ]]]
tap_action:
  action: navigate
  navigation_path: '#kitchen'
show_label: true
show_state: false

And this is the code for the popup.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#kitchen'
    name: Kitchen
    icon: mdi:silverware-fork-knife
    entity: light.kokken_alrum
    state: sensor.kokken_sensor_1_temperature
    back_open: true

Any ideas on why this doesn’t show up?

Thank you in advance.

Cloos · May 11, 2024, 2:06pm

Is this pop-up on the same view? And also have you tried the last v2 beta?

MonsDK · May 11, 2024, 4:38pm

Hi Cloos, thank you for your great work!

Front page is masonry and subpage Kitchen is panel at the moment.

I’ve got version 1.7.3. Found the beta version, but how do i overrule the latest release and install the beta? I’m gonna try to figure that out and see if that helps.

*Update:
Tried redownloading to beta version 2.0.0.6. Still shows 1.7.3 when i make a new bubble card, but the bubble-card.js says “v2.0.0-beta.6”. Didn’t fix the issue unfortunately.

Cloos · May 11, 2024, 5:25pm

Bubble Card 2 - The One?

Version 2.0.0-beta.7

Hi! This new beta is a major one. I’ve finally added the full support of the new section view! And I can now say that this is my recommended way to start with Bubble Card, I just love it! I’ve also added a new large layout for most of the cards to fit this new view type, but also a new large one where you can have two rows of sub-buttons!

Also, I’ve finally redesigned my dashboard to be 100% Bubble Card (except for the Frigate card, so let’s say 99%). Here is what you can achieve now with this new release in the new section view:

My next big step is to finish the new documentation (WIP), and I’m planning to add a lot of advanced examples to customize Bubble Card! We are getting closer!

I can’t wait for your feedback as always!

New features

Section support and new layouts: You can now change the layout to make the cards bigger to fit the new Home Assistant section view. In YAML, you have access to card_layout: large and card_layout: large_2_rows if you want 2 rows of sub-buttons.
Section column and rows support: In YAML, you can change that with columns: 2 and rows: 1 for example. Thank you again @brunosabot for that part!
Sub-button custom icon template: You can now change the sub-buttons icons with a template. Here is an example of a template that changes the icon of the third sub-button (0 is 1) based on an entity state: ${subButtonIcon[2].setAttribute("icon", hass.states['mower.garden'].state === 'error' ? 'mdi:alert' : 'mdi:robot-mower')}, try that in the custom styles editor.
Custom weather icon template: You can also get the weather icon based on a weather entity or any sensor that returns the weather condition, like sunny will return mdi:weather-sunny. This is helpful to make a weather card based on a state button for example. Here is how you can do that: ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['weather.home'].state))}

Bug fixes and optimizations

Fixed the pop-up close on click feature
Fixed the issues with the sub-buttons tap actions
Fixed a lot of button and sub-buttons editor issues with the help of @brunosabot!
Removed the possibility to set actions on a button when the button is a slider (this was not working together)
Fixed a memory leak in the sub-buttons code
The pop-ups are not taking space anymore when placed in a section view
And fixed a lot more!

Well, again… and again… fingers crossed

Somedia · May 12, 2024, 5:27am

Hey Cloos,

the new update is amazing, you definitely have an excellent sense for aesthetics. Thanks for your work!

I really like the new 2 rows option for the sub buttons. Would it be possible to also add it to other card types, especially pop-ups and separators?

Cloos · May 12, 2024, 5:42am

First thank you!

For the 2 rows they are available on the separator but I’ve just tested and there is a small CSS issue that I need to fix And I will add it to the pop-ups as well

bacco007 · May 12, 2024, 6:01am

I’m a little bit lost how you get this to work - where do you put this?

Cloos · May 12, 2024, 6:13am

Here is the YAML of the weather card I’ve made, you can see the templates in the custom styles section:

type: custom:bubble-card
card_type: button
card_layout: large-2-rows
button_type: state
entity: weather.maison_2
name: Weather
show_state: true
show_last_changed: false
sub_button:
  - entity: sensor.salon_temperature
    icon: mdi:home-thermometer-outline
    show_state: true
    show_background: false
  - entity: sensor.openweathermap_temperature
    icon: mdi:thermometer
    show_state: true
    show_background: false
  - entity: sensor.maison_realfeel_temperature_max_0d
    name: Today
    show_name: true
    show_state: true
    tap_action:
      action: more-info
  - entity: sensor.maison_realfeel_temperature_max_1d
    name: Tomorrow
    show_state: true
    show_name: true
    show_background: false
styles: >-
  .bubble-button-card-container {
    background: rgba(0,190,240,0.6);
  }
  .bubble-icon {
    opacity: 1;
  }
  ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast['weather.maison'].forecast[0].condition))}
  ${subButtonIcon[3].setAttribute("icon", getWeatherIcon(hass.states['sensor.weather_forecast_daily'].attributes.forecast['weather.maison'].forecast[1].condition))}

Cloos · May 12, 2024, 11:27am

Bubble Card 2 - The True One?

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.8

Hi again!

This release should fix all the new issues introduced in the beta.7, and also the last older one!

Is this the true one this time?

New features

Added the missing pop-up header layouts

Bug fixes and optimizations

Fixed the « last changed » showed by default
Fixed the default icon template not working after beta.7
Fixed a pop-up issue with the position of dropdowns (like with the xiaomi-vacuum-map-card, probably Mushroom too)
You don’t need to refresh a section view anymore when leaving the editor on a view with pop-ups
Fixed the DOM changing for sub-button icons, that was slowing down everything!
Fixed a sub-button CSS issue on the separator when there is no sub-buttons
Fixed the cover card icons color when the large layout is selected
Fixed the separator “2 rows” layout
Fixed a compatibility issue with the position of the horizontal buttons stack and the fully kiosk extension (not sure if it works, but @brunosabot opened a PR on the Fully kiosk GitHub page in the same time).

Well, again… and again… and agaiiiin fingers crossed, we are so clooosed!

koleos · May 12, 2024, 1:29pm

Many thanks !

Wolvboot · May 12, 2024, 1:39pm

Thanks for the update!

I still have white on very light buttons for lamps which are extremely hard to read. This happens in all themes. You said this was a bug earlier, is this still on the list to be fixed later on?

If not, is there any workaround? I had to stop using bubble cards due to this. I literally can’t read it.

Cloos · May 12, 2024, 1:55pm

I thought that was fixed I will take a look again!

Mar1us · May 12, 2024, 1:59pm

Really like your work!
Will you also update your dashboard config, when its ready?

Wolvboot · May 12, 2024, 2:10pm

Thanks Cloos, appreciate it! I think it may be something to do with smart bulbs and the white color temperature. Doesn’t happen on switches, they look fine and the theme applies as expected.

Light as purple (perfectly fine):

Light as white as I can make it, listed as 4000K (unreadable):

Somedia · May 12, 2024, 3:29pm

Hey Cloos,

by adding a sub-button without defining an own icon, I would assume that the icon of the entity will be used.
However, in the latest beta version, the icon of the selected main entity is being used. Is this behavior intentional or is it a bug?