Pop-up cards with Bubble card in Home Assistant

No matter if it's phone, tablet or computer screen, your Home Assistant will look much better if you use Bubble card. In today's video, we will look at what is Bubble Card, how to install it, my example plus create some of them from scratch.
Bubble Card link:
github.com/Clooos/Bubble-Card
Few of my examples from video:
github.com/BeardedTinker/Home...
00:00 - Intro
00:39 - What is bubble card
03:41 - Installation of Bubble card
04:31 - My Bubble Card(s)
06:07 - Creating cards with Bubble card
15:15 - Final thoughts
Pop-up cards with Bubble card in Home Assistant
Don't forget to give this video thumb up if you liked it, subscribe if you still haven't and I'll see you next time!
Have fun!
Bearded Tinker
____________________________________________________________
👕☕Awesome merchandise? Sure - here it is!
▶ shop.beardedtinker.com/
____________________________________________________________
🧡 If you would like to support me and this channel, you can JOIN and become KZbin channel member! 🙏 kzbin.info...
____________________________________________________________
📣Follow me on other platforms📣
✅Twitter: @BeardedTinker
✅Instagram: @2BeardedTinker
✅Discord: / discord
____________________________________________________________
(*) if any, should indicate links that are affiliated links. They don't cost you anything extra but provide small income to get this channel going, and finance future projects I make.
#homeassistant #lovalace

[@harrovw]

Great instruction, I had tried to get bubble cards working but didn’t succeed, I know have redone my whole UI with help of your instructions. Crystal clear as always! Keep on posting your great video’s!

[@BeardedTinker]

Great to hear! Thank you for the comment!!!!!

[@dannichols6579]

Thanks for bringing this one to my attention. I have adapted my mobile dashboard to make use of the pop-ups, it's a much more ergonomic way to access many of my frequent entities.

[@BeardedTinker]

Thanks for sharing - it should work perfectly on mobile!!!

[@clairerovic]

Have just added to my dashboard - just makes so much good sense. The finished product was clean and faster to implement.

[@BeardedTinker]

Glad you liked it!!! Thanks for the comment

[@ajithprabhakar]

Thanks for posting, will surely give this a try

[@BeardedTinker]

Hope you enjoy

[@andrea00]

Great video! I'll sure try those beautiful bubble cards!

[@BeardedTinker]

Thank you - they really are beautiful!

[@adifoto6362]

Thanks for the video. keep them coming.

[@BeardedTinker]

You bet Adi! Thank you!

[@EsotericArctos]

Designing a dashboard has always been an area where I struggle a bit. I don't have a strong need for a dashboard, but I do use one sometimes. Some of these new card types make it easier to design a dashboard that loosk good, even for people who are not as strong with it. The bubble card looks like a little how sub-views work, but with nicer animations and automatic return.

[@BeardedTinker]

Same here... Design and me is not something you would put in sentence together :) Ability to configure over UI is must for some, so that's also a big plus.

[@locklear308]

I still struggle to understand how absolutely horrible stock dashboards are in Home Assistant. All it needed to be was columns and rows.

[@leicaman]

I will be definitely using them!

[@BeardedTinker]

Glad you like it!

[@d_sellers1]

Pop-ups can even be triggered via tap_action. You can take a stock button card, for example. Add a tap_action:, action: navigate, navigation_path: '#hashtag_for_popup'. Pressing the button card will initiate the pop-up.

[@BeardedTinker]

Yes, correct! I removed that part from UI/video as it didn't look nice (visually) :) But it's great also that you can use pop-up on motion (trigger) even without navigation bar or button.

[@AnalyzerParalyzer]

Thank you for creating this video. I have the default dashboard and this has inspired me to create something significantly more visually appealing in its place.

[@BeardedTinker]

Fantastic! Thanks for sharing!

[@JustBasGames]

This does also work with the Minimalist Room Cards. That's so awesome!

[@BeardedTinker]

Yes it does! Thanks for the comment!!!

[@1977marcomarcolli]

Great video! You’re always the top…

[@BeardedTinker]

Thank you Marco!!! Really appreciated 👍

[@PatrickBulteel]

I saw the post about the cards when he was still finishing it and before he released it. I thought it looked interesting but hadn't had a chance to try it. Seeing it in action definitely makes me want to try it out as I have a few items that I think fit nicely into these cards. The other one I am really wanting to give a go is the Swiss Army Knife Card.

[@BeardedTinker]

Swiss Army Knife card is on my to-o list too. But both require i a bit of time to play with them and figure out how they work.

[@PetervanHofwegen]

Thats one hell of a replacement for my tapped cards that has failed too much. This weekend I've got something to do!

[@BeardedTinker]

It's really neat card! Have fun with it!!!

[@cloooos]

Hi and thank you again for this video! Any chance to see a Bubble Card 2 video as well in the future? There are too many new features and it seems that nobody has covered it yet 🤞

[@Claudiu.]

Will sure give it a try. I'm still behind on trying the mushroom (I like how you pronounce the mush part) cards. Thanks for showing that you can combine them together. As mentioned already - it depends on who is using it. From the geek-part perspective, we probably appreciate the functionality of our HA setups, the automations - and not as much worried about the look and feel of things. However I'm happy that the wife approval factor for HA is on the positive end of the scale for a while, in parts also thanks to you!

[@BeardedTinker]

Visuals/design can be much tougher than implementing something new. I also prefer automation over UI - not sure that anyone in the family is actually opening the HA intefrace on mobile.

[@louisviciedo]

great video, thanks. I use it for pop up video camera with motion trigger

[@BeardedTinker]

That's really nice use case!

[@sevagjb]

Awesome video, its creative

[@BeardedTinker]

Thank you!!!

[@michaelgaynor21]

Awesome video veryhelpful

[@BeardedTinker]

Glad you liked it!

[@alondinbar6193]

Thanks! I saw you have roborock vacuum. Can you create video on creating custom page for it? Like custom card of selecting rooms i want and press on button for vacuum / moping / together? Like a dynamic option. Maybe also adding last cleaning room template on each room button. Your tutorial super helpful.

[@genome692002]

it works but.. how come when I edit the bubble card there is no preview to the right,, other cards have

[@AmazingOrange87]

How do you get it to continue showing all bottom row bubble card buttons? For example on yours, when you click Living Room, it made Balcony disappear at the bottom row. But when you select Balcony, it shows both Balcony and Living Room. I'd like the bottom row bubble buttons to keep showing regardless which pop up I select

[@Fireheadman]

little confused on this.... if you have 12 rooms/areas, seems we are limited to the number of popups for the screen? Also curious if the background could have images/background? or Even other cards present?

[@JamesTenniswood]

Looks like a great add-on but I do with the native UI controls would offer options like this, and develop a bit more quickly. The UI update progress is super slow, prompting people to build these add-ons that all have conflicting UI styles.

[@BeardedTinker]

There are ton of parallel UI options that make development look slower than it actuallyis. Also, HA will stick with one (matterial/google) type of UI, while HACS offers more options, from retro, sci-fi, bubble, ....

[@olivier6681]

Hello thx for share Bubble card 😊 question possible to use with iPad wallpanel with large screen double columns ?

[@BeardedTinker]

Not sure, haven't tried it - no iPad here :)

[@TechTonor]

Hi, Have you looked into a good hack where it's supported to send the user to another view (same dashboard, other view), where the Bubble card still opens (/dashboard/home to /dashboard/alarm#some_popup_ref)? I have tested it personally, and the bubble card only opens, if I've already been in the same view, in the current session. Else, I've just navigated to the new view, with no popup bubble card shown. I'm the developer of ha-floorplan, and are currently looking into more details about bubble card, and the hacks around it, hopefully to get a video out, at some point in the future 🙂.

[@BeardedTinker]

Unfortunately no - haven't tried that one. There were some changes to it in last month(s) and I haven't still updated cards I have to it (it was related to pop up, how it is handled). Good luck with testing and BTW HA Floorplan is awesome - I started playing with it by my drawing capabilities are so terrible that decided to skip it :D

[@t0mz3n75]

Is there are way to sort the buttons of the horizontal stack card? If you have more than 4 they only show on mobile on one line and i have to scroll sideways to reach the fourth button.

[@BeardedTinker]

There is, but not sure if it will be enough for you. Order can be dynamic based on presence sensors. If the card has tied presence sensor and there is movement, it will be moved to most left position. Also, you can try removing text and leaving just icons - I know it' snot the same but I use mix of icons and text to get more in UI.

[@t0mz3n75]

@@BeardedTinker i tried it, but it still does Not Work the way i want it. I found another way: gridcard with 2 columns and then use Button-Card from hacs and use Tap Action and navigation path. Works flawlessly and Looks much better.

[@BeardedTinker]

@@t0mz3n75 that's nice workaround...

[@davidnestico]

You can put more than 3 rooms because its scrollable btw

[@BeardedTinker]

Sure, but some prefer not to scroll and have everything visible on the screen! But thanks for pointing it out - not sure if I've mentioned it in video!!!

[@djfrednunnenkamp2405]

Hi, I would like to send an Apple Shortcuts request to Home Assistant, and Home Assistant will return my phone's location. How can I do this? Thank you very much.

[@BeardedTinker]

Sorry, not using Apple Shortcuts - I have reverse thing - automation that triggers iPhone to send it's location back to HA. But you have to consider that Apple is limiting location sharing and it works, sometimes...

[@fodi123]

Does the auto-pop up card work even if you have another page activated? It would be nice to have such a pop up for a video doorbell, but I can't guarantee that each time I'm on the same page

[@cloooos]

For that you will have to add the same pop-up on each pages, there is no way to have a single pop-up on every pages without adding it everywhere. This is a limitation that I'm not able to change right now but this method is working great.

[@fodi123]

@@cloooosThanks, I'll try that then

[@BeardedTinker]

Can confirm, this works awesome, the navigation bar is not needed

[@gurkanyesilgun]

Thanks for the explanation 👏Can you share your configuration example? 🙏

[@BeardedTinker]

Yes I can - I've added link also to video description, but here it is: github.com/BeardedTinker/Home-Assistant_Config/issues/109

[@gurkanyesilgun]

@@BeardedTinkerthank you very much 🙏

[@filikun]

What theme are you using?

[@BeardedTinker]

On recording setup, I'm using internal HA Dark theme. (unless doing video on themes :) )

[@oleav1539]

I can't get the trigger to work 🤔

[@BeardedTinker]

There have been some updates and changes lately. For me it's still working the same way as setup in video.

[@0x0081]

So many UI’s for smartphone screen’s and nothing with larger elements for tablets 🙁

[@BeardedTinker]

It can look like that. But I've also zoomed to 150% to get "fuller" screen.

[@teek541]

I have a few small use cases for these cards. I would treat them as more of an entity card that has more specific info/options about an entity. I don't think I'll use them as a room card though. I've been wanting to play around with presence detection and have the room you are in open by default. I don't see a way to do that with bubble cards. You would have to interact with them.

[@cloooos]

You can add your occupancy sensors in the trigger section, then when there is an occupancy in a room this pop-up will open by itself. But I don't really recommend this approach because it will not really work when multiple persons are in different rooms.

[@teek541]

@@cloooos I was going to make a custom dashboard per person, have their default dashboard be customized to their room occupancy settings.

[@dogcatmause]

What r u talking about!? There are no nested card in HA, not in HACS and not even in google search...

[@BeardedTinker]

Have you for example tried vertical or horizontal cards? They NEST cards inside a card...

[@GoranZvrzina]

Hi. This workd well. BUT only if I have HA opened and I am on the page whit this card.

[@BeardedTinker]

Yes, you have to be on that page if you want pop-up. But also, you can add that pop-up to every page and it will be hidden unless it needs to pop-up.

[@GoranZvrzina]

@@BeardedTinkerThank you. Then it is useless to me. I can't imagine in what case I should sit in front of the screen and wait for a popup window. 😂

[@BeardedTinker]

@@GoranZvrzina But, if you don't sit and watch the screen, how will you see the popup

[@jean-louismartin3026]

Unfortunatly, some changes have been made inside bubble card so that your examples are no more usable! using bubble-card reports:

[@BeardedTinker]

Yes, but as you've said, changes are simple to implement - change card name and add additional js file reference in config to load it up. On the other hand it's really great update as it frees a lof of resources and memory.

[@SOWA85]

@@BeardedTinker I followed the instructions, added the configuration.yaml changes, renamed the card and still same error, even rebooted HA. What am I doing wrong?

[@BeardedTinker]

Are you on v1.5.0 or v1.5.1 - there is diference as in 1.5.0 you need to add js to frontend section of configuration.yaml file, while in 1.5.1 that's not needed. I've rebooted HA during 1.5.0 as it needs to reload .js files and also cleared cache in browser as it needs to reload all extensions. If you've replaced every bubble-card and restarted and refreshed, it should work. Tested on 2 systems, and all is working.

[@icwhy4366]

what a mess to integrate all this garbo