Home

Awesome

Lovelace simple thermostat card

hacs_badge

A different take on the thermostat card for Home Assistant Lovelace UI. The aim is to provide a card with simpler interactions that are easier to use and take up less space, as well as provide more modularity to tweak the card. For example the abiltity to embed sensor values that are relevant to your thermostat (like humidity, energy usage, hours on +++).

<a href="https://www.buymeacoffee.com/nervetattoo"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=nervetattoo&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

Example thermostat

Compact mode

Compact configuration

Hide everything but sensors and temperature control:

type: custom:simple-thermostat
entity: climate.hvac
layout:
  step: row
header: false
control: false

Note about 2.0 release

The 2.0 release is most likely a breaking change for the majority of users. Make sure you read the release notes and inspect the new configuration format. It offers more flexibility and features as well as a number of bug fixes.

Requirements

Home Assistant 0.84 or higher

Installation

  1. Install via HACS.
  2. Add to resources:
    url: /hacsfiles/simple-thermostat/simple-thermostat.js
    type: module
    
<details> <summary>Manual install</summary> 1. Download the `simple-thermostat.js` from the [latest release](https://github.com/nervetattoo/simple-thermostat/releases/latest) and store it in your `configuration/www` folder. _Previously you could download the source file from Github but starting from the 0.14 release that is no longer possible. If you try to do so it will crash_ 2. Configure Lovelace to load the card:
resources:
  - url: /local/simple-thermostat.js?v=1
    type: module
</details>

Available configuration options:

Header config

New in 2.0. Old ways of defining toggle_entity, faults, name and icon are no longer supported

Hiding the entire header is done with header: false If you pass an object you can pass any of the following keys. Example:

header:
  name: Overriden name
  icon: mdi:sofa
  toggle:
    entity: switch.light
    name: Light
  faults:
    - entity: switch.light

Full header config spec:

Setpoints config

New in 2.0. Old ways of hiding setpoints is deprecated

If you specify setpoints manually you must include all setpoints you want included. Normally there are only two possibilities here; temperature or target_temp_high + target_temp_low. Single or dual thermostats. But, theoretically there could be multiple setpoints and this aims to support any permutation. The new feature in 2.0 is the ability to hide one of the two setpoints for dual thermostats.

To manually specify to use the temperature attribute as a setpoint you do:

setpoints:
  temperature:

For dual thermostats:

setpoints:
  target_temp_low:
  target_temp_high:

To hide one of the dual setpoints:

setpoints:
  target_temp_low:
    hide: true
  target_temp_high:

For climate devices supporting more setpoints you can include as many as you like. Automatic detection of set points only work for the single/dual cases.

Usage of the control config

In 0.27, in order to both support changes in the climate domain and to support controlling all modes like hvac, preset, fan and swing modes the old modes configuration have been removed and replaced with a control config.

The control config is most easily explained using a few examples as it supports both a simplified definition using just an array to list the types of modes to control. By default, with no config, it will show hvac and preset (if the entity supports it). You can replicate the default manually like this:

control:
  - hvac
  - preset

This will list all modes for both types. You can get more fine grained control by switching to an object format and taking control of specific modes:

control:
  preset:
    away: true
    none:
      name: Not set

What is worth noticing is that there is no merging of the default any more, so with this config you will not get hvac_mode displayed. If you still want it to display like default you need to set:

control:
  preset:
    away: true
    none:
      name: Not set
  hvac: true

Please note that you need to quote off/on mode keys to not have them interprented as true/false.

control:
  hvac:
    off: will not work
    "off": works

Example usage:

cards:
  - type: 'custom:simple-thermostat'
    entity: climate.my_room
    step_size: 1
    sensors:
      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy
      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_power
        name: Energy today
      - attribute: min_temp
        name: Min temp
    header:
      faults:
        - entity: binary_sensor.my_room_communications_fault
        - entity: binary_sensor.my_room_low_battery_fault
          icon: mdi:battery-low
      toggle:
        entity: switch.pump_relay
    control:
      hvac:
        some_mode: false
        another_mode: false
        'off':
          name: Make it cold
          icon: false
        'on':
          name: false
          icon: mdi:whitewalker
cards:
  - type: 'custom:simple-thermostat'
    entity: climate.my_room
    step_size: 1
    sensors:
      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy
    header:
      toggle:
        entity: switch.pump_relay
        name: Control the pump

CSS vars for theming

The card uses the following CSS variables:

Var nameDefault valueUsage
--st-font-size-xlvar(--paper-font-display3_-_font-size)Used for target temperature
--st-font-size-lvar(--paper-font-display2_-_font-size)Unused at the moment
--st-font-size-mvar(--paper-font-title_-_font-size)Used for target temperature unit
--st-font-size-titlevar(--ha-card-header-font-size, 24Font size for card heading
--st-font-size-sensorsvar(--paper-font-subhead_-_font-size)Font size for sensors
--st-spacing4pxBase unit for spacing. Used in multiples many places
--st-mode-active-backgroundvar(--primary-color)Background color for active mode button
--st-mode-active-colorvar(--text-primary-color, #fff)Text color for active mode button
--st-mode-background#dff4fdBackground color for inactive mode button
--st-toggle-label-colorvar(--text-primary-color)Text color for toggle label
--st-font-size-toggle-labelvar(--paper-font-subhead_-_font-size)Font size for toggle label
--st-fault-inactive-colorvar(--secondary-background-color)Icon color for inactive faults
--st-fault-active-colorvar(--accent-color)Icon color for active faults

These variables can be changed globally in the current theme or on each card via card-mod.

Example using custom theme

Example that makes everything smaller and more compact except sensors that gets blown up completely.

example-theme:
  st-font-size-xl: 24px
  st-font-size-m: 20px
  st-font-size-title: 20px
  st-font-size-sensors: 30px
  st-spacing: 2px

Example using card-mod

Same example as above, but will only apply to a single card.

type: 'custom:simple-thermostat'
style: |
  ha-card {
    --st-font-size-xl: 24px;
    --st-font-size-m: 20px;
    --st-font-size-title: 20px;
    --st-font-size-sensors: 30px;
    --st-spacing: 2px;
  }
  ...