Conditional Icon

[a-bianucci]

Whether for the primary button or a secondary button is there a way to set the icon and color based on if statement.

For instance, If temperature is less than 68 degrees show mdi:snowflake, and if temperature is greater then 74 degrees show the fire icon. Then associate a color with a similar statement

[MrBearPresident]

Have a look at #927 (comment)

OR even better
https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#examples-7

Basicly adap this code to your needs

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

---

If this solves your question, mark it as solved and close the discussion.

[a-bianucci]

Can you put multiple strings for each of the states if the device has multiple? Aaron Bianucci On Dec 15, 2024, at 17:17, MrBearPresident ***@***.***> wrote:  Have a look at #927 (comment)<#927 (comment)> OR even better https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#examples-7 Basicly adap this code to your needs ${subButtonIcon[0].setAttribute("icon",hass.states['input_boolean.help_house_testboolean'].state === 'on' ? 'mdi:lightbulb-group' : 'mdi:lightbulb-off')} active')}

…

________________________________ If this solves your question, mark it as solved and close the discussion. — Reply to this email directly, view it on GitHub<#1051 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ARDUN3JUYLKHAFJ7VB7NT4L2FYEXLAVCNFSM6AAAAABTU7JDVWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNJXGUYDSNQ>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[MrBearPresident]

Yes have a look at #929

[MrBearPresident]

Were you able to get it working?
Do you need something else?

[a-bianucci]

I have for one state, for instance changing the icon when the state is on. However if I layer states, it only picks up the last one in the group. SO based on the issue you linked I was leveraging something along the lines of ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.sliding_door'].state === 'unavailable' ? 'mdi:alert' : 'mdi:door')} If I layered multiple statements, it just picks up which ever one is last and ignores all the ones prior to it. If I try and remove the :'mdi:door' and replace it with '' or just remove it, then it provides no icon.

…

________________________________ From: MrBearPresident ***@***.***> Sent: Monday, December 16, 2024 6:25 PM To: Clooos/Bubble-Card ***@***.***> Cc: Aaron Bianucci ***@***.***>; Author ***@***.***> Subject: Re: [Clooos/Bubble-Card] Conditional Icon (Discussion #1051) Were you able to get it working? — Reply to this email directly, view it on GitHub<#1051 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ARDUN3PUJSSJNJY34YTGKRT2F5VQZAVCNFSM6AAAAABTU7JDVWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNJYG4YTKOI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[MrBearPresident]

Please provider the yaml of the fuil card.

[a-bianucci]

Please provider the yaml of the fuil card.

Look at Sub Button 0 as an example

type: custom:bubble-card
card_type: button
entity: binary_sensor.doors
button_type: state
show_icon: true
sub_button:
  - entity: binary_sensor.front_door
    show_name: true
    name: Front
  - entity: binary_sensor.sliding_door
    name: Sliding
    show_name: true
  - entity: binary_sensor.garage_entry_door
    name: Entry
    show_state: false
    show_name: true
  - entity: binary_sensor.basement_door_contact
    name: Basement
    show_name: true
styles: >
  .bubble-sub-button-1 {
    color: ${hass.states['binary_sensor.front_door'].state === 'off' ? '' : 'darkred'} !important;
    background-color: ${hass.states['binary_sensor.front_door'].state === 'off' ? 'var(--secondary-background-color)' : ''} !important;
  }  

  .bubble-sub-button-2 {
    color: ${hass.states['binary_sensor.sliding_door'].state ===  'off' ? '' : 'darkred'} !important;
    background-color: ${hass.states['binary_sensor.sliding_door'].state === 'on' ? '' : 'var(--secondary-background-color)'} !important;
  } 

  .bubble-sub-button-3 {
    background-color: ${hass.states['binary_sensor.garage_entry_door'].state === 'on' ? 'var(--secondary-background-color)' : 'var(--secondary-background-color)'} !important;
    color: ${hass.states['binary_sensor.garage_entry_door'].state === 'off' ? '' : 'darkred'} !important;
  } 

  .bubble-sub-button-4 {
    color: ${hass.states['binary_sensor.basement_door_contact'].state === 'off' ? '' : 'darkred'} !important;
    background-color: ${hass.states['binary_sensor.basement_door_contact'].state === 'on' ? 'var(--secondary-background-color)' : 'var(--secondary-background-color)'} !important;
  } 


  ${subButtonIcon[0].setAttribute("icon",
  hass.states['binary_sensor.front_door'].state === 'unavailable' ? 'mdi:alert'
  : 'mdi:door')}

  ${subButtonIcon[0].setAttribute("icon",
  hass.states['binary_sensor.front_door'].state === 'on' ? 'mdi:door-open'
  : 'mdi:door')}

  ${subButtonIcon[1].setAttribute("icon",
  hass.states['binary_sensor.sliding_door'].state === 'unavailable' ?
  'mdi:alert' : 'mdi:door')}

  ${subButtonIcon[2].setAttribute("icon",
  hass.states['binary_sensor.garage_entry_door'].state === 'unavailable' ?
  'mdi:alert' : 'mdi:door')}

  ${subButtonIcon[3].setAttribute("icon",
  hass.states['binary_sensor.basement_door_contact'].state === 'unavailable' ?
  'mdi:alert' : 'mdi:door')}
icon: mdi:home
visibility:
  - condition: screen
    media_query: "(min-width: 0px) and (max-width: 767px)"
tap_action:
  action: navigate
  navigation_path: "#outside"
button_action:
  tap_action:
    action: navigate
    navigation_path: "@outside"
  double_tap_action:
    action: toggle

[MrBearPresident]

You should handle it in one action, like this:

  ${subButtonIcon[0].setAttribute("icon",
  hass.states['binary_sensor.front_door'].state === 'unavailable' ? 'mdi:alert' : 
  hass.states['binary_sensor.front_door'].state === 'on' ? 'mdi:door-open' :
   'mdi:door')}

---

^{If this solves your problem, mark this as the solution and close the discussion.}

[a-bianucci]

Awesome and thank you. Understanding that you can leverage the : into another action was key here. Thank you.