Climate - Adjust Styling of Button based on Climate Mode & State

[ChipSkylark37]

I currently have 3 AC / Heat Pump HVAC Systems.

1. Can we have multiple entities added to a single bubble card, or do they have to exist as 3 separate entities?
2. The systems that are set to 75, is there any way to show an external temperature (I have ecowitt temperature sensors in those rooms) that I would like to display current temp as opposed to just what the HVAC says it's set to? (Target is 75, but HVAC says current is lets say 79 at the head unit, but my external ecowitt says 71). I have automations that turn off / on if its below 70 degrees so the 'target' temp and the head temp (79) being shown is not that helpful without the ecowitt temp.

3. The the system that is set to 67, which is considered 'on' but the state is 'Idle - Heat' and not actually running, its just 'holding' that temperature. It will change to another state when its actually running. So the color being orange for the first one is inaccurate as though it is in 'heat' mode, the system is Idle, so I wouldnt expect to see it Orange.

Ideally, when the first one that is 67 changes from IDLE > HEAT then I'd like to have that entire card change to color ORANGE to indicate that it's heating and not when its sitting Idle but in 'heat' mode.

I looked through some of the 'style' settings but don't know if this is possible to set adaptive coloring based on the state of the entity itself.

Does anyone else have ideas on this?

[ChipSkylark37]

To add to the example of the above, the Kitchen is now heating, thinks its 78 degrees, but according to my Ecowitt temp sensor (on the other side of the room) is actually only 70.2 which is why I disable the built-in Thermostart for this HVAC and instead setup Home Assisstant to do Automations based on a range of temperature (Turn on when Ecowitt says its below 68, heat to 72, then turn off).

Bubble Card:

Ecowitt Temp Sensor:

Right now I have the Ecowitt sensor right below the Bubble Card, and can click into it to see the temp range / history chart, but Ideally I can add this entity into the Bubble Card on the same line so I can see 1. Ecowitt Temp 2. 'Current Temp that HVAC believes' and 3. Target Temp, all in one line, that color codes if the system is running or not.

[ChipSkylark37]

I'm not sure if this is an issue with the card itself, or the backend data, but I am finding that the 'Last Status Change' is not correct either.

For example, the Second Floor shows '4 hours ago' yet it just was in Heat - HEATING about about 5-15 minutes ago:

Once I drill into the charts it shows this, but the bubble card is showing 4 hours. I noticed this the other day when it said "Yesterday" yet it had multiple heating cycles that same day.

[MrBearPresident]

@ChipSkylark37 For me the climate car only shows orange when the card is heating (so in heat mode

[MrBearPresident]

You probably can make something like

#Place all DOM changing elements on the bottom of the style section
${card.querySelector('.bubble-state').innerHTML = hass.states['climate.entity'].state + " * " + hass.states['climate.entity'].state.atttributes.current_temperature + " * " + hass.states['sensor.ecowit'].state }

[ChipSkylark37]

I'm a bit of a novice with how to adjust this currently. This is the code of the bubble card I am using now - Where might I add / adjust that style?

type: custom:bubble-card
card_type: climate
entity: climate.second_floor_2
sub_button:
  - name: HVAC modes menu
    select_attribute: hvac_modes
    state_background: false
    show_arrow: false
state_color: true
show_attribute: true
show_last_changed: true
show_state: true
force_icon: true
attribute: hvac_action
icon: mdi:fire-circle

You can see in the above that the 2nd Floor HVAC is actually in the mode 'Heat - Idle' which means its in "heat mode" vs AC, Off, Fan, etc, but not currently running.

Additionally, this is the one where I'd like to include that 'Hallway Temperature' from my ecowitt sensor INTO the same bubble card, if that is possible.

[MrBearPresident]

you still have to adjust the name to your ecowit sensor

#Place all DOM changing elements on the bottom of the style section
${card.querySelector('.bubble-state').innerHTML = hass.states['climate.second_floor_2'].state + " * " + hass.states['climate.second_floor_2'].state.atttributes.current_temperature + " * " + hass.states['sensor.ecowit'].state }

[ChipSkylark37]

After changing to the entity name (sensor.temperature_3)

#Place all DOM changing elements on the bottom of the style section
${card.querySelector('.bubble-state').innerHTML = hass.states['climate.second_floor_2'].state + " * " + hass.states['climate.second_floor_2'].state.atttributes.current_temperature + " * " + hass.states['sensor.temperature_3'].state }

Then adding that into the Custom Styles, it previews as the following:

And after saving:

The states of that system are the following:

[MrBearPresident]

How novice are you?
Have you considered just adding a sub-buttons?

type: custom:bubble-card
card_type: climate
entity: climate.second_floor_2
sub_button:
  - show_icon: false
    show_state: false
    state_background: false
    show_attribute: true
    attribute: current_temperature
  - entity: sensor.temperature_3
    show_icon: false
    show_state: true
    state_background: false
  - name: HVAC modes menu
    select_attribute: hvac_modes
    state_background: false
    show_arrow: false
state_color: true
show_attribute: true
show_last_changed: true
show_state: true
force_icon: true
attribute: hvac_action
icon: mdi:fire-circle

anyhow I made a mistake, for the code:

#Place all DOM changing elements on the bottom of the style section
${card.querySelector('.bubble-state').innerHTML = hass.states['climate.second_floor_2'].state + " * " + hass.states['climate.second_floor_2'].atttributes.current_temperature + " * " + hass.states['sensor.temperature_3'].state }

[ChipSkylark37]

That's perfect actually:

The Kitchen one I am bringing in values from two different ecowitt sensors.

Now, the only remaining issue is that first one still where its not color styling the mode properly based off the state really being 'Heat - Idle' and not 'Heating'

Do you know how I could adjust that?

This way, on quick glance, it should only be orange if the system is actively running and heating.

Thank you so much!

[MrBearPresident]

set
state_color: false

[ChipSkylark37]

That does work, but will it change back to orange when the system is actually heating? or can I do the color based on the attribute of:

hvac_action: idle

changing to 'heating' instead?

[MrBearPresident]

It will.

[MrBearPresident]

Can you confirm it works like you want?

[ChipSkylark37]

Yes it's working as desired. Thank you, we can close this out!