Bubble Card v1.1.0

Design enhancements and new styling options!

💡 New features:

• The pop-ups have undergone a slight visual transformation, and they look great!
• A new animation has been added to the horizontal-buttons-stack that activates once the page has loaded. This can be disabled with rise_animation: false.
• Introduced bg_color to modify the background color of a pop-up.
• Introduced bg_opacity to adjust the background opacity of a pop-up. The previous default was bg_opacity: 100.
• Introduced bg_blur to alter the background blur effect of a transparent pop-up. The previous default was bg_blur: 0.
• Introduced shadow_opacity to adjust the shadow opacity of a pop-up. The previous default was shadow_opacity: 0.
• All new options are accessible in the GUI editor.

✔️ Fixes

• Minor enhancements have been implemented.

More styling options for the other cards will be added soon. Please feel free to open an issue for any specific styling requests.

I really appreciate your feedback on any issues you may encounter, and thank you once again for your continued support!

Bubble Card v1.0.3

Bubble Card is out of beta!

v1.0.3 is just a fast release that fix an issue introduced in v1.0.0 for the pop-ups, it was not possible to trigger them anymore in some cases #99

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

And a big thank you for your help @BWilky, @Danm72, @samuel9554 and @marmoul70 🥳

💡 New features :

• You can now set a timeout to close your pop-ups with auto_close: 10000, this value is in milliseconds (thanks @BWilky) #94
• You can now enable/disable the back button/event in your pop-ups, this allow you to navigate through your pop-ups when you press the back button of your browser, just add back_open: true (Beta users: This was the previous default behavior, set it to true to keep everything like before the update.) #89
• In your horizontal-buttons-stack you can now close a pop-up by clicking on the same button a second time #62
• You can now fix the margin of your pop-ups if they are not centered well in your theme with margin: 13px #91
• In your horizontal-buttons-stack you can now easily modify the style of a single button with a custom style by selecting it's class. If your button's link is #kitchen then the class to modify it will be .kitchen #76
• Bubble Card is out of beta, in my head it's more than a feature! Oh and instead of v0.0.1 like the betas the new build will be v1.0.0

✔️ 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

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

Bubble Card v1.0.2

Bubble Card is out of beta!

v1.0.2 is just a fast release that fix an issue introduced in v1.0.0 for the pop-ups, the close button was no longer removing the hash from the url on your browser #96

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

And a big thank you for your help @BWilky, @Danm72, @samuel9554 and @marmoul70 🥳

💡 New features :

• You can now set a timeout to close your pop-ups with auto_close: 10000, this value is in milliseconds (thanks @BWilky) #94
• You can now enable/disable the back button/event in your pop-ups, this allow you to navigate through your pop-ups when you press the back button of your browser, just add back_open: true (Beta users: This was the previous default behavior, set it to true to keep everything like before the update.) #89
• In your horizontal-buttons-stack you can now close a pop-up by clicking on the same button a second time #62
• You can now fix the margin of your pop-ups if they are not centered well in your theme with margin: 13px #91
• In your horizontal-buttons-stack you can now easily modify the style of a single button with a custom style by selecting it's class. If your button's link is #kitchen then the class to modify it will be .kitchen #76
• Bubble Card is out of beta, in my head it's more than a feature! Oh and instead of v0.0.1 like the betas the new build will be v1.0.0

✔️ 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

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

Bubble Card v1.0.1

Bubble Card is out of beta!

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

And a big thank you for your help @BWilky, @Danm72, @samuel9554 and @marmoul70 🥳

💡 New features :

• You can now set a timeout to close your pop-ups with auto_close: 10000, this value is in Milliseconds (thanks @BWilky) #94
• You can now enable/disable the back button/event in your pop-ups, this allow you to navigate through your pop-ups when you press the back button of your browser, just add back_open: true (Beta users: This was the previous default behavior, set it to true to keep everything like before the update.) #89
• In your horizontal-buttons-stack you can now close a pop-up by clicking on the same button a second time #62
• You can now fix the margin of your pop-ups if they are not centered well in your theme with margin: 13px #91
• In your horizontal-buttons-stack you can now easily modify the style of a single button with a custom style by selecting it's class. If your button's link is #kitchen then the class to modify it will be .kitchen #76
• Bubble Card is out of beta, in my head it's more than a feature! Oh and instead of v0.0.1 like the betas the new build will be v1.0.0

✔️ 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!

Bubble Card v1.0.0

Bubble Card v1.0.0 is out of beta!

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

And a big thank you for your help @BWilky, @Danm72, @samuel9554 and @marmoul70 🥳

💡 New features :

• You can now set a timeout to close your pop-ups with auto_close: 10000, this value is in Milliseconds (thanks @BWilky) #94
• You can now enable/disable the back button/event in your pop-ups, this allow you to navigate through your pop-ups when you press the back button of your browser, just add back_open: true (Beta users: This was the previous default behavior, set it to true to keep everything like before the update.) #89
• In your horizontal-buttons-stack you can now close a pop-up by clicking on the same button a second time #62
• You can now fix the margin of your pop-ups if they are not centered well in your theme with margin: 13px #91
• In your horizontal-buttons-stack you can now easily modify the style of a single button with a custom style by selecting it's class. If your button's link is #kitchen then the class to modify it will be .kitchen #76
• Bubble Card is out of beta, in my head it's more than a feature! Oh and instead of v0.0.1 like the betas the new build will be v1.0.0

✔️ Fixes

• Fixed the pop-ups trigger
• The editor is now displayed correctly on mobile
• Some GUI editor improvement
• Some other improvements

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!

Bubble Card v0.0.1-beta.11

BETA 11 - Fixes for beta 9 and 10

This is again a fast update that just fix some bugs that was introduced in beta 9.

✔️ Fixes :

• There was an issue that was slowing down (a lot) your dashboard after some time, this is now fixed and everything is really faster now!
• Pop-ups triggers are now working as expected
• The Close when the state is different toggle in the editor is now fixed
• is_sidebar_hidden is now working like before
• Fixed a typo in the editor

And for those who missed it here is the beta 9 changelog (it's a big one) :

💡 New features :

• Styles templates, see below
• Localization for states (like in the pop-ups, you don't need state_unit anymore)
• You can now show the entity state in buttons and covers with show_state: true
• You can now change the width of the horizontal-buttons-stack with width_desktop: 100%
• You can now open a pop-up based on the state of any entity, see below
• Pop-ups now support entity-picture
• If you set only an hash to a pop-up, only the close button will be displayed

✔️ Fixes :

• BREAKING CHANGE (sort of) : The desktop_width of pop-ups was not correct, you will have to remove 60px to your current value to have the same width as before
• BREAKING CHANGE (sort of) : After the update it's possible that your horizontal-buttons-stack will not be displayed correctly, just open the editor to fix that
• The editor is now fully working and with live preview for all cards
• The pop-up hash checker system has been fully rewritten and should fix a lot if not all issues
• A lot of the code has been rewritten and everything should be faster and more stable
• A lot of the CSS has been rewritten and the pop-ups and all the cards are now displayed like they should
• All cards are now displaying the icon and name of the entity if none are defined
• And more!

Styles template

Advanced users can now add templates in JS in their custom styles, here is an exemple of a button that is red when it's off and blue when it's on.

type: custom:bubble-card
card_type: button
entity: switch.test
name: Test
styles: |
  .switch-button {
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }

For now you have access to these variables :

state will return the state of your entity.
entity will return your entity like switch.test in this exemple.

Pop-ups trigger

This new feature allows you to open a pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.

Here is an example :

type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Security
icon: mdi:video
trigger_entity: binary_sensor.front_door_motion
trigger_state: 'on'
trigger_close: true

All new options are available in the documentation.

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

Bubble Card v0.0.1-beta.10

BETA 9... and now 10 - A major update!

This is a fast update that just fix a bug that was introduced in beta 9, the background color of buttons is now working like before and it also fix the state variable in custom styles for some cards.

Here is the beta 9 changelog :

💡 New features :

• Styles templates, see below
• Localization for states (like in the pop-ups, you don't need state_unit anymore)
• You can now show the entity state in buttons and covers with show_state: true
• You can now change the width of the horizontal-buttons-stack with width_desktop: 100%
• You can now open a pop-up based on the state of any entity, see below
• Pop-ups now support entity-picture
• If you set only an hash to a pop-up, only the close button will be displayed

✔️ Fixes :

• BREAKING CHANGE (sort of) : The desktop_width of pop-ups was not correct, you will have to remove 60px to your current value to have the same width as before
• BREAKING CHANGE (sort of) : After the update it's possible that your horizontal-buttons-stack will not be displayed correctly, just open the editor to fix that
• The editor is now fully working and with live preview for all cards
• The pop-up hash checker system has been fully rewritten and should fix a lot if not all issues
• A lot of the code has been rewritten and everything should be faster and more stable
• A lot of the CSS has been rewritten and the pop-ups and all the cards are now displayed like they should
• All cards are now displaying the icon and name of the entity if none are defined
• And more!

Styles template

Advanced users can now add templates in JS in their custom styles, here is an exemple of a button that is red when it's off and blue when it's on.

type: custom:bubble-card
card_type: button
entity: switch.test
name: Test
styles: |
  .switch-button {
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }

For now you have access to these variables :

state will return the state of your entity.
entity will return your entity like switch.test in this exemple.

Pop-ups trigger

This new feature allows you to open a pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.

Here is an example :

type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Security
icon: mdi:video
trigger_entity: binary_sensor.front_door_motion
trigger_state: 'on'
trigger_close: true

All new options are available in the documentation.

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

Bubble Card v0.0.1-beta.9

BETA 9 - A major update!

💡 New features :

• Styles templates, see below
• Localization for states (like in the pop-ups, you don't need state_unit anymore)
• You can now show the entity state in buttons and covers with show_state: true
• You can now change the width of the horizontal-buttons-stack with width_desktop: 100%
• You can now open a pop-up based on the state of any entity, see below
• Pop-ups now support entity-picture
• If you set only an hash to a pop-up, only the close button will be displayed

✔️ Fixes :

• BREAKING CHANGE (sort of) : The desktop_width of pop-ups was not correct, you will have to remove 60px to your current value to have the same width as before
• BREAKING CHANGE (sort of) : After the update it's possible that your horizontal-buttons-stack will not be displayed correctly, just open the editor to fix that
• The editor is now fully working and with live preview for all cards
• The pop-up hash checker system has been fully rewritten and should fix a lot if not all issues
• A lot of the code has been rewritten and everything should be faster and more stable
• A lot of the CSS has been rewritten and the pop-ups and all the cards are now displayed like they should
• All cards are now displaying the icon and name of the entity if none are defined
• And more!

Styles template

Advanced users can now add templates in JS in their custom styles, here is an exemple of a button that is red when it's off and blue when it's on.

type: custom:bubble-card
card_type: button
entity: switch.test
name: Test
styles: |
  .switch-button {
    background-color: ${state === 'on' ? 'blue' : 'red'} !important;
  }

For now you have access to these variables :

state will return the state of your entity.
entity will return your entity like switch.test in this exemple.

Pop-ups trigger

This new feature allows you to open a pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.

Here is an example :

type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
name: Security
icon: mdi:video
trigger_entity: binary_sensor.front_door_motion
trigger_state: 'on'
trigger_close: true

All new options will be soon available in the documentation.

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

Bubble Card v0.0.1-beta.8

BETA 8 is here, with a lot of bugs fixed!

✔️ Fixes :

• navigation_path and all kind of navigation or pop-ups triggering in all cards is now fixed #41 #45 #54 #57
• You can now only use _icon or _name if you want in the horizontal-buttons-stack #56
• You can now scroll vertically in a page or a pop-up with sliders and not triggering them by mistake #55
• The cards inside a pop-up should now always be at the right width #49
• Creating a new horizontal-buttons-stack will show more errors if your configuration is not correct #52
• Buttons switch are now correctly changing there background color accordingly to the entity state, like for a person entity for example

💡 New features :

• Buttons now supports entity-picture if there is one in your entity or by setting icon with a valid link to an image #20
• Pop-ups now support query args from other integrations like Frigate #43

And more to come!

Bubble Card v0.0.1-beta.7

BETA 7 is in the place! And with the most requested features!

Tap, double tap and hold actions

A fast recap, as you asked me a lot I finally added the possibility to use the HA default tap actions, double tap actions and hold actions on the icons of every cards. This now allows you to display the “more info” window by holding the icon and to turn on/off the lamp of a slider by a single tap for example, everything is possible now and I hope everything works as expected! This is only available in YAML for now.

Here is an example:

tap_action: 
  action: toggle 
double_tap_action: 
  action: call-service 
  service: script.dark_scene 
hold_action: 
  action: more-info

A new custom button type

There is also a new button_type: custom (only in YAML for now) that allows you to use all actions directly on the whole button allowing you to use it for almost everything. Here is an example of a button that toggle all the lights of a room and if you double tap or hold it, it will open a pop-up with all your other lights:

type: custom:bubble-card
card_type: button
button_type: custom
entity: light.kitchen
name: Kitchen
icon: mdi:fridge
tap_action:
  action: toggle
double_tap_action:
  action: navigate
  navigation_path: '#kitchen'
hold_action:
  action: navigate
  navigation_path: '#kitchen'

Styles

But I also added another very requested feature, you can now use directly styles: | without card-mod which finally allows you to modify the style of the pop-ups, here is how to change its opacity for example:

styles: | 
  #root { 
    opacity: 0.95; 
  }

To change the background color of a button:

styles: | 
  ha-card > div > div > div { 
    background: blue !important; 
  }

Or the color of a slider:

styles: |
  ha-card > div > div > div > div.range-fill { 
    background: blue !important; 
  }

All these features are still experimental but according to my tests they all works great! 😁

All new options are available in the documentation.

✔️ Fixes :

• The pop-ups can now be scrolled on Firefox #38
• Scrolling down for closing a pop-up was a bit too sensitive, it should be better now #38
• Some cursors where not correctly displayed on desktop, this is now fixed #42

💡 New features :

• Tap, double tap and hold actions are now available for all cards icons #17
• button_type: custom see the above example
• styles: | see the above examples #25

And more to come!