[FR] Add conditional button row (aka „Mushroom Card Conditional Chips“)

[dollarusername2]

I freaking love this project and converted my whole dashboard. One of the last things missing is my „statusbar“, that I created using the Mushroom Custom Card and their conditional chips feature.

In order to achieve the same functionality, I guess we would at least need the following changes (based on the horizontal button card):

new “conditional buttons card”:

• if more buttons are visible Change from scrolling to show all in more lines
• Can be placed everywhere, either pinned on top/bottom or flexible like any card
• Buttons have a condition when they are shown

Use case: you define buttons as part of a status bar that are only shown when the conditions are met. E.g. only show the light outside button if the light is on or the fire alarm button if smoke is detected or only the storm warning button if there is a storm coming.

happy new year everyone!

[MrBearPresident]

Do you want to show the sub-buttons conditionally?

[dollarusername2]

Hi @MrBearPresident , no, Not sub buttons. And not a complete button bar. But individual buttons inside a button bar.

[MrBearPresident]

Canyou send me a your yaml of a button bar? Because I can't follow you completely. I still have no idea what you mean.

[dollarusername2]

Sorry, paste does not work on mobile, screenshot(s) instead :-(

yaml:

Only some lights in and door closed:

more lights:

All possible chips (including e.g. distance to latest lightning if near enough or if the lawn mower robot (sheep) is active :-) )

[dollarusername2]

(Sorry I was not aware that this projects uses the Discussion Space for Festure Requests. Please move it there, if pssoible?)

[MrBearPresident]

So something like this

type: custom:bubble-card
card_type: button
button_type: name
show_icon: false
scrolling_effect: false
show_name: false
sub_button:
  - show_state: true
    show_name: false
    entity: sensor.number_of_people_home
    name: Persons
  - show_state: true
    show_name: false
    entity: sensor.lights_on
    icon: mdi:ceiling-light-multiple-outline
    name: Lights
  - show_state: true
    show_name: false
    entity: weather.latruwe_sintobin
    name: Weather
  - show_state: false
    show_name: true
    entity: person.guest
    name: Guest
    visibility:
      - condition: state
        entity: input_boolean.guest_present
        state: "on"
    tap_action:
      action: call-service
      target:
        entity_id: input_boolean.guest_present
      service: input_boolean.turn_off
  - entity: alarm_control_panel.alarmo
    show_state: false
    name: Alarm
styles: |-
  .bubble-sub-button{
    background: grey !important;
    height: 20px;
  }

  .bubble-button-background{
      background-color: #00000000 !important;
    }
  .bubble-button-card-container{
      background: #00222200 !important;
      }
      
  .bubble-button-card{
      background: #00222200 !important;
      display: grid !important;
      grid: initial !important;
      grid-template-areas: 'c' !important;
      grid-template-rows: 1fr !important;
      grid-template-columns: 1fr !important;
    }

  .bubble-sub-button-container {
      grid: initial !important;
      display: flex !important;
      height: 100% !important;
      width: auto !important;
      flex-flow: row wrap !important;
      justify-content: center !important;
      justify-items: center !important;
      align-self: center !important;
    }

  .bubble-sub-button-5{ 
    background: #00022000 !important;
    border: 0.2px solid grey;
    ha-icon{
    color: ${
      {
        'armed_away': '#00ff00',
        'disarmed': '#dcdcdc',
        'triggered': '#ff0000',
        'pending': '#ffa500',
        'armed_home': '#00bfff',
      }[hass.states['alarm_control_panel.alarmo'].state] ?? '#ff2222'
  }};
AlternativeLayout: false
card_layout: large

[dollarusername2]

Is the visibility of a sub-button an undocumented feature? Because that is what I was looking for. Or is there some custom code behind? Can’t find it in the docs.

[dollarusername2]

Ok, I tried to reproduce this, but I must have made an error somewhere... or sth. is missing.

type: custom:bubble-card
card_type: button
card_layout: large
AlternativeLayout: false
button_type: name
show_icon: false
scrolling_effect: false
show_name: false
sub_button:
  - entity: sensor.pvc_solar_power_generation
    show_state: true
    state_background: false
    show_background: false
    show_last_changed: false
    icon: mdi:solar-power
  - entity: light.light_gr_og_arbeitszimmer
    visibility:
      - condition: state
        entity: light.light_gr_og_arbeitszimmer
        state: "on"
    show_background: true
    show_name: false
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
  - entity: light.light_gr_eg_wohnzimmer
styles: |2-
    .bubble-sub-button{
      #background: grey !important;
      height: 20px;
    }

    .bubble-button-background{
        #background-color: #00000000 !important;
      }
    .bubble-button-card-container{
        #background: #00222200 !important;
        }
        
    .bubble-button-card{
        #background: #00222200 !important;
        display: grid !important;
        grid: initial !important;
        grid-template-areas: 'c' !important;
        grid-template-rows: 1fr !important;
        grid-template-columns: 1fr !important;
      }

    .bubble-sub-button-container {
        grid: initial !important;
        display: flex !important;
        height: 100% !important;
        width: auto !important;
        flex-flow: row wrap !important;
        justify-content: center !important;
        justify-items: center !important;
        align-self: center !important;
      }

The icon for the light light_gr_og_arbeitszimmer is always showing up.

Light on:

Light off:

Additional issues: the button is always 2 rows high, it should be flexible (only 1 row of icons: Small button, 4 rows of icons: Big enough for all rows :) ). And the spacing etc. look ugly, but I guess this can be changed via custom styles. I am just very bad at css styling, I will need to ask an AI.