Change background based on numerical entity

[azsaleem]

Goal

I want to change the color of the background based on temperature of the water. So when it is at temperature (ie >45 deg) it should be red, when it is 38-44, it should be yellow and below that should be blue. I'm not able to get even the first first. I've tried a few of the elements based in the docs, see below.

Source Yaml

style: |
  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${state === '>45' ? 'red' : 'yellow'} !important;
      }

Which step did you already try?

style: |
  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${hass.states['sensor.mitsubishi_ecodan_tank_temperature'].state === '> 45' ?  'red' : 'yellow'} !important;
  }

Problem

None of the above work, is there a way to make this happen. I can make it happen based on entities being on or off but is there a way to do it based on the numerical value of an entity?

Read the documentation

• I have read the documentation

[Menelao147]

The condition you're using is incorrect. You should compare the state to 45 using the "greater than" operator (>), not the "strictly equal to" operator (===) combined with a string. So, use state > 45 instead of state === '> 45'.

.bubble-button-background {
  opacity: 1 !important;
  background-color: ${state > 45 ? 'red' : 'yellow'} !important;
}

---

_{If this solves your problem, mark this as solved and close the discussion.}

[azsaleem]

Thans so much for your response. I’ve copied the text as you’ve suggested but this hasn’t worked. style: | .bubble-button-background { opacity: 1 !important; background-color: ${state > 45 ? 'red' : 'yellow'} !important; } From: Menelao147 ***@***.***> Sent: 09 February 2025 11:00 To: Clooos/Bubble-Card ***@***.***> Cc: azsaleem ***@***.***>; Author ***@***.***> Subject: Re: [Clooos/Bubble-Card] Change background based on numerical entity (Discussion #1217) The condition you're using is incorrect. You should compare the state to 45 using the "greater than" operator (>), not the "strictly equal to" operator (===) combined with a string. So, use state > 45 instead of state === '> 45'. .bubble-button-background { opacity: 1 !important; background-color: ${state > 45 ? 'red' : 'yellow'} !important; } _____ If this solves your problem, mark this as solved and close the discussion. — Reply to this email directly, view it on GitHub <#1217 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOWPOOO7B52BK44LWFCKZBL2O4YLHAVCNFSM6AAAAABWYAZ5LCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJQHAYDSNI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Menelao147]

Could you share your complete code?

[azsaleem]

type: vertical-stack
cards:

• type: custom:bubble-card
  hash: "#hot water"
  button_type: switch
  entity: water_heater.mitsubishi_ecodan
  name: Hot water
  icon: mdi:thermometer-water
  show_attribute: true
  attribute: current_temperature
  show_header: false
  sub_button:
  • entity: automation.force_hot_water
    name: Heat Now
    icon: mdi:fire
    show_attribute: false
    tap_action:
    action: toggle
    target: {}
    card_type: button
    show_state: true
    button_action:
    tap_action:
    action: more-info
    scrolling_effect: false
    grid_options:
    columns: 6
    rows: 1.25
    card_layout: large-2-rows
    style: |
    .bubble-button-background {
    opacity: 1 !important;
    background-color: ${state > 45 ? 'red' : 'yellow'} !important;
    }

[Menelao147]

Okay, it's now working because the state variable refers to the Button card entity.
In your case, it's a water_heater entity.

If you want to base the color on the current temperature, you need to use the current_temperature attribute:

.bubble-button-background {
  opacity: 1 !important;
  background-color: ${hass.states['entity'].attributes.current_temperature > 45 ? 'red' : 'yellow'} !important;
}

If you want to use another entity, you can use this code:

.bubble-button-background {
  opacity: 1 !important;
  background-color: ${hass.states['sensor.mitsubishi_ecodan_tank_temperature'].state > 45 ? 'red' : 'yellow'} !important;
}

[azsaleem]

Thanks so much for the help but I'm still struggling. I've tried copying your code word for word and then doing variations as below but nothing changes the color. I've even changed the number I'm using to do greater than 40 deg as the current water temp is only 45 deg. I've pasted the code from Style onwards to spare you reading pages and pages of code:

Attempt 1:
style: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['entity'].attributes.current_temperature > 40 ? 'red' : 'yellow'} !important;
}

Attempt 2:
style: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['sensor.mitsubishi_ecodan_tank_temperature'].state > 40 ? 'red' : 'yellow'} !important;
}

Attempt 3
style: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['water_heater.mitsubishi_ecodan'].attributes.current_temperature > 40 ? 'red' : 'yellow'} !important;
}

[azsaleem]

Omg!! I fixed it.

I had put code as "Style" rather than "Styles"

Thanks for the help