Lovelace: Simple thermostat card

[kimme1024]

Hi All,

As the native thermostat card is growing bigger than a BMW’s front grill these days I’m trying to achieve a decent thermostat card that shows what I’d need. However this isn’t as simple as a thought…

I only need following things:

Current temp (as big as possible to view from a distance)
Target temp with chevrons (smaller as it’s automated anyway)
Mode switches (which change colour based on their state)

Bonus: Humidity (small)

As this seems to be the most versatile card around I guess this might be possible to achieve, however I don’t really see how and I don’t have any real coding skills nor knowledge of CSS.

Did anyone achieve this already?

Thanks in advance!

[speculativefiction]

I’m also wondering if this has been fixed. I have 2 ecobee thermostats and the presets on the downstairs thermostat are:

• Home
• Sleep
• away_indefinitely (Called “Away”)

The upstairs is

• Sleep
• Home
• away_indefinitely (Called “Away”)

type: vertical-stack
cards:
  - type: custom:simple-thermostat
    entity: climate.main_floor
    step_size: 1
    decimals: 0
    control:
      operation: false
      preset:
        Away: false
        away_indefinitely:
          name: Away
          icon: mdi:door-closed
        Home:
          name: Home
          icon: mdi:home
        Sleep:
          name: Sleep
          icon: mdi:sleep
        none:
          name: Not set
    layout:
      step: row
      mode:
        icons: true
        headings: false
  - type: custom:simple-thermostat
    entity: climate.upstairs
    step_size: 1
    decimals: 0
    control:
      operation: false
      preset:
        Away: false
        away_indefinitely:
          name: Away
          icon: mdi:door-closed
        Home:
          name: Home
          icon: mdi:home
        Sleep:
          name: Sleep
          icon: mdi:sleep
        none:
          name: Not set
    layout:
      step: row
      mode:
        icons: true
        headings: false

I’d like to get it so the presets are the same position. Any ideas?

[stephanschleichstr13]

is there a way to write 2 values behind the other? Example: “Inside Temp / Outside Temp”

Here my current code, maybe someone can assist:

type: custom:simple-thermostat
entity: climate.wohnzimmer_comet_dect
layout:
  step: row
  mode:
    headings: false
    icons: true
    names: true
control:
  preset:
    comfort: false
    eco: false
header:
  name: Wohnzimmer
version: 3
sensors:
  - entity: sensor.thermal_comfort_wohnzimmer_hitzeindex
    id: temperature
    label: 'Aktuell:'
    template: '{{state.text|formatNumber}}{{unit_of_measurement}}'
  - id: state
    label: 'Aktion:'
  - entity: sensor.advanced_heating_control_wohnzimmer_scheduler_mode
    label: 'Mode:'
    template: '{{state.text}}'
  - entity: sensor.wohnzimmer_comet_dect_batterie
    label: 'Akku:'
    template: '{{state.text}}{{unit_of_measurement}}'

[dekiel123]

On one profile Chrome shows me “Ogrzewanie” it is “heat/cool”. However, in others and in the HA app this icon is missing. How to fix it?

type: custom:vertical-stack-in-card
cards:
  - type: custom:simple-thermostat
    entity: climate.termostat
    header:
      name: Termostat
      icon: mdi:thermostat
      faults:
        hide_inactive: true
    hide:
      state: true
      temperature: true
    icon:
      cool: mdi:snowflake
      heat: mdi:fire
      'off': mdi:power
    sensors:
      - entity: sensor.termostat_ustawiona_temperatura
        icon: mdi:thermometer-check
        name: Ustawiona temperatura
      - entity: sensor.termostat_aktualna_temperatura
        icon: mdi:thermometer-lines
        name: Aktualna temperatura podłogi
      - entity: sensor.termometr_w_korytarzu_na_parterze_temperatura_2
        icon: mdi:home-thermometer
        name: Aktualna temperatura pomieszczenia
    step_size: 0.1
    control:
      hvac:
        _hide_when_off: false
        'off':
          hide: true
          name: Wyłącz
        heat_cool:
          name: Ogrzewaj
          icon: mdi:fire
      fan:
        _hide_when_off: false
      swig:
        _hide_when_off: false
      preset:
        _hide_when_off: false
        program:
          name: Tryb automatyczny
    layout:
      control: false
      mode:
        headings: false
    card_mod:
      style: |
        ha-card {
         --st-font-size-title: 22px;
          }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.termostat_ustawiona_temperatura
        name: Ustawiona
        color: '#009999'
      - entity: sensor.termostat_aktualna_temperatura
        name: Aktualna podłogi
        color: '#ff9900'
      - entity: sensor.termometr_w_korytarzu_na_parterze_temperatura_2
        name: Aktualna pomieszczenia
        color: '#00bfff'
    hours_to_show: 24
    line_width: 3
    font_size: 100
    animate: true
    show:
      name: false
      icon: false
      state: false
      fill: fade

Thermostat states:

hvac_modes:
  - "off"
  - heat_cool
  - heat_cool
min_temp: 5
max_temp: 95
target_temp_step: 0.5
preset_modes:
  - program
current_temperature: 24
temperature: 16
preset_mode: null
friendly_name: Termostat w korytarzu na parterze
supported_features: 401

[stephanschleichstr13]

is it possible to hide the state/operation with version3 option?

[leko (Aaron)]

Is there a way to have speed controls (for the fan speed on air conditioners) yet? I saw some people asking about this in 2019, but I’m not finding any mention of it after that.

[dvhomeass]

I am new to HA.
I have modified the yaml

type: custom:simple-thermostat
entity: climate.frigidaire_ac_br
step_size: 1
sensors:
  - entity: sensor.bedroom_temp_temperature
    icon: mdi:thermometer-lines
  - entity: climate.frigidaire_ac_br
    icon: mdi:power-cycle
  - entity: sensor.bedroom_temp_humidity
    icon: mdi:water-percent
  - entity: sensor.bedroom_temp_battery
    icon: mdi:battery-40
layout:
  mode:
    names: false
    icons: true
    headings: false
hide:
  temperature: true
  state: true
header:
  name: Bedroom
decimals: 0
control:
  preset:
    none:
      name: Geen
      icon: mdi:power
    away:
      name: Away
      icon: mdi:clock-alert-outline
    eco:
      name: Eco
      icon: mdi:leaf
  hvac:
    preset: true
    cool:
      icon: mdi:snowflake
    auto:
      icon: mdi:autorenew
    fan_only:
      icon: mdi:fan
    'off':
      icon: mdi:power-off
  fan:
    auto:
      icon: mdi:fan-auto
    low:
      icon: mdi:fan-speed-1
    medium:
      icon: mdi:fan-speed-2
    high:
      icon: mdi:fan-speed-3
card_mod:
  style: |
    ha-card .modes {
      background-color: #eee;
      margin: 10px;
      border-radius: 10px;
    }
    ha-card .mode-item {
      background: rgba(0, 0, 0, 0);
      padding: 7px 5px;
      border-radius: 10px;
    }
    ha-card .body {
      padding: 0px;
    }

but for some reson the preset does not show

[pieri70 (Pietro Rossin)]

Hello
I read along this thread but I didn’t find a solution that works for me
I have a window sensor to control if a window is open/closed
How can I change icon based on sensor state?

under sensors I added

sensors:      
  - entity: binary_sensor.my_window_sensor_contact
    icon:
      off: mdi:window-close
      on: mdi:window-open

But icons don’t appear.

Not skilled in yaml at all…
Thanks

[JavierM]

Hi everyone,
I’m trying to set up the Simple Thermostat card to show in a single row just one “hvac” item (e.g., “Heat”) along with three specific “preset” items (“eco,” “frost,” and “comfort”) . Is there a way to configure this or to make the card more compact by removing unnecessary items?

[melewis1975]

Is it possible to change the target temperature displayed to not include the decimal as i change the temperature up or down in in 1⁰ increments, but keep the room temperature to 1 decimal place?

[phateks]

i’m trying to modify the card as shown in picture but nothing works, can anyone help me? I want to move up the sensors underneath the name (heading) and beneath them , centered to put in row the target temp and leave the controls on the lower part

this is what i have now.
Thanks in advance !!

type: custom:simple-thermostat
entity: climate.ariston_thermostat
name: Ariston Thermostat
step_size: 0.1
sensors:
  - label: State
    entity: sensor.ariston_thermostat_state
    name: State
  - entity: sensor.bedroom_panel_temperature
    icon: phu:thermostat
hide:
  state: true
  temperature: true
control:
  preset:
    hide: true
  hvac:
    include:
      - "off"
      - heat
      - cool
layout:
  mode:
    headings: false
card_mod:
  style: |
    ha-card {
      background-color: #223240;
      border-radius: 10px;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
      padding: 10px;
      height: 480px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

[Moppel281080 (Stefan)]

Mahlzeit, ich hab mich mal mit der Heizungskarte beschäftigt und stecke jetzt fest.
Wie kann ich den zustand ändern? Ich hätte gern statt on/off geschlossen/geöffnet stehen. Geht das?

[AlexMXP]

Hello all. This card is great!

Couple of questions, though:

1. How do I turn off “more info” pop up, when clicking on the icon/header?
2. I can’t fond the way to get the icon/header centred inside the card…

I saw some posts about those issues earlier, but no answers so far…
Any help would be greatly appreciated. Thanks.

[jdtoppin]

Thanks for this inspiration! I took it a few steps further and ended up with this. Kind of a mash up of your original mixed in with how Beestat displays data, or at least as close as I could get it using what is natively available in HA.

[binaryMind]

That looks super clean. Mind sharing the config?

[sheaur]

How can you change the numerical format of the card so that the decimals are with “,”. example: 20,5 vs 20.5.

[tomwaldnz (Tim)]

Hi all. I sometimes have my air conditioning system operate in “damper” mode rather than temperature mode. When it’s in that mode changing the target temperature causes an error. I’d like to make it obvious that it’s in damper mode so I don’t try changing the temperature.

Does anyone have a suggestion on how I could gray out / disable / deactivate the whole simple-thermostat component if that room is put into “damper” mode? I have many simple-thermostat instances on the page, one for each room / zone, so I can act on the whole component.

I can write the logic / template in Jinga, but not sure how to disable. I have code below that simply changes the text color from black to near white when it’s in damper mode, but this doesn’t work well when my phone is in dark mode.

- type: horizontal-stack
cards:
  - type: custom:simple-thermostat
	entity: climate.pa_lounge
	layout:
	  step: column
	hide:
	  state: false
	  temperature: false
	control: false
	header: false
	sensors: false
	fallback: '%'
	style: |
	  ha-card {
		--primary-text-color: {% if state_attr('climate.pa_lounge', 'control_method') == 'temperature' %}#AAAAAA{% else %}#FAA0A0{% endif %};
		--st-font-size-xl: 20px;
		--st-spacing: 1px;
	  } 
	step_size: '1'
	decimals: '0'

[tomwaldnz (Tim)]

I found a way that works ok. Oddly though I have to use color names like “pink” or “gray”, color codes like #ababab work fine on the web interface on my PC but don’t work on the Android HA app.

style: |
  ha-card {
	{ # removed but put back if needed background: #fff; # }
	--primary-text-color: {% if state_attr('climate.pa_lounge', 'control_method') == 'temperature' %}{% else %}pink{% endif %};
	--st-font-size-xl: 20px;
	--st-spacing: 1px;
  } 

[Ltek]

your card is fantastic, please share the YAML, thank you!

[dany83 (Danilo)]

hello, i have update last version home assistant and now i see small value temperature 24°C.
Can you help my solve in my card problem ?

type: custom:simple-thermostat
entity: climate.clima_sala_room_temperature
layout:
  mode:
    headings: false
    icons: true
  step: row
header:
  name: CLIMA SALA
control:
  - hvac
  - fan
  - preset
show_header: true
hide:
  state: true
  temperature: false
style: |
  ha-card {
    --st-font-size-xl: 50px;
    --st-font-size-m: 20px;
    --st-font-size-title: 20px;
    --st-font-size-sensors: 20px;
    --st-spacing: 4px;
    --st-mode-active-background: gray;
    --st-mode-active-color: white;
  }
  }