[Example] Color based on multiple states

[MrBearPresident]

type: custom:bubble-card
card_type: button
entity: person.me
button_type: state
show_state: true
styles: |-
  .bubble-button-background {
    background-color: ${
      {
        'home': '#8AD926FF',
        'away': '#1982C4FF',
        'Summer House': '#CDCA3AFF',
        'Parents House': '#6A4C93AA',
      }[state] ?? '#ff0000AA'
    };
  }
card_layout: large

Note: The color code after the ?? is the default value, when the state is not found in the list.

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

• https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678/1777?u=mrbearpresident

[johndoe0815]

Would something like this also be possible with other elements than color, e.g. icon, and also based on different states than the one of the entity?

Currently I have for example the following custom style code to put a logo into a sub-button based on the media source currently plaing:

${subButtonIcon[0].setAttribute("icon", hass.states['media_player.fire_tv_cube'].attributes.source == 'Disney+' ? 'phu:disney-plus' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Netflix' ? 'phu:netflix' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Prime Video (FireTV)' ? 'phu:prime-video' 
: hass.states['media_player.fire_tv_cube'].attributes.source == 'Kodi' ? 'mdi:kodi' 
: '')}

[MrBearPresident]

Yes it is possible, by the same basic technique but not in the same way.

  #Place all the DOM changing stuff on the bottom

  ${subButtonIcon[0].setAttribute("icon",
      {
      'Disney': 'phu:disney-plus',
      'Netflix': 'phu:netflix',
      'Prime Video (FireTV)': 'phu:prime-video',
      'Kodi': 'mdi:kodi',
    }[hass.states['media_player.fire_tv_cube'].attributes.source] ?? 'mdi:television'
  )}

[johndoe0815]

Awesome, thanks!
Works perfectly and is much easier to maintain. This is really not intuitive, so good to have such code snippets 👍

[MilesTEG1]

Hello,
This is working fine for the main button.
But for sub-button with different entity, this is not working, because the state is the one from the main button.
How can I achieve to use the entity state from the sub-button?
Thanks in advance 😊

[MrBearPresident]

#929 (reply in thread)

[MilesTEG1]

#929 (reply in thread)

Thanks.
I missed it, sorry.

For what I want to do, change text color and background-color, do you think this will work?

${subButton[0].setAttribute("color",
      {
      'Blanc': 'rgba(255, 255, 255, 1)',
      'Bleu': 'rgba(0, 0, 255, 1)',
      'Rouge': 'rgba(255, 0, 0, 1)',
    }[hass.states['sensor.rte_tempo_couleur_actuelle'].attributes.source] ?? 'rgba(126, 126, 126, 1)'
  )}

${subButton[0].setAttribute("Background-Color",
      {
      'Blanc': 'rgba(255, 255, 255, 1)',
      'Bleu': 'rgba(0, 0, 255, 1)',
      'Rouge': 'rgba(255, 0, 0, 1)',
    }[hass.states['sensor.rte_tempo_couleur_actuelle'].attributes.source] ?? 'rgba(126, 126, 126, 1)'
  )}

[MrBearPresident]

No you want to use the state not an attribute.

so it should be:

${subButton[0].setAttribute("color",
      {
      'Blanc': 'rgba(255, 255, 255, 1)',
      'Bleu': 'rgba(0, 0, 255, 1)',
      'Rouge': 'rgba(255, 0, 0, 1)',
    }[hass.states['sensor.rte_tempo_couleur_actuelle'].state] ?? 'rgba(126, 126, 126, 1)'
  )}

${subButton[0].setAttribute("Background-Color",
      {
      'Blanc': 'rgba(255, 255, 255, 1)',
      'Bleu': 'rgba(0, 0, 255, 1)',
      'Rouge': 'rgba(255, 0, 0, 1)',
    }[hass.states['sensor.rte_tempo_couleur_actuelle'].state] ?? 'rgba(126, 126, 126, 1)'
  )}

[MilesTEG1]

Thanks!
I look into it when I have some time 😊

[vednolacni]

Is this still working?I copied the code and changed the person entity, and i have state home but the colors are not working.

[MrBearPresident]

Hey there was a small error in the code I updated it.

[vednolacni]

Its working now. Thanks!

[adnansarajlic]

This one does not seem to work with latest beta 9, anybody else seen that? Colors stay as standard.
@Clooos @MrBearPresident

.bubble-button-background {
background-color: ${
{
'LOW': '#449548',
'NORMAL': '#1982C4FF',
'HIGH': '#B13A33',
}[hass.states['sensor.nordpool_elpris'].attributes.price_level] ?? '#ff0000AA'
}

[Clooos]

I will check that, thank you for the feedback!