Lovelace: Simple thermostat card

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…

When installing via HACS the url must be: - url: /hacsfiles/simple-thermostat/simple-thermostat.js

1 Like

Hello,

I would like to find a way to hide setpoint temperature when in mode eco (to reflect the behavior of my thermostats - eco mode is frost protection in KNX and temperature is set in programming).

Any idea how I could do ?

Thank you

This works but need card templater:

type: custom:card-templater
card:
  type: custom:simple-thermostat
  entity: climate.sdb
  layout:
    step: column
  header: true
  setpoints_template: '{{ "true" if states.climate.sdb.attributes.preset_mode == "eco" else " "}}'
  control:
    preset:
      eco:
        name: ''
        icon: mdi:snowflake
      comfort:
        name: ''
        icon: mdi:sun-thermometer
entities:
  - entity: sensor.time

However it was verry laggy.
I tried instead config-template-card which works just fine:

type: custom:config-template-card
entities:
  - climate.salon
variables:
  - states['climate.salon'].attributes['preset_mode']
card:
  type: custom:simple-thermostat
  entity: climate.salon
  layout:
    step: column
  header: true
  setpoints: ${if (vars[0] === 'eco')  {true} else { }}
  control:
    preset:
      eco:
        name: ''
        icon: mdi:snowflake
      comfort:
        name: ''
        icon: mdi:sun-thermometer

Is there a way to control the setpoints such that when:

Mode = ‘auto’

   setpoint:
      target_temp_high:
      target_temp_low:

Mode = all others (Heating, cooling, fan,…)

   setpoint: 
     temperature

Anyone else seeing problems with this custom card since updating to 2023.1?

image

1 Like

Yeah me after 2023.1 update
Had to name it manually:

control:
  preset:
    _name: Preset Mode

image

here how I override the naming:

control:
  swing:
    _name: Swing Mode
    _hide_when_off: true
  hvac:
    mode:
      icon: false
  fan:
    _name: Fan Mode
    _hide_when_off: true

image

and when it’s off:
image

waiting for the update to fix it.

6 Likes

That fixes it - many thanks!

1 Like

I’ve attempted to read this entire thread looking for a solution to my issue, but I can’t seem to find anything that resembles my issue! I can’t even find anything with a search.

My issue: The ‘up’ and ‘down’ buttons on my thermostat card are invisible. The buttons are there, and I can press them, but the “+” or “-” icons are literally not visible. It’s not a huge issue, as I can still use the card, but it makes it a bit tougher for others in the house to use properly. Can I change the color of those buttons somehow?

Also, this issue is present on both my web browser (firefox), and my HA app - (iPhone)

Can anyone help me conditionally format the card?
I have some TRVs which appear as climate devices but don’t actually set a state.
What I want to do (for now) is simply have some visual indication (card background colour) of whether the current temperature < set point.

Also how do I hide the state in compact view?

@jameson_uk This might help you. Here’s what I did to style the background red when the heater is active.

style: |
  ha-card {
    {% if is_state_attr("climate.mysa_bathroom_thermostat", "hvac_action", "heating") -%}
      --ha-card-background: rgb(255, 130, 130)
    {%- else -%}
      --ha-card-background: rgb(255, 255, 255)
    {%- endif %}
  }

What theme are you using?

Using the default theme and struggling to get anything to work…
just trying

type: custom:simple-thermostat
entity: climate.bedroom_trv
style: |
  ha-card {
    --ha-card-background: rgb(255,0,0);
  }

isn’t setting the card background colour (nor any of the alternative I tried) let alone making things conditional.

What I am missing?

That question was for @austinmeier :slight_smile:

type: custom:config-template-card
entities:
  - climate.salon
  - binary_sensor.fenetresalonknx
variables:
  - states['climate.salon'].attributes['preset_mode']
card:
  type: custom:simple-thermostat
  version: 3
  entity: climate.salon
  layout:
    step: row
    mode:
      headings: false
  header:
    faults:
      - entity: binary_sensor.fenetresalonknx
        icon: mdi:window-open-variant
        hide_inactive: true
  sensors:
    - id: state
      label: mdi:water-boiler
      template: '{{hvac_action|translate(''state_attributes.climate.hvac_action.'')}}'
    - id: temperature
      label: mdi:thermometer
      template: '{{current_temperature}}'
      unit: °C
  setpoints: ${if (vars[0] === 'eco')  {true} else { }}
  control:
    preset:
      eco:
        name: ''
        icon: mdi:snowflake
      comfort:
        name: ''
        icon: mdi:sun-thermometer
  style: |
    .sensors.with-labels.as-table {
        justify-self: left;
        margin-left: 40px;
      }
1 Like

Could you share your full code for the fan modes?

I was not using any theme. No idea why it wasn’t working. But it works now, and I haven’t changed anything. Maybe a reboot or two later had fixed it.

Thanks anyway! This card is perfect.

Finally, got around to setting up this card, any idea why I see ui.card.climate.fan_mode when setting up the fans?

probably because your AC has a fan only mode your unaware of