Hi everyone and thanks for your feedback!
It seems that a lot of you are encountering this error with v1.5.0:
custom element doesn't exist: bubble-pop-up
This issue is due to the HA companion app on Android and iOS. There are some solutions being discussed here, but I’m still looking for a cleaner workaround.
Mine seemed to work fine as long as I add the extra module immediately after frontend and added a missing “-” which was not in the config example on the form (the themes line below just relates to my split config)
frontend:
extra_module_url:
- /hacsfiles/Bubble-Card/bubble-pop-up.js
themes: !include_dir_merge_named themes
Just to follow up - my bubble cards also stopped working. Occurred when I left my house and the android app switched from connecting locally via http to using Nabu Casa via https. As soon as I got home and my home WiFi reconnected, it all worked as before. May be a coincidence but thought I’d feed this bsck in case it helps narrow down the issue.
And please keep the picture upright (vertikal)
Hi
I didnt upgrade yet, and i feel lucky when i see all those problems.
Should i wait a bit longer? Until you figured it out?
Would love to know this as well. My camera popups on my tablets are right justified.
There should be a conflict with a custom component, because pop-ups should be always centered.
Can you send me a list of your installed custom components?
My custom component
And if it can help, my yaml :
type: vertical-stack
cards:
- type: custom:bubble-pop-up
card_type: bubble-pop-up
hash: '#lights'
name: Lumières
icon: mdi:lightbulb-group
width_desktop: 500px
height_desktop: 500px
margin_top_mobile: 18px
margin_top_desktop: 74px
margin: 7px
card_mod:
style: |
:host {
background-color: transparent;
}
ha-card {
color: red;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: separator
name: Salon
icon: mdi:sofa
- square: false
type: grid
columns: 2
cards:
- type: custom:bubble-card
card_type: button
width_desktop: 500px
height_desktop: 500px
margin_top_mobile: 18px
margin_top_desktop: 74px
margin: 7px
entity: light.nous_p2_light_salon_1
button_type: slider
name: Salon 1
icon: phu:yeelight-bulb
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: button
entity: light.nous_p3_light_salon_2
button_type: slider
icon: phu:yeelight-bulb
name: Salon 2
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
} - type: custom:bubble-card
- type: custom:bubble-card
card_type: separator
name: Cuisine
icon: mdi:countertop
- type: custom:bubble-card
card_type: button
entity: light.yeelink_mono1_7169_light
button_type: slider
icon: phu:yeelight-bulb
name: Cuisine
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: separator
name: Chambre principale
icon: mdi:bed-double
- square: false
type: grid
columns: 2
cards:
- type: custom:bubble-card
card_type: button
width_desktop: 500px
height_desktop: 500px
margin_top_mobile: 18px
margin_top_desktop: 74px
margin: 7px
entity: light.ampoule_chambre_tbo
button_type: slider
name: Tibo
icon: phu:yeelight-bulb
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: button
entity: light.ampoule_chambre_flo
button_type: slider
icon: phu:yeelight-bulb
name: Flo
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: button
entity: light.nous_p3_light_chambre
button_type: slider
icon: phu:yeelight-bulb
name: Chambre
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
- type: custom:bubble-card
card_type: separator
name: Entrée
icon: mdi:door
- type: custom:bubble-card
card_type: button
entity: light.ampoule_entree
button_type: slider
icon: phu:yeelight-bulb
name: Entrée
show_state: true
card_mod:
style: |
:host {
background-color: transparent;
}
#header-container {
background-color: transparent;
div {
background-color: transparent;
}
}
h2 {
font-family: Arial;
font-size: 28px !important;
color: white;
background-color: transparent;
}
.header-icon {
color: orange;
background-color: blue;
display: none;
}
.close-pop-up {
background-color: light-gray;
--card-mod-icon-color: white;
width: 50px;
height: 50px;
}
I have noticed that on my tablet the bubble card pop ups are aligned on the left instead of the center of the screen. On my computer and phone they seem to be fine.
Anything that I can do to make the popups centered?
My tablet is Fire 8 tablet and running fully kiosk.
Thanks for the update,
Can someone tell what ware are the implication to have the module directly in the configuration
does anyone know how i can “hide” the State of the CoverCard ?
cause on overkiz/somfy its all the time “unknown”…
Really digging the look/feel of this, nice work!
Question: Is there any way to use a Template for the Name of a button? I just want to customize the text with some extra data.
Thanks for your work!
Do you need to have the vertical stacks with the custom:bubble-pop-up on the same on the same view or can you have it in a different view? For example, could I have #my_office bubble-pop-up inside lovelace-mobile/ignacios_office? I have a lot of rooms, so having everything on a single view is a lot of code in a single file that is a bit harder to maintain.
It it possible to have an button card that opens a popup on another dashboard?
I have multiple dashboard and on the second one I have a buttoncard with a working popup.
I want to copy only the buttons to my first one, so it stays more clean.
Apologies if I missed it somewhere in this thread, but is there a way to disable the hidden menu/header in the Bubble theme when on a mobile device?
I assume it has something to do with this bit in the theme:
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
I’'m just not sure what to comment out without destroying the theme lol
Ofcourse it’s possible. The 2 most simple options I can think of right now:
You can use the ! include option of YAML (provided you’re in YAML mode). Just use the code in a separate YAML file then use ! include to reference that YAML file on each dashboard. Look up how that YAML function works if you want to use this.
If you don’t use YAML mode, you can also install decluttering-card (it’s on HACS). This way you can create a decluttering template for this card and just use the decluttering-card (2 small lines of code) on each dashboard. Changing the decluttering template (where this card is configured) changes the code for everywhere you use it. Look up decluttering-card to figure out how to use it (or visit the thread on this forum).
There most likely are other ways, but these are the options I use a lot to prevent copy/pasting a lot of code.
Did not know the !include could be used in this way. I only use it in configuration.yaml, not paying attention to the possibilities. Will investigate.
I use declutterring card a lot. Would love if it could declutter between different dashboard, and not only in one dashboard. However good idea and will solve most challenges
You can combine decluttering with !include 
I have a YAML file called decluttering-templates.yaml which has all the templates and refer to that on each dashboard by simply using the !include on the top of each dashboard. Like this.
decluttering_templates: !include templates/decluttering-card-templates.yaml
This way I just have one file containing all decluttering-card templates, and all dashboards use it. I do the same for custom:button-card templates and numerous other elements I want to duplicate across dashboards, like media players.