New thermostat card

Configuration Frontend
41

I found it! If anyone needs it, here it is!

type: thermostat
name: cucina
entity: climate.smarther_cucina
card_mod:
  style: 
    ha-state-control-climate-temperature:
      $: |
        .buttons { display: none !important; }
3 Likes
42

Is there anyway to move the name to the bottom? Or, at least, to reduce the font size

43

Play around with card-mod and this example

        type: thermostat
        entity: climate.klimaanlage_wohnzimmer
        name: Wohnzimmer
        card_mod:
          style:
            .: |
              .title {
                font-size: 14px !important;
                text-align: left !important;
                padding-left: 20px !important;
              }
44

Thanks so much. I’ll start playing around with it.

45

I am using the new Thermostat Card

image
image1774×1310 170 KB

My problem is that the only Presets I get with the Drop down is None and Hold. My Honeywell Thermostat wants to see none and hold. Is there a way to change this?

Thanks

46

The frontend translates the options to look nice (changes them to title word case). The states and attribute values in the backend are still actually lowercase and this is what you should use in your card config. You can check by going to Developer Tools → States and looking at the presets available for your climate entity.

47

OK got it. Thanks

1 Like
48

I interpret the blue and red regions as “heat until x” and “cool until y”. So I assume you vabe an AC amd heating combined. I want to achieve exactly the same view, how did you get this? I am on 2024.5.5, but I only get 1 slider for my AC that can both heat and cool.

49

You need to select Auto Mode to see both.

50

Bit of a different issue but apparently if you have a thermostat that publishes low and high set points regardless of state (like Crestron thermostats) the component will always show the heat and cool set points, even if the low/high is only used for heat/cool respectively.

If anyone else is having the same issue here is how I solved it:

- 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 %}
        }
1 Like
53

I hope somebody can help me out. I’m stuck for ages :frowning:

Picture for reference:
image

Question1: Change field 1
I want another sensor’s data to be displayed. I worked out how to do it in field 2, see example code below:

card_mod:
  style:
    .: |
    ha-state-control-climate-temperature:
      $: |
        .label:nth-of-type(2) {
          display: inline-block !important;
          visibility: hidden;
          text-align: center;
          width: 100%;
        }
        .label:nth-of-type(2):before {
          content: "{{ states('sensor.mytemperaturesensor') | round(1) }} °C";
          visibility: visible;
          display: inline-block;
          width: 100%;
          text-align: center;
        }

I dont know how to adress field 1

Question 2: Change icons of field 3 & 4
The icons in field 3 (fan speed) and field 4 (vane angle) are not picked up. How do i assign icons to this buttons?

I expected something like this, but it doenst work:

card_mod:
  style:
    hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
      div#option-1 ha-svg-icon {
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
      }

This refers to:
image

Strange thing is that changing the icon of HVAC modes does work with the above mentioned method

55

Have you red this?

56

Does it still work for you after the upgrade to 2024.8.1 ?

58

Add the following parameter to the thermostat YAML to show the current temperature as the primary/larger display

show_current_as_primary: true