[Example] Square Room Summery Cards #927

MrBearPresident · 2024-11-16T13:58:12Z

MrBearPresident
Nov 16, 2024
Collaborator

type: custom:bubble-card
card_type: button
layout_options:
  grid_columns: 2
  grid_rows: 3
entity: input_number.temperature
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: true
hold_action:
  action: navigate
  navigation_path: plan
card_layout: large-2-rows
button_action:
  tap_action:
    action: navigate
    navigation_path: plan
tap_action:
  action: navigate
  navigation_path: plan
button_type: state
name: Family Room
icon: mdi:television
sub_button:
  - entity: input_boolean.help_house_testboolean
    show_last_changed: false
    show_attribute: false
    show_state: false
    tap_action:
      action: toggle
    show_background: true
    hold_action:
      action: call-service
      service: input_select.select_option
      data:
        option: family_room_lights
      target:
        entity_id: input_select.help_gf_lr_sceneselector
    double_tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: family_room_lights
      target:
        entity_id: input_select.help_gf_lr_sceneselector
  - entity: input_boolean.help_house_testboolean2
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
  - entity: input_boolean.help_house_testboolean3
    show_last_changed: false
    show_state: false
    show_name: false
    tap_action:
      action: toggle
  - entity: input_boolean.help_house_testboolean4
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
    hold_action:
      action: more-info
styles: >
  :host{
      --icon-Background-Color: #FF595E ;
      --color-yellow: 255, 202, 58 ;
      --color-blue: 25, 130, 196 ;
      --color-green: 138, 201, 38 ;
      --color-purple: 106, 76, 147 ;
  }


  .card-content {
    width: 100%;
    margin: 0 !important;
  }


  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
  }


  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }


  .bubble-icon-container {
    grid-area: i;
    border-radius: 50% !important;
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    place-self: center !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: var(--icon-Background-Color);
  }


  .bubble-icon {
    width: 40%;
    position: relative !important;
    --mdc-icon-size: 100px !important;
    opacity: 0.5 !important;
  }


  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }


  .bubble-name {
    font-weight: bold;
    font-size: 16px;
  }


  .bubble-state {
    font-weight: bold;
    font-size: 14px;
  }


  .rows-2 .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    width: auto !important;
    padding-right: 0px;
    height: 100% !important;
    margin-top: 25px;
  }


  .rows-2 .bubble-sub-button {
    height: 36px !important;  
  }


  .bubble-sub-button {
    min-width: 36px !important;
  }

  .bubble-sub-button-1 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean'].state === 'on' ? '--color-yellow' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean'].state === 'on' ? '--color-yellow' : ''}), 0.3) !important;
  }

  .bubble-sub-button-2 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? '--color-blue' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? '--color-blue' : ''}), 0.3) !important;
  }


  .bubble-sub-button-2 .bubble-sub-button-icon {
    animation: ${hass.states['input_boolean.help_house_testboolean2'].state === 'on' ? 'slow-rotate 2s linear infinite' : ''};
  }

  @keyframes slow-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  .bubble-sub-button-3 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean3'].state != 'on' ? '' : '--color-green'}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean3'].state != 'on' ? '' : '--color-green'}), 0.3) !important;
  }

  .bubble-sub-button-3 .bubble-sub-button-icon{
    animation: ${hass.states['input_boolean.help_house_testboolean3'].state === 'on' ? 'sound 0.8s' : ''} !important;
    animation-iteration-count: infinite  !important;
  }


  @keyframes sound {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }


  .bubble-sub-button-4 {
    color: rgba(var(${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? '--color-purple' : ''}), 1) !important;
    background-color: rgba(var(${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? '--color-purple' : ''}), 0.3) !important;
  }

  .bubble-sub-button-4 .bubble-sub-button-icon{
    animation: ${hass.states['input_boolean.help_house_testboolean4'].state === 'on' ? 'shake 10s' : ''} !important;
    animation-iteration-count: infinite  !important;
  }


  @keyframes shake {
    0% { transform: translate(0px, 5px) rotate(0deg); }
    25% { transform: translate(-5px, 0px) rotate(-45deg); }
    50% { transform: translate(0px, -5px) rotate(0deg); }
    75% { transform: translate(5px, 0px) rotate(45deg); }
    100% { transform: translate(0px, 5px) rotate(0deg); }
  }



  #Place all the icon changing stuff on the bottom

  ${subButtonIcon[0].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean'].state === 'on' ?
  'mdi:lightbulb-group' : 'mdi:lightbulb-off')}

  ${subButtonIcon[1].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean2'].state === 'on' ?
  'mdi:fan' : 'mdi:fan-off')}

  ${subButtonIcon[2].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean3'].state === 'on' ?
  'mdi:speaker' : 'mdi:speaker-off')}

  ${subButtonIcon[3].setAttribute("icon",
  hass.states['input_boolean.help_house_testboolean4'].state === 'on' ?
  'mdi:robot-vacuum' : 'mdi:robot-vacuum-off')}

Only Square style

type: custom:bubble-card
card_type: button
entity: sun.sun
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: true
hold_action:
  action: navigate
  navigation_path: plan
card_layout: large-2-rows
button_action:
  tap_action:
    action: navigate
    navigation_path: plan
tap_action:
  action: navigate
  navigation_path: plan
button_type: state
name: Family Room
icon: mdi:television
sub_button:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
styles: |
  :host{
      --icon-Background-Color: #FF595E ;
      --color-yellow: 255, 202, 58 ;
      --color-blue: 25, 130, 196 ;
      --color-green: 138, 201, 38 ;
      --color-purple: 106, 76, 147 ;
  }

  .card-content {
    width: 100%;
    margin: 0 !important;
  }

  .large .bubble-button-card-container {
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
    overflow: hidden !important;
  }

  .bubble-button-card {
    display: grid;
    grid-template-areas:
      'n n n b'
      'l l l b'
      'i i . b'
      'i i . b';
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
    justify-items: center;
  }

  .bubble-icon-container {
    grid-area: i;
    border-radius: 50% !important;
    width: 150% !important;
    height: 150% !important;
    max-width: none !important;
    max-height: none !important;
    position: absolute !important;
    place-self: center !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px, 0px, 0px, 0px !important;
    background-color: var(--icon-Background-Color);
  }

  .bubble-icon {
    width: 40%;
    position: relative !important;
    --mdc-icon-size: 100px !important;
    opacity: 0.5 !important;
  }

  .bubble-name-container {
    grid-area: n;
    justify-self: start;
    margin-left: 20px;
    max-width: calc(100% -(12px + 0px));
  }

  .bubble-name {
    font-weight: bold;
    font-size: 16px;
  }

  .bubble-state {
    font-weight: bold;
    font-size: 14px;
  }

  .large .bubble-sub-button-container {
    grid-area: b;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc((100% - 4 * 36px)/5) !important;
    justify-content: flex-start;
    width: auto !important;
    right: 0px !important;
    padding-right: 0px !important;
    height: 100% !important;
    top: calc((100% - 4 * 36px)/5) !important;
    
  }

  .large .bubble-sub-button {
    height: 36px !important;  
  }
grid_options:
  columns: 6
  rows: 3

Extra Features:

Rotation of the fan icon
Moving of the box icon
Moving of the vacuum robot

Disclamer: I did not make this, but revised what @ddewar posted.

ddewar · 2024-11-16T15:09:18Z

ddewar
Nov 16, 2024

This is really awesome, I'm bringing some of your changes into mine! Thanks!

1 reply

MrBearPresident Nov 16, 2024
Collaborator Author

I've enlarged the card somewhat to fit with the sections-view.

Clooos · 2024-11-16T15:21:04Z

Clooos
Nov 16, 2024
Maintainer

This one is insane! I really love the vacuum animation 👌

0 replies

LoznOz · 2024-11-17T09:28:51Z

LoznOz
Nov 17, 2024

Love the ideas and resulting card in this thanks for sharing

0 replies

kdober · 2025-02-10T18:16:44Z

kdober
Feb 10, 2025

This looks very nice!
Do you know if it is possible to define the color variables in general so they apply to all the Room bubble cards?
For example, I tried to place the
styles: >
:host{
--icon-Background-Color: #FF595E ;
--color-yellow: 255, 202, 58 ;
--color-blue: 25, 130, 196 ;
--color-green: 138, 201, 38 ;
--color-purple: 106, 76, 147 ;
}

directly on the dashboard level (yaml mode in the Raw configuration editor), but color variables saved there are not working when I reference them in the bubble card.

0 replies

MinnesotaMean · 2025-02-12T06:02:08Z

MinnesotaMean
Feb 12, 2025

I cannot for the life of me get this button to work on my dashboard. Could anyone please help guide me on how to set it up?

4 replies

MrBearPresident Feb 13, 2025
Collaborator Author

What did you try, what didn't work?
What do you want to achieve?

MinnesotaMean Feb 13, 2025

I created a bubble card button, cleared the yaml and pasted in your template. I then went back into the visual editor and chose my input booleans and input for temp. But when I save the button is empty and I don't get a preview of it while modifying.

richsimpson Feb 13, 2025

worked for me but lots of info to change to match your inputs in the code. changed all the input boolean one at a time. first one, went through and made it a light. second something else.

Remember if you change entity or button no.1 to your light, then its also in the style code later that you need to change items, not just up at the top of the yaml code.

Will need to change all 4 of the items to something you have or remove items etc.

MrBearPresident Feb 17, 2025
Collaborator Author

On the bottom of the original post I made a "Only Square style" part.
Can you try and copy paste that? Maybe that is easier to start from.

amstermk · 2025-02-13T10:55:22Z

amstermk
Feb 13, 2025

How do I adapt this to the bubble icon? I tried to implement it into .bubble-icon … but that didn‘t work

edit: forget the question... works as intended. made another mistake why it initially did not work...

0 replies

DerHerzog7 · 2025-02-14T03:25:06Z

DerHerzog7
Feb 14, 2025

So with the latest beta, this button broke. The icon and coloured circle has now shifted to the right of the button and I'm not sure why...

3 replies

Clooos Feb 14, 2025
Maintainer

I will check that!

Clooos Feb 14, 2025
Maintainer

This is already fixed in v2.5.0-beta.2!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.2

DerHerzog7 Feb 17, 2025

Brilliant!

DerHerzog7 · 2025-02-14T03:44:28Z

DerHerzog7
Feb 14, 2025

Actually any chance you can turn this into a module to use with the new beta?

8 replies

DerHerzog7 Feb 19, 2025

Any update?

ddewar Feb 20, 2025

Here is a quick one that will just apply the styles to make the squares I have currently, working on making some editor options. @MrBearPresident new addition in the newest beta might make things even easier. Hoping to mess with that soon.

  name: Room Cards Styling
  version: "v0.10"
  creator: "ddewar"
  link: "https://github.com/ddewar/"
  description: This module applies room card styling to Bubble Card.

  unsupported:
    - horizontal-buttons-stack
    - separator
    - pop-up
    - empty-column

  code: |
    .card-content {
      width: 100%;
      margin: 0 !important;
    }

    .large .bubble-button-card-container {
      height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
      overflow: hidden !important;
    }

    .bubble-button-card {
      display: grid;
      grid-template-areas:
        'n n n b'
        'l l l b'
        'i i . b'
        'i i . b';
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
      justify-items: center;
    }

    .bubble-icon-container {
      grid-area: i;
      border-radius: 50% !important;
      width: 150% !important;
      height: 150% !important;
      max-width: none !important;
      max-height: none !important;
      position: absolute !important;
      place-self: center !important;
      margin: 0px 0px 0px 0px !important;
      padding: 0px, 0px, 0px, 0px !important;
      background-color: var(--icon-Background-Color);
    }

    .bubble-icon {
      width: 40%;
      position: relative !important;
      --mdc-icon-size: 100px !important;
      opacity: 0.5 !important;
    }

    .bubble-name-container {
      grid-area: n;
      justify-self: start;
      margin-left: 20px;
      max-width: calc(100% -(12px + 0px));
    }

    .bubble-name {
      font-weight: bold;
      font-size: 16px;
    }

    .bubble-state {
      font-weight: bold;
      font-size: 14px;
    }

    .rows-2 .bubble-sub-button-container {
      grid-area: b;
      display: flex !important;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: flex-start;
      width: auto !important;
      padding-right: 0px;
      height: 100% !important;
      margin-top: 25px;
    }

    .rows-2 .bubble-sub-button {
      height: 36px !important;
    }

    .bubble-sub-button {
      min-width: 36px !important;
    }```

DerHerzog7 Feb 20, 2025

AH yes I saw that. Awesome. I think it would be cool to quickly make the icons and lighting adapatable like you have in this card. Keen to see what you do.

ddewar Feb 22, 2025

@DerHerzog7 another step from this post is a module now: #1281

DerHerzog7 Feb 23, 2025

Amazing!

400HPMustang · 2025-02-16T23:08:49Z

400HPMustang
Feb 16, 2025

Is this card broken? Tried to use the sample code, recreated all of the sample helpers just for the sake of testing and the card does not render at all

6 replies

ddewar Feb 17, 2025

I am working on a module for this for the new betas. Hopefully that will help.

MrBearPresident Feb 17, 2025
Collaborator Author

On the bottom of the original post I made a "Only Square style" part.
That works for me in an instant.

400HPMustang Feb 17, 2025

@MrBearPresident ok for some reason I had to create a new dashboard for this to work and now both examples work just fine.

ddewar Feb 17, 2025

On the bottom of the original post I made a "Only Square style" part. That works for me in an instant.

Same idea, but was adding editor options for the colors and animations

DerHerzog7 Feb 20, 2025

On the bottom of the original post I made a "Only Square style" part. That works for me in an instant.

Same idea, but was adding editor options for the colors and animations

Have you posted this module yet for the editor options? Would love that ability.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Example] Square Room Summery Cards #927

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 22 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

[Example] Square Room Summery Cards #927

MrBearPresident Nov 16, 2024 Collaborator

Disclamer: I did not make this, but revised what @ddewar posted.

Replies: 9 comments · 22 replies

MrBearPresident Nov 16, 2024 Collaborator Author

Clooos Nov 16, 2024 Maintainer

MrBearPresident Feb 13, 2025 Collaborator Author

MrBearPresident Feb 17, 2025 Collaborator Author

Clooos Feb 14, 2025 Maintainer

Clooos Feb 14, 2025 Maintainer

MrBearPresident Feb 17, 2025 Collaborator Author

MrBearPresident
Nov 16, 2024
Collaborator

Replies: 9 comments 22 replies

MrBearPresident Nov 16, 2024
Collaborator Author

Clooos
Nov 16, 2024
Maintainer

MrBearPresident Feb 13, 2025
Collaborator Author

MrBearPresident Feb 17, 2025
Collaborator Author

Clooos Feb 14, 2025
Maintainer

Clooos Feb 14, 2025
Maintainer

MrBearPresident Feb 17, 2025
Collaborator Author