Lovelace: Simple thermostat card

kimme1024 · April 2, 2024, 12:39pm

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 · May 6, 2024, 1:31pm

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 · May 19, 2024, 11:26am

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 · June 19, 2024, 1:57pm

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 · August 8, 2024, 4:27pm

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

leko · August 20, 2024, 11:02pm

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 · September 4, 2024, 12:57am

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 · October 10, 2024, 8:44am

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 · October 30, 2024, 10:39am

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 · November 14, 2024, 9:15pm

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 · December 10, 2024, 9:19pm

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 · December 27, 2024, 2:03pm

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?