Lovelace: Simple thermostat card

Since I had the same issue (wanted to use icons for state and temperature, here is what worked for me: You need to switch to version: 3, which provides templating.

type: custom:simple-thermostat
entity: climate.essbereich
version: 3
step_size: 0.5
decimals: 1
sensors:
  - entity: climate.essbereich
    id: state
    label: '{{"mdi:power-settings"|icon}}'
    template: >-
      {{hvac_action|translate('state_attributes.climate.hvac_action.')}}
      ({{state.text}})
  - entity: sensor.essbereich_temperature
    id: temperature
    label: '{{"mdi:thermometer"|icon}}'
    template: '{{state.text|formatNumber}} {{unit_of_measurement}}'
  - entity: sensor.essbereich_humidity
    label: '{{"mdi:water-percent"|icon}}'
    template: '{{state.text}} %'
layout:
  step: row
  mode:
    names: true
    headings: false
control:
  hvac: true

this results in the following:
2022-09-23 16_59_04-Sandbox – Home Assistant

It took me a bit of searching here in the forum to be able to recreate the original “State” value, there might be a better way of doing this.

Maybe this is useful for others as well.

Cheers,
Bernd

5 Likes

I would like the icon in the header (mdi:fire) to change color depending on the heating status. Anyone an idea?

type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
  step: row
header:
  name: Kelder
  icon: mdi:fire
control: false
sensors:
  - attribute: hvac_action
    name: Status
  - entity: sensor.klepsturing_kelder
    name: Valve
hide:
  state: true
label:
  temperature: Temp

Try this:

type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
  step: row
header:
  name: Kelder
control: false
sensors:
  - attribute: hvac_action
    name: Status
  - entity: sensor.klepsturing_kelder
    name: Valve
hide:
  state: true
label:
  temperature: Temp
style: |
  ha-card .header__icon {
    color:
      {% set mode = states('climate.thermostaat_kelder_2')
      %} {% if mode == 'off' %} grey {% elif mode ==
      'auto' %} green {% elif mode == 'heat' %} red
      {% else %} grey {% endif %};
  }

Thanks, but is it with this one also possible to change the icon? I’m using the icon: mdi:fire

type: custom:simple-thermostat
entity: climate.thermostaat_kelder_2
layout:
  step: row
header:
  name: Kelder
  icon: mdi:fire
control: false
sensors:
  - attribute: hvac_action
    name: Status
  - entity: sensor.klepsturing_kelder
    name: Valve
hide:
  state: true
label:
  temperature: Temp
style: |
  ha-card .header__icon {
    color:
      {% set mode = states('climate.thermostaat_kelder_2')
      %} {% if mode == 'off' %} grey {% elif mode ==
      'auto' %} green {% elif mode == 'heat' %} red
      {% else %} grey {% endif %};
  }

How come when in heat/cool mode it doesn’t show the temperature range it is set to? Mine is set to heat at 66 and cool at 72 and it just shows the current temp:
image
Where it should look something like this:
image

Hi everyone, I’m pretty new to HA and I wonder if it’s possible to get only the temperature from a thermostat entity ?

I would like to add this information on my dashboard like I made it from my sonoff device but this only thing I get it “auto” and not the value of the temperature :
image

Is there a way to get “climate.temperature” or something like this ? If this card get the value I think I can get it too right ?

Thanks a lot !

Hi everyone. I’ve been tinkering with the simple thermostat for a while, and I’ve incorporated a few ideas from various users into this result:

Updated screenshots after fixing the errors below:


The inside temp has a green check if it matches the thermostat set point. The main entity icon and color changes based on the mode and whether it’s currently running or not.

A couple of things I can’t figure out though, if anyone can tell me how to fix it… UPDATE: I got both issues below fixed by uninstalling and reinstalling the card-mod add-on.

  1. No matter where I change the colors, I can’t get the colors of the Off/Heat/Cool buttons or the On/Auto buttons to change. I’ve tried using both color names and hex codes, but nothing seems to affect it.

  2. I can’t get the On/Auto fan buttons to line up with the other 2 temperature cards on the same row. It’s just a horizontal stack with 2 mushroom templates and the simple thermostat card. Same thing as above, nothing changes when I adjust the spacing in the style.

Here’s the code:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 1px !important;
          }
        primary: Thermostat
        secondary: >
          {{ state_attr('climate.thermostat', 'hvac_action') | title }} ● Fan {{
          state_attr('climate.thermostat', 'fan_action') }}
        icon: |-
          {% set mode = states('climate.thermostat') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'cool' %}
          mdi:snowflake
          {% elif mode == 'heat' %}
          mdi:fire
          {% elif mode == 'heat_cool' %}
          mdi:autorenew
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.thermostat','hvac_action') %}
          {% if status == 'off' %}
          disabled
          {% elif status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          deep-orange
          {% else %}
          grey
          {% endif %}
        tap_action: none
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-spacing: 0px;
          }
          ha-card .current--value {
            color: #ffffff;
          }
          header {
            margin-bottom: 12px !important;
            padding-bottom: 0px !important;
          }
          ha-card .thermostat-trigger { 
            color: #9e9e9e;
          }
        entity: climate.thermostat
        header: false
        decimals: '0'
        fallback: 'Off'
        hide:
          temperature: true
          state: true
        layout:
          mode:
            names: false
            icons: false
            headings: false
          step: row
        step_size: '1'
        control:
          hvac:
            'off': false
            heat: false
            cool: false
            heat_cool: false
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 12px;
        --st-mode-background: #262626;
        margin-left: 12px;
        margin-right: 12px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.thermostat
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: true
      step: row
    control:
      hvac:
        'off':
          name: 'Off'
        heat:
          name: Heat
        cool:
          name: Cool
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ states(entity) | round|int }} °F'
        secondary: Inside
        icon: mdi:thermometer
        entity: sensor.thermostat_temperature
        icon_color: blue
        badge_icon: |-
          {% set temp = states(entity) | int %}
          {% set setpoint = states('sensor.thermostat_setpoint') | int %}
          {% if temp == setpoint %} mdi:check-bold
          {% elif temp <= 60 %} mdi:snowflake
          {% elif temp >= 80 %} mdi:heat-wave
          {% else %}
          {% endif %}
        badge_color: |-
          {% set temp = states(entity) | int %}
          {% set setpoint = states('sensor.thermostat_setpoint') | int %}
          {% if temp == setpoint %} green
          {% elif temp <= 60 %} blue
          {% elif temp >= 80 %} deep-orange
          {% else %}
          {% endif %}
        picture: ''
      - type: custom:mushroom-template-card
        primary: '{{ states(entity) | round|int }} °F'
        secondary: Outside
        icon: mdi:thermometer
        entity: sensor.outdoor_temperature
        icon_color: green
        badge_icon: |-
          {% set outside_temp = states(entity) | int %}
          {% set inside_temp = states('sensor.thermostat_temperature') | int %}
          {% if outside_temp == inside_temp %} mdi:equal
          {% elif outside_temp <= 32 %} mdi:snowflake
          {% elif outside_temp >= 90 %} mdi:heat-wave
          {% else %}
          {% endif %}
        badge_color: |-
          {% set outside_temp = states(entity) | int %}
          {% set inside_temp = states('sensor.thermostat_temperature') | int %}
          {% if outside_temp == inside_temp %} green
          {% elif outside_temp <= 32 %} blue
          {% elif outside_temp >= 90 %} deep-orange
          {% else %}
          {% endif %}
        picture: ''
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1.3px;
            --st-mode-background: #262626;
            margin-right: 12px;
          }
          ha-card .mode-item.active { 
            background: #263926;
            color: #4caf50;
          }
          ha-card .mode-item.active:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item {
            --st-spacing: 6px;
            border-radius: 10px;
          }
          ha-card .modes {
            grid-gap: 12px
          }
        entity: climate.thermostat
        header: false
        setpoints: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: true
          step: row
        control:
          hvac:
            'off': false
            heat: false
            cool: false
            heat_cool: false
          fan:
            auto:
              name: Auto
              icon: mdi:fan-auto
            'on':
              name: 'On'
              icon: mdi:fan
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.thermostat_temperature
        name: Inside Temperature
        color: '#2196f3'
      - entity: sensor.outdoor_temperature
        name: Outside Temperature
        color: '#4caf50'
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

10 Likes

I’ve created a nice swipe card for the iPhone to control the heatings, but the current temperature is too close to the actuator setting (and also not in line, which hurts my eyes)

Can I set “Aktuell” above the current temperature value?

Here’s the code:

cards:
  - cards:
      - cards:
          - entity: climate.heizung_wohnzimmer_thermostat
            name: Heizung Wohnzimmer
            type: custom:simple-thermostat
            step_size: 1
            style: |
              ha-card {
                --st-font-size-xl: 50px;
                --st-font-size-sensors: 30px;
              }
            sensors:
              - entity: sensor.wohnzimmer_klima_temperature
                name: Aktuell
            control:
              hvac_mode: false
            hide:
              temperature: true
              state: true
          - entity: climate.heizung_esszimmer_becathermostat
            name: Heizung Esszimmer
            type: custom:simple-thermostat
            step_size: 1
            style: |
              ha-card {
                --st-font-size-xl: 50px;
                --st-font-size-sensors: 30px;
              }
            sensors:
              - entity: sensor.esszimmer_klima_temperature
                name: Aktuell
            control:
              hvac_mode: false
            hide:
              temperature: true
              state: true
          - entity: climate.heizung_bad_thermostat
            name: Heizung Bad
            type: custom:simple-thermostat
            step_size: 1
            style: |
              ha-card {
                --st-font-size-xl: 50px;
                --st-font-size-sensors: 30px;
              }
            sensors:
              - entity: sensor.bad_klima_temperature
                name: Aktuell
            control:
              hvac_mode: false
            hide:
              temperature: true
              state: true
          - entity: climate.heizung_kinderzimmer_becathermostat
            name: Heizung Kinderzimmer
            type: custom:simple-thermostat
            step_size: 1
            style: |
              ha-card {
                --st-font-size-xl: 50px;
                --st-font-size-sensors: 30px;
              }
            sensors:
              - entity: sensor.kinderzimmer_klima_temperature
                name: Aktuell
            control:
              hvac_mode: false
            hide:
              temperature: true
              state: true
          - entity: climate.heizung_schlafzimmer_becathermostat
            name: Heizung Schlafzimmer
            type: custom:simple-thermostat
            step_size: 1
            style: |
              ha-card {
                --st-font-size-xl: 50px;
                --st-font-size-sensors: 30px;
              }
            sensors:
              - entity: sensor.schlafzimmer_klima_temperature
                name: Aktuell
            control:
              hvac_mode: false
            hide:
              temperature: true
              state: true
        type: custom:swipe-card
    type: horizontal-stack
  - cards:
      - cards:
          - align_state: center
            entities:
              - color: '#A7C7E7'
                entity: sensor.wohnzimmer_klima_humidity
                index: 0
                name: Wohnzimmer Luftfeuchtigkeit
              - color: '#FFC300'
                entity: sensor.wohnzimmer_klima_temperature
                index: 1
                name: Wohnzimmer Temperatur
            type: custom:mini-graph-card
            hour24: true
          - align_state: center
            entities:
              - color: '#A7C7E7'
                entity: sensor.esszimmer_klima_humidity
                index: 0
                name: Esszimmer Luftfeuchtigkeit
              - color: '#FFC300'
                entity: sensor.esszimmer_klima_temperature
                index: 1
                name: Esszimmer Temperatur
            type: custom:mini-graph-card
            hour24: true
          - align_state: center
            entities:
              - color: '#A7C7E7'
                entity: sensor.bad_klima_humidity
                index: 0
                name: Bad Luftfeuchtigkeit
              - color: '#FFC300'
                entity: sensor.bad_klima_temperature
                index: 1
                name: Bad Temperatur
            type: custom:mini-graph-card
            hour24: true
          - align_state: center
            entities:
              - color: '#A7C7E7'
                entity: sensor.kinderzimmer_klima_humidity
                index: 0
                name: Kinderzimmer Luftfeuchtigkeit
              - color: '#FFC300'
                entity: sensor.kinderzimmer_klima_temperature
                index: 1
                name: Kinderzimmer Temperatur
            type: custom:mini-graph-card
            hour24: true
          - align_state: center
            entities:
              - color: '#A7C7E7'
                entity: sensor.esszimmer_klima_humidity
                index: 0
                name: Schlafzimmer Luftfeuchtigkeit
              - color: '#FFC300'
                entity: sensor.schlafzimmer_klima_temperature
                index: 1
                name: Schlafzimmer Temperatur
            type: custom:mini-graph-card
            hour24: true
        type: custom:swipe-card
    type: horizontal-stack
type: custom:vertical-stack-in-card

Hi everyone, I have a problem with this wonderful card.
In practice, when I press the button at the bottom (last line) to set the status (pre-setting) of my valves, what I select is actually transmitted to my thermostat, but on the lovelace it does not update.
In the example of my screenshot I have clicked and set the “Frost Guard” status, which is actually seen on the netatmo website and app, but why does the orange square persist on “schedule” ???

Hi
Does anyone else not see icons for presets in version 2.5 and Home Assistant 2022.11.2? (I also tried 2.4x)

Also, does anyone know how to change the labels for the presets, so that it says “Frost protection” instead of ECO, or sleep instead of night and such?

but I don’t get it. I really tried to understand it, but what I really needed to understand were more examples with screenshots.

Also above someone commented that “version: 3” is not needed anymore. However the card clearly changes when putting this into the code.

Furthermore, when I put “version: 3” the labels change
without version 3:


with version 3:

The order is mixed up as well.
How can I have temperature at the top again?

I tried to set custom icons for modes, but to no success. Please not the lack of indentation. It does not work with indentation, which I thought would be needed for “icon” and “name” under comfort.

Here is my code:

type: custom:simple-thermostat
entity: climate.heizung_kuche_und_galerie_2
version: 3
step_size: 0.5
sensors:
  - entity: sensor.feuchte_esszimmer
    name: Feuchte
layout:
  mode:
    headings: false
    icons: true
    names: true
hide:
  state: false
control:
  preset:
    comfort: true
    name: Warm
    icon: mdi:sofa
    home: false
    away: true
    sleep: true
    eco: true
    none: false

Running into some issues with this card, using Nest thermostats.

code:

type: custom:simple-thermostat
entity: climate.downstairs_thermostat
name: 1st Floor
icon:
  heat: mdi:fire
  cool: mdi:snowflake
  eco: mdi:leaf
  'off': mdi:power
  auto: mdi:autorenew
  idle: mdi:power
  away: mdi:leaf
sensors:
  - entity: sensor.downstairs_thermostat_humidity
    name: Humidity
layout:
  mode:
    names: true
    icons: true
    headings: true
  step: row
step_size: 1
modes:
  'off':
    include: true
    name: 'Off'
    icon: mdi:power-off
  heat:
    include: true
    name: Heat
    icon: mdi:fire
  cool:
    include: true
    name: Cool
    icon: mdi:snowflake
  heat_cool:
    include: false
    name: Heat/Cool

Sensor States:

hvac_modes: heat, off, heat_cool, cool
min_temp: 50
max_temp: 90
fan_modes: on, off
preset_modes: none, eco
current_temperature: 68
temperature: 67
target_temp_high: null
target_temp_low: null
fan_mode: off
hvac_action: idle
preset_mode: none
friendly_name: Downstairs Thermostat
supported_features: 27

image

As you can see above, a bunch of stuff is missing:

  • Up and Down arrows to control temperature
  • Icons above operation modes
  • Hiding the heat/cool mode

Anyone able to tell me where I’m going wrong with that stuff?

Hello !

Is there a way to add these as preset modes ? They come from modbus …

Yes, use a template sensor.

Hello,

is it possible to also send a temperature values together with the hvac_mode options?
e.g.:

control:
  hvac:
    heat:
      name: Heat to 21
      temperature: 21

I want to controll a Danfoss Ally TRV via simple-thermostat.

The problem is that compared to e.g. an air conditioner which might have many hvac_modes:
( hvac_modes: cool, heat, dry, heat_cool, fan_only, off)

The Danfoss Ally TRV only supports one:
(hvac_modes: heat)

That’s why I am currently controlling my TRV via lovelace-climate-mode-entity-row

My card has two buttons one for
“off” = hvac_mode: heat / temperature: 10
and one for:
“on” = hvac_mode: heat / temperature: 21
this works as expected.

Now what I’d like to do the same thing via simple-thermostat:


(ugly mock-up)

I’d like to use control buttons that also send a temperature payload to quickly go to e.g. 10˚C or 21˚C and then use the +/- button as normal to do fine adjustment when needed.


This feature would of course be also useful for e.g. air conditioners.
Instead of selecting the “cool” operation mode via button and then having to adjust the temperature with +/- you could just select a button / operation mode which does both things at once: like presets but for every climate device.

image
My current workaround is combining vertical-stack-in-card, simple-thermostat and paper-buttons-row.
The three buttons below set the temperature to
10˚C (=“off”), 18˚C or 21°C and glow if they are selected.

Hello!
Is there a way to create a custom icon/button that would fire off an arbitrary HA script when tapped? I am using the card to control my EV’s HVAC, the state of which does not get updated too often. I’d like to be able to manually refresh it by tapping an icon on the card.
Many thanks,
– Harri

Hi,
I am using the basic configuration with Centralite Pearl thermostat, using Zigbee2MQTT. The card shows up like this:
image
and works great.
I would like to have the cool control and the right setpoint hidden.
Putting this:

control:
  hvac:
    cool: false

in the configuration works nicely to hide the cool control button. The problem is when I add this:

setpoint:
  target_temp_low:
    hide: 
  target_temp_high:
     hide: true

the right sepoint is hidden but I get this error:
Failed to call service climate/set_temperature. some but not all values in the same group of inclusion ‘temperature’ @ data[]
when pressing the up and down arrows. I have worked on this for awhile now and even found a post with the same issue but there was no solution.
Any help would be appreciated.

Love the card to control my AC’s :).

However, how do I add the “mode” dropdown? and how can I set a background color for the card? It’s now transparant.

And for the world, I can’t figure how to hide the labels “Werking” and “Ventilatormodus” and to put custom icons in the fanspeed buttons…

Help greatly appreciated!! :slight_smile:

              - type: custom:simple-thermostat
                style: |
                  ha-card {
                    --st-font-size-xl: 20px;
                    --st-font-size-title: 20px;
                    --st-font-size-sensors: 12px;
                  }
                entity: climate.ac_woonkamer
                name: Airco Woonkamer
                header:
                  name: Woonkamer
                  icon: false
                layout:
                  step: column
                  mode:
                    names: false
                control: 
                  hvac:
                    heat_cool: false
                    icon: mdi:fire
                    dry: false
                  fan: 
                    auto: false
                    medium-low: false
                    medium-high: false
                    very-high: false

image

Hi,

I’m trying to load this card, but it isnt working for me… I added it via HACS - but when I add it into a dashboard it goes: Custom element doesn’t exist: simple-thermostat…

Not sure what I’m doing wrong - and I’m sure its a beginners mistake…

I also added to my configuration.yaml:

lovelace:
    mode: yaml
    resources:
      - url: /local/simple-thermostat.js?v=1
        type: module

but not sure if that is required…