Issues with the Thermostat card

[jgoerzen]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

There are a number of things that could be improved with the thermostat card. I have seen these issues separately on various devices, but see them all when controlling https://github.com/ccutrer/waterfurnace_aurora .

I am attaching a screenshot of the display after clicking the three-dot menu to illustrate the issues, but they also all persist on the dashboard directly.

1. The plus and minus buttons always adjust heat, not cold, even in summer. (Minor exception: after directly manipulating cold, plus/minus will manipulate cold, but this doesn't persist across refreshes). As you can see from the screenshot, the thermostat does support setting both hot and cold, but even though the mode is Cool, not Auto, it is still manipulating heat. (Even if the mode were Auto, HA could either remember which control was mainpulated last, or know that the one closest to the current temperature is likely to be the one that's relevant.)
2. When set to Heat or Cool, there really isn't any point to showing the other kind of temperature control at all. So suppressing the irrelevant control would also resolve item 1 above. The thermostat itself will only show both controls when set to Auto.
3. When using a touch interface, it is too easy to accidentally adjust the temperature when trying to scroll (in the HA Android app, for instance)
4. A more compact display option would be nice.

Thanks!

Describe the behavior you expected

1. It's summer, so pressing plus/minus would adjust cooling.
2. It's summer and the unit isn't in heating or auto mode, so heating controls shouldn't be shown because they're not relevant.

Steps to reproduce the issue

Already described above

What version of Home Assistant Core has the issue?

2024.6.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Every one, from Firefox to Android app

Which operating system are you using to run this browser?

Linux, Android

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[karwosts]

A lot of this may be due to behavior of your custom component. My thermostats don't do this.

E.g. when they are in cool mode, only a single cool temp is displayed. (same for heat mode). Your component is probably publishing target_temp_low and high when it's in cool mode, where other themotats might only publish an attribute for the current mode they are in.

While it's possible the card could be made more robust to handle different combinations of behaviors this way, it's probably not a high priority as other climate entities don't have this problem due to behaving in a different way. You could try reaching out to the developer of your component.

[jgoerzen]

OK, that makes sense. Perhaps we can reduce the scope of this then to:

1. When the thermostat is in Auto mode, rather than always preferring heat, the plus/minus buttons should use whatever slider was last adjusted (and this should be stored durably between reloads/sessions)
2. The issue with accidental changes on mobile devices.

Thanks!

[jswent]

If you have thermostats that publish both low and high regardless of state (like Crestron thermostats), this is how I got it to only display the active mode of the thermostat:

 - type: thermostat
    entity: climate.kitchen_thermostat
    name: ' '
    show_current_as_primary: false
    features:
      - type: climate-hvac-modes
    card_mod:
      style:
        "ha-state-control-climate-temperature $ ha-control-circular-slider $": |
          svg > g > g:nth-child(4) {
            {% if is_state('climate.kitchen_thermostat', 'cool') %}
            display: none;
            {% else %}
            display: block;
            {% endif %}
          }
          svg > g > g:nth-child(5) {
            {% if is_state('climate.kitchen_thermostat', 'heat') %}
            display: none;
            {% else %}
            display: block;
            {% endif %}
          }

If anyone has a better solution that would be great.